Afroj Mansoori's Blog

Input Display

Afroj Mansoori's photo
Afroj Mansoori
·

1 min read

Create a app where you have an input box and whenever a user types something in the input box and hits submit it should be added on the webpage below the input box.<!DOCTYPE html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Form Input Sample</title>
</head>
<body>
    <div>  
        <p id="textArea" type="text" ></p>
        <input type="text" id="input_bar" placeholder="Enter text">
        <input type="button" value="press" id="btn">
    </div>
    <script>
        const input = document.querySelector("#input_bar")
        const button = document.querySelector("#btn")
        const text1 = document.querySelector("#textArea");
        function fun1(){
            text1.innerHTML=input.value;
        }
        button.addEventListener('click',fun1);
    </script>

</body>
</html>

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
body{
    width: 100%;
    height: 100%;
    background-color: rgb(150, 195, 199);
    display: flex;
    justify-content: center;
    align-items: center;
}
div{
    margin-top:150px ;
}
p{
    width: 300px;
    height: 100px;
    margin-bottom: 10px;
    padding: 10px;
    border: 2px solid rgb(73, 73, 145) ;
}
#input_bar{
    width: 200px;
    padding: 5px;
    font-size: 16px;
}
#btn{
    padding: 5px 10px;
    background-color: rgb(194, 19, 110);
    color: azure;
    font-size: 16px;
    border: 2px solid rgb(145, 123, 101);
    border-radius: 5px;
}

PhysicswalaWeb Development