Homework

Homework — run (and break) Cosmos

Homework — run it, break it, and understand the platform.

  1. Run it through a server. Put index.html, style.css, js/main.js and js/config.js in one folder. Run python -m http.server 8000 (or Live Server) and open http://localhost:8000. You should see "Cosmos is running…".
  2. Break it with file://. Now open that same index.html by double-clicking it (address file:///…). The page won't work. Open the console (F12) and read the CORS error — memorize it. Go back to the server — it works again.
  3. Change a module. In config.js add export const APP_NAME = 'Cosmos';, then import and use it in main.js's text. Reload — you'll see the change. You just passed data between modules, with no build step.
  4. Get your own NASA key. Go to api.nasa.gov, sign up (free) and note your key. You'll need it in lesson 4.

Required tests:

  • Server test: the page works at http://localhost:8000.
  • file:// test: you can recognize the CORS error in the console and know the fix is to serve over http.

To submit: screenshots: (1) the working page over localhost, (2) the CORS error in the console when opened via file://.

Next. You have a working platform — with no tooling. In lesson 2 we start building the UI by hand (createElement, textContent), and in lesson 4, with that NASA key, we fetch real pictures. The tooling (Node, npm, Vite) won't show up until lesson 15 — and only because TypeScript can't run without it.