Skip to content

Commit 2ce125a

Browse files
adasarpan404adasarpan404
authored
Merge branch 'Anamaya1729:master' into master
2 parents 3ad346e + 784ffba commit 2ce125a

File tree

26 files changed

+640
-48
lines changed

26 files changed

+640
-48
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎easy/Animated_SearchBar/README.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Hacktoberfest 2022 - JavaScript Medium Programs
2+
3+
## Animated Search Bar
4+
5+
### Description
6+
Search your feed with interective ui . This is a Animated Search Bard which lets you search you'r feeds with and interective animations.
7+
8+
### Image Example
9+
![GitHubFinder](./preview.png)
10+
11+
### Maintainer
12+
- [Anamaya](https://www.linkedin.com/in/anamaya1729/)
13+
- [Vaibhav](https://https://www.linkedin.com/in/vaibhava17/)
14+
15+
### License
16+
**This project is licensed under the GNU GENERAL PUBLIC License - see the [LICENSE](../../LICEENSE) file for details**
17+
18+
### Happy Coding! :smile:

‎easy/Animated_SearchBar/app.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const search = document.getElementById('search-icon');
2+
const input = document.getElementById('input');
3+
4+
search.addEventListener('click', () => {
5+
input.style.width = '85%';
6+
input.style.paddingLeft = '60px';
7+
input.focus()
8+
input.style.cursor = 'text'
9+
input.setAttribute('placeholder', 'Start your search')
10+
})

‎easy/Animated_SearchBar/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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>Animated Search Bar</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="main">
12+
<h1>Animated Search</h1>
13+
<div class="search">
14+
<img src="https://cdn-icons-png.flaticon.com/512/5636/5636698.png" id="search-icon" alt="search icon" >
15+
<input type="text" id="input" placeholder="">
16+
</div>
17+
</div>
18+
19+
<script src="app.js"></script>
20+
</body>
21+
</html>

‎easy/Animated_SearchBar/preview.png‎

12.7 KB
Loading

‎easy/Animated_SearchBar/style.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
body {
2+
height: 100vh;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
background: #2a595e;
7+
color: white;
8+
font-family: cursive;
9+
}
10+
11+
.main {
12+
text-align: center;
13+
}
14+
15+
input {
16+
background-color: #c9eef2;
17+
width: 15px;
18+
height: 13px;
19+
border-radius: 30px;
20+
cursor: pointer;
21+
padding: 20px;
22+
border: none;
23+
font-size: 1rem;
24+
transition: width 2s ease-in-out;
25+
box-shadow: 0px 5px 10px 0px rgba(65 62 62 / 50%);
26+
}
27+
28+
input:focus{
29+
outline: none;
30+
}
31+
32+
img {
33+
width: 26px;
34+
position: absolute;
35+
margin: 15px 0 0 15px;
36+
cursor: pointer;
37+
}

‎easy/Flex-Panel/README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Hacktoberfest 2022 - JavaScript Easy Programs
2+
3+
## Flex Panel
4+
5+
### Description
6+
Flex panel gallery is a CSS project for beginners. In this project I've create a flex panel gallery using HTML, CSS, and basic JavaScript code. This program help the beginner programmer to learn about basic HTML tags, and some important CSS properties such as margin, padding, box-sizing, display, justify-content, align-items, flex-direction, height, min-height, flex, background-image, box-shadow, transition, etc.
7+
8+
9+
10+
### Contributing
11+
Please read the [CONTRIBUTING.md](../../CONTRIBUTING.md)
12+
13+
### Maintainer
14+
- [Anamaya](https://www.linkedin.com/in/anamaya1729/)
15+
- [Vaibhav](https://https://www.linkedin.com/in/vaibhava17/)
16+
17+
### License
18+
**This project is licensed under the GNU GENERAL PUBLIC License - see the [LICENSE](../LICENSE) file for details**
19+
20+
### Happy Coding! :smile:

‎easy/Flex-Panel/app.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const panels = document.querySelectorAll('.panel');
2+
3+
function toggleOpen() {
4+
console.log('Hello');
5+
this.classList.toggle('open');
6+
}
7+
8+
function toggleActive(e) {
9+
console.log(e.propertyName);
10+
if (e.propertyName.includes('flex')) {
11+
this.classList.toggle('open-active');
12+
}
13+
}
14+
15+
panels.forEach(panel => panel.addEventListener('click', toggleOpen));
16+
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

‎easy/Flex-Panel/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+
<title>Flex Panels</title>
6+
<link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
11+
<div class="panels">
12+
13+
<div class="panel panel1">
14+
<p>Hii!</p>
15+
<p>Let's</p>
16+
<p>Code</p>
17+
</div>
18+
19+
<div class="panel panel2">
20+
<p>Code</p>
21+
<p>Sleep</p>
22+
<p>Repeat</p>
23+
</div>
24+
25+
<div class="panel panel3">
26+
<p>Enjoy</p>
27+
<p>The</p>
28+
<p>Process</p>
29+
</div>
30+
31+
<div class="panel panel4">
32+
<p>Never</p>
33+
<p>Give</p>
34+
<p>Up!</p>
35+
</div>
36+
37+
</div>
38+
39+
<script src="app.js"></script>
40+
</body>
41+
</html>

‎easy/Flex-Panel/style.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
html {
2+
box-sizing: border-box;
3+
background: #ffc600;
4+
font-family: 'helvetica neue';
5+
font-size: 20px;
6+
font-weight: 200;
7+
}
8+
9+
body {
10+
margin: 0;
11+
}
12+
13+
*, *:before, *:after {
14+
box-sizing: inherit;
15+
}
16+
17+
.panels {
18+
min-height: 100vh;
19+
overflow: hidden;
20+
display: flex;
21+
}
22+
23+
.panel {
24+
background: #6B0F9C;
25+
box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
26+
color: white;
27+
text-align: center;
28+
align-items: center;
29+
30+
transition:
31+
font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
32+
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
33+
background 0.2s;
34+
font-size: 20px;
35+
background-size: cover;
36+
background-position: center;
37+
flex: 1;
38+
justify-content: center;
39+
display: flex;
40+
flex-direction: column;
41+
}
42+
43+
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
44+
.panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); }
45+
.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
46+
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
47+
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
48+
49+
/* Flex Items */
50+
.panel > * {
51+
margin: 0;
52+
width: 100%;
53+
transition: transform 0.5s;
54+
flex: 1 0 auto;
55+
display: flex;
56+
justify-content: center;
57+
align-items: center;
58+
}
59+
60+
.panel > *:first-child { transform: translateY(-100%); }
61+
.panel.open-active > *:first-child { transform: translateY(0); }
62+
.panel > *:last-child { transform: translateY(100%); }
63+
.panel.open-active > *:last-child { transform: translateY(0); }
64+
65+
.panel p {
66+
text-transform: uppercase;
67+
font-family: 'Amatic SC', cursive;
68+
text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
69+
font-size: 2em;
70+
}
71+
72+
.panel p:nth-child(2) {
73+
font-size: 4em;
74+
}
75+
76+
.panel.open {
77+
flex: 5;
78+
font-size: 40px;
79+
}
80+
81+
@media only screen and (max-width: 600px) {
82+
.panel p {
83+
font-size: 1em;
84+
}
85+
}

0 commit comments

Comments
 (0)