From d4a716db7696d9b5e7ef9b0e16cdf7a15f2ad107 Mon Sep 17 00:00:00 2001 From: sadafhukkeri <157600170+sadafhukkeri@users.noreply.github.com> Date: Mon, 7 Oct 2024 21:47:44 +0530 Subject: [PATCH 1/2] Changed rating system --- RatingStyle.css | 83 +++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 31 ++++++++++++------ star-rating.js | 9 ++++++ 3 files changed, 114 insertions(+), 9 deletions(-) create mode 100644 RatingStyle.css create mode 100644 star-rating.js diff --git a/RatingStyle.css b/RatingStyle.css new file mode 100644 index 00000000..a98f5615 --- /dev/null +++ b/RatingStyle.css @@ -0,0 +1,83 @@ +@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&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.container { + display: flex; + align-items: flex-start; /* Align items at the start of the container */ + justify-content: space-between; /* Space between elements */ + gap: 20px; /* Optional gap between form and rating section */ + height: auto; /* Adjust height if necessary */ +} +.form-section { + width: 70%; /* Adjust width as needed */ +} +.rating-wrap { + width: 30%; /* Adjust width as needed */ + text-align: left; +} + +.center { + width: auto; + display: inline-flex; /* Align stars and rating count in a row */ + align-items: center; + gap: 10px; /* Add some space between the stars and the count */ +} + + +#rating-value { + font-size: 1.2rem; /* Adjust font size */ + font-weight: bold; + color: black; /* Optional: change the color to match the theme */ +} + +.rating { + border: none; + float:right; +} + +.rating > input { + display: none; +} + +.rating > label:before { + content: '\f005'; + font-family: FontAwesome; + margin: 5px; + font-size: 1.5rem; + display: inline-block; + cursor: pointer; +} + +.rating > .half:before { + content: '\f089'; + position: absolute; + cursor: pointer; +} + +.rating > label { + color: #ddd; /* Empty stars initially */ + float: right; + cursor: pointer; +} + +/* Filled stars on hover and selection */ +.rating > input:checked ~ label, +.rating:not(:checked) > label { + color: #ddd; /* Keep stars empty until interaction */ +} + +.rating > input:checked ~ label, +.rating > input:checked ~ label:hover, +.rating > input:checked ~ label:hover ~ label { + color: rgb(230, 166, 17); /* Green for filled stars */ +} + +.rating > label:hover ~ label, +.rating > label:hover { + color:rgb(230, 166, 17); /* Green hover effect */ +} diff --git a/index.html b/index.html index 8ac9e068..79cd5f84 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ content="BuddyTrail is a travel agency website that helps you pick out your holiday vacation" /> + @@ -544,15 +545,27 @@

Leave a Review

- - - +
+
+

Ratings:

+
+
+ + + + + + + + + + +
+ +
+
+
+ diff --git a/star-rating.js b/star-rating.js new file mode 100644 index 00000000..2f613711 --- /dev/null +++ b/star-rating.js @@ -0,0 +1,9 @@ +let star = document.querySelectorAll('input'); +let showValue = document.querySelector('#rating-value'); + +for(let i = 0; i < star.length; i++) { + star[i].addEventListener('click', function() { + let selectedRating = this.value; + showValue.innerHTML = selectedRating; // Only show the rating value + }); +} \ No newline at end of file From fe5671d3ee96c4c43f85f956ec0bed2ebf72366e Mon Sep 17 00:00:00 2001 From: sadafhukkeri <157600170+sadafhukkeri@users.noreply.github.com> Date: Mon, 7 Oct 2024 22:06:32 +0530 Subject: [PATCH 2/2] Update index.html --- index.html | 93 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 92 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 79cd5f84..ea082d8e 100644 --- a/index.html +++ b/index.html @@ -27,6 +27,87 @@ BuddyTrail