Skip to content

Mark-Alexis-Posadas/todo-list-app

Repository files navigation

ToDo List App

This is a simple ToDo list application built with Vite.js, Tailwind CSS, React.js, TypeScript, localStorage for persistence, Google Fonts for typography, and Font Awesome for icons.

Features

  • Add ToDo: You can add new tasks to your list.
  • Delete ToDo: Remove tasks from the list.
  • Clear All Todos: Remove all tasks from the list at once.
  • LocalStorage: Persists ToDo list in the browser's localStorage, ensuring data is retained on page refresh.

Technologies Used

  • Vite.js: Fast, opinionated web dev build tool that serves your code via native ES modules.
  • React.js: JavaScript library for building user interfaces.
  • TypeScript: Typed superset of JavaScript that compiles to plain JavaScript.
  • Tailwind CSS: Utility-first CSS framework for quickly building custom designs.
  • localStorage: Web API that provides persistent storage key-value pairs in a web browser.
  • Google Fonts: Provides a wide selection of fonts that can be easily embedded into web pages.
  • Font Awesome: Icon toolkit that provides a comprehensive set of icons.

Getting Started

Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

Make sure you have Node.js and npm (or yarn) installed on your machine.

Installation

  1. Clone the repository:

    git clone https://github.com/your-username/todo-list-app.git
  2. Navigate into the project directory:

  cd todo-list-app
  1. Install dependencies:
  npm install
  1. To run the application locally:
  npm run dev

Usage

  • Adding Todos: Enter a task in the input field and press Enter or click the Add button.
  • Deleting Todos: Click on the delete icon next to the task you want to remove.
  • Clearing All Todos: Click on the "Clear All" button to remove all tasks from the list.
  • Persistence: Your todos are automatically saved to localStorage, so they will persist even after refreshing the page.