Skip to content

Commit da63bfc

Browse files
author
abdul rafay
committed
complete project
1 parent cbe8665 commit da63bfc

File tree

7 files changed

+286
-53
lines changed

7 files changed

+286
-53
lines changed

‎Forth project/index.css‎

Whitespace-only changes.

‎Forth project/index.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Odd Even Checker</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
9+
10+
</head>
11+
12+
<body>
13+
14+
15+
16+
<nav>
17+
<div class="logo">My Projects</div>
18+
<ul class="nav-links">
19+
<li><a href="#">Home</a></li>
20+
<li><a href="#">About</a></li>
21+
<li><a href="#">Contact</a></li>
22+
<a href="https://github.com/abdul-rafaycodeder" id="icon"><i class="fa-brands fa-github"></i></a>
23+
<a href="https://www.facebook.com/profile.php?id=61577331821573" class="channel" id="icon"> <i
24+
class="fa-brands fa-square-facebook"></i></a>
25+
<a href="https://www.youtube.com/@abdulrafaycode" class="channel" id="icon"><i class="fa-brands fa-youtube">
26+
</i></a>
27+
<a href="https://www.youtube.com/@ReGrowthMindset" class="channel" id="icon"><i
28+
class="fa-brands fa-youtube"> </i></a>
29+
</ul>
30+
</nav>
31+
32+
33+
34+
35+
36+
37+
38+
<div class="box">
39+
<h2>Odd / Even Checker</h2>
40+
41+
<input type="number" id="number" placeholder="Enter a number">
42+
43+
<button onclick="checkOddEven()">Check</button>
44+
45+
<p id="result"></p>
46+
<a href="../index.html" id="back">
47+
< back </a>
48+
</div>
49+
50+
<script src="index.js"></script>
51+
</body>
52+
53+
</html>

‎Forth project/index.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
function checkOddEven() {
2+
var num = document.getElementById("number").value;
3+
var result = document.getElementById("result");
4+
5+
if (num === "") {
6+
result.innerText = "Please enter a number ❌";
7+
result.style.color = "red";
8+
} else if (num % 2 === 0) {
9+
result.innerText = "Even Number ✔️";
10+
result.style.color = "green";
11+
} else {
12+
result.innerText = "Odd Number ✔️";
13+
result.style.color = "blue";
14+
}
15+
}

‎Forth project/style.css‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
nav {
2+
border-radius: 20px;
3+
background-color: #ffffff;
4+
height: 70px;
5+
display: flex;
6+
justify-content: space-around;
7+
align-items: center;
8+
}
9+
10+
.logo {
11+
font-size: 2em;
12+
font-weight: bold;
13+
color: #2563eb;
14+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15+
transition: all ease-in-out 0.5s;
16+
17+
}
18+
19+
.nav-links {
20+
font-size: 1.2em;
21+
list-style: none;
22+
display: flex;
23+
align-items: center;
24+
justify-content: center;
25+
gap: 40px;
26+
}
27+
28+
.nav-links>li>a {
29+
font-size: 5em;
30+
font-weight: 700;
31+
text-decoration: none;
32+
font-size: 1.2em;
33+
color: #000000;
34+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
35+
transition: all ease-in-out 0.5s;
36+
37+
}
38+
39+
#icon {
40+
font-size: 2em;
41+
color: #000000;
42+
cursor: pointer;
43+
transition: all ease-in-out 0.3s;
44+
}
45+
46+
/* hover effects */
47+
48+
#icon:hover {
49+
transform: scale(1.2);
50+
}
51+
52+
.nav-links>li>a:hover {
53+
color: #2563eb;
54+
}
55+
56+
.logo:hover {
57+
color: #000000;
58+
cursor: pointer;
59+
}
60+
61+
body {
62+
background-color: #000000;
63+
}
64+
65+
body {
66+
font-family: Arial, sans-serif;
67+
background-color: #000000;}
68+
69+
.box {
70+
margin: auto;
71+
background: #ffffff;
72+
padding: 25px;
73+
height: 220px;
74+
width: 300px;
75+
margin-top: 300px;
76+
border-radius: 10px;
77+
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
78+
text-align: center;
79+
}
80+
81+
#back{
82+
83+
}
84+
85+
input {
86+
width: 270px;
87+
padding: 10px;
88+
margin: 10px 0;
89+
font-size: 16px;
90+
}
91+
92+
button {
93+
width: 100%;
94+
padding: 10px;
95+
background: #007bff;
96+
color: white;
97+
border: none;
98+
border-radius: 5px;
99+
font-size: 16px;
100+
cursor: pointer;
101+
}
102+
103+
button:hover {
104+
background: #0056b3;
105+
}
106+
107+
p {
108+
margin-top: 15px;
109+
font-weight: bold;
110+
}
111+
112+

‎project 3rd/index.html‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ <h1>Sign Up</h1>
5353

5454

5555

