Skip to content

Commit 563f148

Browse files
deepakteczdeepaktecz
committed
Initial commit
0 parents  commit 563f148

File tree

32 files changed

+1773
-0
lines changed

32 files changed

+1773
-0
lines changed

‎Analog Clock/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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+
<link rel="stylesheet" href="style.css" />
8+
<title>Analog Clock</title>
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<div class="clock">
14+
<div style="--clr: #ff3d58; --h: 74px" id="hour" class="hand">
15+
<i></i>
16+
</div>
17+
<div style="--clr: #00a6ff; --h: 84px" id="min" class="hand">
18+
<i></i>
19+
</div>
20+
<div style="--clr: #ffffff; --h: 94px" id="sec" class="hand">
21+
<i></i>
22+
</div>
23+
24+
<span style="--i: 1"><b>1</b></span>
25+
<span style="--i: 2"><b>2</b></span>
26+
<span style="--i: 3"><b>3</b></span>
27+
<span style="--i: 4"><b>4</b></span>
28+
<span style="--i: 5"><b>5</b></span>
29+
<span style="--i: 6"><b>6</b></span>
30+
<span style="--i: 7"><b>7</b></span>
31+
<span style="--i: 8"><b>8</b></span>
32+
<span style="--i: 9"><b>9</b></span>
33+
<span style="--i: 10"><b>10</b></span>
34+
<span style="--i: 11"><b>11</b></span>
35+
<span style="--i: 12"><b>12</b></span>
36+
</div>
37+
</div>
38+
39+
<script src="script.js"></script>
40+
</body>
41+
</html>

‎Analog Clock/script.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
let hr = document.getElementById('hour');
2+
let min = document.getElementById('min');
3+
let sec = document.getElementById('sec');
4+
5+
function displayTime(){
6+
let date = new Date();
7+
8+
// Getting hour, mins, secs from date
9+
let hh = date.getHours();
10+
let mm = date.getMinutes();
11+
let ss = date.getSeconds();
12+
13+
let hRotation = 30*hh + mm/2;
14+
let mRotation = 6*mm;
15+
let sRotation = 6*ss;
16+
17+
hr.style.transform = `rotate(${hRotation}deg)`;
18+
min.style.transform = `rotate(${mRotation}deg)`;
19+
sec.style.transform = `rotate(${sRotation}deg)`;
20+
21+
}
22+
23+
setInterval(displayTime, 1000);

‎Analog Clock/style.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: sans-serif;
6+
color: #ffffff;
7+
}
8+
9+
body{
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
min-height: 100vh;
14+
background-color: #212121;
15+
}
16+
17+
.container{
18+
position: relative;
19+
}
20+
21+
.clock{
22+
width: 300px;
23+
height: 300px;
24+
border-radius: 50%;
25+
background-color: rgba(255, 255, 255, 0.1);
26+
border: 2px solid rgba(255, 255, 255, 0.25);
27+
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.9);
28+
display: flex;
29+
justify-content: center;
30+
align-items: center;
31+
}
32+
33+
.clock span{
34+
position: absolute;
35+
transform: rotate(calc(30deg * var(--i)));
36+
inset: 12px;
37+
text-align: center;
38+
}
39+
40+
.clock span b{
41+
transform: rotate(calc(-30deg * var(--i)));
42+
display: inline-block;
43+
font-size: 20px;
44+
}
45+
46+
.clock::before{
47+
content: '';
48+
position: absolute;
49+
width: 8px;
50+
height: 8px;
51+
border-radius: 50%;
52+
background-color: #fff;
53+
z-index: 2;
54+
}
55+
56+
.hand{
57+
position: absolute;
58+
display: flex;
59+
justify-content: center;
60+
align-items: flex-end;
61+
}
62+
.hand i{
63+
position: absolute;
64+
background-color: var(--clr);
65+
width: 4px;
66+
height: var(--h);
67+
border-radius: 8px;
68+
}

‎Form Validation/index.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
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+
<link rel="stylesheet" href="style.css" />
8+
<title>Form Validation in JavaScript</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="box">
13+
<header class="signup-header">
14+
<h1>Signup</h1>
15+
</header>
16+
<main class="signup-body">
17+
<form action="#">
18+
<p>
19+
<label for="name">Full Name</label>
20+
<input type="text" placeholder="Type Name Here" id="name" />
21+
<i class="fa-solid"></i>
22+
<span id="nameError"></span>
23+
</p>
24+
<p>
25+
<label for="email">Email</label>
26+
<input type="email" placeholder="xyz@gmail.com" id="email" />
27+
<i class="fa-solid"></i>
28+
<span id="emailError"></span>
29+
</p>
30+
<p>
31+
<label for="password">Password</label>
32+
<input
33+
type="password"
34+
placeholder="at least 8 characters"
35+
id="password"
36+
/>
37+
<i class="fa-solid"></i>
38+
<span id="passError"></span>
39+
</p>
40+
<p>
41+
<input type="submit" value="Create Account" id="submitBtn"/>
42+
</p>
43+
</form>
44+
</main>
45+
<footer class="signup-footer">
46+
<p>Already have an account? <a href="">Login</a></p>
47+
</footer>
48+
</div>
49+
</div>
50+
</body>
51+
52+
<script src="index.js"></script>
53+
<!-- Add Script file of font awsome to access the icons -->
54+
</html>

