Git Product home page Git Product logo

to-do-list's Introduction

To-Do List

๐Ÿ“— Table of Contents

๐Ÿ“– To Do List

To Do List is a List of To Do tasks built using webpack and served by a webpack dev server.

๐Ÿ›  Built With

Tech Stack

Client

Key Features

  • User Interface
  • Task Management
  • Interactivity

(back to top)

๐Ÿš€ Live Demo

Live Demo

(back to top)

๐Ÿ’ป Getting Started

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

Setup

Clone this repository to your desired folder:

cd my-folder
git clone https://github.com/Sonikak004/To-Do-list.git

Usage

To run the project, execute the following command:

cd path/to/project
npm start

๐Ÿ‘ฅ Author

๐Ÿ‘ค Author

๐Ÿ‘ค Author2

๐Ÿ‘ค Sadaf Daneshgar

(back to top)

๐Ÿ”ญ Future Features

  • Drag and Drop
  • Local Storage
  • Accessibility

(back to top)

๐Ÿค Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

โญ๏ธ Show your support

If you like this project please give me a star!

(back to top)

๐Ÿ™ Acknowledgments

I would like to thank Microverse for giving me this oppurtunity.

(back to top)

๐Ÿ“ License

This project is MIT licensed.

(back to top)

to-do-list's People

Contributors

sonikak004 avatar

Stargazers

devendra mulewa avatar Marie Grรขce Bahati avatar Emmanuel Kipngeno avatar Nelly Telli avatar Mahdi Noori avatar Sive Mdluli avatar rod. avatar Sadaf-Daneshgar avatar

Watchers

 avatar

to-do-list's Issues

Peer-to-peer code review

Hey @Sonikak004 , good job implementing the features of the To-Do List project! ๐Ÿ‘

Highlights

Clean code ๐Ÿ‘
Minimal design based on template ๐Ÿ‘

-There is one small issue I would suggest to prevent from adding empty task in your project.

JavaScript best practices #1

Highlights ๐ŸŽ‡

  • Did not commit console.log to the repo
  • Added node_modules dir to the .gitignore file
  • The code is organized into functions
  • Arrow functions (() => {}) are used to define functions

The javascript file adheres to several common best practices, but there may be additional considerations.

Code modularization

I see the whole code is very minimized and I appreciate this ๐Ÿ‘ You have done a great job ๐Ÿฅ‡

The code is modularized, but I think you have a better chance to make it more modularized by outsourcing some code from index.js files. I suggest you check and optimize more.

I love how you coded in a very minimized fashion. Great work ๐Ÿ‘

DRY, KISS, and YAGNI #3

- DRY: Don't repeat yourself!

  • const taskDescription = document.createElement('input');

    - for the above function you have repeated task description too many times, try minimizing it.

- KISS: Keep It Simple, Stupid.

  • The code takes a direct approach to accomplish the tasks

- YAGNI: You Aren't Gonna Need It.

  • There are no signs of extraneous or unused code
  • It doesn't include additional functionality

Peer to peer code review

Hey @Sonikak004 ๐Ÿ‘‹๐Ÿป

You have done a great job so far. ๐Ÿ‘๐Ÿป But there are still some issues you have to fix them. โ™ป๏ธ

soClose

Highlights :
โœ… Good UI
โœ… Clean code
โœ… Good implementation of requirements

// eslint-disable-next-line import/no-cycle

// eslint-disable-next-line import/no-mutable-exports

  • Try to remove disabling of eslint as it is not a good coding practice.

HTML & CSS best practices #2

Things to address : โ™ป๏ธ

  • <div class="container">
    • Instead of using div's like above you can use semantic tags like header,nav .
  • font-family: 'Inter', sans-serif;
    • Instead of repeating the font family, create a class with the font and apply the class wherever needed.

Highlights ๐ŸŽ‡

  • Did not use inline styles
  • used the class attribute for multiple elements
  • Close all HTML elements.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.