How to "process" user input

Hi,
I’m halfway through the WebDevelopment course and learned all the HTML, Javascript and CSS modules, but still don’t know how to process user input, and output a result in the same webpage. As an example I created a simple webpage (code below) with a type=“number” input box and a output box. I want to convert the number inputted in the input box into a new number (e.g. multiplied by 2) that is presented straight away in the output box, but have no idea how to do this. Will i need to learn back-end language to be able to do this ?

HTML code:

<!DOCTYPE html>
<html>
    <head>
        <title>Converter</title>
        <link href="style.css" type="text/css" rel="stylesheet">
    </head>

    <body>
        <header>
            <h1>CONVERTER</h1>
        </header>
        <div id="mainBox">
            <form class="form" action="" method="">
                <label for="input">Input</label>
                <input id="input" name="input" type="number">
            </form>
            <form class="form" action="" method="">
                <label for="output">Output</label>
                <input id="output" name="output" type="number">
            </form>
        </div>
    </body>
</html>

CSS code:

* {
    margin: 0;
    padding: 0;
}

html {
    background-color: indianred;
    font-family: Helvetica;
}

h1 {
    color: white;
    text-align: center;
    padding-top: 20px;
}

#mainBox {
    width: 70%;
    min-height: 200px;
    background-color: white;
    opacity: 95%;
    border-radius: 5px;
    display: flex; 
    margin: 50px auto;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

form { 
    margin: 20px;
    padding: 20px;
    font-family: helvetica;
    font-weight: bold;
    font-size: 18px;
}

Thank you,

Alex

You should be able to use JavaScript to do this-although I can’t answer how-I only know a smattering of JS. This article gives quite a good introduction to the topic.

1 Like

Hey there.

If, as you say, you completed all the JavaScript content from the Web Development Path then you’ve been introduced to everything you need to do what you’re looking to do - specifically: get a value from a form element, manipulate it, and put it into another form element.

If you can’t remember how to do this, you should go back and review Section 6 of the Web Development Path:

2 Likes

You just need an input field in the html. The form should not be necessary in this case. And then add a button to start the calculation. Attach an onclick-handler to this button with the JS method that will display the result. Also, make an HTML element with an id to display the answer. This is all front-end.

1 Like

Thanks @thepitycoder and @mike7127143742,
I have indeed finished those modules, but because there wasn’t a similar exercise in there i lazily assumed i didn’t know how to do this!!! Anyway, after searching to find what Event Listener to use I came up with the following JavaScript code and it now does what I want :slight_smile: . Feel free to comment on the code and suggest any other ways of doing this.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Converter</title>
        <link href="style.css" type="text/css" rel="stylesheet">
    </head>

    <body>
        <header>
            <h1>CONVERTER</h1>
        </header>
        <div id="mainBox">
            <div class="form">
                <label for="input">Input</label>
                <input id="input" name="input" type="number">
            </div>
            <div class="form">
                <label for="output">Output</label>
                <input id="output" name="output" type="text" readonly placeholder="0">
            </div>
        </div>
        <script src="main.js"></script>
    </body>
</html>

javaScript:

const userInput = document.getElementById("input");
userInput.addEventListener('input', convertValue);

const output = document.getElementById("output")

function convertValue (userValue) {
    const convertedValue = (userValue.target.value)*2;
    output.setAttribute("placeholder", convertedValue);
};

CSS:

* {
    margin: 0;
    padding: 0;
}

html {
    background-color: indianred;
    font-family: Helvetica;
}

h1 {
    color: white;
    text-align: center;
    padding-top: 20px;
}

#mainBox {
    width: 70%;
    min-height: 200px;
    background-color: white;
    opacity: 95%;
    border-radius: 5px;
    display: flex; 
    margin: 50px auto;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.form { 
    margin: 20px;
    padding: 20px;
    font-family: helvetica;
    font-weight: bold;
    font-size: 18px;
}

as suggested by @mike7127143742 i removed the . I used the input-handler as this allows me to show the result in the output box as i type in the input box.

Thanks for your help,

Alex

2 Likes