INDUSTRY PRACTICE

Class ST IoT
Report
on
IP Mini Project
Title:- Interactive To-Do List

Submitted by

Roll no.-05, Sajjad Chaus

Roll no.-11, Pratik Gupta
Roll no.-16, Harshit Mishra
Roll no.-17,Sunay Mishra
Roll no.-30,Kishan Yadav

Under the guidance of

Ms. Priyanka Musale

1
 INDEX
SR NO. CONTENT PAGE NO.

1. Abstract 3

2. Introduction 3

3. Background 4

4. System Description 5

5. Result and Discussion 6

6. Conclusion and Future Scope 7

7. References 8

8. Annexure (code) 9

2
ABSTRACT:

The interactive to-do list, a cornerstone of modern web design, serves as a conduit for
guiding users seamlessly through their tasks and schedules. As internet access
diversifies across various devices - from expansive desktop monitors to palm-sized
smartphones - the need for responsive web design has become paramount. This project
delves into the design of a responsive interactive to-do list that effortlessly adapts to
different screen sizes, ensuring a consistent user experience across devices. The
approach encompasses a blend of flexible grid layouts, media queries, and dynamic
resizing of visual elements. By ensuring the interactive to-do list's intuitive and
aesthetic consistency, we aim to offer an optimal user experience for all individuals,
irrespective of the device they choose.

INTRODUCTION :

In the dynamic digital world, websites have become the primary interface between
businesses, organizations, and their audiences. As users transition between various
devices throughout their day, from large desktop monitors at work to tablets on the
couch, and smartphones on the move, ensuring a seamless user experience has never
been more crucial. Central to this user experience is the interactive to-do list—a pivotal
component that organizes tasks and schedules, enhancing productivity and engagement
on a website.

An interactive to-do list's primary role is to provide clear, concise entries for different
tasks or activities. However, when viewed on different devices, a design that looks
pristine on a desktop might appear cluttered or even unusable on a smaller smartphone
screen. The solution? A responsive interactive to-do list.

This introduction will set the stage for our exploration into the design and
implementation of a responsive interactive to-do list, a tool that not only looks good but
also performs flawlessly, adapting to the diverse array of screen sizes in today's multi-

3
device world. We will delve into the principles of responsive design, the techniques to
create flexible layouts, and the importance of maintaining an intuitive user interface no
matter the screen size.

BACKGROUND :

The early days of the internet were characterized by static web pages primarily
designed for viewing on desktop computers. During these times, websites were crafted
with fixed pixel widths, leading to predictable viewing experiences. However, with the
proliferation of internet-enabled devices, particularly in the late 2000s to early 2010s, it
became apparent that this one-size-fits-all approach was untenable.

The mobile revolution, spearheaded by smartphones and tablets, fundamentally shifted

how users accessed and consumed online content. It was not just the smaller screens
that web designers had to contend with, but also the variety of resolutions, device
orientations, and user interactions (like touch vs. mouse control). This led to the rise of
the concept of "Responsive Web Design" (RWD). Coined by Ethan Marcotte in his
seminal 2010 article, RWD emphasized fluid grids, flexible images, and media queries
as key ingredients for creating adaptive web designs.

Central to the RWD paradigm is the interactive to-do list. Traditionally, to-do lists were
simple, static elements on web pages, offering limited interactivity and flexibility. On
smaller screens, these lists would either become cluttered or lose functionality. The
challenge then was to design interactive to-do lists that maintained their core function
while fitting organically into varied screen real estate.

The need for responsive interactive to-do lists grew not only from aesthetic
considerations but also from functional ones. Users on mobile devices, often on the go,
required quick and hassle-free access to their tasks and schedules. Any impediment
could lead to decreased productivity or even disengagement from using the application.

Thus, the background of our topic is rooted in the rapid evolution of internet-access
devices and the necessity to adapt web designs, especially interactive to-do lists, to
cater to the broad spectrum of user devices and preferences.

This background provides a historical context and underlines the importance of the
responsive interactive to-do list in modern web design. Adjustments can be made based
on the depth and specificity required for your project.

4
SYSTEM DESCRIPTION :

Result & Discussion (OUTPUT) :

5
CONCLUSION :

