JavaScript 102 Exercises
These exercises combine arrays, loops, and fetch. Each one builds on what you have just learned.
Exercise 1 — Array Operations
In a plain HTML file, create an array called scores with five numbers. Then using console.log():
- Print the first and last item
- Print the total length
- Add two more scores using
.push() - Print the new length
All output goes to the console. Open F12 to check it.
Exercise 2 — Loop and Display
Create an array of five objects — each with a title and a year. Use films, books, or anything you know.
Loop through the array and display each title and year on the page. Wrap each one in a <p> tag and put them all inside a <div id="output">. Apply Bootstrap to make it look clean.
Exercise 3 — Fetch and Display
Fetch data from https://jsonplaceholder.typicode.com/users.
Display each user's name and email in a Bootstrap-styled table. The table should have two columns — Name and Email — and one row per user.
Exercise 4 — Fetch on a Button Click
Instead of fetching immediately when the page loads, only fetch when the user clicks a button.
Add a button: <button onclick="loadUsers()">Load Users</button>. Define loadUsers() in your script. Inside it, do the fetch and build the table.
Then add a second button: <button onclick="clearUsers()">Clear</button>. Define clearUsers() to set the table body's .innerHTML to "".
Get both buttons working together — load fills the table, clear empties it.
Challenge
For Exercise 4 — what happens if the user clicks Load twice? The table rows appear twice. Add a clearUsers() call at the very start of loadUsers() so it always clears first before filling. Now Load is safe to click multiple times.