Skip to content

Commit a85be8f

Browse files
Anamaya1729Anamaya1729
authored
Merge pull request #48 from KshshVrma/master
FeedBackPage Project Completed.
2 parents ba95ff6 + 00d3715 commit a85be8f

File tree

5 files changed

+145
-1
lines changed

5 files changed

+145
-1
lines changed

‎easy/feedback_page/README.md‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,33 @@
55
### Problem Statement
66
Create a feedback page where the user can give feedback about the website.
77

8+
### Description
9+
<br>
10+
User submits the rating that is to be given
11+
12+
13+
<br>
14+
The rating the user left is displayed , on a confirmation page
15+
16+
![image](https://user-images.githubusercontent.com/97381200/193737346-7c677e80-e236-4b8b-8487-0124aa060c84.png)
17+
![image](https://user-images.githubusercontent.com/97381200/193737362-c5362924-8d50-452c-9f12-9ffc989dd0e9.png)
18+
19+
20+
### Tech Stack
21+
22+
- HTML
23+
- CSS
24+
- JavaScript
25+
26+
### Contributor
27+
28+
- [KashishVerma](https://github.com/KshshVrma)
29+
830
### Maintainer
931
- [Anamaya](https://www.linkedin.com/in/anamaya1729/)
1032
- [Vaibhav](https://https://www.linkedin.com/in/vaibhava17/)
1133

1234
### License
1335
**This project is licensed under the GNU GENERAL PUBLIC License - see the [LICENSE](../LICENSE) file for details**
1436

15-
### Happy Coding! :smile:
37+
### Happy Coding! :smile:

‎easy/feedback_page/index.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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+
7+
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
8+
9+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
10+
<link rel="stylesheet" href="style.css">
11+
<title>Feedback Page</title>
12+
13+
</head>
14+
<body>
15+
16+
<!-- Rating state start -->
17+
<div class="content">
18+
<br>
19+
<p>How did we do?</p>
20+
21+
<p>Please let us know how we did with your support request.</p>
22+
All feedback is appreciated <br>
23+
to help us improve our offering!
24+
25+
<div id="outer">
26+
<div class="inner"><button class="num" id="num" onclick="changeVal('1')">1</button></div>
27+
<div class="inner"><button class="num" id="num" onclick="changeVal('2')">2</button></div>
28+
<div class="inner"><button id="num" class="num" onclick="changeVal('3')">3</button></div>
29+
<div class="inner"><button id="num" class="num" onclick="changeVal('4')">4</button></div>
30+
<div class="inner"><button id="num" class="num" onclick="changeVal('5')">5</button></div>
31+
</div>
32+
33+
<div><button id="btn" class="sub">Submit</button></div>
34+
35+
<!-- Rating state end -->
36+
37+
<!-- Thank you state start -->
38+
</div>
39+
40+
41+
42+
43+
<div class="attribution">
44+
Coded by <a href="#">Kashish Verma</a>.
45+
</div>
46+
47+
<script src ="logic.js"></script>
48+
</body>
49+
</html>

‎easy/feedback_page/logic.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
2+
3+
var value = "";
4+
var globalChoice ="0";
5+
function changeVal(choice) {
6+
if (choice == '1') {
7+
value = '1';
8+
} else if (choice == '2'){
9+
value ='2';
10+
}
11+
else if (choice == '3'){
12+
value ='3';
13+
}
14+
else if (choice == '4'){
15+
value ='4';
16+
}
17+
else if (choice == '5'){
18+
value ='5';
19+
}
20+
console.log(value);
21+
globalChoice = choice;
22+
var property = document.getElementById(num);
23+
24+
property.style.backgroundColor = "#FFFFFF"
25+
}
26+
27+
const btn = document.getElementById('btn');
28+
29+
btn.addEventListener('click', function onClick(event) {
30+
// 👇️ change background color
31+
document.body.innerHTML=` <br>You selected ${globalChoice} out of 5 <br>Thank you!<br> We appreciate you taking the time to give a rating. If you ever need more support, don’t hesitate to get in touch!
32+
<br>
33+
Coded by <a href="#">Kashish Verma</a>.`;
34+
35+
// 👇️ optionally change text color
36+
// document.body.style.color = 'white';
37+
});

‎easy/feedback_page/readme.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
in this page user can provid his rating for a service which gets displayed in a seperate confirmation page
2+
-KshshVrma

‎easy/feedback_page/style.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
body {
2+
text-align: center;
3+
background-color: black;
4+
color: yellow;
5+
}
6+
.content{
7+
background-color: grey;
8+
}
9+
.num{
10+
background-color: rgb(47, 166, 166);
11+
}
12+
#outer
13+
{
14+
width:100%;
15+
text-align: center;
16+
}
17+
.inner
18+
{
19+
display: inline-block;
20+
}
21+
.num:hover {
22+
background-color: rgb(188, 71, 58);
23+
color: rgb(45, 164, 79);
24+
}
25+
.mystyle {
26+
width: 100%;
27+
padding: 25px;
28+
background-color: coral;
29+
color: white;
30+
font-size: 25px;
31+
}
32+
.active{
33+
background-color: red;
34+
}

0 commit comments

Comments
 (0)