Skip to content

Commit 9e1a0fb

Browse files
jasperayawanjasperayawan
committed
update form
1 parent dc47b9b commit 9e1a0fb

7 files changed

+230
-8
lines changed

‎Register.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Registration form</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="main-parent">
12+
<div class="form-wrap">
13+
<form action="">
14+
<h1><span>Registration</span>Form</h1>
15+
<div class="single-input">
16+
<input type="text" id="fname" placeholder="First name" required>
17+
</div>
18+
<div class="single-input">
19+
<input type="text" id="lname" placeholder="Last name" required>
20+
</div>
21+
<div class="single-input">
22+
<input type="email" id="email" placeholder="Email address" required>
23+
</div>
24+
<div class="single-input">
25+
<input type="password" id="pass" placeholder="Password" required>
26+
</div>
27+
<div class="single-input">
28+
<input type="password" id="cpass" placeholder="Confirm Password" required>
29+
</div>
30+
<div class="Submit-button">
31+
<button class="button">Submit</button>
32+
</div>
33+
<div class="account-have">
34+
<a href="#">Forget password</a>
35+
<a href="login.html">Have an account please login</a>
36+
</div>
37+
</form>
38+
</div>
39+
</div>
40+
41+
<script src="script.js"></script>
42+
<script src="sweetalert.js"></script>
43+
</body>
44+
</html>

‎assets/fruitss.jpg

3.85 MB
Loading

‎index.html

+7-8
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
<body>
2828
<header class="sticky-top w-100">
2929
<nav class="navbar navbar-expand-lg bg-light">
30-
<div class="container container-md-fluid w-100">
30+
<div class="container navbarContainer container-md-fluid w-100">
3131
<!-----------------logo-------------->
3232
<div class="fw-bold" id="logo">
3333
<i class="fa-solid fa-tractor"></i>
@@ -150,10 +150,10 @@
150150

151151
<!------------------sign up area------------->
152152
<div class="signupAndLoginButtons">
153-
<a href="#" class="text-decoration-none btn" id="signupButton"
153+
<a href="Register.html" class="text-decoration-none btn" id="signupButton"
154154
>SIGN-UP</a
155155
>
156-
<a href="#" class="text-decoration-none btn" id="loginButton"
156+
<a href="login.html" class="text-decoration-none btn" id="loginButton"
157157
>LOGIN</a
158158
>
159159
</div>
@@ -210,7 +210,7 @@ <h2 class="title2">
210210

211211
<div class="featuredProducts">
212212
<h2>Featured Products</h2>
213-
<div class="row gap-3 gap-md-0 d-flex flex-column flex-md-row featured-container mb-5">
213+
<div class="row px-4 gap-3 gap-md-0 d-flex flex-column flex-md-row featured-container mb-5">
214214
<div class="col mx-2 featured_item">
215215
<img src="assets/strawberries.jpg" alt="sample" class="" />
216216

@@ -272,10 +272,9 @@ <h3>Organic Fruits and Veggies</h3>
272272
<section class="my-5 whyByLocal">
273273
<div class="container my-3 whyBuyLocal-container">
274274
<h1>THINK GLOBAL, BUY LOCAL!</h1>
275-
<div class="row my-5">
275+
<div class="px-3 row d-flex flex-column flex-md-row my-5">
276276
<div
277-
class="col-5 d-flex justify-content-center align-items-justify"
278-
>
277+
class="col d-flex justify-content-center align-items-justify">
279278
<p>
280279
<strong>FRESHNESS AND QUALITY:</strong> Local products are
281280
typically fresher and of higher quality as they don't need to
@@ -301,7 +300,7 @@ <h1>THINK GLOBAL, BUY LOCAL!</h1>
301300
</p>
302301
</div>
303302

304-
<div class="col-7">
303+
<div class="col">
305304
<div class="row">
306305
<div class="col WBL1">
307306
<img src="assets/KEEPITLOCAL.png" alt="sample" />

‎login.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Login form</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="main-parent">
12+
<div class="form-wrap">
13+
<form action="">
14+
<h1><span>Login</span>Form</h1>
15+
<div class="single-input">
16+
<input type="email" id="email" placeholder="Email address" required>
17+
</div>
18+
<div class="single-input">
19+
<input type="password" id="password" placeholder="Password" required>
20+
</div>
21+
<div class="Submit-button">
22+
<button class="button login">Login</button>
23+
</div>
24+
<div class="account-have">
25+
<a href="#">Forget password</a>
26+
<a href="index.html">Create an account</a>
27+
</div>
28+
</form>
29+
</div>
30+
</div>
31+
32+
<script src="script.js"></script>
33+
<script src="sweetalert.js"></script>
34+
</body>
35+
</html>

