Lab File of “Skill Development”

Submitted in Partial Fulfillment of the Requirement for the

Award of the Degree of
BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE & ENGINEERING
SUBMITTED TO

LNCT University, Bhopal (M.P.)

SUBMITTED BY
ARYAN KUMAR(LNCCBTC11032)

UNDER THE SUPERVISION OF

Prof. Taruna Saxena

Department of Computer Science & Engineering

Department of Computer Science & Engineering

Lakshmi Narain College of Technology University, Bhopal

Forwarded by:
Dr. Megha Kamble HOD CSE, AIML
 CONTENT
S. No. Experiment Name Experiment Submission Signature
date Date
1. Build a responsive web application
for shopping cart with registration,
login, catalog and cart pages using
CSS3 features, flex and grid.
2. Use JavaScript for doing client –
side validation of the pages
implemented in the experiment
3.
Explore the features of ES6 like
arrow functions, callbacks,
promises, async/await. Implement
an application for reading the
weather information from
openweathermap.org and display
the information in the form of a
graph on the web page.
4.
Develop a java stand alone
application that connects with the
database (Oracle / mySql) and
perform the CRUD operation on
the database tables.
5.
Create an xml for the bookstore.
Validate the same using both DTD
and XSD.
6.
Create a custom server using http
module and explore the other
modules of Node JS like OS, path,
event.
7.
Develop an express web
application that can interact with
REST API to perform CRUD
operations on student data. (Use
Postman)
8.
Create a service in react that
fetches the weather information
from open weathermap.org and
the display the current and
historical weather information
using graphical representation
using chart.js

9.
Create a TODO application in
react with necessary components
and deploy it into GitHub.
 TODO application
Table of Contents:
1. Introduction

2. Project Overview

3. Getting Started

4. Code Structure

5. Dependencies

6. Code Refactoring

7. Deployment

8. Usage

9. Features and Enhancements

10. Conclusion
Introduction:
Welcome to the documentation for the TO-DOIT App, a simple
and refactored project designed to manage your tasks
efficiently. This document provides an overview of the project,
its code structure, refactoring details, clean code practices,
design patterns, deployment information, and usage
instructions.

To-do apps can be as simple as a basic list for day-to-day tasks or

more sophisticated with additional features like collaboration, project
management, and integrations with other tools. Popular examples
include Todoist, Microsoft To-Do, and Google Tasks.

Overall, the goal of a to-do app is to enhance productivity by helping

users keep track of their tasks and stay organized in both personal and
professional settings.

Project Overview:
The To-Do Application is designed to help users manage their tasks
efficiently by allowing them to create, prioritize, and track tasks. It
includes features such as task creation, due dates, reminders, and task
completion. Users can break down tasks into subtasks and add notes
for better organization. The app also supports synchronization across
devices and provides a clean, user-friendly interface. Its goal is to
improve productivity by offering a simple yet effective way to stay
organized and on top of responsibilities.
Getting Started:
To get started with the TO-DOIT App, follow these steps:

Prerequisites

Before you begin, make sure you have the following installed:

1. A modern web browser: (e.g., Chrome, Firefox, Safari) – Ensure your

browser is up to date for the best performance.
2. An internet connection: This is necessary for fetching external
dependencies and syncing data.

Installation

Follow the steps below to install and run the TO-DOIT App:

1. Clone the Repository:

• Open your terminal or command prompt and run the following command to clone the
project from GitHub:

bash
git clone https://github.com/your-username/todoit-app.git

2. Navigate to the Project Directory:

• Change to the directory where the project was cloned:

bash
cd todoit-app

3. Install Dependencies:

• Install the necessary dependencies using npm or yarn:

bash
npm install

4. Run the App:

• Once the dependencies are installed, start the development server:

bash
npm start

5. Access the App:

• Open your web browser and navigate to http://localhost:3000 to access
the TO-DOIT App locally.
 Code Structure:
