Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7d28ebd

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /