JS Friday exercise

Friday Exercise – Make the Carpool App Interactive

Goal

Today you will add JavaScript interactivity to your existing carpool application. Your app already has HTML and CSS. Now you will:

Read values from a Find a Ride form
Show a live summary of the search
Generate trip results dynamically from JavaScript data
Open a modal with trip details
Allow users to join a ride

If you do not have the carpool app, you can use this version of the carpool project

You are encouraged to find creative ways of personalizing the following steps so it fits better for your carpool project.

Level 1 – Make the Form Interactive

Start by making the Find a Ride form dynamic.

Step 1 – Create application state

Create a state object in your app.js:

const state = {
  role: "",
  from: "",
  to: "",
  date: "",
  returnTrip: false,
  returnDate: ""
};

This object will store the current values from your form.

You can leave it as state in the app.js, or if you prefer you can put it in a trips.json file. For this you can draw on what we did yesterday in the floorplanner rooms.json.

Step 2 – Listen to form inputs

Add event listeners to your form fields: Examples:

input.addEventListener("input", ...)
checkbox.addEventListener("change", ...)

Each time a field changes, update the corresponding value in state.

Step 3 – Show a live search summary

Display a text summary somewhere on the page. Example:

Passenger: From A to B on 2026-03-07

When the user changes any form input, update the summary automatically.

Step 4 – Handle “Return trip”

Add a checkbox:

☑ Return trip

When checked:

show a second date picker
store the value in state.returnDate
include it in the summary Example summary:

Passenger: From A to B on 2026-03-07 (Return: 2026-03-09) When unchecked:

hide the second date input
clear state.returnDate

Level 2 – Generate Trips From JavaScript

Instead of hardcoding trips in HTML, generate them from JavaScript.

Step 1 – Add dummy trip data

Add this to app.js:

const trips = [
  { id: 1, from: "A", to: "B", time: "10:30", seats: 3, driver: "Maja", price: 50 },
  { id: 2, from: "A", to: "C", time: "12:15", seats: 1, driver: "Ali", price: 30 },
  { id: 3, from: "B", to: "A", time: "16:00", seats: 4, driver: "Sofie", price: 45 },
  { id: 4, from: "C", to: "B", time: "18:00", seats: 2, driver: "Jonas", price: 60 }
];

You can change the cities to match your project.

Step 2 – Filter trips using `.filter()`

When the user searches for rides: Filter the trips based on state.from and state.to. Example:

const results = trips.filter(trip =>
  trip.from === state.from && trip.to === state.to
);

Step 3 – Render results dynamically

Use JavaScript to generate HTML elements for the results. For example:

cards
list items
markers on a map Each result should display:
driver
time
seats available
price

Clicking a trip should open a modal with more information. The modal should show:

Driver name
From → To
Time
Price
Seats available Include a Join Ride button. You can use:

<dialog> that we used yesterday. - or create your own modal using CSS + JavaScript.

Level 4 – Join Ride

Make the Join Ride button interactive. When clicked:

Decrease the number of available seats
Update the UI
If seats reach 0, show:

FULL and disable the Join button.

Optional – Map Interaction (If Your App Uses a Map)

If your app contains a map with city dots: You can add interactivity:

Clicking a city dot sets state.from or state.to
Update the form automatically
Re-render results

Tips

Keep one source of truth Use your state object to store values and re-render the UI when it changes.

Talk your problems out loud to better understand them

Use console.log() to figure out missing elements, values, etc. F12/Developer tools is your friend