Name:Rahul Raslal Mandal

Intership Project-
Comprehensive Report on HTML To-Do List,

Abstract
This comprehensive report delves into the intricacies of creating an HTML To-Do List,
shedding light on the multifaceted aspects involved in its development. The report explores
the project's objectives, the significance of To-Do Lists in productivity, the methodology
employed, user experience considerations, accessibility aspects, challenges faced, and the
broader implications for web development. By providing a thorough examination, this report
serves as a valuable resource for developers seeking to understand the nuances of crafting
effective and user-friendly To-Do Lists using HTML.
Objective
The primary objective of this project is to design and implement an HTML To-Do List that
not only serves as a functional task management tool but also embodies principles of
usability, accessibility, and a seamless user experience. This report aims to elucidate the
objectives that guided the project's development, offering insights into the considerations that
shape effective To-Do List implementations. It serves as a guide for developers looking to
create impactful and user-centric task management solutions.
Introduction
The introduction section provides a contextual background on the project, situating the
creation of an HTML To-Do List within the broader landscape of productivity tools. It
discusses the ubiquity of To-Do Lists in personal and professional settings, emphasizing their
role in organizing tasks, boosting efficiency, and aiding time management. The report sets the
stage for an in-depth exploration of how HTML is employed to create a practical and
accessible To-Do List.
Methodology
1. HTML Structure
This section delves into the methodology of structuring the To-Do List using HTML. It
explores the incorporation of HTML elements and attributes to create a well-organized and
semantic document structure. The report discusses the use of lists, forms, and other HTML
components to facilitate an intuitive user interface for task management.

2. User-Centric Design
User-centric design principles play a pivotal role in the success of a To-Do List. The
methodology section explores how HTML is leveraged to design an interface that resonates
with users. It discusses considerations such as visual hierarchy, color-coding, and intuitive
interactions, emphasizing the importance of creating a user-friendly experience.

3. Accessibility
Ensuring the accessibility of the To-Do List is of paramount importance. This section of the
methodology explores how HTML is utilized to create an inclusive design that
accommodates users with diverse abilities. The report discusses the implementation of ARIA
(Accessible Rich Internet Applications) attributes and semantic HTML to enhance
accessibility.

4. Responsiveness
The methodology extends to the implementation of responsive design strategies using
HTML. It explores how media queries and flexible layouts are employed to create a To-Do
List that adapts seamlessly to different screen sizes and devices. The report emphasizes the
significance of responsiveness in catering to users accessing the To-Do List from various
platforms.
Detailed Analysis
The detailed analysis section provides an in-depth examination of each facet of the project's
methodology. It explores the nuances of HTML structuring, user-centric design, accessibility
considerations, and responsive strategies. This comprehensive exploration aims to offer
developers a nuanced understanding of the decision-making processes, challenges faced, and
solutions implemented during the course of the To-Do List's development.

User Experience and Accessibility

This section places a special focus on the user experience and accessibility aspects of the To-
Do List. It delves into how HTML contributes to creating an intuitive and user-friendly
interface. The report emphasizes the importance of accessibility in ensuring that the To-Do
List is not just functional but usable by individuals with diverse needs and abilities.
Challenges and Solutions
Every development journey presents its set of challenges, and this section candidly addresses
the hurdles encountered during the project's development. It provides insights into the
strategies employed to overcome these challenges, offering valuable lessons for developers
facing similar roadblocks. The report underscores the iterative nature of development and the
importance of adaptability in the face of challenges.
Impact and Future Directions
The impact and future directions section reflect on the broader implications of the project. It
explores how the To-Do List, as a practical example of HTML implementation, contributes to
the web development community. The report contemplates potential future directions for the
project, encouraging developers to build upon the foundation laid by HTML and create even
more robust and user-friendly task management applications.
Code
1.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="container">
<div class="todo-app">
<h2>To-Do list</h2>
<div class="search">
<input type="text" placeholder="Add your task" spellcheck="false">
<button >Add</button>
</div>

<ul id="task">
<!--
<li class="checked">Create a project</li>
<li>Upload it online</li> -->
</ul>

</div>

</div>
<script src="scripte.js"></script>
</body>
</html>
2.CSS
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500
&display=swap');

* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}

body{
background: linear-gradient(90deg, rgba(14, 61, 201, 1) 23%, rgba(0, 212,
255, 1) 100%);
width: 100%;
height: 100vh;

.todo-app {
width: 100%;
max-width: 580px;
height: auto;
background-color: #ffffff;
margin: 100px auto 20px;
padding: 30px;
border-radius: 20px;

.todo-app h2{
color: rgb(2, 89, 92);
}

.search{

width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background: #edeef0;
 padding:0px 0px 0px 30px ;
margin-right: 40px;
border-radius: 20px;
margin-bottom: 20px;
margin-top: 20px;

.search input{
border: none;
outline: none;
background: transparent;
font-weight: 500;

.search button{
border: none;
outline: none;
background-color: darkorange;
border-radius: 20px;
padding: 14px 40px;
color: #ffffff;
font-weight: 500;
cursor: pointer;

ul li{

list-style: none;
padding: 10px;
cursor: pointer;
user-select: none;
font-size: 15px;
font-weight: 500;
position: relative;
transition: 3s ease-in;

ul li::before{
 content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-image: url(images/unchecked.png);
background-size: cover;
background-position: center;
top: 12px;
left: -16px;
}

ul li.checked{
color:#555;
text-decoration: line-through;
}

ul li.checked::before{
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-image: url(images/checked.png);
background-size: cover;
background-position: center;
top: 12px;
left: -16px;
}
3.JavaScript:
const textbox =document.querySelector(".search input");
const textbutton =document.querySelector(".search button");

textbutton.addEventListener("click",()=>{
if (textbox.value == "") {

alert("you have to write sum thing")

}
else{
let li =document.createElement("li");
li.innerHTML= textbox.value;
task.appendChild(li);
// let span =document.createElement("span")
// span.innerHTML = "\u007";
// li.appendChild(span)
// console.log(textbox.value);

}
textbox.value ="";
})

task.addEventListener("click", function(e){
if (e.target.tagName == "LI") {

e.target.classList.toggle("checked");

}
else if (e.target.tagName == "SPAN") {
e.target.parentElement.remove();
}
} ,false );
4.Result
Conclusion
In conclusion, this report synthesizes the key findings, methodologies, and outcomes of the
project. It reiterates the importance of HTML in crafting effective and user-centric To-Do
Lists. The report concludes by emphasizing the significance of the project in showcasing the
potential of HTML in web development and encouraging developers to explore, innovate,
and contribute to the ever-evolving field of task management solutions.