This is a JavaScript assignment. The page must be a login form, meaning that it
ID: 3684415 • Letter: T
Question
This is a JavaScript assignment. The page must be a login form, meaning that it needs to be inside of a form tag. Please read the assignment carefully.
Create a login form that prompts for a user name and password. Include a checkbox that when checked will save the user name in a cookie and if the user returns to the login form and a cookie is set, default the user name to the cookie value.
Then create a form in another page that prompts for a first name, last name and email address. When the user submits the form, save the values entered using cookies and then forward to a second web page that will read the cookies and display the stored information.
I downvote if the answer is wrong or unusable.
Explanation / Answer
Hi below i have given a sample code for JavaScript Form Validation for your reference,
Javascript File: login.js
var attempt = 3; // Variable to count number of attempts.
// Below function Executes on click of login button.
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if ( username == "Formget" && password == "formget#123"){
alert ("Login successfully");
window.location = "success.html";
// Redirecting to other page. return false; }
else{
attempt --;
// Decrementing by one. alert("You have left "+attempt+" attempt;");
// Disabling fields after 3 attempts. if( attempt == 0){
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false; } } }
CSS File: style.css
Below line is used for online Google font */
@import url(http://fonts.googleapis.com/css?family=Raleway);
h2{
background-color: #FEFFED;
padding: 30px 35px;
margin: -10px -50px;
text-align:center;
border-radius: 10px 10px 0 0; }
hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 40px; }
div.container{ width: 900px;
height: 610px;
margin:35px auto;
font-family: 'Raleway', sans-serif; }
div.main{
width: 300px;
padding: 10px 50px 25px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
float:left;
margin-top:50px; }
input[type=text],input[type=password]{
width: 100%;
height: 40px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border-radius: 5px; }
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold; }
center{
font-size:32px;
} .note{ color:red; }
.valid{ color:green; }
.back{
text-decoration: none;
border: 1px solid rgb(0, 143, 255);
background-color: rgb(0, 214, 255);
padding: 3px 20px;
border-radius: 2px;
color: black; }
input[type=button]{
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 100%;
border-radius: 5px;
padding: 10px 0;
outline:none; }
input[type=button]:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.