107 725
Assignments Done
100%
Successfully Done
In April 2024
In April 2024
Your physics assignments can be a real challenge, and the due date can be really close — feel free to use our assistance and get the desired result.
Physics
Be sure that math assignments completed by our experts will be error-free and done according to your instructions specified in the submitted order form.
Math
Our experts will gladly share their knowledge and help you with programming projects. Keep up with the world’s newest programming trends.
Programming
Answer to Question #329746 in HTML/JavaScript Web Application for Suresh
Question #329746
myFormEl.addEventListener("submit", function() {
event.preventDefault();
if (nameEl.value != '' && passwordEl.value != '') {
resultErrMsgEl.innerText = 'Login Success';
} else {
resultErrMsgEl.innerText = 'Fill in the required details';
}
});
3 cases are not executed please help this is same format need
Expert's answer
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div class="wrapper">
<div class="container">
<h1 class="form-heading title">CCBP Login</h1>
<form class="form" id="myForm">
<div class="form-group username">
<label for="name" class="username-heading">User Name</label>
<input autocomplete="off" type="text" id="name" class="input">
<p class="error" id="nameErrMsg"></p>
</div>
<div class="form-group password">
<label for="password" class="password-heading">Password</label>
<input type="password" id="password" class="input">
<p class="error" id="passwordErrMsg"></p>
</div>
<div class="form-group">
<button type="submit">Submit</button>
<p id="resultMsg"></p>
</div>
</form>
</div>
</div>
<style>
.wrapper {
width: 100%;
min-height: 100vh;
}
.container {
width: 100%;
max-width: 100%;
display: flex;
flex-flow: column wrap;
justify-content: center;
}
.error {
color: red;
}
.title {
text-align: center;
margin-bottom: 36px;
}
.form {
text-align: center;
width: 250px;
margin: 0 auto;
}
.form-group {
display: flex;
flex-flow: column wrap;
justify-content: flex-start;
align-items: flex-start;
}
input {
margin-top: 10px;
}
button {
width: 80px;
height: 50px;
background-color: #0073CF;
color: #fff;
}
</style>
<script>
let myFormEl = document.getElementById("myForm");
let nameEl = document.getElementById("name");
let nameErrMsgEl = document.getElementById("nameErrMsg");
let passwordEl = document.getElementById("password");
let passwordErrMsgEl = document.getElementById("passwordErrMsg");
let resultErrMsgEl = document.getElementById("resultMsg");
nameEl.addEventListener("blur", function(event) {
if (event.target.value === "") {
nameErrMsgEl.textContent = "Required*";
} else {
nameErrMsgEl.textContent = "";
}
});
passwordEl.addEventListener("blur", function(event) {
if (event.target.value === "") {
passwordErrMsgEl.textContent = "Required*";
} else {
passwordErrMsgEl.textContent = "";
}
});
myFormEl.addEventListener("submit", function() {
event.preventDefault();
if (nameEl.value != '' && passwordEl.value != '') {
resultErrMsgEl.innerText = 'Login Success';
} else {
resultErrMsgEl.innerText = 'Fill in the required details';
}
});
</script>
</body>
</html>
Learn more about our help with Assignments: Programming & Computer Science
Comments
Leave a comment