05-interactive-rating-respoisve

.github/ISSUE_TEMPLATE/bug.yml

@@ -42,7 +42,7 @@ body:
         - label: 'I have checked the existing issues'
           required: true
 
-        - label: 'I have read the [Contributing Guidelines](https://github.com/beRajeevKumar/Frontend_Mentor/blob/main/Code_Of_Conduct.md)'
+        - label: 'I have read the [Contributing Guidelines](https://github.com/YadavAkhileshh/Alien-Invasion-Defense/blob/main/Code_Of_Conduct.md)'
           required: true
         - label: "I'm a GSSoC'24-Extd contributor"
         - label: "I'm a Hacktoberfest'24 contributor"

.github/ISSUE_TEMPLATE/feature.yml

@@ -25,7 +25,7 @@ body:
         - label: 'I have checked the existing issues'
           required: true
 
-        - label: 'I have read the [Contributing Guidelines](https://github.com/beRajeevKumar/Frontend_Mentor/blob/main/Code_Of_Conduct.md)'
+        - label: 'I have read the [Contributing Guidelines](https://github.com/YadavAkhileshh/Alien-Invasion-Defense/blob/main/Code_Of_Conduct.md)'
           required: true
         - label: "I'm a GSSoC'24-Extd contributor"
         - label: "I'm a Hacktoberfest'24 contributor"

.github/workflows/greetings.yml

@@ -13,4 +13,4 @@ jobs:
       with:
         repo-token: ${{ secrets.GITHUB_TOKEN }}
         issue-message: "👋 Thank you @${{ github.actor }} for raising an issue! We appreciate your effort in helping us improve. Our team will review it shortly. Stay tuned!"
-        pr-message: " 🎉 Thank you @${{ github.actor }} for your contribution! Your pull request has been submitted successfully. A maintainer will review it as soon as possible. We appreciate your support in making this project better"
+        pr-message: " 🎉 Thank you @${{ github.actor }} for your contribution! Your pull request has been submitted successfully. A maintainer will review it as soon as possible. We appreciate your support in making this project better"

.vscode/settings.json

@@ -4,4 +4,5 @@
         "titleBar.activeBackground": "#50384B",
         "titleBar.activeForeground": "#FBFAFB"
     }
+
 }

05-intractive-rating/script.js

@@ -5,18 +5,38 @@ const submitBtn = document.querySelector('.submit');
 const thanks = document.querySelector('.thanks');
 const container = document.querySelector('.container');
 const ratingValue = document.querySelector('.points');
-const overlay = document.querySelector('.overlay');
-for (let i = 0; i < ratingBtn.length; i++) {
-  ratingBtn[i].addEventListener('click', function () {
-    ratingBtn[i].style.backgroundColor = 'hsl(25, 97%, 53%)';
+
+let selectedRating = null;
+
+// Function to reset all rating buttons
+function resetRatings() {
+  ratingBtn.forEach((btn) => {
+    btn.style.backgroundColor = 'hsla(216, 12%, 8%, 0.4)';
+    btn.style.color = 'hsl(0, 0%, 100%)';
   });
 }
-submitBtn.addEventListener('click', function () {
-  thanks.classList.remove('hidden');
-  container.classList.add('hidden');
-});
-ratingBtn.forEach(rate => {
+
+// Event listener for rating buttons
+ratingBtn.forEach((rate) => {
   rate.addEventListener('click', function () {
-    ratingValue.innerHTML = rate.innerHTML;
+    resetRatings(); // Reset all buttons
+    // Highlight the selected button
+    rate.style.backgroundColor = 'hsl(25, 97%, 53%)';
+    rate.style.color = '#fff';
+
+    // Capture the selected rating
+    selectedRating = rate.innerHTML;
+    ratingValue.innerHTML = selectedRating;
   });
 });
+
+// Submit button event listener
+submitBtn.addEventListener('click', function () {
+  // Check if a rating was selected
+  if (selectedRating) {
+    thanks.classList.remove('hidden'); // Show the thank you page
+    container.classList.add('hidden'); // Hide the rating container
+  } else {
+    alert('Please select a rating before submitting!');
+  }
+});

05-intractive-rating/style.css

@@ -122,3 +122,38 @@ body {
 .hidden {
   display: none;
 }
+/* Responsive Design */
+@media (max-width: 768px) {
+  .container, .thanks {
+    padding: 2rem;
+    margin:3rem;
+  }
+
+  .title {
+    font-size: 2.4rem;
+  }
+
+  .parah, .btn, .submit {
+    font-size: 1.4rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .btns {
+    flex-direction:row;
+    gap: 1rem;
+  }
+
+  .btn {
+    width: 100%;
+    padding: 1.5rem 0;
+  }
+
+  .submit {
+    padding: 1.2rem;
+  }
+}
+
+.hidden {
+  display: none;
+}

Code_Of_Conduct.md → Code_of_Conduct.md

@@ -91,4 +91,4 @@ At **Frontend Mentor Projects**, we are dedicated to building a welcoming, inclu
 
 ## Attribution
 
-This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 2.0, available [here](https://www.contributor-covenant.org/version/2/0/code_of_conduct.html).
+This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 2.0, available [here](https://www.contributor-covenant.org/version/2/0/code_of_conduct.html).

index.html

@@ -213,4 +213,4 @@ <h1>Subscribe to Newsletter</h1>
     </footer>
     <script src="script.js"></script>
   </body>
-</html>
+</html>