Interactive to-do lists have evolved significantly, shifting from static desktop apps to
dynamic, responsive web solutions crucial for modern task management. Responsive Web
Design ensures functionality across devices, while JavaScript empowers dynamic user
interactions and seamless task handling. User experience is paramount, demanding intuitive,
efficient interfaces for enhanced productivity. As technology progresses, responsive design
principles and user-centric approaches will continue shaping more advanced task
management tools, underscoring the need for adaptability and innovation in digital solutions.

6
FUTURE SCOPE :

1. Integration of AI and Machine Learning: Future interactive to-do lists may utilize AI
algorithms to provide smart suggestions, prioritize tasks based on user behavior, and
automate repetitive tasks.

2. Enhanced Collaboration Features: To-do lists could evolve to support real-time

collaboration among multiple users, enabling team members to assign tasks, share progress
updates, and communicate seamlessly.

3. IoT Integration: Integration with Internet of Things (IoT) devices could allow for task
management linked to physical actions or environments, such as automatically adding
grocery items to a list when they run low.

4. Voice and Natural Language Processing: Implementation of voice commands and

natural language processing could enable users to add, update, and manage tasks using
voice assistants, improving accessibility and convenience.

5. Augmented Reality (AR) Interfaces: AR could offer innovative ways to visualize and
interact with to-do lists in real-world environments, enhancing user engagement and task
organization through immersive experiences.

REFERENCES :

1. “JavaScript and JQuery: Interactive Front-End Web Development" by Jon Duckett

This book provides a comprehensive introduction to JavaScript and jQuery, covering DOM
manipulation, event handling, and interactive web development techniques that are
fundamental for creating dynamic interfaces like interactive to-do lists.

2.“Responsive Web Design" by Ethan Marcotte

7
Ethan Marcotte coined the term Responsive Web Design (RWD) and this book delves deep
into the principles, techniques, and best practices for designing websites that adapt
seamlessly to various devices and screen sizes—a critical aspect for interactive to-do lists.

3."Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability" by

Steve Krug

While not specific to to-do lists, this book is essential for understanding usability principles
in web design. It emphasizes creating intuitive and user-friendly interfaces, which is crucial
for designing effective interactive to-do lists.

4."Designing Interfaces: Patterns for Effective Interaction Design" by Jenifer Tidwell

This book covers a wide range of interaction design patterns and principles that are
applicable to designing interactive elements, including to-do lists. It provides practical
insights and examples for creating intuitive and engaging user interfaces.

5."Learning JavaScript Design Patterns" by Addy Osmani

Understanding design patterns in JavaScript is crucial for developing maintainable and

scalable web applications, including interactive to-do lists. This book explores various design
patterns and their practical implementations in JavaScript.

ANNEXURE (CODE) :

CODE :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Project by Anurag Sir</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>

8
</head>
<body>

<main>
<h1 class="title"> Focus on <span>Today</span> </h1>
<div class="app-container">
<h2 class="subtitle">
<span>Today</span>
<div class="sun-container">
<img class="sun-icon" src="./Vector.png"
alt="sun">
<img class="sun-eye" src="./Sun-eye.png" alt="sun
eye">
</div>
</h2>

<p class="progress-label">Raise the bar by completing

your goals!</p>
<div class="progress-bar show-error">
<div class="progress-value">

</div>

</div>
<p class="error-label">
Please set all the 3 goals!
</p>
<div class="goal-container ">
<div class="custom-checkbox">
<img class="check-icon" src="./Vector 1.png" alt=""
srcset="">
</div>
<input class="goal-input" type="text"
placeholder="Add new goal...">
</div>

9
 <div class="goal-container">
<div class="custom-checkbox">
<img class="check-icon" src="./Vector 1.png"
alt="" srcset="">
</div>
<input class="goal-input" type="text"
placeholder="Add new goal...">
</div>
<div class="goal-container ">
<div class="custom-checkbox">
<img class="check-icon" src="./Vector 1.png"
alt="" srcset="">
</div>
<input class="goal-input" type="text"
placeholder="Add new goal...">
</div>
<p class="quote">“Move one step ahead, today!”</p>

</div>
</main>
</body>
</html>

<!-- <p class="made-with">Made with by Kishan

Yadav,Pratik Gupta,Sajjad ,Harshit,Sunay</p> -->