The project follows a modular and organized structure to improve readability, maintainability,
and scalability. The key components are:

• HTML (index.html): This file contains the main structure of the web
page, setting up the layout and content.

• CSS (style.css): This file defines the styles and appearance of the web
page, ensuring a clean and visually appealing design.

• JavaScript (main.js): Handles the logic for user interactions, task

management, and theme switching, making the application dynamic.

• Fonts (Poppins): The Poppins font is imported from Google Fonts to

maintain consistent and modern typography across the app.

This structure ensures a clear separation of concerns, making it

easier to manage and expand the application in the future.

Dependencies:
• Tailwind CSS: Used for styling the components, linked via
CDN in the index.html file.

• Daisy UI: A CSS library for UI components, included

through CDN.

• Boxicons: Icon library, linked via CDN.

• Google Fonts (Poppins): Font used throughout the app,

imported in the style.css file.
Code Refactoring:
Code Smells Addressed:

1. Monolithic Structure:

• Code Smell: The original code had a monolithic structure, making

maintenance difficult.
• Refactoring: Modularized the code by creating separate classes
(TodoItemFormatter, TodoManager, UIManager, and
ThemeSwitcher), each with a distinct responsibility.

2. Global Functions:

• Code Smell: The original code used global functions for event handling,
which reduced modularity.
• Refactoring: Encapsulated event handling within the UIManager class,
improving organization and separation of concerns.

3. HTML Manipulation in Multiple Places:

• Code Smell: The original code directly manipulated HTML in multiple scattered
locations.
• Refactoring: Centralized all HTML manipulation within the UIManager class,
ensuring consistency and easier maintenance.

4. Lack of Error Handling:

• Code Smell: The original code lacked proper error handling, which could lead to
unpredictable behavior.
• Refactoring: Added error handling in the UIManager class, improving robustness and
the overall user experience.

SOLID Violations Addressed:

1. Single Responsibility Principle (SRP):

o Violation: The original code violated SRP by mixing UI, business logic, and
theme handling in one place.
o Refactoring: Separated responsibilities into distinct classes (TodoManager,
UIManager, ThemeSwitcher), ensuring each class has a single responsibility.

2. Open/Closed Principle (OCP):

o Violation: The original code was not easily extensible and required
modifications for adding new features.
o Refactoring: Designed the code to be open for extension, allowing new
features to be added without altering existing classes.
 3. Dependency Inversion Principle (DIP):
• Violation: The original code exhibited high coupling, making it difficult to modify
and test.
• Refactoring: Followed DIP by depending on abstractions rather than concrete
implementations, improving flexibility and testability.

Design Pattern Violations Addressed:

1. Observer Pattern for Event Handling:

o Violation: The original code used inline event listeners, making event
handling less flexible.
o Refactoring: Implemented the Observer pattern by encapsulating event
handling within the UIManager class, promoting better organization and
flexibility.

2. Strategy Pattern for Task Formatting:

o Violation: The original code lacked a clear strategy for consistent task
formatting.
o Refactoring: Introduced the TodoItemFormatter class, applying the Strategy
pattern to ensure consistent and flexible task formatting.

3. Singleton Pattern for Theme Handling:

• Violation: The original code lacked a structured approach for managing
themes, leading to inconsistent theme handling.
• Refactoring: Implemented the Singleton pattern by introducing the
ThemeSwitcher class, centralizing theme management and ensuring
consistent theme persistence across the app.

Deployment:
Deploying your To-Do List app from GitHub is a straightforward process. In
this guide, we will walk through the deployment steps using popular platforms
like GitHub Pages for a static website or Netlify for a more flexible
deployment. You will first need to ensure that your To-Do List app is pushed to
a GitHub repository.

Prerequisites:

• The To-Do List app should be pushed to a GitHub repository.

