The TODO list made in HTML, CSS, JS 🔥🔥

Related tags

Learning resource css html sass webpack es6-javascript
Overview

TODO List

Welcome! 👋

This Website Allows you to creat your game and add your players score.

ScreenShot 1 ScreenShot 2
ScreenShot 3 ScreenShot 4
:------------------------------------------------: :-----------------------------------------------:
ScreenShot 5 ScreenShot 6
:------------------------------------------------: :-----------------------------------------------:
:-----------------------------------------------: :-----------------------------------------------:

Built With ✔️

  • HTML 😄
  • SASS 🔥
  • JavaScript ES6 😋
  • WebPack 😉

Functionalites 😄

  • Can Add New task. 😄
  • Can edit Task by hovering on the field. 😋
  • Can Delete Task by hovering on the field. 🙌
  • Can clear completed Task. 🥳
  • Can switch between dark and light mode. 🌑
  • Bottom NavBar can be used to filter the tasks. 😉
  • Accessibility options are used. 🔥 🔥
  • User can resort the list by using drag and drop functionality. 🔥 🥳 🥳

Live Demo ✔️

Live Demo Link

Getting Started 🙌

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

Prerequisites

  node js
  npm

Setup

Clone the repository and change the directory to portfolio

  `$ git clone 'https://github.com/caasperr/Interactive-TODOLIST.git'`

  `$ cd Interactive-TODOLIST.git`

Install

Install all project dependencies by running the command below

 ` $ npm install`

Usage

