Answer to Question #219897 in HTML/JavaScript Web Application for Ayushi

Question

Answer to Question #219897 in HTML/JavaScript Web Application for Ayushi

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #219897

how we put input from user ?

we want that what is the user put ,then answer in show accordingly

Expert's answer

<!-- html section -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Displaying User Input</title>
</head>
<body>
    <div class="container">
        <h2>Displaying User Input</h2>
        <div class="input-container">
            <form id="form">
                <input id="userInput" type="text" class="input">


                 <div class="searchContainer">
                    <div class="search"></div>
                 </div>


                <button type="submit">Submit</button>
            </form>
        </div>
    </div>


    <script src="app.js"></script>
</body>
</html>

/* css section */
body{
    background-color: aquamarine;
}.container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 50vh;
    width: 350px;
    margin: auto;
    border-radius: 10px;
    border: 2px solid black;
}
.input{
    height: 20px;
}
.input-container form{
    display: flex;
    flex-direction: column;
}
.input-container button{
    height: 25px;
    text-transform: uppercase;
}
.input-container input{
    margin-bottom: 20px;
}
.alert {
    border: 2px solid rgb(13, 77, 13);
    padding: 4px;
    border-radius: 4px;
    background-color: rgb(14, 65, 14);
    color: white;
    margin-bottom: 5px;
  }


// javascript section


// get input variable
const textInput = document.querySelector('#userInput');


// add event
form.addEventListener('submit',getUserInput);



function getUserInput(e){
     if(textInput.value){
        //  create p element
        const p = document.createElement('p')
        // add class
        p.className = 'alert';
        // get text node
        p.appendChild(document.createTextNode(textInput.value))
        // get parent
        const searchContainer = document.querySelector('.searchContainer');
        // get search box
        const search = document.querySelector('.search')
        // insert text
        searchContainer.insertBefore(p,search);
     }
     e.preventDefault()
}

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #219897 in HTML/JavaScript Web Application for Ayushi

Comments

Leave a comment

Related Questions