Animate Body Background

JavaScript
1

I must be calling the syntax wrong… on either line 6
var boddy = $('body');
or line 25
$('body').animate({backgroundColor: red}, 1000 );
or even
boddy.animate({backgroundColor: red}, 1000 );
I am loading jquey and jqueryUI in the CodePen,
am I missing something else?

var c = 0;
var simon_sSequence = [];
var player_sInput = [];
const playerInput = document.getElementById("player_sInput");
const pads = document.querySelectorAll(".padz");
var boddy = $('body');
// Convert the pad list to an array so that
// we can iterate over it using .forEach()
Array.from(pads).forEach((pad, index) => {
  // Get the associated audio element nested
  // in the pad-div
  const audio = pad.querySelector("audio");

  // Add a click listener to each pad which
  // will play the audio, push the index to
  // the user input array, and update the span

  pad.addEventListener("click", () => {
    player_sInput.push(index);
    console.log(player_sInput);
    console.log(simon_sSequence);

    if (player_sInput[c] !== simon_sSequence[c]) {
    
      $('body').animate({backgroundColor: red}, 1000 );
      console.log("wrong");
    
    } else {
      //end of if
      audio.play();

      playerInput.textContent = "Player's reply " + player_sInput;
      c++;
      //console.log(c);
    } //end of else
  }); //end of EventListener
}); //end of Array.from(pads).forEach((pad, index)

function audioBlack() {
  //generate a random number
  //push random number to simon_sSequence
  simon_sSequence.push(Math.floor(Math.random() * 4)); //floor or four?
  //console.log(simon_sSequence);
  $("#simon_sSequence").text("Simon says " + simon_sSequence);
  //  $("#player_sInput").text("Player's reply " +player_sInput);
  //for each in the array set time interval(300ms);
  //dipslay hover effect
  //play pad sound
  var audio = document.getElementById("audioBlue");
  audio.play();
  //clear player's input for this turn
  player_sInput = [];
  c = 0;
}

https://codepen.io/TurtleWolf/pen/ZypXOg?editors=0011

2

When you say you want to animate the body background, what are you expecting to happen? As in, visually, what would the user see?

3

I thought it would at least turn from grey to red… and then the next step I was going to let it fade back to grey. It’s showing the ‘wrong’ in the console log right below, so I know it’s reading it…

4

mainly I was missing jquery.Color… and then,

    if (player_sInput[c] !== simon_sSequence[c]) {
      $("body").animate(
        {
          backgroundColor: "red"
        },
        300
      );
            $("body").animate(
        {
          backgroundColor: "gray"
        },
        2000
      );
      console.log("wrong");
      audioError.play(); //   audioError.play();   // stuck here
      $("body").animate(
        {
          background: grey
        },
        1000
      );
    } else {
5

Still stuck on the audio

6

Where is audioError defined?

7

line 18 in the javascript…
var audioError = document.querySelector("audioE"); // stuck here

8

There’s no audioE element… how does the corresponding markup look like?

9

Sorry, I thought I posted the HTML, it’s on line 41, almost the very bottom, just before the closing body tag.

<body>
  <div id="container">
    <div id="green" class="pad padz">
      <!-- The classes padz (4) are used in the HTML but not found in any stylesheet. -->
      <audio preload="auto" id="audioGreen" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" />
      </audio>
    </div>
    <!-- upper left -->

    <div id="red" class="pad padz">
      <audio preload="auto" id="audioRed" src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" />
      </audio>
    </div>
    <!-- upper right -->

    <div id="yellow" class="pad padz">
      <audio preload="auto" id="audioYellow" src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" />
      </audio>
    </div>
    <!-- lower left -->

    <div id="blue" class="pad padz">
      <audio preload="auto" id="audioBlue" src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" />
      </audio>
    </div>
    <!-- lower right -->

    <div id="startTapper" class="pad" onclick="audioBlack()">
      <!-- An 'onclick' attribute was found in the HTML. Use external scripts for event binding instead. -->
      <!-- convert to an event handler -->
      <div>
        <span id="simon_sSequence">Shall we</span>
        <span class="spacer"></span>
        <span id="player_sInput">play a game?</span>
      </div>
      <!-- end of "display" -->
    </div>
    <!-- end of "startTapper" -->
  </div>
  <!-- end of "container" -->
      <audio preload="auto" id="audioE" src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" />
      </audio>
</body>
10

Ah okay. Well document.querySelector("audioE") queries for an element with the tag name audioE – for the ID, use #audioE (just like CSS selectors).

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.