Scribd
Upload
44 views5 pages

Project 3

The document describes Project 3 which involves creating a web page that displays a randomly selected playing card after a countdown timer. It provides requirements to create HTML and CSS files, implement properties and methods for a card object, and add functionality for a countdown timer and random card images. Extra credit is offered for modifying the code to deal a random hand of cards.

Uploaded by

avery
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
44 views5 pages

Project 3

The document describes Project 3 which involves creating a web page that displays a randomly selected playing card after a countdown timer. It provides requirements to create HTML and CSS files, implement properties and methods for a card object, and add functionality for a countdown timer and random card images. Extra credit is offered for modifying the code to deal a random hand of cards.

Uploaded by

avery
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

CIS 111

Introduction to Web Programming


Project 3 – Objects
1. Goals
Please complete this project yourself. While you are encouraged to have high-level
discussions with your peers, you must be able to complete the details of this project on
your own. You may perform Google searches, copy the results' ideas, and even copy
one or two lines of code.
Reminder: You must upload your work to Coding Rooms. We will grade based on
what you uploaded to your Project 3’s workspace.
Late Policy: All projects are due by 11:59 pm of the stated deadline. There are no
extensions; you must upload projects on time.

1.1. Learning Objectives


As part of this project, you will practice the following:

• creating and using object expressions with properties and methods


• using the this object when referencing properties and methods within an
object
• encapsulating functionality within methods and general code organization
• using the querySelector() and querySelectorAll() method
• setting element properties using textContent property and the style
object
• using NodeList as an array to set element properties
• using timer methods setInterval() and clearInterval()
• loading an image using JavaScript
• generating pseudo-random numbers
• generating arrays using split()
• using Object.create()
• reacting to timer callback events
• applying debugging techniques to track down programming and logic errors
using the Chrome DevTools debugger

Tip: Refer to the techniques described in MDN (https://tinyurl.com/yz38da2x) to


declare an object, using Object.create(), declaring properties and functions within
an object, and referencing object properties and methods using the this object (as in
a constructor – https://tinyurl.com/2p86z4pp).
1.2. Project Overview
In this project, you will create a web page that displays a randomly selected playing
card after an elapsed time. You will use a timer to implement a countdown; the script
will show the countdown value.
The basic idea of this program is to use setInterval() to call a function every
second to count down to 0. When the countdown reaches 0, your program will
randomly select a card. To display the selected card, we need to construct its image
filename, i.e., build a string that contains the filename.
The random card image filename consists of a card (2, 3, 4, 5, 6, 7, 8, 9, 0, J, Q, K, A)
and a suit (C, S, H, D). For the card, note that the "0" represents 10. Randomly select
the card and the suit by placing the cards and suits in two separate arrays, generating
a random index number for each array to choose the card and suit. The following figure
shows an example of the countdown at the end and a randomly generated card. (You
can find the card images on Canvas and Coding Rooms.)

Remember that you must store all your work for this project in your 111/p3 folder on
your local computer, then upload (or copy and paste) to your Project 3 workspace on
Coding Rooms.

2. Requirements
Complete each of the following requirements.

2.1. [10 pts] Products from Lab 6


After completing Lab 6, upload the six required files to your workspace on Coding
Rooms. Those files are lab-6-bold.html, lab-6-bold.js,
lab-6-random.html, lab-6-random.js, lab-6-color.html, and lab-6-
color.js)

2.2. [10 pts] p3.html


Create an HTML file called p3.html with the following contents:

i. Set the title to "Project 3".


ii. In the head element, add a link element with an href attribute linking to the
file p3.css.
iii. Add a level 1 heading (h1) element with the content as "Project 3".
iv. Add a div element with the id attribute "countDownDiv" and the content
"Countdown:". After the content, add an empty span element with an id
attribute "countDownSpan".
v. Add a div element containing an img element, with the img id attribute
"card".
vi. At the end of the body, add a script element with an src attribute linking to
the file p3.js.

Create a file called p3.css with the following contents:

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

2.3. [0 pts] cards and p3.js


Download the card images compressed file. Un-compress the card images into a
subfolder cards, so its path will be ./cards.

Download the JavaScript file called p3.js from Coding Rooms or Canvas and store it
in your 111/p3 folder. This file is the basis for this project's activities.

2.4. [10 pts] Object Properties


Implement the five properties of the card object following the instructions in the TODO
comments included in the file p3.js.

2.5. [40 pts] Countdown Timer


Implement and test the countdown timer, following the comments provided in the file
p3.js. Provide the countdown timer’s functionality card object methods:

i. startCountDownTimer() (p3.js already provides that method.)


ii. stopCountDownTimer().
iii. displayCountDown().
iv. countDown().
2.6. [30 pts] Random Card Images
Implement and test the random image functionality, following the comments provided
in the file p3.js. The following card object methods must provide this functionality:

i. getRandomCard()
ii. getRandomSuit()
iii. loadImage()

2.7. [20 XC pts] Extra Credit – Deal a Hand


Modify the file p3.js to add a new method loadHand. This method will display not
one random card, but five. The dealt hand must show no repeated cards. Save your
changes to the file xc.js.

Also, modify p3.html to work with a button instead of a timer. That is, the web page
shows a button, which, upon clicking, shows the randomly generated hand at a
designated container in the web page. Save this new web page to the file xc.html.

2.8. Upload and Test


Remember you must upload all of Project 3’s items to Coding Rooms.
Your submission must contain the following files for this project:

• lab-6-bold.html, lab-6-bold.js, lab-6-random.html,


lab-6-random.js, lab-6-color.html, and lab-6-color.js
• p3.html, p3.js, and p3.css
• Optional xc.html and xc.js
2.9. Remember

• Lab 1 session and the document on


Canvas->Files->labs->lab-1->coding-rooms.pdf briefly describes
how to interact with Coding Rooms.
• Do not change any variable, function, or file name. Keep them as requested in
this document.
• The grader is case-sensitive.
• Read this document carefully and make sure your solution complies with the
requirements.
• Printing is not returning.

Note: This assignment will be updated with clarifications based on your questions.

You might also like