Team Name/Team member/Team lead: Shreya Nair
This project is created for organizing tasks but in a fun and motivating way
A platform where you enter and you get to set whichever background you like and these bacgrounds can be gradients as well as normal solid colours You can add your tasks and then delete them as you complete it even if you close the website when you reopen it you will still get to see the pending tasks You have timer alongside to keep a track of time for each task and to take breaks You need motivation ?? Yesss for that a random quote generator is already there
Procrastinators and lazy people often find it hard to do tasks on time because they find the jobs pretty boring to do or feel like its too easy and can be done later on without realising the importance of time thus their tasks get accumulated day by day.
This project organizes work for procrastinators and lazy people who might find using this website as a fun tool to complete their task
HTML CSS JAVSCRIPT FIGMA
Screen.Recording.2024-11-02.162503.mp4
![image](https://private-user-images.githubusercontent.com/119808754/382466502-07ba514d-f5e9-4d29-bbfd-7993e5eb92e9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxOTU4NjUsIm5iZiI6MTczOTE5NTU2NSwicGF0aCI6Ii8xMTk4MDg3NTQvMzgyNDY2NTAyLTA3YmE1MTRkLWY1ZTktNGQyOS1iYmZkLTc5OTNlNWViOTJlOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMFQxMzUyNDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lOTQzOGQ2ZTZmNzk2Yzg4MWE0MDgwNWUyM2JhMjc1NTNlNDU2ZTEzYTkzNGRhODNhNTExNDI2Y2U0YTRiOTQxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.mhPsjGc3Ty5DzxKzsHS4mcJekMvrfir8w2OhDq0HFIs)
![image](https://private-user-images.githubusercontent.com/119808754/382466564-8c310a46-fcf4-4a83-afe9-402f33ba472a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxOTU4NjUsIm5iZiI6MTczOTE5NTU2NSwicGF0aCI6Ii8xMTk4MDg3NTQvMzgyNDY2NTY0LThjMzEwYTQ2LWZjZjQtNGE4My1hZmU5LTQwMmYzM2JhNDcyYS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMFQxMzUyNDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mYjA1ZWJiYzE2YzQ0N2UyZGJkZTRlNzQzMTk4ODQwYTk3NTcwYmIzNzg3NjcwZWFjYjRhODg4Y2VhZDRhMzU0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.EFtj4pFpJt9PZgMiepnjqKqoPo91_KlBM_krbfkzim0)
![image](https://private-user-images.githubusercontent.com/119808754/382468191-17de86ba-c83e-432d-b55e-ba3ac2b9c63c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxOTU4NjUsIm5iZiI6MTczOTE5NTU2NSwicGF0aCI6Ii8xMTk4MDg3NTQvMzgyNDY4MTkxLTE3ZGU4NmJhLWM4M2UtNDMyZC1iNTVlLWJhM2FjMmI5YzYzYy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMFQxMzUyNDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xOGEyY2U4ZTViMDQ0ODEyNWQ5OTEwODgxNjEyNTI2MDJjNTYzOTE0MzM2NDIxYmQwZjUyNWI5Zjg1Njc0MzFhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.Ez9_RYbVr_eDrUssbWIlHnyZmiDGPXdCiYP6W97v1QI)
Components List of All Components:
To-Do List Component: Manages the list of tasks, allowing users to add and delete tasks
Timer Component: Displays a countdown timer for tasks, helping users manage their time effectively.
Background Color Changer Component: Provides options for users to change the background color of the app.
Quote Display Component: Shows motivational quotes, refreshing periodically or on user action.
Input Field Component: Allows users to enter new task
Build Steps Explain the Build Steps:
Project Setup:
Created a new project directory and set up the basic HTML structure in an index.html file. HTML Structure:
Created the necessary HTML elements, including a list for tasks, input fields, buttons for actions, and sections for the timer and quotes. CSS Styling:
Wrote CSS rules in a separate styles.css file to style the application, ensuring it is responsive and visually appealing. JavaScript Functionality:
Wrote JavaScript in a script.js file to handle the logic for adding and removing tasks, managing the timer, and changing the background color. Implement event listeners for buttons to respond to user actions. Integrate Components:
Ensured all components interact seamlessly, like updating the task list when a new task is added or when a timer ends. Testing:
Tested the application in different browsers to ensure compatibility and functionality. Final Deployment:
Used VSCode for local testing. Deployed the final product by uploading the project files to GitHub Pages.