Buttons are gone

So I was supposed to make a calculator today, a web one, with JS on it, complete with CSS and all. I recently rewrote all my JS cries and I rechecked some stuff. Now the calculator buttons are gone.

I wanted the website to have a calculator on the page, and it used to have buttons. Strangely aligned, but still buttons. But all I did was change one little thing in the HTML code, and now the buttons are gone.

Replit: https://replit.com/@MiguelBaltazar1/epicalculator

Solution

You need to make the "keys" class a child of the div element with the id of "calculator". Below is the updated HTML to fix the problem.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Calculator, apparently</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body onload="load()">
    <header class="header">
        <h1>this is a calculator.</h1>
    </header>
    <div id="calculator">
        <div class="top">
            <span id="clear">C</span>
            <div id="screen">1234567890</div>
        </div>
        <div class="keys">
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span class="operator">+</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span class="operator">-</span>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span class="operator">÷</span>
            <span>0</span>
            <span>.</span>
            <span class="eval">=</span>
            <span class="operator">x</span>
        </div>
        <script type="text/javascript" src="script.js"></script>
</body>

</html>