From 36a30636eee207948023f55f95dbb8f23d7777f5 Mon Sep 17 00:00:00 2001 From: yashksaini-coder <115717039+yashksaini-coder@users.noreply.github.com> Date: Mon, 7 Oct 2024 08:47:20 +0000 Subject: [PATCH 1/2] Updated contributors list --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 4642e660..ddfd4f92 100644 --- a/README.md +++ b/README.md @@ -146,17 +146,17 @@ Thank you for your contributions to SkillWise! - - anuragverma108 + + yashksaini-coder
- Anurag Verma + Yash Kumar Saini - - yashksaini-coder + + anuragverma108
- Yash Kumar Saini + Anurag Verma From 28b2d5c239a439b1b786a11565250ac570b049ba Mon Sep 17 00:00:00 2001 From: KanwalpreetSingh1823 Date: Mon, 7 Oct 2024 15:09:29 +0530 Subject: [PATCH 2/2] Feedback section added in the website --- assets/css/style.css | 130 +++++++++++++++++++++++++++++++++++++++++++ assets/js/script.js | 76 ++++++++++++++++++++++++- index.html | 44 +++++++++++++++ 3 files changed, 249 insertions(+), 1 deletion(-) diff --git a/assets/css/style.css b/assets/css/style.css index 021f2f83..2934edb7 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -442,6 +442,136 @@ body.nav-active { overflow: hidden; } } +/*-----------------------------------*\ + #Feedback +\*-----------------------------------*/ + +.feedback-Section{ + display: flex; + flex-direction: column; + border:1px solid black; + padding: 3rem; +} + +.feedback-button { + position: fixed; + right: 20px; + bottom: 20px; + background-color: hsl(357, 100%, 75%); + color: white; + padding: 15px; + border-radius: 5px; + cursor: pointer; + box-shadow: 0 4px 8px rgba(0,0,0,0.2); + z-index: 1000; +} + +.feedback-modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.5); + justify-content: center; + align-items: center; + z-index: 1000; +} + +.modal-content { + background-color: white; + padding: 20px; + border-radius: 5px; + width: 300px; + text-align: center; + box-shadow: 0 4px 16px rgba(0,0,0,0.2); +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} + +.emojis { + font-size: 30px; + margin: 20px 0; + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.emoji { + cursor: pointer; + margin: 0 10px; + transition: transform 0.2s; +} + +.emoji:hover { + transform: scale(1.2); +} + +.emoji.selected { + border: 1px solid black; /* Highlight selected emoji */ + border-radius: 5px; +} + + +.buttons{ + display: flex; + align-items: center; + justify-content: space-between; +} + +textarea, input[type="email"] { + width: 100%; + padding: 10px; + margin: 10px 0; + border: 1px solid #ccc; + border-radius: 4px; +} + +button { + background-color: #4CAF50; + color: white; + border: none; + padding: 10px; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background-color: #45a049; +} + +.feedbackPopUp{ + position: fixed; + transform: translate(120%); + transition: all 1s ease-in-out; + right: 20px; + bottom: 100px; + background-color: hsl(357, 100%, 75%); + color: white; + padding: 15px; + border-radius: 5px; + cursor: pointer; + box-shadow: 0 4px 8px rgba(0,0,0,0.2); + z-index: 1000; +} + +.PopUpDisplay{ + transition: all 1.5s ease-in-out; + transform: translate(0); +} diff --git a/assets/js/script.js b/assets/js/script.js index 19defdb6..22156427 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -67,4 +67,78 @@ const headerActive = function () { document.getElementById('year').textContent = new Date().getFullYear(); -window.addEventListener("scroll", headerActive); \ No newline at end of file +window.addEventListener("scroll", headerActive); + + +// Feedback Section +let selectedEmotion = ''; + +document.getElementById('feedbackButton').onclick = function() { + document.getElementById('feedbackModal').style.display = 'flex'; +} + +document.getElementById('closeModal').onclick = function() { + document.getElementById('feedbackModal').style.display = 'none'; +} + +document.getElementById('nextToFeedback').onclick = function() { + const selectedEmoji = document.querySelector('.emoji.selected'); + if (!selectedEmoji) { + alert('Please select an emotion!'); + return; + } + selectedEmotion = selectedEmoji.dataset.value; + document.getElementById('step1').style.display = 'none'; + document.getElementById('step2').style.display = 'block'; +} + +document.querySelectorAll('.emoji').forEach(emoji => { + emoji.onclick = function() { + document.querySelectorAll('.emoji').forEach(e => e.classList.remove('selected')); + emoji.classList.add('selected'); + } +}); + +document.getElementById('nextToEmail').onclick = function() { + if (!document.getElementById('feedback').value) { + alert('Please provide your feedback!'); + return; + } + document.getElementById('step2').style.display = 'none'; + document.getElementById('step3').style.display = 'block'; +} + +document.getElementById('backToEmoji').onclick = function() { + document.getElementById('step2').style.display = 'none'; + document.getElementById('step1').style.display = 'block'; +} + +document.getElementById('backToFeedback').onclick = function() { + document.getElementById('step3').style.display = 'none'; + document.getElementById('step2').style.display = 'block'; +} + +window.onload = () => { + if (sessionStorage.getItem('showPopUp') === 'true') { + popUpDisplay(); + sessionStorage.removeItem('showPopUp'); + } +}; + +document.getElementById('feedbackForm').onsubmit = function(event) { + event.preventDefault(); + document.getElementById('feedbackForm').reset(); + document.getElementById('feedbackModal').style.display = 'none'; + + sessionStorage.setItem('showPopUp', 'true'); // Set a flag to show pop-up after reload + window.location.reload(); +}; + +const popUpDisplay = () => { + setTimeout(() => { + document.querySelector('.feedbackPopUp').style.transform = 'translate(0)'; + setTimeout(() => { + document.querySelector('.feedbackPopUp').style.transform = 'translate(120%)'; + }, 3000); + }, 1000); +}; \ No newline at end of file diff --git a/index.html b/index.html index 5d06054d..5896f8e6 100644 --- a/index.html +++ b/index.html @@ -206,7 +206,51 @@

+ + + + + +
+ Thank you for your Feedback +
+