https://github.com/suhakilic/to-do-app

This is a basic "to do app" project using local storage and created by JavaScript and Bootstrap5.
https://github.com/suhakilic/to-do-app

bootstrap-5 javascipt local-storage to-do-app-js

Last synced: about 1 month ago
JSON representation

This is a basic "to do app" project using local storage and created by JavaScript and Bootstrap5.

• Host: GitHub
• URL: https://github.com/suhakilic/to-do-app
• Owner: suhakilic
• Created: 2024-04-26T08:50:49.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-04-26T13:55:48.000Z (7 months ago)
• Last Synced: 2024-09-28T16:02:10.332Z (about 2 months ago)
• Topics: bootstrap-5, javascipt, local-storage, to-do-app-js
• Language: JavaScript
• Homepage: https://suhacankilictodoapp.netlify.app/
• Size: 7.81 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
To Do App 

A simple To Do App created by HTML, CSS, Bootstrap, and JavaScript.


Introduction

This app is designed to help users to organize their tasks efficiently.


Installation

To run the app locally, follow these steps:



  
Clone this repository to your local machine.

  
Open the "index.html" file in your preferred web browser.



Usage



  
Open the app using the provided link below or by running it locally.

  
Use the input field to add new tasks. Duplicate tasks will trigger an alert.

  
Click the "Done" button to mark a task as completed, or "Undone" to mark it as incomplete.

  
To delete a single task, click the "Delete" button next to the task. To delete all tasks, click the "Delete All" button.



Storage:

The app utilizes local storage of the browser to store task data. Task values and their status (done/undone) are stored in two separate local storage arrays. 

This ensures that when you reload the page or revisit it, your task list and the status of each task remain unchanged.

Technology Stack



  
HTML: Used for structuring the web pages.

  
CSS: Used for styling the app's layout and design.

  
Bootstrap: Utilized for responsive design and pre-styled components.

  
JavaScript: Used to add interactivity and functionality to the app.



Live Demo

Test the app live here.


App Screenshots

Screenshot-1


![Ekran görüntüsü 2024-04-26 114131](https://github.com/suhakilic/todoapp/assets/136511554/00d10379-fb35-4c40-9a1d-cb39ee540e2f)

Screenshot-2


![Ekran görüntüsü 2024-04-26 121242](https://github.com/suhakilic/todoapp/assets/136511554/9a4e183b-3070-4894-a955-05ba7ddf2672)