From 848f2dfd65c8e7fbcd74178d32bf03af6f5acdde Mon Sep 17 00:00:00 2001 From: Robert McGovern 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 @@ - - - + Frontend Mentor | Interactive rating component @@ -36,58 +34,54 @@
- -
- - -

How did we do?

-

- Please let us know how we did with your support request. All feedback is appreciated to help us improve our - offering! -

-
-
- -
- - - - - - - - - - - - - - -
-
- -
-
-
-
- - - -
- -

- You selected - out of 5 -

-

Thank you!

-

- We appreciate you taking the time to give a rating. If you ever need more support, - don’t hesitate to get in touch! -

-
- +
+ +
+ +

How did we do?

+

+ Please let us know how we did with your support request. All feedback is appreciated to help us improve our + offering! +

+
+
+ +
+ + + + + + + + + + +
+
+ +
+
+
+
+ + +
+ +

+ You selected + out of 5 +

+

Thank you!

+

+ We appreciate you taking the time to give a rating. If you ever need more support, + don’t hesitate to get in touch! +

+
+ +
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 +);