Home
Creating a Webpage to Display Custom User-Input Text with Different Fonts and Styles

Creating a Webpage to Display Custom User-Input Text with Different Fonts and Styles

January 07, 2025 Digital

Creating a Webpage to Display Custom User-Input Text with Different Fonts and Styles

Creating a webpage that allows users to input text and choose different fonts and styles is a powerful way to engage users and enhance their experience. This guide will walk you through the process of implementing such a feature using HTML, CSS, and JavaScript. By the end of this tutorial, you will have a functional webpage that dynamically displays user-generated text with custom font and style options.

Step 1: HTML Structure

First, we need to create the basic HTML structure for our webpage. This includes an input field for text, dropdown menus for selecting font and style, a button to trigger the display, and a div to show the output.

!DOCTYPE html
html lang"en"
head
    meta charset"UTF-8"
    meta name"viewport" content"widthdevice-width, initial-scale1.0"
    titleCustom Text Display/title
    link rel"stylesheet" href"styles.css/rel
/head
body
    h1Custom Text Display/h1
    input type"text" id"userInput"
    label for"userInput"User Input/label
    label for"fontSelect"Font/style/label
    select id"fontSelect"
        option value"Arial"Arial/option
        option value"Times New Roman"Times New Roman/option
        option value"Helvetica"Helvetica/option
        option value"Courier"Courier/option
        option value"Impact"Impact/option
    /select
    label for"styleSelect"Style/label
    select id"styleSelect"
        option value"normal"Normal/option
        option value"italic"Italic/option
        option value"bold"Bold/option
        option value"bold italic"Bold Italic/option
    /select
    button id"displayButton"Display Output/button
    h2Output/h2
    div id"output"div
    script src"script.js"script
/body
/html

Step 2: CSS Styling

Next, we need to style our webpage to make it visually appealing. The CSS file will handle the basic layout and appearance of the input fields, dropdowns, and the output area.

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    padding: 20px;
}
.output {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    min-height: 50px;
}

Step 3: JavaScript Functionality

Finally, we need to add the JavaScript to handle the user input and update the display accordingly. This involves adding event listeners to buttons and dynamically updating the output based on user selections.

('displayButton').addEventListener('click', function() {
    const userInput  ('userInput').value;
    const selectedFont  ('fontSelect').value;
    const selectedStyle  ('styleSelect').value;
    const outputDiv  ('output');
    const displayStyle  selectedStyle  'italic' ? 'italic' : 'normal';
    const displayFont  selectedFont;
      div style"font-family: '{displayFont}'; font-style: '{displayStyle}'">{userInput}/div;
});

Explanation

HTML Structure: An input field for the user to enter text. Dropdowns for selecting the font and style. A button to trigger the display of the text. A div to show the output.

CSS Styling: Basic styling to make the page look cleaner. An output area with a border for better visibility.

JavaScript Functionality: An event listener on the button that retrieves the user input and selected options. The output div is styled dynamically based on user choices and the input text is displayed there.

How to Run

Save the HTML, CSS, and JavaScript code in their respective files. Open the file in a web browser. Enter some text, select a font and style, and click the Display Output button.

This simple example provides a foundation for creating a webpage that allows users to customize text display. You can expand on this by adding more styling options, additional fonts, or even advanced features like color selection or text size adjustments. With these basic elements, you can create engaging and visually appealing web pages that provide a delightful user experience.

Related Posts