Run

  `$ start local server

Deployment

Authors

👤 Name Github Twitter LinkedIn
Waleed Amjad @caasperr @developerwaleed @Waleed Amjad

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

📝 License

This project is licensed to Waleed.

Authors

👤 Waleed Amjad

👤 Name Github Twitter LinkedIn
Waleed Amjad @caasper @developerwaleed Waleed Amjad

Acknowledgments

  • Hat tip to MicroVerse for the Template and Task.

Show your support

Give a ⭐️ if you like this project!

📝 License

All rights reserved.

You might also like...

A simple todo list app that allows users to add, delete, edit, and clear all completed tasks, built with HTML, CSS, Javascript and webpack.

todo list In this website you will add books and also watch the lists of books. Built With HTML CSS JavaScript See Live click here Authors 👤 HaaDiiii

Oct 7, 2022

A simple todo list app written in javascript and html with basic CSS styling This project makes use of webpack to bundle the code. I implemented 3 functionalities on the this project namely: Add task edit task delete task using Js

My To-Do List A simple todo list app written in javascript and html with basic CSS styling This project makes use of webpack to bundle the code. I imp

Nov 11, 2022

A simple and basic app, where you can add your todo list and remove all selected or one of the items from the list

A simple and basic app, where you can add your todo list and remove all selected or one of the items from the list

Jun 14, 2022

Website to present projects made by me and that are part of my personal portfolio. It was made using React, HTML y Scss (CSS).

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

Dec 23, 2021

A simple to do list webpage where you can log the daily tasks you have to do, mark them as checked, modify them, reorder them and remove them. Made using HTML, CSS and JavaScript.

A simple to do list webpage where you can log the daily tasks you have to do, mark them as checked, modify them, reorder them and remove them. Made using HTML, CSS and JavaScript.

To-Do-List This Webpage is for an app called To-Do-List which helps you add, remove or check tasks you have to do. It is a simple web page which conta

Mar 12, 2022

This To-Do list was made using Webpack, JS, HTML and CSS.

To Do list In this project I build a mobile and desktop version of a website, using what I learned in HTML and CSS. Built With HTML CSS JavaScript Liv

Jun 21, 2022

Keep track of your tasks with this minimalist to do list made with Javascript CSS HTML and Webpack.

Keep track of your tasks with this minimalist to do list made with Javascript CSS HTML and Webpack.

my-to-do-list- keep track of your tasks with this to do list DESCRIPTION build a simple HTML list of To Do tasks. LIVE DEMO "https://andgarzonmal.gith

Jul 21, 2022

"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Hello! I am a software developer! I can help you build a product, feature or website. Take a look of my works. If you like what you see and have a pro

Jul 17, 2022

To-do list" is an app that helps to organize your day. the user simply lists the things that needs to done and the app allows the to mark them as complete when they are done. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Todo-list project This is a Microverse project that entails a to-do-list. Built With HTML CSS Javascript Webpack VS code Live Demo (if available) Live

Aug 3, 2022
Comments
  • Peer-to-peer-code-review

    Peer-to-peer-code-review

    Great job @caasperr you rock

    Highlights

    • Nice UI
    • Good use of Best practices

    Optional changes

    • Kindly add more description to the project in the about section
    • Kindly implement the draggable icon for more accessibility
    opened by assadounto 0
Owner
Waleed Amjad
Front-end Developer with a love for React and JavaScript. I play the guitar and mess around with coding challenges in my spare time. Open to new opportunities
Waleed Amjad
GitHub
The TODO list made in HTML, CSS, JS 🔥🔥

TODO List Welcome! ?? This Website Allows you to creat your game and add your players score. ScreenShot 1 ScreenShot 2 ScreenShot 3 ScreenShot 4 :----

Waleed Amjad 7 Dec 29, 2022
A simple Todo App with check complete function and filter todo. Made with React and TypeScript.

A simple Todo App with check complete function and filter todo. Made with React and TypeScript. The app can Add, Delete and Edit todo. Todo can be sorted by Complete or Active.

Bao Nguyen 9 Dec 6, 2022
DoMe is a ToDo App. you can add, delete and reorder elements of the todo list using drag and drop. You can also toggle between dark&light mode

DO ME Todo App Live Preview : DO ME Built With : - ReactJS - TailwindCSS Make sure you have: - Git - Nodejs version 14 or higher (we recommend using

Medjahdi Islem 5 Nov 18, 2022
This project is a To-do list app which users can store and edit their Todo Tasks. Users can also change the order of their todo

Project This project is about a todo app bundling using webpack Additional description about the project and its features. Built With HTML CSS Javascr

Richmond Adu-Kyere 2 Jun 17, 2022
Todo-List is an online website where users can add a todo tasks. tasks can be removed , added, and edited. Built with Webpack and JavaScript.

To-do List Description To-do-list is an online website where users can add a todo tasks. tasks can be removed , added, and edited.Built with Webpack a

tarike bouari 9 Sep 9, 2022
A simple Todo app to add list of books a user has read using HTML, CSS, Webpack, JavaScript and modular architecture

Minimalist A simple Todo app to add list of books a user has read. It is implemented using HTML, CSS, Webpack, JavaScript and modular architecture. A

Elikplim 4 May 9, 2022
Web-pack based Todo-List Website built using HTML, CSS and JavaScript. Tested Using Jest.

To-DO List Live Link Additional description about the project and its features: Built With HTML and CSS Javascript HTML & CSS3 & JavaScript Linters Gi

Saadat Ali 8 Mar 31, 2022
A Todo list app that allows the user to add tasks, delete, edit, chage, and clear all completed tasks. Built with JavaScript, CSS and Html.

To Do list: interactive list description: A todo list app that allow users to add new task, delete, edit, and clear all completed.Built with JavaScrip

IBRAHIM AHMAT 7 Aug 4, 2022
Make Your TODO list using my Code written in HTML, CSS, JS

Screenshot 1 Screenshot 2 Screenshot 3 Screenshot 4 :------------------------------------------------: :----------------------------------------------

Waleed Amjad 13 Aug 30, 2022
Todo List is a simple web-based application that gives users the ability to organize their work and life daily tasks. Built with JavaScript, HTML/CSS.

Javascript Project Todo List Using Javascript to create a simple Todo List project. Populating the todo list and then removing from the list. Built Wi

Ghazanfar Ali 9 Sep 28, 2022