index.html

<html>

<head>
    <title>Etch-a-Sketch</title>
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <h1>Etch-a-Sketch</h1>
    <div class="upperBar">
        <div class="sliderMaster">
            <div class="sliderTitle">
                <p>Grid size:</p>
                <div id="gridSize"></div>
            </div>
            
            <div class="slidecontainer">
                <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
            </div>
        </div>
        
        <div class="colorSelection">
            <div class="colorTitle">
                <p>Color selected:</p>
            </div>
            <div class="colorButtons">
                <button id="random"></button>
                <button id="black"></button>
                <button id="white"></button>   
            </div>

        </div>

    </div>
    
    <div class="container">
        <div class="sketchField"></div>
        <button id="resetButton">Start over again</button>
    </div>


</body>

<script src="app.js"></script>

</html>