Report on HTML Todo list

INTERNSHIP REPORT

Department of Computer Science and Engineering

Report on

Todo list using HTML coding language

Submitted by,

Subramanya c
JSS Academy of Technical Education, Bengaluru

1
Report on HTML Todo list

ABSTRACT
This abstract provides a concise overview of an HTML Todo List internship project. The project
focuses on the development of a simple yet efficient web-based application for managing tasks
and to-do lists. The primary goal is to enhance the user experience by providing a responsive and
intuitive interface.

The project involves leveraging HTML (Hypertext Markup Language), CSS (Cascading Style
Sheets), and JavaScript to create a dynamic and interactive web application. The application will
enable users to create, edit, and organize their tasks, as well as mark them as completed.

The key features of the HTML Todo List project include:

1. Task Management: Users can add, delete, and update tasks, specifying details such as task name,
due date, priority, and description.

2. Sorting and Filtering: The application allows users to sort tasks based on various parameters,
such as priority, due date, or completion status. Users can also filter tasks by different categories,
making it easier to locate specific tasks.

3. Task Completion: Users can mark tasks as completed, providing a visual indicator of their
progress and accomplishments. Completed tasks can be archived or removed based on user
preferences.

4. Responsive Design: The application will be designed with responsiveness in mind, ensuring that
it functions seamlessly across different devices, including desktops, tablets, and mobile phones.

5. User-Friendly Interface: The interface will be intuitive and user-friendly, with clear instructions
and easy-to-navigate menus. Visual cues and feedback will be incorporated to enhance the overall
user experience.

Throughout the project, best practices of web development will be followed, including code
modularity, separation of concerns, and adherence to web standards. Additionally, the project will
emphasize code readability, maintainability, and scalability.

The HTML Todo List internship project aims to provide a valuable learning experience in web
development, allowing interns to gain practical knowledge in front-end technologies. By working
on this project, interns will enhance their HTML, CSS, and JavaScript skills, as well as gain
experience in user interface design and application development.

2
Report on HTML Todo list

OBJECTIVE
The objective of the HTML Todo List internship project is to develop a functional and user-
friendly web-based application for task management. The project aims to provide interns with
hands-on experience in HTML, CSS, and JavaScript, while also emphasizing the importance of
user interface design and best practices in web development.

1. Enhance Technical Skills: The primary objective of the project is to enhance the interns'
technical proficiency in front-end development. By working on the HTML Todo List project,
interns will deepen their understanding of HTML, CSS, and JavaScript, and gain practical
experience in applying these languages to create interactive web applications.

2. Learn User Interface Design: Another objective of the project is to familiarize interns with user
interface (UI) design principles. Through the development of the Todo List application, interns
will gain insights into creating an intuitive and visually appealing interface that enhances the user
experience. They will learn to incorporate responsive design techniques and optimize the
application for various devices.

3. Implement Task Management Functionality: The project aims to develop a comprehensive task
management system. Interns will learn to create a user-friendly interface where users can add, edit,
and delete tasks. The application will enable sorting and filtering tasks based on different criteria,
such as priority and due date, and provide a means to track task completion.

4. Practice Web Development Best Practices: The internship project emphasizes the importance
of following best practices in web development. Interns will learn to write clean and modular code,
separate concerns between HTML, CSS, and JavaScript, and adhere to web standards. They will
gain experience in optimizing code for performance, maintaining code readability, and ensuring
scalability.

5. Collaborate and Problem-Solve: The project objective includes fostering a collaborative

environment where interns can work together to overcome challenges. They will learn to
effectively communicate and collaborate with team members, seek assistance when needed, and
engage in creative problem-solving to overcome technical hurdles.

6. Gain Practical Experience: Ultimately, the objective is to provide interns with real-world
experience in developing a web application. They will work on a project from inception to
completion, gaining insights into the software development lifecycle, project management, and
meeting deadlines. This practical experience will enhance their employability and provide a strong
foundation for future web development roles.

3
Report on HTML Todo list

By achieving these objectives, the HTML Todo List internship project aims to equip interns with
valuable skills and knowledge in front-end web development, user interface design, and
collaborative problem-solving. Through their participation in this project, interns will enhance
their technical abilities, build a portfolio of work, and lay the groundwork for a successful career
in the field of web development.

4
Report on HTML Todo list

