<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="<https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap>" rel="stylesheet">
        <link href="styles.css" rel="stylesheet">
        <title>Trivia!</title>
    </head>
    <main>
        <body>
            <div class="header">
                <h1>Trivia!</h1>
            </div>

            <div class="container">
                <div class="section">
                    <h2>Part 1: Multiple Choice </h2>
                        <h3> Does adidas still belongs to the dassler family? (adidas' creator family) </h3>
                            <hr>
                                    <button class="wrong" type="button">yes</button>
                                    <button class="wrong" type="button">some company shares </button>
                                    <button id="right" type="button">no</button>
                                    <p class="fd"></p>
                </div>
                <div class="section">
                    <h2>Part 2: Free Response</h2>
                    <h3>How many employees does adidas have in production and operations? (precision not required!)</h3>
                    <input id="answer">
                    <button id="answerButton"> Check Answer</button>
                    <p id="answerP"></p>
                    <button id="hint"> Hint please</button>
                    <ul> <li id="hintvalue"></li>
                    </ul>
                            <hr>
            <!-- TODO: Add free response question here -->
                </div>
            </div>
        </body>
            <script>

                // for turning buttons red
                const list = document.querySelectorAll(".wrong");
                for (let i of list)
                {
                    i.onclick = function(){
                    i.style.backgroundColor = "red";
                    document.querySelector(".fd").innerHTML = 'Incorrect';
                    console.log(i);
                    }
                }

                //logic for turning button green
                  document.querySelector("#right").onclick = function(){
                  document.querySelector("#right").style.backgroundColor = "green";
                  document.querySelector(".fd").innerHTML = 'Correct!';
                  }

                //logic for checking for correct value
                document.querySelector("#answerButton").addEventListener('click', function(){
                    let answer = document.querySelector("#answer").value;
                   if (answer >= 400 && answer <= 500)
                   {
                    document.querySelector("#answer").style.backgroundColor = "green";
                    document.querySelector("#answerP").innerHTML= 'Correct!';
                   }
                   else
                   {
                    document.querySelector("#answer").style.backgroundColor = "red";
                    document.querySelector("#answerP").innerHTML = 'Incorrect';
                   }
                });

                document.querySelector("#hint").addEventListener('click', function(){
                document.querySelector("#hintvalue").innerHTML = "there is +60000 empolyess at adidas"; 
                });

            </script>
         </main>
</html>