Skip to content

Commit 7d28ebd

Browse files
Shaw145Shaw145
committed
New Projects added
1 parent 9de2814 commit 7d28ebd

File tree

15 files changed

+504
-2
lines changed

15 files changed

+504
-2
lines changed

‎Autocomplete Search Box/app.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
const inputBox = document.querySelector("#search-box");
2+
const searchItems = document.querySelector(".search-items");
3+
4+
let keywords = [
5+
"HTML",
6+
"CSS",
7+
"Easy Tutorial",
8+
"Web design tutorials",
9+
"Javascript",
10+
"Where to learn coding online",
11+
"Where to learn web design",
12+
"How to create a website"
13+
];
14+
15+
inputBox.addEventListener("input", ()=>{
16+
17+
let result = [];
18+
const input = inputBox.value;
19+
20+
if(input.length){
21+
result = keywords.filter((key)=>{
22+
return key.toLowerCase().includes(input.toLowerCase());
23+
})
24+
}
25+
26+
display(result);
27+
28+
if(!result.length){
29+
searchItems.innerHTML = "";
30+
}
31+
32+
})
33+
34+
function display(result){
35+
const content = result.map((list)=>{
36+
return "<li onclick = selectInput(this)>" + list + "</li>";
37+
})
38+
searchItems.innerHTML = '<ul>' + content.join("") + '</ul>';
39+
}
40+
41+
function selectInput(list){
42+
inputBox.value = list.innerHTML;
43+
searchItems.innerHTML = ""
44+
}

‎Autocomplete Search Box/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>AutoComplete Search box</title>
7+
<link rel="stylesheet" href="style.css">
8+
<script src="app.js" defer></script>
9+
<script src="https://kit.fontawesome.com/00806627b9.js" crossorigin="anonymous"></script>
10+
</head>
11+
<body>
12+
<div class="container">
13+
<div class="row">
14+
<input type="text" name="" id="search-box" placeholder="Search anything" autocomplete="off">
15+
<button class="search"><i class="fa-solid fa-magnifying-glass"></i></button>
16+
</div>
17+
18+
<div class="search-items">
19+
<!-- <ul>
20+
<li>Web Design</li>
21+
<li>Javascript</li>
22+
<li>Easy Tutorial</li>
23+
<li>How to Create a website</li>
24+
</ul> -->
25+
</div>
26+
</div>
27+
</body>
28+
</html>

‎Autocomplete Search Box/style.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
list-style: none;
8+
text-decoration: none;
9+
}
10+
11+
html, body{
12+
height: 100%;
13+
width: 100%;
14+
background-color: #262a2f;
15+
font-family: "poppins", sans-serif;
16+
overflow: hidden;
17+
}
18+
19+
.container{
20+
margin: 15% auto 0;
21+
background-color: white;
22+
max-width: 600px;
23+
width: 90%;
24+
border-radius: 7px;
25+
}
26+
27+
.row{
28+
display: flex;
29+
justify-content: space-between;
30+
align-items: center;
31+
height: 70px;
32+
}
33+
34+
#search-box{
35+
border: 0;
36+
outline: 0;
37+
padding: 10px 20px;
38+
font-size: 20px;
39+
flex: 1;
40+
}
41+
42+
.search{
43+
background: transparent;
44+
border: 0;
45+
outline: 0;
46+
cursor: pointer;
47+
}
48+
49+
.fa-magnifying-glass{
50+
padding: 17px;
51+
font-size: 20px;
52+
}
53+
54+
.search-items ul{
55+
border-top: 1px solid #999;
56+
padding: 15px 10px;
57+
}
58+
59+
.search-items ul li{
60+
padding: 15px 10px;
61+
border-radius: 3px;
62+
color: #555;
63+
cursor: pointer;
64+
}
65+
66+
.search-items ul li:hover{
67+
background-color: #e9f3ff;
68+
}
69+
70+
.search-items{
71+
max-height: 300px;
72+
overflow-y: scroll;
73+
}

