Some of you are coming into Web 2 straight out of Web 1, so you're ready to just push forward, but some of you haven't touched web development for 6 months... a year... a really long time.

This unit is meant to summarize the portions of Web1 that will be most important to Web 2. Design is far less important than it was before, but it's crucial to understand the basic HTML tags, CSS attributes, and simple layouts.

Games to refresh on CSS & Flexbox:

• CSS Diner

• Flexbox Froggy

• Flexbox Defense

The following lessons/challenges are learning resources. We may or may not use these resources, but they're great for your reference.

• Mozilla JS Fundamentals Curriculum - Official JS Curriculum by Mozilla

• Mozilla JS Tutorials - Official JS Topics by Mozilla

• W3Schools  JavaScript - W3Schools JS References

• JSChallenge - Beginner Friendly Javascript Exercises

Simple App Challenge

The following idea was developed by a West Salem High School student and I thought the idea was ingenious and wanted to incorporate it into our class as a simple 1st project

Write a simple app that contains 4 (or more) buttons - each button should have text of something they might be affraid of (like spiders, or heights). Ask the user which they're most afraid of and when they click on the item it should display that thing.

• Use the W3Schools ModalBox Example for this project. - Stop following the instructions when you reach the "Add Header and Footer" section.

This assignment will be walked through as a class with modifications made to follow how we'll divide code (HTML, CSS, JS), add event listeners, and process functions in the future.

Concepts Learned (Summary)

• Button Basics (Practice) Trigger a button

• Text Input Basics (Practice) Pull a single text value from a textbox

• Multiple Text Inputs (Practice) Pull values from multiple textboxes

• MadLibs (Graded) Create a basic MadLibs app.

• Text Input Test

• DOM Selector Challenges (3)

Concepts Learned (Summary)

• Number Basics (Practice) Pull #'s from text boxes (and make sure they're not text)

• Math Stuff (Graded) Pull 3 #'s from text boxes, convert to floats, do math stuff.

• Temperature Converter (Graded) Convert from Celsius to Fahrenheit and Kelvin

Maybe add a cipher to the mix?

Concepts Learned (summary)

• Random Basics Generate random #'s and do something with them on the page

• Dice Roll 2 dice and display their results

• Welcome Displays a different welcome message when loaded

• Heads Or Tails Get a name & heads/tails option from the user. Generate a random #, convert it to heads or tails, and tell the user if they're right or wrong. If, however, their name is <pick name here>, tell them "I'm not playing this game with you!" 

• Magic 8-Ball (Graded) Generate random responses when a button is pressed

• Rock Paper Scissors (Graded) Play Rock Paper Scissors against the computer

• High/Low Game (Graded) Play a number guessing game with the computer

• Other Math Write a Math Quizzing Application

• Additional project ideas

  • Shakespearean Insult Generator

  • Hobbit Name Generator

  • Dad Jokes

  • Homework/Quiz generator

  • Reverse Guess the Number

  • Binary Magic

• Text Scroll

This project helps you figure out how to use timers and String functions.

The goal of this is to create a color-changing effect over time.

How does it work?

1. Create a timer that triggers a function repeatedly (every 50ms)

2. Create 3 variables to represent your RGB values

   1. Set r to 255

   2. Set g to 0

   3. Set b to 0

3. When the function is triggered

   1. if r is less than 255 and g is 0 and b is 255

      1. increase r

   2. otherwise if r is 255 and g is 0 and b is greater than 0

      1. decrease b

   3. otherwise if r is 255 and g is less than 255 and blue is 0

      1. increase g

   4. otherwise if r is greater than 0 and g is 255 and b is 0

      1. decrease r

   5. otherwise if r is 0 and g is 255 and b is less than 255

      1. increase b

   6. otherwise if r is 0 and g is greater than 0 and b is 255

      1. decrease g

   7. otherwise

      1. increase r

      2. decrease g

      3. decrease b

4. Change the background color to the new RGB values.

document.body.style.backgroundColor = "rgb("+r+", "+g +", "+b+")";  

EC: Display the numeric color values for your R, G, and B values. I'm showing mine through a modal box.

Implement some app that utilizes a timer in some way different from what we've done already.

• Stopwatch

  • Start Button - Starts the timer (setInterval - suggestion: 50ms or less)

  • Stop Button - Stops the timer (clearsInterval)

  • Lap Button - Takes current time and adds it to the output times (+=)

  • Reset Button - Clears the timer, Clears the Output

• Digital Clock / Time Adjustment for regions

  • Figure out how to get the current time and display it.

  • Update the time frequently (at least every 1/2 second)

  • Do something based on the time (maybe have something change colors every second)

  • Allow the user to change the timezone to + or - the clock by 1 hour.

• Quiz

  • Have a set of questions, each with a set of 4 possible answers the user has to choose from.

  • Display the question at the top

  • Display the possible answers in a 2x2 grid

  • Have a countdown timer that stops the quiz if the user hasn't finished answering the questions by the end of the countdown.

• Typing Speed Test

  • Have the user type for x seconds.

  • Display the countdown

  • When the countdown reaches 0, lock the textbox.

  • Calculate the # of words per second.

  • Display results for the user.

• Explore HTML Canvas.

  • Build something with a canvas that utilizes a timer

    • A ball that moves every 1/x of a second, for example

Final projects vary from year to year. Some years it's a specific project. Sometimes I allow students to create their own projects (meeting some list of requirements).

The following Link is to the 2023 Quiz project I had students complete.

Whatever the project, you should be expected to:

1. Create a decent looking HTML/CSS app.

2. Reference elements in an HTML file (getElementById)

3. Add event listeners to text boxes and buttons (or other elements) - "click" & "keyup"

4. Pull content from elements (value, innerHTML, textContent, innerText)

5. Push content to elements (value, innerHTML, textContent, innerText)

6. Modify Strings (concatenation & String functions)

7. Turn text to numbers and perform mathematical operations to them

8. Generate random #'s

9. Generate lists and add items to, remove items from, and get items from that list

10. Use if statements to perform tasks

11. Use timers to make changes over time.

I might be missing something, but this should cover most of it.

Youtube - Web Dev Tutorials - 25 Beginner JS Projects

These videos will potentially be divided into the resources listed above, but are listed here for now to help me prepare the content for being divvied up.

These tutorials are great because the developer uses resources to improve design such as Bootstrap and ResponsiveDesignTesting

• #1 - Colors - A simple button that uses JavaScript to change the background-color (style manipulation ,lists).

• #2 - HEX Colors - Generate a random background color (Math.random, style manipulation, Loops, Lists)

• #3 - Random Quote Generator - Generates a random Quote (Array+Dictionary, Math.random, 

• ... More to come

JQuery allows us to simplify certain Javascript commands

The following 4 are summaries of important Javascript topics.

• W3Schools JQuery Selectors

• W3Schools JQuery HTML

• W3Schools JQuery CSS

• W3Schools JQuery DOM

This final link is the beginning of a much more detailed JQuery tutorial set:

• W3Schools JQuery Intro

• W3Schools JS For Loops - Typical #'d loop

• W3Schools JS For In - Loops through properties of an object

• W3Schools JS For Of - Loops through Values of a list

• W3Schools JS While Loops - Typical unknown # of loops

Each of the following is the beginning of a set of instructions related to Canvas.

• W3Schools Canvas Intro

• W3Schools Game Intro

• W3Schools Clock Intro

W3 Schools JS Cookies - Stored by the server

W3 Schools JS Web Storage API - Stored by the client