Code Monkey home page Code Monkey logo

maitisamy / planner Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 1.0 246 KB

Planner is a simple daily tasks maintainer app built on Next.js framework, designed to assist users in managing their tasks efficiently. It provides essential features such as task creation, editing, marking as completed or pending, and deletion. The app utilizes local storage to persist tasks and related functionalities.

Home Page: https://next-to-do-app-nu.vercel.app

JavaScript 61.15% CSS 38.85%
nextjs react daily-planner planner productivity-tool task-management task-manager task-organizer task-scheduler task-tracker

planner's Introduction

1 - PLANNER - To-do-list Application

Introduction

Planner is a simple daily tasks maintainer app built on Next.js framework, designed to assist users in managing their tasks efficiently. It provides essential features such as task creation, editing, marking as completed or pending, and deletion. The app utilizes local storage to persist tasks and related functionalities.

Features

  • Task Management: Users can create, edit, mark as completed or pending, and delete tasks.
  • Local Storage: Utilizes browser local storage to persist tasks and their statuses.
  • Date Restrictions: Users cannot select previous dates for task creation. In the task edit view, users can choose previous dates but not less than the current date.
  • Two Views: Offers two types of views - grid and list view, with the default being grid.
  • Home View: Displays tasks for the current date and dates ahead of today.
  • Trash View: Tasks are moved to the trash view when their due date has passed.

Usage

  1. Creating a Task: Click on the "Create Task" button to open the custom modal. Write the task details and select a due date. Only future dates can be selected.
  2. Editing a Task: Double-click on a task to open the edit modal. Modify the task details or due date. Previous dates can be selected, but not less than the current date.
  3. Marking Task Status: Click on the checkbox next to a task to mark it as completed or pending.
  4. Deleting a Task: Click on the delete icon to remove a task from the list.
  5. View Options: Toggle between grid and list view using the provided options.
  6. Trash View: Tasks with past due dates are automatically moved to the trash view.

Installation

  1. Clone or download the Planner repository from GitHub.
  2. Navigate to the project directory.
  3. Run npm install to install dependencies.
  4. Run npm run dev to start the development server.
  5. Open the provided URL in a web browser to access the application.

Live Demo

Check out the live version of the project here

Some Screenshots

Home View on landing

34567

Home Grid View

12345

Home List View

23456

Mobile designs

45678 56789 67890 78901

Support

For any inquiries or support requests, please reach out to the development team through our GitHub repository.

Note

This project is open-source and does not include a license. Users are free to use and modify the code according to their requirements.

planner's People

Contributors

maitisamy avatar

Watchers

 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.