INTRODUCTION
A to-do list is a simple prioritized list of the tasks a person must complete. People make a list of
everything they need to do, ranked according to priority from the most critical task at the top to
the least critical task at the bottom
A few of the features of a good to-do list application include:
•Plan and execute simple actions.
•Prioritize, manage, and reason about tasks.
•Record notes, action items and ideas.
To-dos are the tasks or the atomic entities that make up a to-do list. To-dos are made quickly, the
bulk of them do not specify the work; instead, they are typically just comprehensive enough to
serve as a valuable indicator. To be sure, to-do terminology like "Groceries" or "Car Wash" is
frequently grammatically correct. Because the signal is so quick, it is only useful for a short period
of time while the task is remembered. In certain cases, a simple item like a stack is enough to recall
the job without the need for a note.There are clear immediate implications to adding a to-do list to
a person’s productivity system. The functionalities provided by a good to-do list
application/system help declutter the user’s mind as their pending tasks are recorded safely and
they won’t be forgotten.The To-do list project is a user-friendly website which helps them to keep
a track of their tasks. It is a simple site which requires no sign-in/log-in or any personal details but
still records your task, mark the completed tasks, and stores them even if you visitthe site after a
few days.
Traditionally, they’re written on a piece of paper or post it notes and acts as a memoryaid. As
technology has evolved, we have been able to create a to-do lists with excel spreadsheets, word
documents, to-do list apps, Microsoft to do and google to do list to name a few. You can use to do
list in your home and personal life, or in the workplace.

Using a todo list can provide several benefits for individuals and teams. Here are some of the key
advantages of using a todo list:

1.Organization and Task Management: A todo list helps organize tasks and activities in a structured
manner. It allows you to prioritize tasks, set deadlines, and keep track of what needs to be done. It
helps prevent tasks from slipping through the cracks and ensures nothing important is overlooked.

2. Increased Productivity: By having a clear overview of tasks and priorities, a todo list enables
you to stay focused and productive. It helps you manage your time effectively, tackle tasks
systematically, and avoid getting overwhelmed by a large number of tasks.

5
Report on HTML Todo list

3. Improved Time Management: A todo list enables you to allocate time efficiently by breaking
down tasks into manageable units. It allows you to estimate the time required for each task and
allocate resources accordingly. This helps in avoiding procrastination and staying on track with
deadlines.

4. Reduced Stress and Anxiety: Having a todo list provides a sense of control and reduces stress
levels. By knowing what needs to be done and having a plan in place, you can alleviate the anxiety
associated with forgetting important tasks or feeling overwhelmed by a heavy workload.

5. Accountability and Accountability: A todo list creates accountability, both to yourself and others.
It helps you hold yourself accountable for completing tasks and meeting deadlines. Additionally,
if working in a team, a shared todo list promotes transparency, collaboration, and accountability
among team members.

6.Task Prioritization: A todo list allows you to prioritize tasks based on their urgency and
importance. By distinguishing between high-priority and low-priority tasks, you can focus on the
most critical activities and ensure they receive the necessary attention.

7. Progress Tracking and Motivation: A todo list allows you to track your progress as you complete
tasks. This sense of accomplishment and progress can be motivating and encourage you to keep
working towards your goals. Crossing off completed tasks provides a visual representation of
progress and boosts motivation.

8. Better Organization of Thoughts: Writing tasks down on a todo list helps clear your mind and
declutter your thoughts. It allows you to offload the mental burden of remembering tasks, enabling
you to concentrate on the task at hand more effectively.

9. Flexibility and Adaptability: A todo list offers flexibility to adjust priorities and adapt to
changing circumstances. You can easily rearrange tasks, add new tasks, or remove completed or
irrelevant tasks. This adaptability ensures that your todo list remains up to date and aligned with
your current needs.

10. Reflection and Review: A todo list serves as a record of your tasks and activities. It enables
you to review completed tasks, analyze your productivity, and identify areas for improvement. By
reflecting on your todo list, you can optimize your workflow and make adjustments to enhance
efficiency.

6
Report on HTML Todo list

METHODOLOGY
HTML :
HTML stands for Hyper Text Mark-up Language. It is used to design web pages using mark-up
language. HTML is the combination of Hypertext and Mark-up language. Hypertext defines the
link between the web pages. Mark-up language is used to define the text document within tag
which defines the structure of web pages. HTML5 is the fifth and current version of HTML. It has
improved the mark-up available for documents and has introduced application programming
interfaces (API) and Document Object Model (DOM).

CSS3 :
Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to
simplify the process of making web pages presentable. CSS allows you to apply styles to web
pages. More importantly, CSS enables you to do this independent of the HTML that makes up each
web page.
There are three types of CSS which are given below:
• Inline CSS
• Internal or Embedded CSS
• External CSS

JavaScript :
JavaScript is a lightweight, cross-platform and interpreted scripting language. It is well-known
for the development of web pages, many non-browser environments also use it. JavaScript can be
used for Client-side developments as well as Server-side developments.