56-
<div id="container">
56+
<!-- <div id="container">
5757
<h1 class="signup">Sign Up</h1>
5858
<input class="input2" type="text" placeholder="Enter your name" id="name" required>
5959
<input class="input2" type="email" placeholder="Enter your email" id="email" required>
@@ -65,12 +65,37 @@ <h1 class="signup">Sign Up</h1>
6565
<button onclick="signup()">Create Account</button>
6666
<p id="result"></p>
6767
</div>
68-
<a href="#" id="back">< Back</a>
68+
<a href="#" id="back"> < Back</a>
6969
</div>
70+
</div> -->
71+
72+
73+
<div id="container">
74+
<h1 class="signup">Sign Up</h1>
75+
76+
<input class="input2" type="text" placeholder="Enter your name" id="name" required>
77+
78+
<input class="input2" type="email" placeholder="Enter your email" id="email" required>
79+
80+
<div class="eye">
81+
<input class="input2" type="password" placeholder="Enter your password" id="password" required>
82+
<span id="showPassword" onclick="showPassWord()">
83+
<i class="fa-solid fa-eye"></i>
84+
</span>
85+
</div>
86+
87+
<button onclick="signup()">Create Account</button>
88+
89+
<p id="result"></p>
90+
91+
<a href="../index.html" id="back">&lt; Back</a>
7092
</div>
7193

7294

7395

96+
97+
98+
7499
<script src="index.js"></script>
75100
</body>
76101

‎project 3rd/index.js‎

Lines changed: 61 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,70 @@
1-
function togglePassword() {
2-
let password = document.getElementById("password");
3-
let toggle = document.querySelector(".toggle");
1+
// function togglePassword() {
2+
// let password = document.getElementById("password");
3+
// let toggle = document.querySelector(".toggle");
44

5-
if (password.type === "password") {
6-
password.type = "text";
7-
toggle.innerText = "Hide";
5+
// if (password.type === "password") {
6+
// password.type = "text";
7+
// toggle.innerText = "Hide";
8+
// } else {
9+
// password.type = "password";
10+
// toggle.innerText = "Show";
11+
// }
12+
// }
13+
14+
// function signup() {
15+
// let name = document.getElementById("name").value;
16+
// let email = document.getElementById("email").value;
17+
// let password = document.getElementById("password").value;
18+
// let result = document.getElementById("result");
19+
20+
// if (name === "" || email === "" || password === "") {
21+
// result.innerText = "Please fill all fields ❌";
22+
// result.style.color = "red";
23+
// } else {
24+
// result.innerText = "Signup Successful ✅";
25+
// result.style.color = "green";
26+
// }
27+
28+
29+
30+
31+
32+
// function showPassWord() {
33+
// var passwordField = document.getElementById("password");
34+
// var showPasswordIcon = document.getElementById("showPassword");
35+
// if (passwordField.type === "password") {
36+
// passwordField.type = "text";
37+
38+
// } else if (name == "" || email == "" || password == "") {
39+
// result.innerText = "Please fill all fields ❌";
40+
// result.style.color = "red";
41+
// } else {
42+
// result.innerText = "Signup Successful ✅";
43+
// result.style.color = "green";
44+
// }
45+
46+
// }
47+
// }
48+
49+
50+
function showPassWord() {
51+
var passwordField = document.getElementById("password");
52+
var showPasswordIcon = document.getElementById("showPassword");
53+
54+
if (passwordField.type === "password") {
55+
passwordField.type = "text";
56+
showPasswordIcon.innerText = "Hide";
857
} else {
9-
password.type = "password";
10-
toggle.innerText = "Show";
58+
passwordField.type = "password";
59+
showPasswordIcon.innerText = "Show";
1160
}
1261
}
1362

1463
function signup() {
15-
let name = document.getElementById("name").value;
16-
let email = document.getElementById("email").value;
17-
let password = document.getElementById("password").value;
18-
let result = document.getElementById("result");
64+
var name = document.getElementById("name").value;
65+
var email = document.getElementById("email").value;
66+
var password = document.getElementById("password").value;
67+
var result = document.getElementById("result");
1968

2069
if (name === "" || email === "" || password === "") {
2170
result.innerText = "Please fill all fields ❌";
@@ -24,25 +73,4 @@ function signup() {
2473
result.innerText = "Signup Successful ✅";
2574
result.style.color = "green";
2675
}
27-
28-
29-
30-
31-
32-
function showPassWord() {
33-
var passwordField = document.getElementById("password");
34-
var showPasswordIcon = document.getElementById("showPassword");
35-
if (passwordField.type === "password") {
36-
passwordField.type = "text";
37-
38-
} else if (name == "" || email == "" || password == "") {
39-
result.innerText = "Please fill all fields ❌";
40-
result.style.color = "red";
41-
} else {
42-
result.innerText = "Signup Successful ✅";
43-
result.style.color = "green";
44-
}
45-
46-
}
4776
}
48-

0 commit comments

Comments
 (0)