Skip to content

Commit

Permalink
feat: Improved UI Functionality and Integrate Star Rate System in the…
Browse files Browse the repository at this point in the history 
… Feedback Form (#776)

 Added Star Rating System

---------

Co-authored-by: Vamshi Maskuri <117595548+varshith257@users.noreply.github.com>
  • Loading branch information
@aslams2020 @varshith257
aslams2020 and varshith257 authored Jul 7, 2024
1 parent 632950a commit d3a4bc8
Show file tree
Hide file tree
Showing 3 changed files with 335 additions and 195 deletions.
Binary file added Feedback Tick.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
194 changes: 100 additions & 94 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1304,106 +1304,112 @@ <h3 class="name">Shikha Pandey</h3>

<!-- testimonial section -->


<!-- Feedback System-->
<section id="feedback" class="feed">
<div class="feedback">
<h1>Give Us Your Valuable Feedback.</h1>
<p>Your feedback is very important for Rapidoc.</p>
<div class="emoji">
<input type="radio" id="emoji1" name="emoji" value="😊" style="display: none;">
<label for="emoji1" style="font-size: 2rem; cursor: pointer; padding: 5px;">😊</label>
<input type="radio" id="emoji2" name="emoji" value="😁" style="display: none;">
<label for="emoji2" style="font-size: 2rem; cursor: pointer; padding: 5px;">😁</label>
<input type="radio" id="emoji3" name="emoji" value="😇" style="display: none;">
<label for="emoji3" style="font-size: 2rem; cursor: pointer; padding: 5px;">😇</label>
<input type="radio" id="emoji4" name="emoji" value="😕" style="display: none;">
<label for="emoji4" style="font-size: 2rem; cursor: pointer; padding: 5px;">😕</label>
<input type="radio" id="emoji5" name="emoji" value="😔" style="display: none;">
<label for="emoji5" style="font-size: 2rem; cursor: pointer; padding: 5px;">😔</label>
<input type="radio" id="emoji6" name="emoji" value="😡" style="display: none;">
<label for="emoji6" style="font-size: 2rem; cursor: pointer; padding: 5px;">😡</label>
</div>
<p id="mood-text" style="font-size: 1rem; font-weight: bold;"></p>
<p class="ques">What you want to say?</p>
<textarea id="textarea" cols="20" rows="5"></textarea>
<p class="ques">Are you satisfied with Rapidoc?</p>
<div class="radiobtn">
<div class="one">
<input class="input" type="radio" name="satisfaction" id="Yes" />
<label class="label" for="Yes">Yes</label>
</div>
<div class="one">
<input class="input" type="radio" name="satisfaction" id="No" />
<label class="label" for="No">No</label>
</div>
</div>
</div>
<div class="info">
<div class="center">
<button class="btn button" style="text-align: center; font-weight: 700; padding-bottom:40px;"
onclick="submitFeedback(event)">Submit</button>
</div>
</div>
</section>
<div id="overlay"
style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: none; justify-content: center; align-items: center; z-index: 1000;">
<div id="confirmation-message"
style="width: 80%; height: 80%; color: #1c413b; font-size: 50px; font-weight: bold; text-align: center; background-color: rgba(0, 0, 0, 0.8); padding: 20px; border-radius: 10px; display: flex; justify-content: center; align-items: center;">
Thank you for your feedback!
<div class="feedback-wrapper">
<div class="feedback-form">
<h2>We'd Love Your Feedback!</h2>
<p>Let us know how we're doing and how we can improve. <br /> <span style="color: hwb(181 21% 19%);"><strong>RapiDoc</strong> Healthcare</p>
<div>
<label for="rating" class="rate-us"> <strong>Please Rate us below</strong></label>
<div class="rating-container">
<button type="button" onclick="handleRatingChange(1)">☆</button>
<button type="button" onclick="handleRatingChange(2)">☆</button>
<button type="button" onclick="handleRatingChange(3)">☆</button>
<button type="button" onclick="handleRatingChange(4)">☆</button>
<button type="button" onclick="handleRatingChange(5)">☆</button>
</div>
</div>
<script>
const emojiLabels = document.querySelectorAll('.emoji label');
const moodText = document.getElementById('mood-text');

emojiLabels.forEach(label => {
label.addEventListener('click', () => {
const emoji = label.innerHTML;
let mood = '';
switch (emoji) {
case '😊':
mood = 'Highly Satisfied';
break;
case '😁':
mood = 'Satisfied';
break;
case '😇':
mood = 'Average';
break;
case '😕':
mood = 'Confused';
break;
case '😔':
mood = 'Dissatisfied';
break;
case '😡':
mood = 'Highly Dissatisfied';
break;
}
moodText.textContent = `Mood: ${mood}`;
});
});
<form id="feedback-form" onsubmit="handleSubmit(event)">
<label for="name">Your Name</label>
<input type="text" id="name" placeholder="Enter your name" required>
<label for="email">Your Email</label>
<input type="email" id="email" placeholder="Enter your email" required>
<label for="feedback">Your Feedback</label>
<textarea id="feedback" rows="5" placeholder="Let us know how we can improve..." required></textarea>
<button type="submit">Submit Feedback</button>
</form>
</div>
</div>

function submitFeedback(event) {
event.preventDefault();
const feedbackText = document.getElementById('textarea').value;
const selectedEmoji = document.querySelector('input[name="emoji"]:checked');
if (!feedbackText.trim() || !selectedEmoji) {
alert('Please fill the feedback form and select your satisfaction level');
return;
}
const overlay = document.getElementById('overlay');
overlay.style.display = 'flex';
document.body.classList.add('blur');
setTimeout(() => {
overlay.style.display = 'none';
document.body.classList.remove('blur');
location.reload(true);
}, 1000);
<div id="popup" class="popup" style="display: none;">
<div class="popup-content">
<h2>Thank you for your Feedback! 💚</h2>
<div class="popup-icon">
<img src="/Feedback Tick.png" width="84" alt="✔️">
</div>
<p>Your feedback has been received.<br> We appreciate the input you provide.</p>
<button class="popup-button" onclick="closePopup()"><a class="active" aria-current="page">Back to Home</a></button>
</div>
</div>

<script>
let rating = null;

function handleRatingChange(value) {
rating = value;
updateStars();
}

function updateStars() {
const buttons = document.querySelectorAll('.rating-container button');
buttons.forEach((button, index) => {
if (index < rating) {
button.textContent = '★';
button.classList.add('filled');
} else {
button.textContent = '☆';
button.classList.remove('filled');
}
</script>
});
}

function handleSubmit(event) {
event.preventDefault();

const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const feedback = document.getElementById('feedback').value;

// For now, we will just simulate email sending success
console.log('Feedback submitted:', { name, email, rating, feedback });

// Reset the form fields
document.getElementById('feedback-form').reset();
rating = null;
updateStars();

// Show the popup
document.getElementById('popup').style.display = 'flex';
}

function closePopup() {
document.getElementById('popup').style.display = 'none';
}

const feedbackForm = document.querySelector('.feedback-form');

function isElementInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}

function handleScroll() {
if (isElementInViewport(feedbackForm)) {
feedbackForm.classList.add('animate-feedback');
window.removeEventListener('scroll', handleScroll);
}
}

window.addEventListener('scroll', handleScroll);

updateStars();
</script>

</main><!-- End #main -->
<!-- ############### Footer ############### -->
<br><br><br><br><br><br>
Expand Down
Loading

0 comments on commit d3a4bc8

Please sign in to comment.