A MICRO-PROJECT

ON
Develop a To-Do List using HTML,CSS and
JavaScript

Session:- 2024-25
This Micro-Project work is a partial fulfilment of requirement for the award of
Diploma in Computer Technology for subject “Client Side Scripting Language”.
Under The Guidance Of
Prof. S.K. kharkate
(Lecturer in Computer Technology)

Students Name Roll No.

Tanmay M. Warthe 22
 Government Polytechnic, Bramhapuri
Dist- Chandrapur
Department Of Computer technology

This is to certify that the following student of this institute have carried out this
Micro-Project Work on “Develop a To-Do List Using Html , Css and JS
”under the guidance of Prof. S.K.Kharkate in the Department of
Computer Technology during the session 2024-
25. This work has been done in the partial fulfilment of the award for Diploma in
Computer Technology from Maharashtra State Board Of Technical Education, Mumbai.

Submitted By:-

Students Name Roll No.

Tanmay M. Warthe 22

Project Guide Head Of Department

Prof. S.K. Kharkate Prof. S.K. Kharkate
 PART A :- A MICRO-PROJECT PROPOSAL

1.0 BRIEF INTRODUCTION

A To-Do List Application is a very efficient tool to keep in check all that has to be completed
at any point in time. It gives you the ability to add, change or remove to do items in order to make
sure that you are on schedule. A to-do list can also enhance efficiency by assisting to follow
methodology and dividing large projects into smaller parts so that every step is accurately monitored
in case some details get missed out.

2.0 AIM OF THE MICRO-PROJECT

Develop a To-Do List using Html , Css and JavaScript.

3.0 COURCE OUTCOMES

Co 1 .Create interactive web pages using program flow Control structure.

Co 2 .Implement Arrays and functions in Java script.

Co 3.Create event based web forms Using JavaScript.

4.0 LITERATURE REVIEW

The to-do list application is a simple tool that helps users manage tasks by adding and removing
items. It uses basic web technologies—JavaScript, HTML, and DOM manipulation—making
it easy to understand and a great way to learn about handling user interactions and updating
web content dynamically.

Keywords:
• getElementById : A method that retrieves an HTML element by its unique ID.
• addEventListener : Attaches an event handler (e.g., click) to an element, triggering a specific
action.
• createElement : Dynamically creates an HTML element (e.g., list item) within the document.
• appendChild() : Adds a child element to an existing parent element in the DOM.
• textContent : Sets or returns the text content of a node, including any descendants.
• trim() : Removes whitespace from both sides of a string, ensuring clean input.
• remove() : Deletes a selected element from the DOM.
 5.0 PROPOSED METHODOLOGY

Algorithm for To-Do List Application:

• Start
• Retrieve the "Add Task" button using getElementById.
• Define an empty list or area (e.g., an HTML <ul> element) where the tasks will be displayed.
• Create an event listener for the button that triggers when clicked.
• Inside the event:
o Get the value entered by the user from the task input field.
o If the task value is not empty then.
o Create a new list item (<li>) for the task.
o Append the task text to the list item.
o Create a "Delete" button and append it to the list item.
o Attach an event listener to the delete button to remove the task when clicked.
o Append the task with the delete button to the task list in the HTML.
o Clear the input field for the next task.
• End

6.0 RESOURCES USED

Sr. No. Name of the Specification

resource/Material used
1. Laptop Ryzen 7, 1TB,16 GB
RAM
2. Software MS Word
3. Other resources Notes, Reference Books

4. Search Engine Google Chrome

 7.0 ACTION PLAN

Details of PlannedStart Planned Name Of

Sr.No Activity Date Finish Date Student

Discuss About The

1. Topic

Information Search
2.
And resource collect

3. Discuss with project

Guide
Tanmay
Warthe
4. Implement part A

5. Implement Coding

Testing and correction

6. of error

7. Implement part-b

Submission of final
8. report
\
 PART B:- Micro-Project Proposal

1. Rationale

JavaScript is limited featured client side programming language. JavaScript runs at theclient
end through the user’s browser without sending messages back and forth to the server. It is
widely used by the web developers to do things such as build dynamic webpages, respond to
events, create interactive forms, validate data that the visitor enters into a form, control the
browser etc. This course helps student to create highly interactive web pages using these
features.

2. Aim Of The Project

Develop a To-Do List using Html , Css and JavaScript.

3. Course Outcomes Achieved

Co 1 .Create interactive web pages using program flow Control structure.

Co 2 .Implement Arrays and functions in Java script.

Co 3.Create event based web forms Using Javascript.

4. LITERATURE REVIEW

The to-do list application is a simple tool that helps users manage tasks by adding and removing
items. It uses basic web technologies—JavaScript, HTML, and DOM manipulation—making
it easy to understand and a great way to learn about handling user interactions and updating
web content dynamically.

Keywords:
• getElementById : A method that retrieves an HTML element by its unique ID.
• addEventListener : Attaches an event handler (e.g., click) to an element, triggering a specific
action.
• createElement : Dynamically creates an HTML element (e.g., list item) within the document.
• appendChild() : Adds a child element to an existing parent element in the DOM.
• textContent : Sets or returns the text content of a node, including any descendants.
• trim() : Removes whitespace from both sides of a string, ensuring clean input.
• remove() : Deletes a selected element from the DOM.
 5. Actual Methodology Followed
Algorithm for To-Do List Application:
• Start
• Retrieve the "Add Task" button using getElementById.
• Define an empty list or area (e.g., an HTML <ul> element) where the tasks will be displayed.
• Create an event listener for the button that triggers when clicked.
• Inside the event:
o Get the value entered by the user from the task input field.
o If the task value is not empty then.
o Create a new list item (<li>) for the task.
o Append the task text to the list item.
o Create a "Delete" button and append it to the list item.
o Attach an event listener to the delete button to remove the task when clicked.
o Append the task with the delete button to the task list in the HTML.
o Clear the input field for the next task.
• End

6. Resources used

Sr. No. Name of the resource/Material used Specification

1. Laptop Ryzen 7, 1TB,16 GB

RAM
2. Software MS Word

3. Other resources Notes, Reference

Books
4. Search Engine Google Chrome
 7. Program Code

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TO DO List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="todo-container">
<h1>To-Do List</h1>
<input type="text" id="new-task" placeholder="Add a new task">
<button id="add-task-btn" onclick="myFunction()">Add Task</button>

<ul id="task-list"></ul>
</div>
<script>
function myFunction() {
let taskInput = document.getElementById('new-task');
let taskValue = taskInput.value.trim();

if (taskValue) {
let li = document.createElement('li');
li.textContent = taskValue;

let deleteBtn = document.createElement('button');

deleteBtn.textContent = 'Delete';
deleteBtn.addEventListener('click', function() {
li.remove();
});

li.appendChild(deleteBtn);
document.getElementById('task-list').appendChild(li);

taskInput.value = '';
}
}
</script>
</body>
</html>
Style.css

body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
margin: 0;
}

.todo-container {
background: white;
padding: 20px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}

input[type="text"] {
width: 80%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #218838;
}
ul {
list-style-type: none;
padding: 0;
}

li {
padding: 10px;
background: #e9e9e9;
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}

li button {
background-color: #dc3545;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 5px;
}

li button:hover {
background-color: #c82333;
}
8. Output
9. Skill Developed:
• We are able to create a interactive web pages using program flow control
structure.

• We are able to implements functions and Events in JavaScript.

10. Reference:
Client side scripting (techknowledge publication).