CSS:
@import url('https://fonts.googleapis.com/css2?
family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800
;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swa
p');

10
*{
box-sizing: border-box;
}
body {
background-color: #48A30012;
font-family: "Poppins", sans-serif;
}

main {
padding: 0 16px 32px;
}

.title {
font-size: 64px;
color: #48A300;
text-align: center;
}

.title span {
color: #61481C;
}

.app-container {
background-color: #FBFBFB;
max-width: 660px;
margin: 0 auto;
border-radius: 15px;
padding: 32px 42px;
box-shadow: 0 0 8px 0px rgba(0,0,0,0.1);
}

/* Define the keyframes for the rotation */

@keyframes rotateSun {

11
 from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

.sun-container {
position: relative;
display: inline-block;
}

.sun-icon {
vertical-align: middle;
margin-left: 16px;
animation: rotateSun 2s linear infinite;
}

.sun-eye {
position: absolute;
top: 50%;
left: 50%;
transform: translate(20%, -40%);
height: auto;
}

.progress-label {
color: #858585;
font-size: 14px;
margin-bottom: 20px;
}

12
.progress-bar {
height: 30px;
background-color: #48A3001A;
border-radius: 15px;
margin-bottom: 20px;
}

.progress-value {
background-color: #48A300;
width: 70%;
height: 100%;
border-radius: 15px;
font-weight: 500;
font-size: 10px;
color: #EEFFE0;
line-height: 15px;
display: flex;
align-items: center;
padding-left: 20px;

.error-label {
font-size: 14px;
color: #FF5151;
margin-block: 20px;
display: none;
}
.show-error .error-label {
display: block;
}

13
.goal-container {
background-color: #FFFFFF;
display: flex;
align-items: center;
padding: 0 22px;
margin-bottom: 42px;
border: 1px solid #0000001A;
height: 82px;
border-radius: 17px;
}

.custom-checkbox {
width: 24px;
height: 24px;
border: 2px solid #61481C4D;
border-radius: 50%;
flex-shrink: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.check-icon{
display: none;
}
.completed .check-icon{
display: block;
}
.goal-input {
padding-left: 22px;
font-family: inherit;
font-size: 16px;

14
 border: none;
outline: none;
width: 100%;
align-self: stretch;
font-weight: 500;

}
.completed .goal-input{
color: #48A300;
text-decoration: line-through;
}
.goal-input::placeholder {
color: #D9D9D9;
}

.quote {
font-weight: 500;
margin-top: 54px;
text-align: center;
line-height: 24px;

font-family: "Poppins", sans-serif;

}

.made-with {
font-size: 10px;
font-weight: 500;
text-align: center;
margin-top: 64px;
}
.completed .custom-checkbox{
background-color: #48A300;
border-color: #48A300;

15
}

@media (max-width: 768px) {

.title {
font-size: 32px;
}
.app-container {
padding: 16px 32px;
}
.goal-container {
height: 64px;
margin-bottom: 24px;
border-radius: 12px;
}
.custom-checkbox {
width: 20px;
height: 20px;
}
.made-with {
margin-top: 32px;
}
.progress-bar {
height: 24px;
}
}

const checkBoxList = document.querySelectorAll('.custom-checkbox');

const inputFields = document.querySelectorAll('.goal-input');
const errorLabel = document.querySelector('.error-label');
const progressBar = document.querySelector('.progress-bar');
const progressValue = document.querySelector('.progress-value');

16
let completedTasks = 0;

checkBoxList.forEach((checkbox) => {
checkbox.addEventListener('click', (e) => {
const allGoalsAdded = [...inputFields].every(input => input.value.trim() !== '');
if (allGoalsAdded) {
checkbox.parentElement.classList.toggle('completed');
if (checkbox.parentElement.classList.contains('completed')) {
completedTasks++;
} else {
completedTasks--;
}
updateProgress();
errorLabel.style.display = 'none';
} else {
errorLabel.style.display = 'block';
}
});
});

function updateProgress() {
const completedGoals = [...checkBoxList].filter(checkbox =>
checkbox.parentElement.classList.contains('completed')).length;
const totalGoals = checkBoxList.length;
const progressPercentage = (completedGoals / totalGoals) * 100;

// Update the width of the progress bar

progressValue.style.width = progressPercentage + '%';

// Update the text content of the progress bar

progressValue.textContent = ${completedGoals}/${totalGoals} Completed;

// Hide the progress bar if no goals are completed

if (completedGoals === 0) {
progressValue.style.display = 'none';
} else {
progressValue.style.display = 'flex'; // Assuming flex was the original display style
}
}

17
// Initial call to set the progress on page load
updateProgress();

18