Let users search a public API (weather, movies or books) and see results with loading and error states.
The project for module 2, JavaScript. It proves: dom work, async code and handling real-world failures.
Choose one theme, or your own idea. Same skills, but your portfolio won't look like everyone else's.
Weather for any city with Open-Meteo (no API key)
Book search with the Open Library API (no API key)
Country facts explorer with REST Countries (no API key)
Two short builds that practise the skills this project needs. About 3 hours in total.
Enter a bill, a tip percent and the number of people, and see what each person pays.
Done when: The total updates as you type and never shows NaN.
Add, complete, delete and filter tasks, and keep them after a refresh.
Done when: Refreshing the page keeps every task and its state.
7 steps in order. Each one ends with a clear check, so you always know when to move on.
Open the API URL in your browser and read the JSON. Find the fields you need.
Done when: You can write down the exact path to every value you'll show, like data.current.temperature_2m.
Install a JSON viewer extension, or paste the response into the browser console with console.log.
Add an input and a button. On submit, stop the page reload and read the value.
Done when: Typing a city and pressing Enter logs it to the console.
Listen for the form's submit event, not the button's click, so Enter works too.
Write an async function that fetches data and renders cards into the page.
Done when: A real search shows real results without reloading.
Build HTML with template literals, but put user text in with textContent, not innerHTML.
Show a loading message, an empty message and an error message.
Done when: Turning off Wi-Fi in DevTools shows a friendly error, not a blank page.
fetch only rejects on network errors. Check response.ok yourself for 404 and 500.
Save the last 5 searches in localStorage and show them as buttons.
Done when: Refreshing the page keeps the history, and clicking one searches again.
localStorage stores strings only. Use JSON.stringify and JSON.parse.
Move API calls, rendering and storage into separate files with import and export.
Done when: main.js is short and only wires the pieces together.
Use <script type="module"> so the browser understands import.
Deploy and write a README with what it does, the API used, and one thing you'd improve.
Done when: A live URL works on your phone.
Mention a problem you solved, like handling empty results. That's what interviewers ask about.
Tick each one when it's done. Saved to your account.
Optional. One of these makes your project stand out from the tutorial version.
Free APIs, tools and docs for this project.