- Work in a fork of this repository
- Work in a branch on your fork
- Write all of your code in a directory named
lab-
+<your name>
e.g.lab-duncan
- Submit a pull request to this repository
- Submit a link to your pull request on canvas
- Submit a question, observation, and how long you spent on canvas
Your lab directory must include
- README.md -- with documention about your lab
- .babelrc -- with all dependencies and dev-dependencies
- .eslintrc.json -- with the class .eslintrc.json file
- .gitignore -- with a robust .gitignore
- .eslintignore -- with the class .eslintignore
- package.json -- with all dependencies and dev-dependencies
- webpack.config.js -- with webpack config
- src/ -- containing the frontend code
- src/main.js -- for appending your app to the DOM
- src/components/ -- containing your components
- src/components/app/index.js -- containing your App component
- src/components/landing/index.js -- containing your Landing component
- src/components/dashboard/index.js -- containing your Dashboard component
- src/components/note-create-form/index.js -- containing your NoteCreateForm component
- src/components/note-list/index.js -- containing your Notelist component
- src/components/note-item/index.js -- containing your NoteItem component
- src/style -- containing your sass
- src/style/main.scss -- for importing and including reset and base
Create the following components and structure them according to the following diagram.
App
Landing
Dashboard
NoteCreateForm
NoteList
NoteItem
- The App component should manage the frontend routes and have a navbar
- the
/
route should display theLanding
component - the
/dashboard
route should display theDashboard
component
- The Landing component should display a brief description of the notes app
- The Dashboard component should manage the entire application state.
- The state should contain a notes array
- It should have a bound
addNote(note)
method that adds a note tostate.notes
- each note that gets added should have the following data
id
: always should contain the result ofuuid.v1()
editing
: false by defaultcompleted
: false by defaultcontent
: user provided contenttitle
: user provided title
- each note that gets added should have the following data
- It should have a bound
removeNote(note)
method that removes a note fromstate.notes
based on itsid
onComplete
the NoteForm should add a note to the application state
- should display an unordered list of NoteItem components
- should display the notes content and title
- should display a delete button
onClick
the note should be removed from the application state
- Test Dashboard
- Test the initial state
- Test NoteCreateForm
- Test the initial state
Write a description of the project in your README.md