‎script.js

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const submitButton = document.querySelector('.button')
2+
3+
submitButton.addEventListener('click', function(e){
4+
e.preventDefault();
5+
let fname = document.getElementById('fname').value
6+
let lname = document.getElementById('lname').value
7+
let email = document.getElementById('email').value
8+
let pass = document.getElementById('pass').value
9+
let cpass = document.getElementById('cpass').value
10+
11+
localStorage.setItem('FirstName', fname)
12+
localStorage.setItem('LastName', lname)
13+
localStorage.setItem('Email', email)
14+
localStorage.setItem('Password', pass)
15+
localStorage.setItem('CPassword', cpass)
16+
17+
if(fname == "" && lname == "" && email == "" && pass == "" && cpass == ""){
18+
swal("Opps..!", "Input field must be fill", "error")
19+
} else {
20+
if(pass !== cpass){
21+
swal("Opps..!", "Password not matching!", "error")
22+
}else{
23+
window.location.assign("login.html");
24+
swal("Good job", "registration", "success")
25+
}
26+
}
27+
})
28+
29+
const login = document.querySelector('.login');
30+
31+
login.addEventListener('click', function(e){
32+
e.preventDefault();
33+
34+
// catch the value which is type user login page
35+
36+
const emailAdress = document.getElementById('email').value;
37+
const passWord = document.getElementById('password').value;
38+
39+
// let's get the value in localStorage which store user in registration form
40+
41+
const Email = localStorage.getItem("Email");
42+
const Password = localStorage.getItem('Password');
43+
44+
if(emailAdress == "" && passWord == ""){
45+
swal("Good job", "Input field has no value", "error")
46+
} else {
47+
if(emailAdress == Email && passWord == Password){
48+
window.location.assign("index.html");
49+
swal("Good job", "Login successful!", "success")
50+
} else{
51+
swal("Opps..!", "Something is wrong", "error")
52+
}
53+
}
54+
})

‎style.css

+89
Original file line numberDiff line numberDiff line change
@@ -514,6 +514,72 @@ form input {
514514
}
515515

516516

517+
/*---------------------------login area styling----------------------*/
518+
519+
*{
520+
padding: 0;
521+
margin: 0;
522+
box-sizing: border-box;
523+
}
524+
.main-parent{
525+
width: 100%;
526+
height: 100vh;
527+
background: rgba(0,0,0,0.5)url('assets/fruitss.jpg');
528+
background-position: center;
529+
background-size: cover;
530+
background-blend-mode: darken;
531+
display: flex;
532+
justify-content: center;
533+
align-items: center;
534+
}
535+
.main-parent .form-wrap{
536+
width: 450px;
537+
background: rgb(255 255 255/75%);
538+
border-radius: 5px;
539+
padding: 35px 40px;
540+
backdrop-filter: blur(5px);
541+
}
542+
.main-parent .form-wrap h1{
543+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
544+
font-size: 45px;
545+
text-align: center;
546+
margin-bottom: 15px;
547+
}
548+
.main-parent .form-wrap h1 span{
549+
color: #48be3d;
550+
}
551+
.main-parent .form-wrap .single-input input{
552+
width: 100%;
553+
padding: 14px 10px;
554+
border: none;
555+
border-radius: 5px;
556+
margin: .3rem 0;
557+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
558+
}
559+
.Submit-button{
560+
text-align: center;
561+
}
562+
.Submit-button button{
563+
padding: 13px 30px;
564+
border: none;
565+
background: #48be3d;
566+
border-radius: 5px;
567+
color: #fff;
568+
margin: .5rem 0;
569+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
570+
cursor: pointer;
571+
}
572+
.account-have{
573+
display: flex;
574+
justify-content: space-between;
575+
align-items: center;
576+
font-size: 14px;
577+
margin-top: 10px;
578+
}
579+
.account-have a{
580+
text-decoration: none;
581+
color: #333;
582+
}
517583

518584

519585

@@ -524,10 +590,33 @@ form input {
524590

525591

526592
@media screen and (max-width: 600px){
593+
594+
/*-----------------Become a vendor---------------*/
595+
596+
.navbarContainer{
597+
padding: 0 2rem;
598+
}
527599
.about {
528600
overflow: hidden;
529601
}
602+
603+
/*-----------------Become a vendor---------------*/
604+
605+
.becomeAVendor{
606+
padding: 2rem 2rem;
607+
}
530608
.whyByLocal {
531609
overflow: hidden;
532610
}
611+
.aboutUsFooter{
612+
width: 100%;
613+
padding: 0 2rem;
614+
}
615+
.ul-container{
616+
width: 100%;
617+
padding: 0 2rem;
618+
}
619+
.form-container {
620+
padding: 0 2rem;
621+
}
533622
}

‎sweetalert.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)