• You should have a GitHub account.
• You need a simple web app (static HTML, CSS, and JavaScript files).
Uses:
The To-Do List Application is a simple yet powerful tool for managing tasks, staying
organized, and increasing productivity. Below are some common use cases for the To-Do
application:

1. Personal Task Management

• Use Case: Individuals can use the To-Do app to create, organize, and prioritize
personal tasks or chores.
• Example: A user can add tasks like "Buy groceries," "Clean the house," or "Schedule
doctor’s appointment" and mark them as completed once done.

2. Work Task Management

• Use Case: Professionals can use the app to track work-related tasks, meetings, and
deadlines.
• Example: A project manager can create tasks like "Complete project proposal" or
"Send status report to client" and assign due dates to ensure timely completion.

3. Team Collaboration

• Use Case: In collaborative work environments, teams can manage group tasks and
track progress.
• Example: A team can collectively create tasks for a project and update the status of
each task to ensure that everyone is on the same page.

4. Event Planning

• Use Case: The To-Do app can be used to organize events, such as parties, weddings,
or conferences.
• Example: The app can have tasks like "Book venue," "Send invitations," "Order
catering," with deadlines to ensure the event is organized successfully.

5. Goal Setting and Tracking

• Use Case: Users can set long-term goals and break them down into smaller,
manageable tasks.
• Example: For a fitness goal like "Lose 10 pounds," users can add tasks like "Exercise
3 times a week" or "Track daily food intake."

6. Learning and Study Schedules

• Use Case: Students can create tasks for their assignments, exams, and study
schedules.
• Example: A student can add tasks like "Study for math exam" or "Complete history
assignment" with due dates and set reminders.

7. Daily Routine and Habit Building

• Use Case: The app can help users stay on top of their daily habits and routines.
• Example: Tasks like "Drink 8 glasses of water" or "Read for 30 minutes" can be
added and checked off every day.
8. Grocery Shopping List

• Use Case: Users can create a list of items to buy, ensuring nothing is forgotten.
• Example: A shopping list with tasks like "Buy milk," "Pick up eggs," and "Get fresh
vegetables" helps ensure an efficient shopping experience.

9. Task Prioritization

• Use Case: Users can prioritize tasks based on urgency and importance.
• Example: Tasks can be categorized into "High Priority," "Medium Priority," and
"Low Priority," so the user can tackle important tasks first.

10. Time Management

• Use Case: The app can help users allocate specific time blocks for tasks and manage
time effectively.
• Example: A user can schedule tasks like "Work on project for 2 hours" or "Take a 15-
minute break" to improve time management.

11. Recurring Tasks

• Use Case: For tasks that repeat regularly, users can set them to recur (e.g., daily,
weekly, monthly).
• Example: A task like "Check emails" can be set to repeat every day at a specific time.

Benefits of Using a To-Do Application:

• Improved Productivity: The app helps users stay focused and organized by providing
a clear list of tasks to accomplish.
• Reduced Stress: By having all tasks in one place, users can avoid forgetting important
tasks, reducing stress.
• Better Time Management: Helps users prioritize tasks and allocate specific time
blocks for each task, improving time management.
• Increased Accountability: Users can track their progress, stay on schedule, and be
accountable for their tasks.
• Ease of Use: To-Do list apps typically have a simple interface, making them easy to
use for people of all technical levels.

Overall, the To-Do List Application is a versatile tool suitable for individuals, teams,
students, and professionals to stay organized, prioritize tasks, and boost productivity in both
personal and work-related activities.
Features and Enhancements:
This section discusses potential future features and improvements that can be made to the
To-Do List application to enhance its functionality and user experience.

1. Authentication

• Description: Adding user authentication allows users to register, log in, and store their
tasks securely across devices.
• Benefit: This will enable users to access their tasks on different devices, and save their
progress without losing data.
• Example: Users can log in using email/password or social logins (Google, Facebook).

2. Task Categories

