💻
[JS] The Interactive Web
CS4All Resources
  • Curriculum Overview
  • 📬Leave Us Feedback
  • Unit 1: HTML & CSS: Good vs Bad Design
    • 🔮Unit 1 Overview
    • U1LA1.1: Building with HTML
    • U1LA1.2: Structuring Pages with Divs, Classes, IDs
    • 🗃️U1LA1 Mini Project: My Fan Page Part 1
    • U1LA2.1: Styling your page with CSS
    • 🗃️U1LA2 Lab: My Fan Page Part 2
    • U1LA3.1: Layout with CSS Grid
    • 🗃️U1LA3.1 Lab: Grid Interview
    • U1LA3.2: Layout with Flexbox
    • 🗃️U1LA3.2 Lab: Flexbox Interview
    • U1LA4.1: Focus on Design in HTML && CSS
    • U1LA4.2: Breakpoint Lesson
    • 🗃️U1LA4 Lab: ChefHub Goes Mobile
    • U1LA5.1: Creating Accessible Websites
    • 🗃️U1LA5 Lab: What Do You Hear? Make it Accessible
    • U1LA6.1: Working with CSS Frameworks - Bulma
    • 🗃️U1LA6 Lab: CheeseBook Computers with Bulma
    • 🎨Unit 1 Final Project: My Travel Page
  • Unit 2: Intro to DOM Manipulation Basics
    • 🔮Unit 2 Overview
    • U2LA1: JavaScript Essentials - Variables to Arrow Functions
    • 🗃️U2LA1 Mini Project: JavaScript Essentials
    • U2LA2.1: DOM Manipulation with JavaScript Click Interactions
    • U2LA2.2: Accessible Shopping Cart
    • 🗃️U2LA2 Mini Project: The National Horse Race
    • U2LA3: Inputs and Conditionals
    • 🗃️U2LA3 Mini Project: The Interactive Site
    • U2LA4: Add, Remove, and Toggle
    • 🗃️U2LA4 Mini Project: The Cross-Wired Lightbulbs Puzzle
    • 🎨Unit 2 Final Project: Input-Output Helper Site
  • Unit 3: Advanced DOM
    • 🔮Unit 3 Overview
    • U3LA1: JavaScript Arrays, Iteration, and Objects
    • 🗃️U3LA1 Mini Project: Arrays, Iteration, and Objects Lab
    • U3LA2.1: JavaScript Essentials - Variables to Arrow Functions
    • U3LA2.2: Typeahead Search
    • U3LA2.3: Fuzzy Matching - Autocorrect
    • 🗃️U3LA2 Mini Project: Fuzzy Matching Personality Quiz
    • U3LA3.1 JavaScript Mutability
    • U3LA3.2: Advanced DOM Manipulation
    • 🗃️U3LA3 Mini Project: Card Organizer
    • U3LA4: Local Storage
    • 🎨Unit Final/U3LA4 Project: Twenty in Ten Game
  • Unit 4: Intro to APIs
    • 🔮Unit 4 Overview
    • U4LA1: Intro to APIs
    • U4LA1.2: JavaScript Arrays, Iteration, and Objects
    • 🗃️U4LA1 Mini Project: Deck of Cards: Higher Lower
    • U4LA2: Connecting to Closed APIs using the Giphy API
    • 🗃️U4LA2 Mini Project: DIY Dictionary
    • U4LA3.1: APIs vs SDKs
    • U4LA3.2: Requests on the Web - GET & POST
    • 🎨Unit 4 Final Project: API GUIs
  • Unit 5: Simple Websockets and Final Project
    • 🔮Unit 5 Overview
    • U5LA1: Servers and Express
    • 🗃️U5LA1 Mini Project: Express Lab
    • U5LA2: Intro to WebSockets
    • 🗃️U5LA2 Mini Project: Simple Sockets Lab
    • U5LA3: Socket Servers
    • 🗃️U5LA3 Mini Project: Socket Server Lab
    • U5LA4 [TBD]
    • 🎨Course Final Project Guide
Powered by GitBook
On this page
  • Teacher Notes
  • Prompt
  • Exemplar (teacher's view only)
  • Culturally Responsive Best Practice
  • Extra Help?
  1. Unit 2: Intro to DOM Manipulation Basics

U2LA1 Mini Project: JavaScript Essentials

How can I store and manipulate data to later be used in various ways throughout my website?

PreviousU2LA1: JavaScript Essentials - Variables to Arrow FunctionsNextU2LA2.1: DOM Manipulation with JavaScript Click Interactions

Last updated 1 year ago

Teacher Notes

This vanilla javascript lab is located exclusively in the () is a series of challenges for students to get familiar with javascript essential topics from variable arithmetics to functions with conditional statements. The extensions are included but not labeled at the bottom of the script.js. They require researching the Pythagorean theorem formula and researching recursive functions to be completed.

Students should utilize the Starter Code ( | ) for this project.

Prompt

For this lab, put together what you know so far about javascript and try the challenges in the ). Use the resources below under if you get stuck. When the time's up come back here for some reflection questions.

Exemplar (teacher's view only)

Take a look at for the answer key to the javascript challenges.

Culturally Responsive Best Practice

In the previous unit, students learned to build and add style to websites that they were, unfortunately, unable to interact with. Consider starting this unit by having students look for websites that they can interact with. Have them identify what is happening in their own words and why they enjoy interacting with the website they found. In this way, students can find something they can relate to that will demonstrate how vanilla javascript can potentially add value to the websites they build in the near future.

Extra Help?

Use the following resources to see examples of how to implement the methods, functions and other concepts in the script.js:

  • Math.floor(), Math.sqrt(), and .

  • Converting to

  • (aka Formatted Strings)

  • [Super Challenge]

Reflection Questions:

  • What was the most challenging part of the lab? What was the part you're most proud of?

  • What was one point in the challenges you got stuck? What did you do to unstick?

  • Why might what you've learned today be useful for making websites in the future?

🗃️
script.js
repl.it version
repl.it
github
Extra Help
this finished example
other Math methods
String methods
Arrow functions
Template Literals
Recursive Functions