<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <script src="tones.js"></script>
    <script src="script.js"></script>
    <script>

      function addFigure (shape, color, note) {
        var figure = document.createElement("div")
        figure.className = shape + " " + color
        figure.onmouseover = function () { playTone(note) }
        document.body.appendChild(figure)
      }

    </script>
    <title>Choose Your Own Instrument</title>
  </head>
  <body>
  </body>
  <script>

    // backgrounds: "sky", "sea", "bubble-gum", "fireball", "sunset", "fuji"
    // shapes: "triangle", "circle", "square"
    // colors: red, yellow, blue, orange, green, purple, pink, black

    document.body.className = "sky"

    var figure1 = document.createElement("div")
    figure1.className = "circle red"
    figure1.onmouseover = function () { playTone("c") }
    document.body.appendChild(figure1)


  </script>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <script src="tones.js"></script>
    <script src="script.js"></script>
    <script>

      function addFigure (shape, color, note) {
        var figure = document.createElement("div")
        figure.className = shape + " " + color
        figure.onmouseover = function () { playTone(note) }
        document.body.appendChild(figure)
      }

    </script>
    <title>Choose Your Own Instrument</title>
  </head>
  <body>
  </body>
  <script>

    // backgrounds: "sky", "sea", "bubble-gum", "fireball", "sunset", "fuji"
    // shapes: "triangle", "circle", "square"
    // colors: "red", "yellow", "blue", "orange", "green", "purple", "pink", "black"

    document.body.className = "sky"

    var figure1 = document.createElement("div")
    figure1.className = "circle red"
    figure1.onmouseover = function () { playTone("c") }
    document.body.appendChild(figure1)


  </script>
</html>

Add quotes to the colors
Add quotes to the colors