What?

My coding partner and I tested the To-Do List using jest.

Why?

Ensure that we do not break the app's functionality and be confident in our code.

How?

• We created a Constructor.test.js file.
• We wrote tests for adding and removing tasks.

What?

I created the structure for a to-do list that helps people manage their activities.

Why?

This is to help them manage their activities and also help them plan their days easily.

How?

I installed webpack and made all the necessary configurations to ensure a good front-end environment. Created the structure of the page in my index.html file which can be found in the source folder. I then imported styles.css to index.js and then used it to style the HTML file. I dynamically created the ul where the task will be added. I created an array in the index.js file and looped through each object in the array to populate the ul with a li I made sure to use modules in my structure so I imported and exported variables and functions between index.js, Variables.js and Functions.js

What?

I created the structure for a to-do list that helps people manage their activities.

Why?

This is to help them manage their activities and also help them plan their days easily.

How?

I installed webpack and made all the necessary configurations to ensure a good front-end environment. Created the structure of the page in my index.html file which can be found in the source folder. I then imported styles.css to index.js and then used it to style the HTML file. I added an edit button where the user can edit tasks. I added a checkbox input to allow the user tick out the finished task. When the checkbox is checked, a line runs through the task to signify it has been cancelled. The "Clear all activities" button at the bottom of the app, clears all completed tasks. I dynamically created the ul where the task will be added. I created a class constructor to handle task inputs from user and hence created a newTask. I made sure to use modules in my structure so I imported and exported variables and functions between index.js, Variables.js, Constructor.js, and Functions.js I added all input information to local storage. Also when the data is deleted on the UI, it gets deleted in local storage too. I created a function to retrieve data stored in the local storage and display them once the user loads the app I styled the desktop version of the app

What?

I created the structure for a to-do list that helps people manage their activities.

Why?

This is to help them manage their activities and also help them plan their days easily.

How?

I installed webpack and made all the necessary configurations to ensure a good front-end environment. Created the structure of the page in my index.html file which can be found in the source folder. I then imported styles.css to index.js and then used it to style the HTML file. I added an edit button where the user can edit tasks. I added a checkbox input to allow the user tick out the finished task. When the checkbox is checked, a line runs through the task to signify it has been cancelled. The "Clear all activities" button at the bottom of the app, clears all completed tasks. I dynamically created the ul where the task will be added. I created a class constructor to handle task inputs from user and hence created a newTask. I made sure to use modules in my structure so I imported and exported variables and functions between index.js, Variables.js, Constructor.js, and Functions.js I added all input information to local storage. Also when the data is deleted on the UI, it gets deleted in local storage too.

What?

My coding partner and I tested the To-Do List using jest.

Why?

Ensure that we do not break the app's functionality and be confident in our code.

How?

• We created a Constructor.test.js file.
• We wrote a test for adding tasks.
• We wrote a test for removing tasks.
• We wrote a test for updating local storage.
• We wrote a test for clearing completed tasks.
• We wrote a test for updating edited tasks.

Hi @Haywayaheadshot, I think your project is great 🥇 To fix the local storage problem, you can try putting a load event in your task class. I hope this will work it!

Hello Abubakar! I think your project looks awesome! I can see that you are having some troubles with your localStorage, I think maybe it could be an overwriting problem, like some function overwriting some value or storage.

HTML & CSS best practices

• 1. Use the appropriate tags for each element (e.g., links, titles, etc.) and use HTML5 semantic tags (e.g., header, nav) over divs. ✔️
• 2. Avoid lines of code that are too long (100 characters or more). ✔️
• 3. Be careful with blank lines and indentation. ✔️

• Do not add blank lines, spaces, or indentations without a reason.
• For readability, add blank lines to separate large or logical code blocks.
• For readability, add two spaces of indentation. Do not use the tab key.
  • on some code editors, you can set the tab button to do an X amount of spaces.

• 4. Close all HTML elements. ✔️
• 5. Use lowercase for elements and attribute names. ✔️
• 6. Always quote attribute values. ✔️
• 7. Use space-less equal signs. ✔️
• 8. Do not use inline styles. Keep your style definition in a separate CSS file. ✔️
• 9. Do not overuse !important rule in your CSS style definitions. ✔️
• 10. Always use the class attribute for multiple elements (do not use ID selector for multiple elements). ✔️
• 11. If you want to create a CSS rule for multiple elements, use a class attribute instead. For example, instead of using color: #3498db; 3 times ✔️

JavaScript best practices

• 1. Keep all the JavaScript code in JS files, not in the script tag.✔️
• 2. Keep your code clean by following this advice:

type checks. ✔️ naming. ✔️ simplicity. ✔️ DRY.❎

• 3. If you use node modules, .lock files should be in the repository to avoid problems with future versions of the dependencies. ✔️
• 4. If you use ES6, use object destructuring to get the values from an object. This way you can avoid repeating a lot of code. ❎

JavaScript in the browser

• 1. Do not commit console.log to your repo. It’s ugly, it kills performance and it can make confidential data visible to anyone using the browser tools to look at your website. ✔️
• 2. Do not use window.alert() or window.confirm(). It’s ugly and impossible to style, it stops code execution and displays differently on different browsers. Use a custom modal instead. ✔️
• 3. Keep the number of changes/updates to the DOM as low as possible, they are very expensive for the browser. ❎
• 4. Keep the application logic separated from DOM manipulation tasks. ✔️
• 5. Do not use document.write or eval ✔️
• 6. Add node_modules dir to your .gitignore file as all those files are not needed in your repo (each team member will install all packages thanks to your package.json file). ✔️
• 7. Do not commit old pieces of code as inline comments. They will make your project look messy. If you need to review a previous version of your code, you can always use git history. ✔️