Features of JavaScript:
• According to a recent survey conducted by Stack Overflow, JavaScript is the most popular
language on earth. With advances in browser technology and JavaScript having moved into the
server with Node.js and other frameworks, JavaScript is capable of so much more.
• Functions in JS are objects. They may have properties and methods just like another object. They
can be passed as arguments in other functions.
• Can handle date and time.
• Performs Form Validation although the forms are created using HTML.
• No compiler needed.

7
Report on HTML Todo list

JQuery :
JavaScript has long been considered an essential front-end language by developers, although it’s
not without its problems: riddled with browser inconsistencies, its somewhat complicated and
unapproachable syntax meant that functionality often suffered. That was until 2006, when jQuery
– a fast, small, cross-platform JavaScript library aimed at simplifying the front-end process –
appeared on the scene. By abstracting a lot of the functionality usually left for developers to solve
on their own, jQuery allowed greater

A Report On Web Designing 8 scope for creating animations, adding plug-ins, or even just
navigating documents. And it’s clearly successful – jQuery was by far the most popular JavaScript
library in existence in 2015, with installation on 65% of the top 10 million highest-trafficked sites
on the web

1. Planning and Designing:

• Define the requirements and functionalities of the todo list.
• Plan the layout and structure of the HTML elements.
• Design the visual appearance and user interface using CSS.

2. Setting Up the HTML Structure:

• Create the basic HTML structure for the todo list.
• Use appropriate semantic tags to structure the content.
• Identify the necessary elements, such as input fields, buttons, and task lists.

3. Styling with CSS:

• Apply CSS styles to enhance the visual appeal of the todo list.
• Define the colors, fonts, margins, and padding to create a pleasing design.
• Implement responsive design principles to ensure usability across different devices.

4. Adding jQuery Library:

• Download and include the jQuery library in your project.
• Link the jQuery library in the HTML file using the `<script>` tag.

8
Report on HTML Todo list

5. Handling User Interactions with jQuery:

• Use jQuery selectors to target specific HTML elements.
• Attach event listeners to capture user interactions, such as button clicks or form
submissions.
• Define functions to handle these events and perform corresponding actions.

6.Adding and Deleting Tasks:

• Implement functionality to add new tasks to the list.
• Capture user input and create new HTML elements dynamically using jQuery.
• Append the new task to the task list.

7. Marking Tasks as Completed:

• Implement functionality to mark tasks as completed.
• Utilize CSS classes or data attributes to track the completion status.
• Toggle the status of tasks using jQuery and update the visual representation accordingly.

8. Editing Tasks:
• Allow users to edit existing tasks in the list.
• Implement an edit mode that enables users to modify the task text.
• Update the HTML content and save the changes when the user finishes editing.

9. Persisting Data:
• Use browser storage mechanisms, such as localStorage or sessionStorage, to store the
task data.
• Store the task list in the browser's storage when a change occurs.
• Retrieve the stored data when the page loads to maintain persistence.

10. Testing and Debugging:

• Thoroughly test the functionality of the todo list across different scenarios.
• Debug any issues or errors encountered during testing.
• Ensure the todo list functions as intended and meets all the defined requirements.

9
Report on HTML Todo list

11. Documentation and Deployment:

• Document the project, including the purpose, features, and implementation details.
• Prepare a user guide or readme file explaining how to use the todo list.
• Deploy the project to a web server or hosting platform for public or internal use.

By following this methodology, you can create a functional and user-friendly todo list using
HTML, CSS, and jQuery. Remember to adapt the process according to your specific project
requirements and coding practices.

Using a todo list offers several features that can greatly enhance productivity and task
management. Here are some key features of using a todo list:

1. Task Organization: A todo list provides a structured way to organize and prioritize tasks. You
can list all your tasks in one place and categorize them based on their importance, due dates, or
project categories.

2. Task Prioritization: With a todo list, you can assign priorities to tasks. This helps you focus
on the most important and urgent tasks first, ensuring that critical work is completed on time.

3. Task Tracking: A todo list allows you to track the progress of your tasks. You can mark tasks
as complete, track ongoing tasks, and easily see which tasks are still pending.

4. Deadline Management: Todo lists often include due dates or deadlines for tasks. This helps
you stay on top of time-sensitive assignments and ensures that you meet important deadlines.

5. Task Details: You can include additional details for each task in a todo list. This may include
task descriptions, notes, attachments, or subtasks. Having these details readily available helps
you understand the scope and requirements of each task.

6. Task Reminders and Notifications: Todo lists often offer reminders and notifications to alert
you of upcoming deadlines or tasks that need attention. This feature helps prevent tasks from
slipping through the cracks and ensures timely completion.

10
Report on HTML Todo list

7. Task Collaboration: Some todo list applications or platforms support collaboration features,
allowing you to share tasks and collaborate with others. This is beneficial for team projects or
when working with colleagues, as it enables task delegation and progress tracking.

8. Flexibility and Customization: Todo lists can be customized to suit your specific needs and
preferences. You can customize the layout, color schemes, and sorting options to create a
personalized task management system that works best for you.

9. Cross-Platform Access: Many todo list applications are available across various devices and
platforms, including desktop, web, and mobile. This allows you to access your tasks from
anywhere, ensuring you stay organized even on the go.

10. Productivity Boost: By utilizing a todo list, you can experience a significant boost in
productivity. Having a clear overview of tasks, deadlines, and priorities helps you stay focused,
reduce mental clutter, and efficiently manage your workload.

Overall, a todo list provides a structured and efficient way to manage tasks, prioritize work, and
stay organized, ultimately leading to improved productivity and task completion.

11
Report on HTML Todo list

Code:

<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
.completed {
text-decoration: line-through;
color: gray;
}
</style>
</head>
<body>
<div class="container mt-4">
<h1>To-Do List</h1>
<div class="input-group mb-3">
<input type="text" id="taskInput" class="form-control" placeholder="Add new task">
<div class="input-group-append">
<button class="btn btn-primary" id="addTaskButton">Add</button>
</div>
</div>
<ul id="taskList" class="list-group">
</ul>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// Add task
$("#addTaskButton").click(function() {
var taskText = $("#taskInput").val();
if (taskText !== "")
{
var listItem = $("<li>", {
class: "list-group-item",
text: taskText
});
var deleteButton = $("<button>", {
class: "btn btn-sm btn-danger float-right",

12
Report on HTML Todo list

text: "Delete"
});
listItem.append(deleteButton);
$("#taskList").append(listItem);
$("#taskInput").val("");

// Delete task
deleteButton.click(function() {
$(this).parent().remove();
});

// Mark task as completed

listItem.click(function() {
$(this).toggleClass("completed");
});
}
});
});
</script>
</body>
</html>

Output:

The implemented todo list application provided a user-friendly interface for managing tasks. Users
could add new tasks by entering them in the input field and clicking the "Add Task" button. Tasks
were displayed in a list format, and users could mark them as completed by clicking on
checkboxes. Tasks could be edited or deleted by clicking on the respective buttons.

13
Report on HTML Todo list

Result:

14
Report on HTML Todo list

CONCLUSION
The HTML Todo List internship project has provided interns with a valuable opportunity to apply
their knowledge of HTML, CSS, and JavaScript in a practical setting. Throughout the project,
interns have worked towards the objective of developing a functional and user-friendly web-based
application for task management.

By actively participating in the project, interns have enhanced their technical skills in front-end
development. They have gained a deeper understanding of HTML, CSS, and JavaScript, and have
honed their abilities to create interactive and responsive web applications. Through the
development of the Todo List application, interns have acquired hands-on experience in
implementing task management functionality, including tasks creation, editing, and deletion. They
have also learned to incorporate sorting and filtering options, as well as task completion tracking,
to enhance the overall user experience.

The project has not only focused on technical proficiency but also emphasized the importance of
user interface design. Interns have learned to create intuitive and visually appealing interfaces,
ensuring that the Todo List application is user-friendly and easily navigable. They have gained
insights into responsive design principles, adapting the application for various devices, and
optimizing the user experience across platforms.

By following best practices in web development, interns have learned to write clean and modular
code, separate concerns between HTML, CSS, and JavaScript, and adhere to web standards. They
have developed an understanding of code optimization, readability, and scalability, which are
crucial aspects of creating maintainable and robust web applications.

The internship project has also provided a platform for interns to enhance their collaboration and
problem-solving skills. Through working together, interns have learned to communicate
effectively, seek assistance when needed, and engage in creative problem-solving to overcome
technical challenges. This collaborative environment has fostered teamwork and a sense of shared
responsibility, contributing to the overall success of the project.

In conclusion, the HTML Todo List internship project has been a valuable learning experience for
interns. It has provided them with practical exposure to front-end web development, user interface
design, and collaborative problem-solving. By achieving the project objectives, interns have not
only enhanced their technical skills but also gained practical experience in the software
development lifecycle, project management, and meeting deadlines.

15
Report on HTML Todo list

The knowledge and experience gained from this internship project will serve as a solid foundation
for interns as they pursue their careers in web development. The Todo List application developed
during the internship can serve as a valuable addition to their portfolio, showcasing their abilities
to potential employers.

16