Step 2. 111/p4/p4.html

A. Create an HTML file called p4.html in your 111/p4 folder.

B. Set the title to Project 4.

C. Add a style block within the head with the following selector content:

img { float: left; padding: 5px; width: 5%; }

D. Add a level 1 heading element with the content as Project 4.

E. Add a div element with id attribute "countDownDiv" and the content Countdown:. After the content, add an empty span element with id attribute "countDownSpan".

F. Add a div element containing an img element, with img id attribute "card".

G. Add a script element with src attribute "p4.js".

Step 3. 111/p4/cards

A. Download the card images compressed file. Un-compress the card images into a subfolder cards, so the path to the cards folder will be 111/p4/cards.

Step 4. 111/p4/p4.js

A. Create an external JavaScript file called p4.js in your 111/p4 folder.

Step 5. 111/p4/p4.js

A. Create an external JavaScript file called p4.js in your 111/p4 folder.

B. Declare an object expression cardObject using the following code:

const cardObject = { /* TODO [C]: Add the following properties (remember to start properties with an underscore): - timer ID property used to stop timer, initialized to null, example: _intervalID: null, - initial counter property starting value - counter property that will count down to zero - cards array initialized using a string and the split() method - suits array initialized using a string and the split() method */ getRandomCard: function() { // TODO [H]: Return a random card value from the cards array // TODO [H]: If card is 0, then use 10 to account for actual image file  // Hint: Generate a random array index value for the cards array }, getRandomSuit: function() { // TODO [I]: Return a random suit value from the suits array  // Hint: Generate a random array index value for the suits array }, loadImages: function() { // TODO [J]: Update img element src attribute with a randomly generated card and suit image file name  // Hint: You will need to call getRandomCard() and getRandomSuit() to create image filename }, countDown: function() { // TODO [G]: Decrement and display count down value, and upon reaching 0 stop timer and display card image  // Hint: You will need to call displayCountdown(), stopCountDownTimer() and loadImages() }, displayCountDown: function() { // TODO [F]: Update countdown span element with current countdown value  // Hint: Get a reference to count down span and set the span textContent property with the counter }, startCountDownTimer: function(start) { // TODO [D]: Start timer, setting any appropriate object properties, with an interval of one second this._startCount = start; this._counter = this._startCount; this.displayCountDown(); this._intervalID = setInterval(this.countDown.bind(this), 1000); }, stopCountDownTimer: function() { // TODO [E]: Stop timer using object timer property  // Hint: Will need to call clearInterval() }, getRandomNumber: function(min, max) { // Generate a random integer between min (included) and max (excluded) let randomNum = Math.random() * (max - min) + min; return Math.floor(randomNum); } } const timedCard = Object.create(cardObject); timedCard.startCountDownTimer(5);

C. Implement the five object properties per instructions in the comments.

D. Implement and test startCountDownTimer() method per comments. Note: The method code has already been provided.

E. Implement and test stopCountDownTimer() method per comments.

F. Implement and test displayCountDown() method per comments.

G. Implement and test countDown() method per comments.

H. Implement and test getRandomCard() method per comments.

I. Implement and test getRandomSuit() method per comments.

J. Implement and test loadImages() method per comments.