glebec / Javascript-Exercises-2

A few small websites for manipulating the DOM

Javascript Part 2 --> DOM Manipulation

Below you will find a list of exercises for the students to complete during Javascript Part 2. These exercises are focused on having the students create functions to manipulate the DOM and prepare for their final project.

Carousel -- (Advanced)

1. A scrolling carousel (automatically cycle through images)

Changing Header -- (Intermediate)

2. A changing text header (cycle through marketing-style slogans, e.g. "CoolService is loved by _______" (freelancers / go-getters / artists / bosses / athletes etc.)).

Tabbed Content -- (Intermediate)

3. Tabbed content (click to change view)

Modal -- (Intermediate)

4. Expanding content (click to open) Introduced a new way of using a function, with the keyword this

Form Input -- (Basic)

5. Something with reading a form input and changing the page content accordingly

Change Background -- (Basic)

6. Something with manipulating CSS styles, e.g. add a class .

Local Storage -- (Advanced)

7. To follow up on dark theme idea, using localstorage would be an advanced use case to avoid losing state on refresh; probably that's too much for this group tho.(would be esp. cool with a transition prop). Oh! Dark theme? That works

Scrolling -- (Intermediate)

8. Doing something on window resize, or scroll, not sure what