Assignment 1.2: Front End
by Tomas Trescak· React Fundamentals

0 / 3280 XP
The external project has not been reviewed yet
Please follow instructions below to submit your project

Presentation Transcript
If you prefer text to video, check out the transcript of the presentation above

Slide 1 ----------- Part 1: Finally it's here! We are going to do some hard work to complete the front end of our Get Things Done app. Since you already went through a warmup exercise in the previous section, you should have no issues working on this one. Slide 2 ----------- Part 1: First, click on the Github Classroom invitation URL and accept the assignment. Slide 3 ----------- Part 1: Once you accept the assignment ... Part 2: ... either clone the assignment to your computer Part 3: ... or use Github Code spaces to work on your assignment. Slide 4 ----------- Part 1: If you use the local installation, which we recommend, please clone the project using the git clone command. Make sure you use the URL of your repository, not the one in the animation. Then, in the project directory, install project packages using npm or pnpm and run visual studio code with the code dot command. Slide 5 ----------- Part 1: You'll need to complete the exercise to implement all the missing functionality, making sure all your tests pass. Your goal is to show all tasks, add a new task, delete a task and toggle task completion. The animation shows the fully functional app. Slide 6 ----------- Part 1: To run the tests, please run the pnpm test or npm test command in the project directory. The animation shows the initial state of the project with six failing tests.

Finally it's here! We are going to do some hard work to complete the front end of our Get Things Done app. Since you already went through a warmup exercise in the previous section, you should have no issues working on this one. The assignment can be accepted at the following url:

https://classroom.github.com/a/PlsmQmO9

You have the following goals:

  1. Complete the task by clicking on the checkbox
  2. Render line through completed tasks
  3. Delete assignment
  4. Show the number of ACTIVE assignments
  5. Add task via the input and make it active

This is a short demo of what we expect from the application functionality:

Get Things Done - Finalised Front End

Discuss with Others
Ask questions, share your thoughts, and discuss with other learners

Join the discussion to ask questions, share your thoughts, and discuss with other learners
Setup
React Fundamentals
10 points
Next.js
10 points
Advanced React
Databases
10 points
React Hooks
Authentication and Authorisation
10 points
APIs
CI/CD and DevOps
Testing React
Advanced Topics