2

I'm currently auditing the CS50's Mobile App Development with React Native course, and I'm stuck at the beginning of the first project. The project involves DOM manipulation, which the instructor says to his students would be explained in following "sections." As far as I know these sections are not on the course's edx. I'm in the dark as to what exactly the problem is asking for me to do, and how to even begin going about it. Considering the absence of a "walkthrough" in the problem spec, I would appreciate it if someone could hint me as to where to get started. Here's the Readme file for reference:

# Project 0

The goal of this project is to practice JavaScript and its paradigms by creating
a TODO app. This app should be able to add TODOs and track the number of total
TODOs as well as the number of unchecked TODOs.

## Instructions
Inside of [index.html](/index.html), you'll find some starter HTML. You shouldn't
need to edit this file at all. Open this file on your computer into any browser
to run the project. Make sure that [script.js](/script.js) and [styles.css](/styles.css)
are in the same local directory. With the file open in your browser, you should
see a `New TODO` button, which `alert`s when clicked. Your goal will be to get
this button to create new TODOs.

Inside [styles.css](/styles.css), you'll find some pre-written CSS for your
convenience. You shouldn't need to edit this file at all, but feel free to if
desired.

[script.js](/script.js) is where most of your work will be done. There is some
starter code for you in the file. The `classNames` variable can be used to link
any elements you create in js with the associated CSS class names. The next 3
lines of code are the HTML elements that you'll need to update when creating new
TODOs. Lastly, you'll see the `addTodo()` function. This gets executed when
creating a new TODO. You should replace the `alert()` call with logic to create
new TODOs.

Good luck!

## Challenge! (Not Required)
If you finish early and are up for a challenge, try adding delete functionality.
This should be in the form of a button within each TODO that removes that TODO
when clicked. 

And here's the link for the supplied files: https://cdn.cs50.net/mobile/2018/spring/projects/0/project0.zip

1 Answer 1

4
+50

Once I got past reading "TODO" as a placeholder, and realized it was literal (mow the lawn, do laundry, eat more fiber) things got easier. Doh!

I think the purpose of this project is two-fold:

  1. Write a "single-page application"
  2. (eventually) Learn that it's "easier" and more robust with React than pure javaScript.

Basically, DOM manipulation means changing what the user sees without reloading a page or loading a new page. I cannot think of an analog from CS50x. An analog from Stack might be adding a comment:

  1. Enter comment
  2. Save comment
  3. Poof! There's the comment. The page doesn't reload, but the edit box disappears and the comment appears.

I'm a big fan of MDN documentation; here is the doc on Manipulating documents.

A (probably) partial list of things you'll need to create or manipulate in the DOM:

  1. An input element for todo items.
  2. An input element to check them off.
  3. A "display" element for the list.
  4. Update the counters and display same.

And now I can't wait to take this course (after the laundry, of course)!

Bonne chance.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .