show result in javascript
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<script src="https://kit.fontawesome.com/b766c6b920.js" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="container">
<div class="message">
<p><h3 style="text-align: center;font-weight: bold;">Pass The Message</h3></p>
<p style="border-bottom: 2px solid lightgray;"></p>
<p>
<label for="message-input">Enter a message</label>
</p>
<button><i class="fa-regular fa-envelope"></i></button><input id="message-input" type="text">
<br><br>
<button onclick="getMessage()">Submit</button>
<p style="text-align: center;text-transform: uppercase;" id="message-output"></p>
</div>
</div>
<script src="../javascript/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
.icon{
text-align: center;
font-size: 72px;
}
.message{
border: 1px solid lightgray;
background: whitesmoke;
border-radius: 5px;
width: 500px;
height: auto;
padding: 0 20px;
box-shadow: 0 20px 4px 0px rgba(0, 0, 0, 0.5);
margin: auto;
}
button {
width: fit-content;
padding: 8px;
cursor: pointer;
border: 1px solid lightgray;
border-radius: 5px;
background: whitesmoke;
}
button:hover{
background: rgba(0, 0, 0, 0.5);
}
.container{
border: 1px solid black;
width: 95%;
height: 100vh;
margin:auto ;
display: flex;
justify-content: center;
align-items: center;
}
.message{
border: 1px solid lightgray;
background: whitesmoke;
border-radius: 5px;
width: 500px;
height: auto;
margin: auto;
padding:0px 2px 4px 0px;
}
.message input{
width: 90%;
padding: 8px 0;
border-bottom-left-radius: 5px;
}
@media(max-widdth:480px) {
.message input{
width: 480px;
}
}
css
.icon{
text-align: center;
font-size: 72px;
}
.message{
border: 1px solid lightgray;
background: whitesmoke;
border-radius: 5px;
width: 500px;
height: auto;
padding: 0 20px;
box-shadow: 0 20px 4px 0px rgba(0, 0, 0, 0.5);
margin: auto;
}
button {
width: fit-content;
padding: 8px;
cursor: pointer;
border: 1px solid lightgray;
border-radius: 5px;
background: whitesmoke;
}
button:hover{
background: rgba(0, 0, 0, 0.5);
}
.container{
background-color: aquamarine;
border: 1px solid black;
width: 95%;
height: 100vh;
margin:auto ;
display: flex;
justify-content: center;
align-items: center;
}
.message{
border: 1px solid lightgray;
background: whitesmoke;
border-radius: 5px;
width: 500px;
height: auto;
margin: auto;
padding:0px 2px 4px 0px;
}
.message input{
width: 90%;
padding: 8px 0;
border-bottom-left-radius: 5px;
}
@media(max-widdth:480px) {
.message input{
width: 480px;
}
}
javascript
const messageInput = document.getElementById("message-input");
messageInput.addEventListener(keywdon, function(event) {
if(Event.key == "Enter")
getmessage();
})
function getmessage(){
document.getElementById("message-output").innerHTML = messageInput.value;
messageInput.value = "";
function getmessage(){
document.getElementById("message-output").innerHTML = messageInput.value;
messageInput.value = "";
}
}
Comments
Post a Comment