index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Events</title>
</head>

<body>
    <h1>Dom Doma dom dom Events</h1>
    <!-- option 1 for event handler -->
    <button onclick="console.log(7)">Click me</button>
    <button onclick="console.log(63)">Another button</button>
    <button id="" onclick="console.log('i am clicked')">third button</button>
    <input type="text">
    <br>
    <!-- option 2 for click event handler -->
    <button onclick="makeYellow()">Make Yellow</button>
    <button onclick="makeRed()">Make Red</button>
    <br>
    <!-- option 3: get element by id and then set onclick to a function -->
    <button id="btn-make-blue">Make Blue</button>
    <button id="btn-make-purple">Make Purple</button>
    

    <br>
    <!-- option 4: addEventListener -->
    <button id="btn-make-green">Make Green</button>
    <button id="btn-make-gold">Make gold</button>
    <script>
        // document.getElementById().addEventListener('event type', handler)

        // document.getElementById('btn-make-green').addEventListener('click', function makeGreen() {

        // })

        document.getElementById('btn-make-green').addEventListener('click', function makeGreen() {
            document.body.style.backgroundColor = 'green';
        })

        document.getElementById('btn-make-gold')
            .addEventListener('click', function (){
                document.body.style.backgroundColor = 'goldenrod'
            })

    </script>
    <script src="js/events.js"></script>
</body>

</html>