Skip to content

Commit dfa5dfe

Browse files
sahilataharsahilatahar
committed
Project Added
1 parent aac325e commit dfa5dfe

File tree

7 files changed

+187
-0
lines changed

7 files changed

+187
-0
lines changed

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@
3636
| 29 | [Git Logo](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/git-logo) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/git-logo/) |
3737
| 30 | [Image Expansion](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/image-expansion) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/image-expansion/) |
3838
| 31 | [Lorem Ipsum Generator](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/lorem-ipsum-generator) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/lorem-ipsum-generator/) |
39+
| 32 | [Search Widget](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/search-widget) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/search-widget/) |
40+
| 33 | [Feedback UI](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/feedback-ui) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/feedback-ui/) |
41+
3942

4043

4144
### Disclaimer Regarding Ownership of this repository

‎feedback-ui/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
9+
<title>Feedback UI</title>
10+
11+
<!-- Custom Styles -->
12+
<link rel="stylesheet" href="style.css">
13+
</head>
14+
15+
<body>
16+
<div class="container">
17+
<h2>How pleased are you with the <br> quality of our customer service?
18+
</h2>
19+
<div class="options">
20+
<button class="btn">&#128531 <p>Unhappy</p></button>
21+
<button class="btn">&#128528 <p>Neutral</p></button>
22+
<button class="btn">&#128516 <p>Satisfied</p></button>
23+
</div>
24+
<button class="send-review-btn">Send Review</button>
25+
</div>
26+
<script src="main.js"></script>
27+
</body>
28+
29+
</html>

‎feedback-ui/main.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const btns = document.querySelectorAll('.btn');
2+
3+
btns.forEach((btn) => {
4+
btn.addEventListener('click', (e) => {
5+
btns.forEach(btn => {
6+
btn.classList.remove('selected');
7+
})
8+
btn.classList.add('selected');
9+
})
10+
});

‎feedback-ui/style.css

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
height: 100vh;
9+
display: grid;
10+
place-items: center;
11+
}
12+
13+
.container {
14+
width: min(400px, 90vw);
15+
background: #fff;
16+
border-radius: 5px;
17+
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
18+
padding: 2rem;
19+
display: flex;
20+
flex-direction: column;
21+
}
22+
23+
.container h2 {
24+
font-size: 1.2rem;
25+
text-align: center;
26+
}
27+
28+
.options {
29+
display: flex;
30+
justify-content: space-evenly;
31+
padding: 2rem 0;
32+
}
33+
34+
.btn {
35+
height: 80px;
36+
aspect-ratio: 1;
37+
padding: 0.5rem;
38+
font-size: 2.5rem;
39+
background: #fff;
40+
border: none;
41+
outline: none;
42+
border-radius: 5px;
43+
}
44+
45+
.btn:focus {
46+
outline: none;
47+
}
48+
49+
.btn.selected {
50+
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
51+
}
52+
53+
.btn p {
54+
padding-top: 0.2rem;
55+
font-size: 0.8rem;
56+
}
57+
58+
.send-review-btn {
59+
width: max-content;
60+
padding: 0.7rem 1rem;
61+
border: none;
62+
outline: none;
63+
background-color: #434343;
64+
color: white;
65+
align-self: center;
66+
border-radius: 3px;
67+
}
68+
69+
@media screen and (max-width: 768px) {
70+
.container {
71+
padding: 2rem 1rem;
72+
}
73+
}

‎search-widget/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
9+
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
10+
crossorigin="anonymous" referrerpolicy="no-referrer" />
11+
<title>Search Widget</title>
12+
<!-- Custom Styles -->
13+
<link rel="stylesheet" href="style.css">
14+
</head>
15+
16+
<body>
17+
<div class="search-box">
18+
<input type="text" value="" class="search-input">
19+
<div class="search-icon">
20+
<i class="fa-solid fa-magnifying-glass"></i>
21+
</div>
22+
</div>
23+
<script src="main.js"></script>
24+
</body>
25+
26+
</html>

‎search-widget/main.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const searchIcon = document.querySelector('.search-icon');
2+
const searchInput = document.querySelector('.search-input');
3+
4+
searchIcon.addEventListener('click', (e) => {
5+
searchInput.classList.toggle('show');
6+
});

‎search-widget/style.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
body {
2+
height: 100vh;
3+
display: grid;
4+
place-items: center;
5+
background: #577BFF;
6+
}
7+
8+
.search-box {
9+
width: 250px;
10+
--height: 50px;
11+
display: flex;
12+
overflow: hidden;
13+
justify-content: center;
14+
}
15+
16+
.search-input {
17+
width: 0px;
18+
height: var(--height);
19+
border: none;
20+
outline: none;
21+
font-size: 1rem;
22+
transition: width 0.5s;
23+
padding: 0;
24+
}
25+
26+
.search-input.show {
27+
width: 200px;
28+
padding-left: 0.5rem;
29+
}
30+
31+
.search-icon {
32+
width: var(--height);
33+
aspect-ratio: 1;
34+
background: white;
35+
display: flex;
36+
justify-content: center;
37+
align-items: center;
38+
font-size: 1.5rem;
39+
cursor: pointer;
40+
}

0 commit comments

Comments
 (0)