Code Monkey home page Code Monkey logo

todolist's Introduction

Simple ToDoList Application

This is a simple web-based Todo List application built using HTML, CSS, and JavaScript. It allows users to add, toggle, and delete tasks in a user-friendly interface.

Features

  • Add Todo: You can add a new todo by entering a description in the input field and pressing Enter.

  • Toggle Completed: Click on a todo item to mark it as completed. Click it again to mark it as incomplete.

  • Delete Todo: Right-click on a todo item to delete it from the list.

  • Local Storage: Your todo list is saved in your browser's local storage, so your tasks will persist even after you close or refresh the page.

Technologies Used

  • HTML: The structure of the web page is defined in HTML.

  • CSS: The styling of the page is done using CSS, which includes a font import from Google Fonts for the 'Poppins' font.

  • JavaScript: The interactivity and functionality of the application are implemented using JavaScript.

Project Files

  • index.html: The main HTML file that defines the structure of the web page. It includes the form for adding todos and the container for displaying the todos.

  • style.css: The CSS file for styling the web page, making it visually appealing.

  • script.js: The JavaScript file that adds the functionality for adding, toggling, and deleting todos. It also manages local storage to persist the todos.

Usage

To use the Todo List application, follow these steps:

  1. Open index.html in a web browser.

  2. Enter your task in the input field and press Enter to add it to the list.

  3. Click on a task to mark it as completed, or click it again to mark it as incomplete.

  4. Right-click on a task to delete it.

  5. Your tasks will be saved in the browser's local storage, so you can access them even after closing or refreshing the page.

Contributions

This is a simple project, but you're welcome to contribute to it by improving the user interface, adding new features, or fixing any issues you encounter. Feel free to fork the repository and submit pull requests.

Credits

  • This project was created as a simple example by a developer (you can include your name or GitHub username here).

  • Oreniscool for dark mode.

  • Oreniscool for fixed purple color not applying on input box.

  • Oreniscool for minor bug and UI improvements.

  • CODEX108 for made the site responsive.

  • Enayut for added a feature that would provide certain inspirational quotes.

  • piyushr6 for decreased font items of list items and made the heading a bit smaller.

  • Oreniscool for fixed too many tasks breaking the site and many other UI improvements.

  • mansidhamne for added calendar feature

  • Oreniscool for dark mode enhancements + calendar dark mode.

  • CYCLOP5 for added quotes feature

  • The 'Poppins' font used in the project is provided by Google Fonts.

Thank you for using and contributing to this Todo List application!

todolist's People

Contributors

oreniscool avatar satyamvyas04 avatar techcsispit avatar enayut avatar piyushr6 avatar cyclop5 avatar

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.