Home / Schedule / Week 6 / Monday, 6/22

JS essentials · build and read a to-do app

Topic Slides

JS Essentials Foundation

Agenda Slides Open fullscreen ↗

Due this week: Mini Project 2: Interactive Web Tool, Checkpoint 3
← Wednesday, 6/17 Wednesday, 6/24 →

Post-Class Notes

TL;DR

Today we built a to-do app with one AI prompt, then did the real work: reading every line AI wrote and cleaning it up. We moved the JavaScript out of the HTML file into its own todo/script.js, the same way we already keep CSS in its own file. Then we named the pieces underneath the code, starting with variables (const and let). The one habit to keep: AI can write the app in seconds, so your job is to read it, organize it, and make it yours. Before Wednesday, reread your todo/script.js line by line and keep going on MP2.

What we did today
  • Two lightning talks on AI study and dictation tools.
  • A quick three-question review of last class on the DOM and events (answers below).
  • Built a to-do app from one prompt, read the code, and split the JavaScript into its own file.
  • Compared apps in groups: same prompt, different results.
  • Started JavaScript essentials with variables.
The loop we are practicing

Every step today was one loop you can reuse on any project:

  1. Ask AI to build it. One clear prompt, one working app.
  2. Read every line. Find the moving parts and say what each one does.
  3. Clean it up. Split the code into separate files so it stays readable as it grows.
  4. Name the pieces. Learn the building blocks (variables, functions, conditions) on the code you already have in front of you.
  5. Make it yours. Change it by hand first, then ask AI for bigger changes and read what it adds.
Reading AI's code (READ then FIND)

When AI hands you a working app, open it and find these before you change anything:

  • The <script> tag. Is the JavaScript inside the HTML file or in its own file?
  • Every querySelector and getElementById. What does each one select on the page?
  • Every addEventListener. What event is each one waiting for (a click, a form submit, a checkbox change)?
  • Where the code changes the page. Look for textContent, innerHTML, classList, createElement, and similar.
  • The words you do not know yet (let, const, function). Guess what they do from how they are used. We name them next.

A good first move is to test it like the owner: open it in Live Server, click through it, and try the Enter key. You are responsible for knowing it works.

🤖 AI tip: Format the code before you read it (Mac: Shift+Option+F, Windows: Shift+Alt+F). JavaScript marks its structure with brackets, so a formatted file is far easier to follow than a wall of code.

Splitting the JavaScript out

Most AI to-do apps arrive as one HTML file with all the JavaScript jammed inside a <script> block. We clean that up the same way we already separate CSS:

  1. Make a new file: todo/script.js.
  2. Move everything from inside <script>...</script> into todo/script.js.
  3. Link it at the end of the <body>:
<script src="script.js"></script>
  1. Refresh. The app still works, and now index.html holds the structure while script.js holds the behavior.

Two things that came up live while we did this:

  • Same folder means a bare filename. Because script.js and style.css sit in the same todo/ folder as index.html, you link them as script.js and style.css, with no todo/ in front.
  • Names have to match exactly. Our page lost all its styling because the file was named style.css but the link pointed at styles.css. One letter. When something silently does nothing, check your file and variable names first.
Variables: the first building block

The JavaScript file starts by creating variables, so that is where we started naming things.

  • Declare with const or let. Use const when the value will not be reassigned (most of the element handles in the to-do app). Use let when it will change (the list of todos, the current filter).
  • The = sign means assignment, not equality. Read it as "put the value on the right into the name on the left."
  • Do not use var. It is the old way and causes subtle bugs. You will still see it in old code and older AI output, so when you do, read it as let or const.
  • const is not fully frozen. For a list or an object, you can still change what is inside it. What you cannot do is reassign the whole variable to a new value.

We saw why this matters in the code you already have: the variable that holds your tasks is the app's memory, the function that runs on Add is the action, and the check for an empty box is the decision. Almost every app is that same trio: a variable holding state, a function reacting to an event, and a condition choosing what happens next. We cover functions and conditions on Wednesday.

Want to read ahead? The JavaScript essentials slides cover all of it, and the MDN guide to variables is a solid reference.

Quick review answers (DOM and events)
  • A script in the page <head> runs querySelector('#go') and the console shows null. The script runs before the body loads, so the button does not exist yet. Move the <script> to the end of the <body>. (defer fixes this too, but only for an external script file, not for code written straight into the page.)
  • getElementById('#title') returns null even though the id exists. Drop the #. getElementById wants the bare id (title). The # belongs with querySelector.
  • querySelector('.btn') only turns the first of three buttons red. querySelector returns the first match. To reach all of them you use querySelectorAll and loop over the list, which we get to with arrays on Wednesday.
To do before Wednesday (6/24)
  1. Push your to-do app. Commit todo/index.html and todo/script.js to your oim3690 repo. This split structure is a CP3 item.
  2. Reread your todo/script.js line by line. Can you explain every line? Mark the ones you cannot, and bring them Wednesday.
  3. Update logs/wk06.md. Add what you found reading the code and what your group compared: one feature another app had that yours did not, and one thing AI did differently in someone else's code.
  4. Keep building MP2. The final version is due Sunday, 6/28, and CP3 is also due Sunday, 6/28.
  5. Read ahead through the JavaScript essentials slides so we can move faster Wednesday.

Wednesday we finish JavaScript essentials (functions and conditions), then move into arrays and loops, pulling live data from an API, and the MP3 launch.