From 848f2dfd65c8e7fbcd74178d32bf03af6f5acdde Mon Sep 17 00:00:00 2001
From: Robert McGovern <rob@tarasis.net>
Date: Wed, 26 Oct 2022 21:37:41 +0100
Subject: [PATCH] tweaked html, added initial css classes, added basic js with
 listener and updating rating span with figure

---
 .../interactive-rating-component/index.html   | 104 +++++++++---------
 .../interactive-rating-component/js/script.js |  22 ++++
 2 files changed, 71 insertions(+), 55 deletions(-)

diff --git a/projects/FrontendMentor/newbie/interactive-rating-component/index.html b/projects/FrontendMentor/newbie/interactive-rating-component/index.html
index 5e6c9ae..ae9dae1 100644
--- a/projects/FrontendMentor/newbie/interactive-rating-component/index.html
+++ b/projects/FrontendMentor/newbie/interactive-rating-component/index.html
@@ -13,9 +13,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&display=swap" rel="stylesheet">
 
   <link rel="stylesheet" href="css/style.css">
-  <script src="js/script.js"></script>
-
-
+  <script src="js/script.js" defer></script>
 
   <title>Frontend Mentor | Interactive rating component</title>
 
@@ -36,58 +34,54 @@
 
   <main>
 
-    <!-- Rating state start -->
-    <section>
-      <img src="images/icon-star.svg" alt="Image of a Star" aria-hidden="true">
-
-      <h2>How did we do?</h2>
-      <p>
-        Please let us know how we did with your support request. All feedback is appreciated to help us improve our
-        offering!
-      </p>
-      <form>
-        <fieldset>
-          <!-- <legend>Please select your preferred contact method:</legend> -->
-          <div>
-            <input type="radio" id="ratingScore1" name="rating" value="1">
-            <label for="ratingScore1">1</label>
-
-            <input type="radio" id="ratingScore2" name="rating" value="2">
-            <label for="ratingScore2">2</label>
-
-            <input type="radio" id="ratingScore3" name="rating" value="3">
-            <label for="ratingScore3">3</label>
-
-            <input type="radio" id="ratingScore4" name="rating" value="4">
-            <label for="ratingScore4">4</label>
-
-            <input type="radio" id="ratingScore5" name="rating" value="5">
-            <label for="ratingScore5">5</label>
-          </div>
-          <div>
-            <button type="submit">Submit</button>
-          </div>
-        </fieldset>
-      </form>
-    </section>
-    <!-- Rating state end -->
-
-    <!-- Thank you state start -->
-    <section>
-      <img src="images/illustration-thank-you.svg"
-        alt="Image of an electronic box with paper coming out of it. A card is moving towards the box"
-        aria-hidden="true">
-      <p>
-        You selected <span></span>
-        <!-- Add rating here --> out of 5
-      </p>
-      <h2>Thank you!</h2>
-      <p>
-        We appreciate you taking the time to give a rating. If you ever need more support,
-        don’t hesitate to get in touch!
-      </p>
-    </section>
-    <!-- Thank you state end -->
+    <article class="rating-component">
+      <!-- Rating state start -->
+      <section class="component-front">
+        <img src="images/icon-star.svg" alt="Image of a Star" aria-hidden="true">
+        <h2 class="rating-component__header">How did we do?</h2>
+        <p class="rating-component__body">
+          Please let us know how we did with your support request. All feedback is appreciated to help us improve our
+          offering!
+        </p>
+        <form id="ratingForm">
+          <fieldset>
+            <!-- <legend>Please select your preferred contact method:</legend> -->
+            <div>
+              <input type="radio" id="ratingScore1" name="rating" value="1">
+              <label for="ratingScore1">1</label>
+              <input type="radio" id="ratingScore2" name="rating" value="2">
+              <label for="ratingScore2">2</label>
+              <input type="radio" id="ratingScore3" name="rating" value="3">
+              <label for="ratingScore3">3</label>
+              <input type="radio" id="ratingScore4" name="rating" value="4">
+              <label for="ratingScore4">4</label>
+              <input type="radio" id="ratingScore5" name="rating" value="5">
+              <label for="ratingScore5">5</label>
+            </div>
+            <div>
+              <button class="btn btn-submit" type="submit">Submit</button>
+            </div>
+          </fieldset>
+        </form>
+      </section>
+      <!-- Rating state end -->
+      <!-- Thank you state start -->
+      <section>
+        <img src="images/illustration-thank-you.svg"
+          alt="Image of an electronic box with paper coming out of it. A card is moving towards the box"
+          aria-hidden="true">
+        <p class="rating-component__rating">
+          You selected <span id="ratingSpan"></span>
+          <!-- Add rating here --> out of 5
+        </p>
+        <h2 class="rating-component__header">Thank you!</h2>
+        <p class="rating-component__body">
+          We appreciate you taking the time to give a rating. If you ever need more support,
+          don’t hesitate to get in touch!
+        </p>
+      </section>
+      <!-- Thank you state end -->
+    </article>
   </main>
 
 
diff --git a/projects/FrontendMentor/newbie/interactive-rating-component/js/script.js b/projects/FrontendMentor/newbie/interactive-rating-component/js/script.js
index e69de29..6e4d89e 100644
--- a/projects/FrontendMentor/newbie/interactive-rating-component/js/script.js
+++ b/projects/FrontendMentor/newbie/interactive-rating-component/js/script.js
@@ -0,0 +1,22 @@
+const form = document.getElementById("ratingForm");
+const ratingSpan = document.getElementById("ratingSpan");
+
+console.log(form);
+
+form.addEventListener(
+    "submit",
+    (event) => {
+        const data = new FormData(form);
+        let output = "";
+        for (const entry of data) {
+            output = `${entry[1]}`;
+        }
+        ratingSpan.innerText = output;
+
+        //hide first section, make second section visible
+        //use a transition effect, plus a reduced motion version
+
+        event.preventDefault();
+    },
+    false
+);