111 Project 5
CIS 111 CODING THE WEBSTACK
CIS 111 Cross-Platform Web Development w/JavaScript
CIS 111 Web App Development Project 5
Due:
24:00 T 11/29 (FC)
PROJECT LEARNING OUTCOMES
After completing this project, you will understand
• JSON syntax
• Radio buttons
• DOM-API properties and methods
CIS 111
Project Requirements
Due:
24:00 Tue 11/29 (FC)
PROJECT REQUIREMENTS
For best results, solve the following problems in order.
This project will be discussed in detail in class; that is the best place to ask questions about the project.
1. [20 pts] 111/p5/lab-week-8.html and lab-week-8.js.
See the Lab Week 8 document in Canvas for instructions. In addition, Add a button to lab-week-8.html labeled, Change List Type. When this button is clicked the list’s type attribute is set to the value entered by the user in the text box. Legal values are 1, A, a, I, i. (setAttribute).
2. [20 pts] 111/p5/functions.js.
A) Write a function ltrToNATO that accepts a character (upper- or lower-case) and returns the NATO Phonetic for that letter:
ltrToNATO(‘a’) => ‘Alpha’
ltrToNATO(‘9’) => ‘Niner’
ltrToNATO(‘W’) => ‘Whiskey’
Use a JSON object to store letters, digits, and their NATO phonetics.
B) Write a function wordToNATO1 that accepts a word, and returns a string consisting of the NATO phonetic for each letter. This function must call ltrToNATO.
wordToNATO1(‘Duck’) => ‘Delta Uniform Charley Kilo’
wordToNATO1(‘CIS111’) => ‘Charley Hotel Sierra One One One’
C) Write a function wordToNATO2 that accepts a word or phrase, and returns a string consisting of the NATO phonetic for each letter. This function must call ltrToNATO.
2
wordToNATO2(‘EL-1234’) => ‘Echo Lima – One Two Three Four’
wordToNATO2(‘7 Up’) => ‘Seven Uniform Papa’
3. [20 pts] 111/p5/NATO-Mach.html and NATO-Mach.js.
A) Create a web page NATO-Mach.html, that looks like the example, below, with a text box, a button, and a related image (it does not have to the image shown).
place your call. Examples: MURPHY-761, MADISON-761.
4. [40 pts] 111/p5/cardMach.html and cardMach.js.
A) Create a Card Machine web page, with this Ace image on it:
B) You are welcome to style the web page with cardMach.css, but are not required to do so. If you do use the .css file:
i) You do not have to add an html form to the page. This is optional.
ii) If you use a form, add a fieldset to the top of the form, as shown.
iii) If you use a form, add a legend to the fieldset.
iv) If you use a form, place the radio buttons in the fieldset.
When telephone numbers did not start with numbers,
phone-numbers followed the 2L-5N (two letters, five
numbers) or 3L-4N rule. The letters were abbreviations for
telephone exchange-names like ‘PENnsylvania’, ‘TREmont’
and ‘ELDorado’. Only the first two or three letters of the
exchange name were dialed, or spoken to the operator, to
3
v) Place the click buttons just after the form, not in the form.
getSuit(1) => Hearts
C) What the click-buttons do:
i) Deal the Card. The user selects a card by clicking on a rank and a suit. When Deal the Card is clicked, the corresponding card is verbalized on the web page
ii) Deal a Random Card. The radio buttons are ignored but a card is verbalized at random. Hint: generate two random numbers and pass them to getRank and getSuit.
iii) Deal a Hand. The radio buttons are ignored. Five cards are dealt at random and verbalized, separated by commas. The cards must be unique, without any pairs. Hint: Use an array to store each unique card that is dealt. To determine if a card is unique, first check the array using the Array indexOf method.
iv) The reset button clears all selected radio buttons. Hint: The DOM API includes a form.reset method. If you don’t use a form, the DOM API includes a Location Reload Method.
Hint: write a function called getRank that accepts an integer 1..13, and returns the corresponding rank:
getRank(1) => “Ace”
Write a function named getSuit that accepts an integer 1..4, and returns the corresponding suit:
4
The 111 WebDev Workflow
Here is the CIS 111 Web Development Workflow. Memorize these 4 steps.
1. Edit. Use the Sublime Text code editor to create a web page (.html and .js files) on
your computer.
2. Preview. Open the web page on your computer using Chrome. When it is perfect, and not before, go to the next step.
3. Upload. Move all project files (.html, .js, .png, .jpg, …) to the server using CyberDuck. This is also known as Publishing or Deploying the web page.
4. Test. Use Chrome to open your web page that is on the server. Do not use CyberDuck– use Chrome.
Type http://pages.uoregon.edu/yourDuckID/111/ into Chrome to open the web page that is on the server. Use your actual DuckID in the URL.
Make sure that this web page is correct, because that is what will be graded.
IMPORTANT: Read Beware the Browser Cache.
Related Glossary Terms
Drag related terms here
Index Find Term