• Description: Users could categorize tasks by type (e.g., Work, Personal, Study, etc.)
to better organize their tasks.
• Benefit: This would make task management more organized and help users easily
filter tasks by category.
• Example: Adding a drop-down or tagging system to assign categories to tasks.

3. Prioritization

• Description: Users could assign priority levels to tasks (e.g., High, Medium, Low) to
help them focus on the most important tasks first.
• Benefit: Prioritizing tasks ensures users can manage their time effectively, tackling
more important tasks first.
• Example: Adding colored labels or icons that denote the priority of each task.

4. Task Reminders

• Description: Adding the ability to set reminders or notifications for tasks to remind
users about deadlines or due dates.
• Benefit: Reminders help users stay on track and ensure they don't forget important
tasks.
• Example: Users can set a notification that will appear when a task is approaching its
due date.

5. Cloud Sync

• Description: Integrating cloud services (such as Firebase or Google Drive) to sync

tasks across multiple devices.
• Benefit: Cloud syncing will ensure that tasks are always up to date, no matter what
device the user is on.
• Example: Tasks created on the desktop version of the app will automatically sync
with the mobile version.

6. Mobile App Version

• Description: A mobile app version of the To-Do List application for iOS and
Android.
• Benefit: This would allow users to access their tasks on-the-go, increasing the app’s
usability and reach.
 • Example: Developing the app using frameworks like React Native or Flutter for
cross-platform support.

7. Task Subtasks

• Description: Allow users to break down large tasks into smaller, manageable
subtasks.
• Benefit: Helps users break down complex tasks into actionable steps.
• Example: A main task like "Prepare Presentation" could have subtasks like "Research
topic," "Design slides," and "Practice speech."

8. Dark/Light Mode Customization

• Description: Provide users with more control over the color scheme, allowing them to
customize the light/dark mode settings.
• Benefit: Offers a more personalized experience and helps users adapt to different
environments (e.g., nighttime usage).
• Example: A settings page where users can select or adjust the app's theme manually.

9. Collaboration and Shared Lists

• Description: Enable users to share their To-Do lists with others and collaborate in
real-time.
• Benefit: This feature would be useful for teams or households to coordinate tasks and
track progress together.
• Example: A button to invite others to view or edit the list, similar to how Google
Docs works.

10. Analytics and Reporting

• Description: Adding an analytics feature that provides users with insights into their
productivity, task completion rates, and time management.
• Benefit: Helps users understand their habits and make improvements in their task
management approach.
• Example: Displaying statistics like "Tasks completed this week," "Average task
completion time," and "Pending tasks."
Conclusion:
The Conclusion section wraps up the project by summarizing key aspects of the
To-Do List app, reflecting on its development journey, and providing insights
into future plans.

Summary of the App’s Features

• The To-Do List app is designed to help users efficiently manage their
tasks by providing a simple, user-friendly interface.
• Key features include task creation, completion tracking, filtering tasks,
changing themes, and task deletion.
• The app is built with modern web technologies (HTML, CSS, JavaScript)
and incorporates libraries like TailwindCSS and DaisyUI for styling, and
Boxicons for icons.

Achievements and Learning Outcomes

• Throughout the development of the app, the key learning outcome is how
to apply design patterns like Singleton, Strategy, and Observer to
improve code maintainability and readability.
• The application’s structure has been refactored to follow best practices,
making it modular and scalable, ensuring easier future enhancements.

Challenges Overcome

• One of the major challenges was optimizing the app's UI for different
screen sizes and ensuring a seamless experience across devices.
• Another challenge was refactoring the code to ensure a clean separation of
concerns, especially in handling user inputs, task management, and theme
switching.

Next Steps

• Moving forward, the app could be extended with additional features such
as cloud synchronization, authentication, task reminders, and real-time
collaboration.
• The app could also benefit from performance optimizations and better
accessibility for a wider range of users, including those with disabilities.
Project Output Screenshoot: