<html>

<head>
    <title>JavaScript</title>
    <link rel="stylesheet" type="text/css" href="style.css"> </head>

<body>
    <div class="output"></div>
    <input type="number" value="100">
    <button type="button">Tip 1</button>
    <script>
        const button = document.querySelector("button");
        const output = document.querySelector(".output");
        console.log(button);
        button.addEventListener("click", function () {
            const cost = document.querySelector("input");
            console.log(cost.value * 0.15);
            let tip = (cost.value * 0.15).toFixed(2);
            let temp = `<h1>You should tip $${tip} on $${cost.value}</h1>`;
            output.innerHTML = temp;
        })
    </script>
</body>

</html>