From eb4b2dbefbb5851bc8cb4de137a6038264afb96c Mon Sep 17 00:00:00 2001
From: Robert McGovern <rob@tarasis.net>
Date: Thu, 27 Oct 2022 22:52:21 +0100
Subject: [PATCH] finished back of card for mobile, added blur to javascript to
 remove the focus effect

---
 .../interactive-rating-component/css/style.css    | 15 ++++++++-------
 .../interactive-rating-component/js/script.js     | 15 +++++++++++++--
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/projects/FrontendMentor/newbie/interactive-rating-component/css/style.css b/projects/FrontendMentor/newbie/interactive-rating-component/css/style.css
index 7857998..e85b927 100644
--- a/projects/FrontendMentor/newbie/interactive-rating-component/css/style.css
+++ b/projects/FrontendMentor/newbie/interactive-rating-component/css/style.css
@@ -77,9 +77,9 @@ body {
     background: var(--col-background-component);
     border-radius: var(--border-radius);
     /* margin: 0 1.5rem; */
-    padding: 24px 24px 32px 24px;
 }
 .rating-component-front {
+    padding: 24px 24px 32px 24px;
 }
 
 .star-icon {
@@ -226,21 +226,22 @@ body {
 
 .rating-component-back {
     /* display: none; */
-    padding: 34px 24px 37px 24px;
+    padding: 24px 24px 37px 24px;
 
     text-align: center;
 }
 
 .thank-you-img {
-    margin-top: 0px;
+    margin-top: 10px;
+    width: 50%;
 }
 
 .rating-component__rating {
-    margin-top: 1.5rem;
-    /* margin-inline: 45px; */
+    margin-top: 24px;
+    margin-inline: 55px;
 
     font-size: var(--fs-body);
-    /* line-height: var(--lh-body); */
+    line-height: var(--lh-body);
     color: var(--col-orange);
 
     border-radius: 22.5px;
@@ -253,7 +254,7 @@ body {
 }
 
 .rating-component__body-submitted {
-    margin-top: 10px;
+    margin-top: 14px;
 }
 
 @media screen and (min-width: 62.5rem) {
diff --git a/projects/FrontendMentor/newbie/interactive-rating-component/js/script.js b/projects/FrontendMentor/newbie/interactive-rating-component/js/script.js
index 9f819af..64cecf0 100644
--- a/projects/FrontendMentor/newbie/interactive-rating-component/js/script.js
+++ b/projects/FrontendMentor/newbie/interactive-rating-component/js/script.js
@@ -1,5 +1,6 @@
 const form = document.getElementById("ratingForm");
 const ratingSpan = document.getElementById("ratingSpan");
+const buttonSubmit = document.getElementById("buttonSubmit");
 
 const frontSection = document.getElementById("rating-component-front");
 const backSection = document.getElementById("rating-component-back");
@@ -17,8 +18,18 @@ form.addEventListener(
         ratingSpan.innerText = output;
 
         //hide first section, make second section visible
-        frontSection.classList.add("hidden");
-        backSection.classList.remove("hidden");
+        if (output != "") {
+            frontSection.classList.add("hidden");
+            backSection.classList.remove("hidden");
+        } else {
+            /*
+            Blur is used to remove the focus from the button that
+            we prevent from working because the user didn't select
+            a rating. Should probably add an error message, even
+            though its not in the design spec.
+            */
+            buttonSubmit.blur();
+        }
         //use a transition effect, plus a reduced motion version
 
         event.preventDefault();