Skip to content
Submitted over 2 years ago

Responsive Rating Page

accessibility
ilonka011•90
@ilonka011
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

It was very difficult for me to make the rating work the way it was supposed to which didn't result in me solving the problem itself. After I submit my rating (by clicking on, let's say, 3 and then clicking the submit button), black screen pops up instead of the 'hidden' part of the html file content. I wonder how I could find the reason my code doesn't work the way it should. The specific part that messes things up is hard for me to find.

Code

Please log in to post a comment

Log in

Community feedback

  • F J Casado•60
    @Franche020

    Try to fix HTML, the <lang ="en"> was wrong, should be <html lang="en">

    and HTML structure was wrong

    I fix some things with the div locations and JS works, (Note, I remove SVG code to decrease amount of code) with this HTML should work

    <!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <link rel="stylesheet" href="style.css">
       <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">
<title>Rating Page</title>
    </head>
    <body>
        <div class="rating">
                
                <div class="svg-pic">
                    <svg width="17" height="16" xmlns="http://www.w3.org/2000/svg"></svg>
                </div>
          
            <h1>How did We Do?</h1>
            <p>Please let us know how we did with your support
                request. All feedback is appreciated to help us improve
                our offering!
            </p>
            <div class="flex-container">
                <div class="buttons" value="1"><p>1</p></div>
                <div class="buttons" value="2"><p>2</p></div>
                <div class="buttons" value="3"><p>3</p></div>
                <div class="buttons" value="4"><p>4</p></div>
                <div class="buttons" value="5"><p>5</p></div>
            </div>
            <button class="submitbtn">Submit</button>

        </div>
            </div>
            <div class="thanks rating hidden">
                <svg width="162" height="108" xmlns="http://www.w3.org/2000/svg"></svg>
                <button class="hbtn">You selected <span>4</span> out of 5</button>
                <h1 class="hh1">Thank You!</h1>
                <p class="hp">We appreciate you taking the time to give a 
                    rating. If you ever need more support, don't 
                    hesitate to get in touch!
                </p>
            </div>
</body>
</html>

    Best wishes

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord