Skip to content

Commit 6af2908

Browse files
amit265amit265
committed
feedback-interface added
1 parent 464ea0d commit 6af2908

File tree

6 files changed

+209
-0
lines changed

6 files changed

+209
-0
lines changed

‎feedback-interface/happy.png‎

25.5 KB
Loading

‎feedback-interface/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+
4+
<head>
5+
<meta charset="UTF-8">
6+
<link rel="stylesheet" href="styles.css">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Feedback Interface</title>
9+
</head>
10+
11+
<body>
12+
<main id="main">
13+
14+
<h1 id="title">Feedback Interface</h1>
15+
<div class="emojis" id="allEmojis">
16+
<figure class="emoji" id="unhappy">
17+
<img src="./sad.png" alt="unhappy_emoji">
18+
<figcaption>Unhappy</figcaption>
19+
</figure>
20+
<figure class="emoji" id="neutral">
21+
<img src="./neutral.png" alt="neutral_emoji">
22+
<figcaption>Neutral</figcaption>
23+
</figure>
24+
<figure class="emoji" id="happy">
25+
<img src="./happy.png" alt="satisfied_emoji">
26+
<figcaption>Satisfied</figcaption>
27+
</figure>
28+
29+
</div>
30+
<div id="box">
31+
<div class="message-box">
32+
<h3>Thank you!</h2>
33+
<h3 id="message"></h3>
34+
<p>We'll use your feedback to improve our customer support.</p>
35+
</div>
36+
</div>
37+
<button class="review" id="send">Send Review</button>
38+
</main>
39+
40+
<script src="script.js"></script>
41+
</body>
42+
43+
</html>

‎feedback-interface/neutral.png‎

32.3 KB
Loading

‎feedback-interface/sad.png‎

25.4 KB
Loading

‎feedback-interface/script.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const box = document.getElementById("box");
2+
const unhappy = document.getElementById("unhappy");
3+
const happy = document.getElementById("happy");
4+
const neutral = document.getElementById("neutral");
5+
const send = document.getElementById("send");
6+
const main = document.getElementById("main");
7+
const title = document.getElementById("title");
8+
const allEmojis = document.getElementById("allEmojis");
9+
10+
const addSelectedClasses = (emoji) => {
11+
[unhappy, happy, neutral].forEach((em) => em.classList.remove("selected"));
12+
emoji.classList.toggle("selected");
13+
};
14+
15+
unhappy.addEventListener("click", () => addSelectedClasses(unhappy));
16+
happy.addEventListener("click", () => addSelectedClasses(happy));
17+
neutral.addEventListener("click", () => addSelectedClasses(neutral));
18+
19+
send.addEventListener("click", () => {
20+
const selectedEmoji = document.querySelector(".selected");
21+
if (!selectedEmoji) alert("Please select a response as feedback");
22+
const message = document.getElementById("message");
23+
message.textContent = `Your feedback is: ${selectedEmoji.textContent}`;
24+
box.style.display = "block";
25+
send.style.display = "none";
26+
allEmojis.style.display = "none";
27+
title.style.display = "none";
28+
});

‎feedback-interface/styles.css‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: Arial, sans-serif;
9+
background-color: #cc0808;
10+
height: 100vh;
11+
}
12+
13+
main {
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
width: 400px;
18+
margin-top: 30vh;
19+
margin-inline: auto !important;
20+
padding: 1rem 0;
21+
flex-direction: column;
22+
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
23+
background-color: bisque;
24+
gap: 1rem 0;
25+
border-radius: 5px;
26+
}
27+
28+
.emojis {
29+
display: flex;
30+
gap: 2;
31+
32+
33+
}
34+
35+
.emoji {
36+
display: flex;
37+
align-items: center;
38+
justify-content: center;
39+
cursor: pointer;
40+
transition: transform.2s;
41+
color: #000;
42+
flex-direction: column;
43+
width: 100px;
44+
padding: 1rem;
45+
&:hover {
46+
transform: scale(1.05);
47+
background-color: #008080;
48+
color: #fff;
49+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
50+
outline: none;
51+
border-radius: 10px;
52+
53+
}
54+
}
55+
56+
57+
58+
.emoji:hover {
59+
transform: scale(1.1);
60+
}
61+
62+
button.review{
63+
background-color: aquamarine;
64+
color: #fff;
65+
border: none;
66+
padding: 1rem 2rem;
67+
border-radius: 5px;
68+
cursor: pointer;
69+
font-size: 1.2rem;
70+
transition: background-color 0.3s ease-in-out;
71+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
72+
outline: none;
73+
&:hover {
74+
background-color: #008080;
75+
}
76+
77+
78+
}
79+
80+
img {
81+
width: 70%;
82+
height: auto;
83+
margin-bottom: 1rem;
84+
border-radius: 5px;
85+
object-fit: cover;
86+
border-radius: 100%;
87+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
88+
transition: transform.2s;
89+
&:hover {
90+
transform: scale(1.05);
91+
}
92+
93+
}
94+
95+
.selected {
96+
border: 2px solid #fff;
97+
background-color: #008080;
98+
color: #fff;
99+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
100+
outline: none;
101+
border-radius: 10px;
102+
transform: scale(1.05);
103+
cursor: pointer;
104+
&:hover {
105+
transform: scale(1.1);
106+
}
107+
108+
}
109+
110+
.hidden {
111+
display: none;
112+
}
113+
114+
.visible {
115+
display: block;
116+
}
117+
118+
119+
#box {
120+
display: none;
121+
122+
}
123+
.message-box {
124+
display: flex;
125+
gap: 1rem;
126+
flex-direction: column;
127+
justify-content: center;
128+
align-items: center;
129+
transition: opacity 0.5s ease-in-out;
130+
}
131+
132+
p {
133+
text-align: center;
134+
}
135+
136+
#message {
137+
color: green !important;
138+
}

0 commit comments

Comments
 (0)