‎Form Validation/app.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
const nameError = document.querySelector("#name-error");
2+
const phError = document.querySelector("#ph-error");
3+
const emailError = document.querySelector("#email-error");
4+
const messageError = document.querySelector("#message-error");
5+
const submitError = document.querySelector("#submit-error");
6+
7+
8+
function validateName(){
9+
const name = document.querySelector("#name").value;
10+
11+
if(name.length == 0){
12+
nameError.innerHTML = "Name is required";
13+
return false;
14+
}
15+
if(!name.match(/^[A-Za-z]*\s{1}[A-Za-z]+$/)){
16+
nameError.innerHTML = "Write full name";
17+
return false;
18+
}
19+
nameError.innerHTML = '<i class="fa-solid fa-circle-check"></i>';
20+
return true;
21+
}
22+
23+
function validatePh(){
24+
const ph = document.querySelector("#ph").value;
25+
26+
if(ph.length == 0){
27+
phError.innerHTML = "Phone No is required";
28+
return false;
29+
}
30+
if(ph.length != 10){
31+
phError.innerHTML = "Phone no should be 10 digits";
32+
return false;
33+
}
34+
if(!ph.match(/^[0-9]{10}$/)){
35+
phError.innerHTML = "Only digits please";
36+
return false;
37+
}
38+
phError.innerHTML = '<i class="fa-solid fa-circle-check"></i>';
39+
return true;
40+
}
41+
42+
function validateEmail(){
43+
const email = document.querySelector("#email").value;
44+
45+
if(email.length == 0){
46+
emailError.innerHTML = "Email is required";
47+
return false;
48+
}
49+
if(!email.match(/^[A-Za-z\._\-[0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/)){
50+
emailError.innerHTML = "Invalid Email";
51+
return false;
52+
}
53+
emailError.innerHTML = '<i class="fa-solid fa-circle-check"></i>';
54+
return true;
55+
}
56+
57+
function validateMessage(){
58+
const message = document.querySelector("#message").value;
59+
60+
const required = 10;
61+
const left = required - message.length;
62+
63+
if(left > 0){
64+
messageError.innerHTML = left + "more characters required";
65+
return false;
66+
}
67+
messageError.innerHTML = '<i class="fa-solid fa-circle-check"></i>';
68+
return true;
69+
}
70+
71+
function validateForm(){
72+
if(!validateName() || !validateEmail() || !validatePh() || !validateMessage()){
73+
74+
submitError.style.display = 'block';
75+
submitError.innerHTML = "Please fix the errors to submit";
76+
setTimeout(()=>{
77+
submitError.style.display = 'none';
78+
},3000)
79+
return false;
80+
}
81+
}

‎Form Validation/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Form Validation</title>
7+
<link rel="stylesheet" href="style.css">
8+
<script src="https://kit.fontawesome.com/00806627b9.js" crossorigin="anonymous"></script>
9+
<script src="app.js" defer></script>
10+
</head>
11+
<body>
12+
<div class="app-container">
13+
14+
<form action="#">
15+
<i class="fa-solid fa-paper-plane"></i>
16+
17+
<div class="input-group">
18+
<label for="">Full Name</label>
19+
<input type="text" id="name" placeholder="Enter your name" oninput="validateName()">
20+
<span id="name-error"></span>
21+
</div>
22+
<div class="input-group">
23+
<label for="">Mobile No.</label>
24+
<input type="tel" id="ph" placeholder="123 456 7890" oninput="validatePh()">
25+
<span id="ph-error"></span>
26+
</div>
27+
<div class="input-group">
28+
<label for="">Email Id</label>
29+
<input type="email" id="email" placeholder="Enter Email" oninput="validateEmail()">
30+
<span id="email-error"></span>
31+
</div>
32+
<div class="input-group">
33+
<label for="">Your Messeage</label>
34+
<textarea id="message" rows="5" placeholder="Enter your message" oninput="validateMessage()"></textarea>
35+
<span id="message-error"></span>
36+
</div>
37+
38+
<button type="submit" onclick="return validateForm()">Submit</button>
39+
<span id="submit-error"></span>
40+
</form>
41+
</div>
42+
</body>
43+
</html>

‎Form Validation/style.css‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
list-style: none;
8+
text-decoration: none;
9+
}
10+
11+
html, body{
12+
height: 100vh;
13+
width: 100%;
14+
background-color: #141a34;
15+
font-family: "poppins", sans-serif;
16+
}
17+
18+
.app-container{
19+
width: 100%;
20+
height: 100vh;
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
}
25+
26+
.app-container form{
27+
width: 90%;
28+
max-width: 550px;
29+
background-color: white;
30+
padding: 50px 30px 20px;
31+
border-radius: 7px;
32+
box-shadow: 0 4px 30px rgba(0,0,0,0.5);
33+
position: relative;
34+
}
35+
36+
.fa-paper-plane{
37+
position: absolute;
38+
top: 0;
39+
left: 50%;
40+
transform: translate(-50%,-50%);
41+
background-color: #fff;
42+
font-size: 26px;
43+
padding: 20px;
44+
border-radius: 50%;
45+
box-shadow: 0 4px 30px rgba(0,0,0,0.5);
46+
}
47+
48+
.input-group{
49+
width: 100%;
50+
display: flex;
51+
align-items: center;
52+
margin: 10px 0;
53+
position: relative;
54+
}
55+
56+
.input-group label{
57+
flex-basis: 28%;
58+
}
59+
60+
.input-group input, .input-group textarea{
61+
flex-basis: 68%;
62+
background: transparent;
63+
border: 0;
64+
outline: 0;
65+
padding: 10px 0;
66+
border-bottom: 1px solid #999;
67+
color: #333;
68+
font-size: 16px;
69+
}
70+
71+
::placeholder{
72+
font-size: 14px;
73+
}
74+
75+
form button{
76+
background: #141a34;
77+
color: #fff;
78+
border-radius: 4px;
79+
border: 1px solid rgba(255,255,255,0.7);
80+
padding: 10px 40px;
81+
outline: 0;
82+
cursor: pointer;
83+
display: block;
84+
margin: 30px auto 10px;
85+
}
86+
87+
.input-group span{
88+
position: absolute;
89+
bottom: 12px;
90+
right: 17px;
91+
color: red;
92+
font-size: 14px;
93+
}
94+
95+
#submit-error{
96+
color: red;
97+
font-size: 14px;
98+
font-weight: 600;
99+
}
100+
101+
.fa-circle-check{
102+
color: seagreen;
103+
font-size: 18px;
104+
}

‎Password Strength Checker/arrow.png‎

1.58 KB
Loading

0 commit comments

Comments
 (0)