tarasis
/
rmcg.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tweaked html, added initial css classes, added basic js with listener and updating rating span with figure

This commit is contained in:
Robert McGovern 2022-10-26 21:37:41 +01:00
parent a6c3745e11
commit 848f2dfd65
2 changed files with 71 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
projects/FrontendMentor/newbie/interactive-rating-component/index.html
View File

@ -13,9 +13,7 @@
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css"> <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> <title>Frontend Mentor | Interactive rating component</title>
@ -36,58 +34,54 @@
<main> <main>
<!-- Rating state start --> <article class="rating-component">
<section> <!-- Rating state start -->
<img src="images/icon-star.svg" alt="Image of a Star" aria-hidden="true"> <section class="component-front">
<img src="images/icon-star.svg" alt="Image of a Star" aria-hidden="true">
<h2>How did we do?</h2> <h2 class="rating-component__header">How did we do?</h2>
<p> <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 Please let us know how we did with your support request. All feedback is appreciated to help us improve our
offering! offering!
</p> </p>
<form> <form id="ratingForm">
<fieldset> <fieldset>
<!-- <legend>Please select your preferred contact method:</legend> --> <!-- <legend>Please select your preferred contact method:</legend> -->
<div> <div>
<input type="radio" id="ratingScore1" name="rating" value="1"> <input type="radio" id="ratingScore1" name="rating" value="1">
<label for="ratingScore1">1</label> <label for="ratingScore1">1</label>
<input type="radio" id="ratingScore2" name="rating" value="2">
<input type="radio" id="ratingScore2" name="rating" value="2"> <label for="ratingScore2">2</label>
<label for="ratingScore2">2</label> <input type="radio" id="ratingScore3" name="rating" value="3">
<label for="ratingScore3">3</label>
<input type="radio" id="ratingScore3" name="rating" value="3"> <input type="radio" id="ratingScore4" name="rating" value="4">
<label for="ratingScore3">3</label> <label for="ratingScore4">4</label>
<input type="radio" id="ratingScore5" name="rating" value="5">
<input type="radio" id="ratingScore4" name="rating" value="4"> <label for="ratingScore5">5</label>
<label for="ratingScore4">4</label> </div>
<div>
<input type="radio" id="ratingScore5" name="rating" value="5"> <button class="btn btn-submit" type="submit">Submit</button>
<label for="ratingScore5">5</label> </div>
</div> </fieldset>
<div> </form>
<button type="submit">Submit</button> </section>
</div> <!-- Rating state end -->
</fieldset> <!-- Thank you state start -->
</form> <section>
</section> <img src="images/illustration-thank-you.svg"
<!-- Rating state end --> alt="Image of an electronic box with paper coming out of it. A card is moving towards the box"
aria-hidden="true">
<!-- Thank you state start --> <p class="rating-component__rating">
<section> You selected <span id="ratingSpan"></span>
<img src="images/illustration-thank-you.svg" <!-- Add rating here --> out of 5
alt="Image of an electronic box with paper coming out of it. A card is moving towards the box" </p>
aria-hidden="true"> <h2 class="rating-component__header">Thank you!</h2>
<p> <p class="rating-component__body">
You selected <span></span> We appreciate you taking the time to give a rating. If you ever need more support,
<!-- Add rating here --> out of 5 don’t hesitate to get in touch!
</p> </p>
<h2>Thank you!</h2> </section>
<p> <!-- Thank you state end -->
We appreciate you taking the time to give a rating. If you ever need more support, </article>
don’t hesitate to get in touch!
</p>
</section>
<!-- Thank you state end -->
</main> </main>

22
projects/FrontendMentor/newbie/interactive-rating-component/js/script.js
View File

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