<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device --> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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" defer></script> <title>Frontend Mentor | Interactive rating component</title> <!-- Feel free to remove these styles or customise in your own stylesheet 👍 --> <!-- <style> .attribution { font-size: 11px; text-align: center; } .attribution a { color: hsl(228, 45%, 44%); } </style> --> </head> <body> <main> <h1 class="visually-hidden">Interactive Rating Compoment Challenge Solution</h1> <article class="rating-component"> <!-- Rating state start --> <section class="rating-component-front" id="rating-component-front"> <img class="star-icon" src="images/icon-star.svg" alt="Image of a Star" aria-hidden="true"> <h2 class="header rating-component__header">How did we do?</h2> <p class="body 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 class="radio_container"> <input type="radio" id="ratingScore1" name="rating" value="1"> <label class="ratingForm__label" for="ratingScore1">1</label> <input type="radio" id="ratingScore2" name="rating" value="2"> <label class="ratingForm__label" for="ratingScore2">2</label> <input type="radio" id="ratingScore3" name="rating" value="3"> <label class="ratingForm__label" for="ratingScore3">3</label> <input type="radio" id="ratingScore4" name="rating" value="4"> <label class="ratingForm__label" for="ratingScore4">4</label> <input type="radio" id="ratingScore5" name="rating" value="5"> <label class="ratingForm__label" for="ratingScore5">5</label> </div> <div> <button id="buttonSubmit" class="btn btn-submit" type="submit">Submit</button> </div> </fieldset> </form> </section> <!-- Rating state end --> <!-- Thank you state start --> <section class="rating-component-back hidden" id="rating-component-back"> <img class="thank-you-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-result"> You selected <span id="ratingSpan"></span> <!-- Add rating here --> out of 5 </p> <h2 class="header rating-component__header-submitted">Thank you!</h2> <p class="body rating-component__body-submitted"> 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> <!-- <footer> <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>. </div> </footer> --> </body> </html>