JavaScript WEB 114 Final

Your final project challenge: To use all of the objects, methods, properties, events, functions, and programming constructs you've learned in WEB 114, JavaScript I, to create a JavaScript game in a web page about JavaScript!

html issues are in blue

css issues are in green

JavaScript issues are in red

General instructions are in black.

General Steps:

1. Plan and break down the requirements of this project into smaller tasks that you can demonstrate with HTML and JavaScript.
2. Your JavaScript game needs to have JavaScript as the subject of the entire game, but you might also want to wrap it up with a creative theme that reflects your own creative juices. What are you into? Animals, sports, super heros, travel, children? Your game must be professional, but you can also dress it up with a creative theme.
3. Keep building your web page and modifying it with JavaScript until all requirements are accomplished.
4. Once the HTML and JavaScript are working, write CSS to add a pleasing and responsive web site per the details below as well as the amount of time and effort you want to put into this.
5. For grading purposes, put your efforts into knocking off all of the JavaScript requirements below. But yes, to allow your individuality and creative juices shine, also work hard on your theme so that the wording of your questions, your images, and your styles raise your "game" as exciting as desired.

Specifics:

1. Create a well-formed, semantically correct html page. Include appropriate wireframe tags.
2. Include a div to wrap all content in the body.
3. Set the width of wrapper div to less than 100% and center the div.
4. Review the list of required items below, incorporating them into your JavaScript game.
5. Validate your html.
6. Validate your css.
7. Spell check all content.
8. Your page should follow responsive web design principles.
   • All measurements should be flexible. (em and % or other responsive units of measure).
   • Images should be flexible. e.g. { max-width: 100% }, no height= or width= attributes in html. Incorporate at least two images in your game!
   • meta viewport tag should be added. <meta name="viewport" content="width=device-width, initial-scale=1.0">
   • Two media queries for tablet and phone size should be added. I don't care if you code it with max-width queries for a traditional approach or with min-width queries for a mobile-first approach, but the media queries should make significant and appropriate styling changes at the three basic screen sizes of mobile - tablet - laptop. Ideas:
     • 2 columns at laptop size, 1 column at tablet/phone
     • not full width at laptop size, use more width at tablet, use full width at phone size
     • darker backgrounds / sharper text contrast as the screen gets smaller
     • more content at laptop size, but hide non-critical content at smaller screen sizes
     • different navigation capabilities at smaller screen sizes
9. All css and JavaScript should be stored in external files.
10. All files should be properly documented with your name and the current date.
11. NOTE! You MUST present your project to the rest of the class to get full credit. I will announce at least 4 different options for this a couple weeks before the end of the semester. If none of those times works it is your responsibility to contact me to schedule an alternative time. No exceptions! Thanks!

Your game should demonstrate and use this list of JavaScript knowledge (but it is not limited to this list):

• As you are coding your game, include a JavaScript comment to identify each of these requirements in your external .js file.
• "use strict";
• document.getElementById("something1").textContent
• document.getElementById("something2").value
• document.getElementsByTagName("something3")
• document.getElementById("something4").className
• document.getElementById("something5").classList
• document.querySelectorAll(".something6")
• window.prompt() ...but only once, please!
• window.alert() ....but only once, please!
• let and const
• for
• if ... else
• while
• switch
• array
• create several custom functions to process your game
• addEventListener() to trigger all functions OR you can also use individual JavaScript event properties such as .onclick and assign a function to that property
• Do NOT use any JavaScript inside of HTML opening tags. Do NOT use the "on" HTML attributes such as onclick!
• use JavaScript to modify images
• console.log() to follow and debug your code -- leave these in the js file
• include the following operations, conditional operators, and logical operators
  • +   -   *   /   %   **
  • Differentiate the use of + to add versus concatenate.
  • ==   +=
  • ===   !=   !==
  • ++    --   
  • >   <   >=   <=
  • &&   ||

Some ideas you might want to incorporate into your game, as well as some final thoughts:

• Greet the person using your JavaScript game. Write messages to him/her throughout the experience.
• Test to check if a word entered in an input box is equal to a reserved JavaScript word.
• Test to check if an answer to a JavaScript assignment statement is correct.
• Test to check if an answer to a JavaScript comparison is true or false.
• Set a global variable to score the person's answers after each question and "score" him/her at the end of the game.
• Use input boxes type="text" to allow the user to enter and test different numbers.
• Use input radio type="radio" to create a multiple choice test question.
• Use <select> and <option> HTML elements to create a drop-down list of operators * / + - along with two text input elements to do math.
• Use <select> and <option> HTML elements to create a drop-down list of comparison operators <, <=, >, >=, ==, !==, ===, !=== to test for true false conditions.
• Use the className and classList properties to change text or background properties when a user does something right or wrong in the game.
• Use the .src property of a <img> element to display, hide or change images when a user does something right or wrong in the game. Be sure to also change the .alt property as appropriate.
• Use <select> and <option> HTML elements to create a drop-down list of comparison operators <, <=, >, >=, ==, !==, ===, !== to test for true false conditions.
• Be sure to use all of the JavaScript constructs in the JavaScript code itself. (Don't just ask a question about == versus ===. Use those operators in a meaningful way in the code.)
• Be sure that your JavaScript doesn't throw any errors in the Console.
• Be creative, but also be professional. If you're not sure if something is professional, it probably isn't.