index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Color Game</title>
    <link rel="stylesheet" href="colorGame.css" type="text/css">
    <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&display=swap" rel="stylesheet">
  </head>
  <body>
    <h1>Color <br><span id="color"></span> <br>guessing game!</h1>

    <div id="divider">
        <button id="reset">New Colors</button>
        <span id="message"></span>
        <input type="range" min="1" max="12" value="3" class="slider" id="difficulty">
    </div>
    <div id="container">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
  </body>
  <script type="text/javascript" src="colorGame.js"></script>
</html>