This is an app that helps people keep track of all their activities for a period of time.

Overview

To-Do List

This is an app that helps people keep track of all their activities for a period of time. They can be able to see what activities they have performed, yet to perform and all activites whether performed or not. Provided the activity has been input into the app.

Built With

  • HTML
  • CSS
  • Javascript
  • Webpack

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

  • You need to have git installed in your machine.
  • A text editor or terminal
  • A web browser to view output

Live Demo

To see live demo, click here

Setup

Author

👤 Abubakar Ummar

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowlegement

  • Thanks to my coding partners
  • Thanks to flaticons for the icons used
  • Thanks to Microverse for their curriculum
  • Thanks to morning session team
  • Thanks to stand up team
  • Thanks to code reviewers

📝 License

This project is MIT licensed.

Comments
  • Testing add remove

    Testing add remove

    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.
    opened by Haywayaheadshot 3
  • To Do List Structure

    To Do List Structure

    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

    opened by Haywayaheadshot 2
  • Final features

    Final features

    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

    opened by Haywayaheadshot 1
  • Add and Remove Functions

    Add and Remove Functions

    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.

    opened by Haywayaheadshot 1
  • Test status content updates

    Test status content updates

    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.
    opened by Haywayaheadshot 0
  • Code review

    Code review

    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!

    opened by vvoo21 0
  • Review by Lucas

    Review by Lucas

    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.

    opened by Oklukeok 0
  • Best Practices for HTML and CSS

    Best Practices for HTML and CSS

    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. ✔️
      1. Avoid lines of code that are too long (100 characters or more). ✔️
      1. 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.
      1. Close all HTML elements. ✔️
      1. Use lowercase for elements and attribute names. ✔️
      1. Always quote attribute values. ✔️
      1. Use space-less equal signs. ✔️
      1. Do not use inline styles. Keep your style definition in a separate CSS file. ✔️
      1. Do not overuse !important rule in your CSS style definitions. ✔️
      1. Always use the class attribute for multiple elements (do not use ID selector for multiple elements). ✔️
      1. 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 ✔️
    opened by Haywayaheadshot 0
  • 1. Javascript Best Practices

    1. Javascript Best Practices

    JavaScript best practices

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

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

      1. If you use node modules, .lock files should be in the repository to avoid problems with future versions of the dependencies. ✔️
      1. 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. ✔️
      1. 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. ✔️
      1. Keep the number of changes/updates to the DOM as low as possible, they are very expensive for the browser. ❎
      1. Keep the application logic separated from DOM manipulation tasks. ✔️
      1. Do not use document.write or eval ✔️
      1. 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). ✔️
      1. 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. ✔️
    opened by Haywayaheadshot 0
Owner
Abubakar Ummar
Full Stack Software Engineer. Exceptional musician. I love learning new things. I am currently available for hire and open to new job opportunities.
Abubakar Ummar
Grayce Muthui 8 Jun 16, 2022
A simple app that helps a user monitor daily activities by adding, storing and deleting activities.Built with HTML,CSS and JavaScript

To-do-list A simple list app that allows a user to add and remove tasks. Built With HTML CSS JS Webpack Live Demo Click To-do-list to see the page. Ge

Catherine K 7 Apr 8, 2022
To Do list app. Very useful to keep track of daily activities. Made with ❤️, JavaScript and bundle with Webpack

To Do List ⚙️ This is a To Do list App to practice Javascript and Webpack deployment. Live Demo ⚙️ GitHub Pages: DEMO Tech ⌘⇧ HTML & CSS best practice

Raul Ospina 11 Oct 17, 2022
A simple project to keep track of your activities. It allows basic CRUD operations to organize your to do list.

todo-list A simple project to keep track of todo list. Built With HTML CSS Javascript Webpack Live Demo You can checkout the live version here Getting

Abdelmejid Oumer Ali 9 Jul 20, 2022
Powerful interactive, editable to Do list. keep track of your activities

Project Name To do List Built With HTML CSS webpack Live Demo Live Demo Link Getting Started To get a local copy up and running follow these simple ex

Federico Luna 8 Sep 2, 2022
A progressive web app to help volunteers track their volunteering activities, register vet concerns and log incident reports.

POOPS - Pets of Older Persons 2022 Introduction This is a Next.js project bootstrapped with create-next-app. Getting Started First, install yarn: npm

Coders for Causes 17 Jan 3, 2023
Evolve is an online investment portfolio management system where users can keep track of all the assets that they have invested in and how well their assets are performing.

Evolve is an online investment portfolio management system where users can keep track of all the assets that they have invested in and how well their assets are performing.

Indrajit 6 Oct 16, 2022
A daily activity tracking application that helps to organize your daily tasks and keep track of tasks that have been completed, or yet to be completed.

To-Do-List This is my To-Do List project in the Microverse curriculum. Built With HTML CSS Javascript (Webpack) GitHub Live Demo Live Demo Link Gettin

Hammed Adisa 8 May 7, 2022
zieeco 12 Jul 8, 2022
YouPeriod.app -- the privacy-first period tracking app

YouPeriod.app The privacy-first period-tracking app. IMPORTANT: This app is still being developed. It's not ready for use yet, but will be soon. Pleas

Kyle Simpson 417 Dec 17, 2022
Automatic Role Adder Is Usually Used In Coding Servers Which Give Access To Codes By Subbing To Their Channel So This Helps Them To Auto Role People :)

Automatic Role Adder Setup Guide Automatic Role Adder Is Usually Used In Coding Servers Which Give Access To Codes By Subbing To Their Channel So This

NotJust 25 Dec 23, 2022
this project is an online library application that enables users to keep track of books in their library by adding to and removing books from a list. Built with JavaScript ES6 syntax, HTML, and CSS

Awesome-Book1 The aim of this project is to restructure the Awesome books app code by using ES6 syntax and organising the workspace using modules. The

Afolabi Akorede 7 Jul 17, 2022
A single-page application that allows users to keep track of their books. Users can add the book details (book title and author) and also, and the books can also be removed. Built with JavaScript, HTML, and CSS

Project Name Awesome book with ES6 Description the project. This is a single page application that allows users to keep track of their books. Users ca

Micheal Oguntayo 4 Oct 13, 2022
A project where you can keep track of your goal's progress, and contribute to open source in the same time.

Asakatsu-Website A project where you can keep track of your goal's progress, and contribute to open source in the same time. AsaKatsu is a Japanese te

null 8 Dec 27, 2022
Application that uses the localStorage to keep the information on the activities that are pending to be done and also those that are completed

Application that uses the localStorage to keep the information on the activities that are pending to be done and also those that are completed. It provides an option to edit activities and also delete them. The clear all applies to those that are marked as completed by selecting the checkbox.

Oscar Bermudez 8 Apr 8, 2022
List of awesome people offering their time for free to have a "coffee chat" with others about different topics, mostly in a mentorship kind of way.

Coffee Chat List of awesome people offering their time for free to have a "coffee chat" with others about different topics, mostly in a mentorship kin

Frédéric Harper 91 Dec 12, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022