‎Form Validation/index.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
const submitBtn = document.getElementById('submitBtn');
2+
const nameError = document.getElementById('nameError');
3+
const emailError = document.getElementById('emailError');
4+
const passError = document.getElementById('passError');
5+
6+
submitBtn.addEventListener('click', (e)=>{
7+
e.preventDefault();
8+
9+
if(validateName() && validateEmail() && validatePassword()){
10+
alert("Form Submitted Successfully");
11+
}
12+
});
13+
14+
15+
function validateName(){
16+
let name = document.getElementById('name').value;
17+
18+
if(name.length == 0){
19+
nameError.innerHTML = "Name is required";
20+
nameError.previousElementSibling.classList.add('fa-xmark');
21+
return false;
22+
}
23+
24+
if(!name.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/)){
25+
nameError.innerHTML = "Write full Name";
26+
nameError.previousElementSibling.classList.add('fa-xmark');
27+
return false;
28+
}
29+
nameError.innerHTML = "";
30+
nameError.previousElementSibling.classList.add('fa-check');
31+
return true;
32+
}
33+
34+
function validateEmail(){
35+
let email = document.getElementById('email').value;
36+
37+
if(email.length == 0){
38+
emailError.innerHTML = "Email is required";
39+
emailError.previousElementSibling.classList.add('fa-xmark');
40+
return false;
41+
}
42+
43+
if(!email.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)){
44+
emailError.innerHTML = "Enter Valid Email";
45+
emailError.previousElementSibling.classList.add('fa-xmark');
46+
return false;
47+
}
48+
emailError.innerHTML = "";
49+
emailError.previousElementSibling.classList.add('fa-check');
50+
return true;
51+
}
52+
function validatePassword(){
53+
let password = document.getElementById('password').value;
54+
55+
if(password.length == 0){
56+
passError.innerHTML = "Password is required";
57+
passError.previousElementSibling.classList.add('fa-xmark');
58+
return false;
59+
}
60+
61+
if(!password.match(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,30}$/)){
62+
passError.innerHTML = "Password should contain 1 Uppercase, 1 Lowecase, 1 Digit & 1 Alphabet";
63+
passError.previousElementSibling.classList.add('fa-xmark');
64+
return false;
65+
}
66+
passError.innerHTML = "";
67+
passError.previousElementSibling.classList.add('fa-check');
68+
return true;
69+
}
70+
71+
// Make a validateConfirmPassword function to validate it

‎Form Validation/style.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: sans-serif;
6+
color: #fff;
7+
}
8+
9+
.container{
10+
width: 100%;
11+
height: 100vh;
12+
background: url('wave-haikei.png') no-repeat;
13+
background-size: cover;
14+
}
15+
16+
.box{
17+
width: 400px;
18+
position: relative;
19+
top: 50%;
20+
left: 50%;
21+
transform: translate(-50%, -50%);
22+
box-shadow: 2px 2px 5px #89c9f3, -2px -2px 5px #89c9f3;
23+
border-radius: 8px;
24+
backdrop-filter: blur(8px);
25+
padding: 20px 40px;
26+
}
27+
28+
.signup-header h1{
29+
font-size: 2.2rem;
30+
text-align: center;
31+
padding: 5px 8px;
32+
}
33+
34+
.signup-body p{
35+
margin-top: 20px;
36+
position: relative;
37+
}
38+
.signup-body p i{
39+
position: absolute;
40+
top: 34px;
41+
right: 16px;
42+
color: #008000;
43+
font-size: 22px;
44+
}
45+
.signup-body p span{
46+
font-size: 18px;
47+
font-weight: 600;
48+
color: #90ee90;
49+
}
50+
.signup-body p label{
51+
font-size: 18px;
52+
font-weight: 600;
53+
cursor: pointer;
54+
}
55+
56+
.signup-body p input{
57+
width: 100%;
58+
padding: 10px;
59+
border-radius: 4px;
60+
font-size: 18px;
61+
margin-block: 4px;
62+
border: none;
63+
outline: none;
64+
color: #000;
65+
}
66+
67+
.signup-body p input[type="submit"]{
68+
border: none;
69+
background-color: #3498db;
70+
color: #fff;
71+
font-size: 20px;
72+
font-weight: 700;
73+
cursor: pointer;
74+
}
75+
76+
.signup-body p input[type="submit"]:hover{
77+
background-color: #2773a5;
78+
}
79+
80+
.signup-footer p{
81+
text-align: center;
82+
font-weight: 600;
83+
margin-top: 20px;
84+
}
85+
86+
.signup-footer p a{
87+
text-decoration: none;
88+
}
89+
.signup-footer p a:hover{
90+
text-decoration: underline;
91+
}

‎Form Validation/wave-haikei.png‎

6.04 KB
Loading

0 commit comments

Comments
 (0)