Skip to content

Commit

Permalink
Merge pull request #255 from Bhum-ika/editReviewSection
Browse files Browse the repository at this point in the history 
Edit review section and conflicts resolved
  • Loading branch information
@PriyaGhosal
PriyaGhosal authored Oct 8, 2024
2 parents bed4bdb + 83d7d6f commit ed81bc2
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 69 deletions.
99 changes: 40 additions & 59 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -620,65 +620,46 @@ <h2>Thank You!</h2>
</main>
<!-- ratings by user -->
<section id="reviews" class="reviews-section">
<h2>User Reviews and Ratings</h2>
<p>
Read what others have to say about their experiences with various
destinations, hotels, flights, and activities. Share your own reviews
and help fellow travelers make informed decisions.
</p>

<div class="review-form" style="margin-top: 20px">
<h1 style="margin-bottom: 10px">Leave a Review</h1>
<form>
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" required />

<label for="destination">Destination/Service:</label>
<input type="text" id="destination" name="destination" required />

<div class="container">
<div class="rating-wrap">
<h2>Ratings:</h2>
<div class="center">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5"/><label for="star5" class="full"></label>
<input type="radio" id="star4.5" name="rating" value="4.5"/><label for="star4.5" class="half"></label>
<input type="radio" id="star4" name="rating" value="4"/><label for="star4" class="full"></label>
<input type="radio" id="star3.5" name="rating" value="3.5"/><label for="star3.5" class="half"></label>
<input type="radio" id="star3" name="rating" value="3"/><label for="star3" class="full"></label>
<input type="radio" id="star2.5" name="rating" value="2.5"/><label for="star2.5" class="half"></label>
<input type="radio" id="star2" name="rating" value="2"/><label for="star2" class="full"></label>
<input type="radio" id="star1.5" name="rating" value="1.5"/><label for="star1.5" class="half"></label>
<input type="radio" id="star1" name="rating" value="1"/><label for="star1" class="full"></label>
<input type="radio" id="star0.5" name="rating" value="0.5"/><label for="star0.5" class="half"></label>
</fieldset>
<span id="rating-value"></span>
</div>
</div>
</div>
<script>
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
});
}
</script>
<label for="review">Your Review:</label>
<textarea id="review" name="review" rows="4" required></textarea>
<label for="complaint">Complaint (if any):</label>
<textarea
id="complaint"
name="complaint"
rows="3"
placeholder="Describe any issue with the staff here. Please explain every single detail ex:location,name of the person"
></textarea>

<button type="submit">Submit Review</button>
</form>
<div class="revieww">
<div class="review-form">
<h2>Rate your experience</h2>
<p class="review-p">
Read what others have to say about their experiences with various
destinations, hotels, flights, and activities. Share your own reviews
and help fellow travelers make informed decisions.
</p>

<div style="margin-top: 20px">
<form class="form">
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" required />

<label for="destination">Destination/Service:</label>
<input type="text" id="destination" name="destination" required />

<label for="rating">Rating:</label>
<select id="rating" name="rating">
<option value="5">⭐⭐⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="2">⭐⭐</option>
<option value="1">⭐</option>
</select>

<label for="review">Your Review:</label>
<textarea id="review" name="review" rows="4" required></textarea>
<label for="complaint">Complaint (if any):</label>
<textarea
id="complaint"
name="complaint"
rows="3"
placeholder="Describe any issue with the staff here. Please explain every single detail ex:location,name of the person"
></textarea>

<div class="form-button"> <button type="submit">Send</button>
</div> </form>
</div>
</div>
</div>

<div class="reviews-container">
Expand Down
46 changes: 36 additions & 10 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -623,25 +623,48 @@ body.dark-mode {
border: 1px solid #0056b3; /* Darker blue border */
}


/* user rating */
.reviews-section {
padding: 50px;
background-color: #f4f4f4;
background-color: #F0F8FF;

}
.revieww{
display: flex;
justify-content: center;

}

.review-p{
font-size:small;
color:#543db0;
font-style: italic;
font-weight: 500;
}

.reviews-section h2 {
font-size: 2em;
font-size: 3em;
margin-bottom: 20px;
}

.review-form {
background: white;
padding: 20px;
background: #CCE9F9;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
display: flex;
flex-direction: column;
width:40vw;
align-items: center;
justify-items: center;
}

.form{
margin-top: 10px;
width:30vw;
}
.review-form h3 {
font-size: 1.5em;
margin-bottom: 15px;
Expand All @@ -667,17 +690,20 @@ body.dark-mode {
}

.review-form button {
background-color: #007bff;
color: white;
padding: 10px 15px;
background-color: #F7D160;
padding: 10px 30px;
border: none;
border-radius: 5px;
border-radius: 30px;
cursor: pointer;
transition: background-color 0.3s;
color:black;
font-size:14px;

}

.review-form button:hover {
background-color: #0056b3;
.form-button{
text-align: center;

}

.reviews-container {
Expand Down

0 comments on commit ed81bc2

Please sign in to comment.