■

Project Knowledge Report

What is used & what you need to know

■ To-Do List ■■ BMI Calculator

Internship Project Documentation • 2025–2026

Project Knowledge Report — To-Do List & BMI Calculator Page 1

 ■ Project 1 — To-Do List

What does this project do?

A simple task manager where you can add tasks, mark them as done, delete them, and filter by All / Active
/ Completed. All tasks are saved in the browser so they remain even after you close it.

Languages Used

HTML CSS JavaScript JSON

20% 30% 40% 10%

Structure Design Logic + Storage Data Format

■ HTML — 20% (Structure)

HTML builds the skeleton of the page — the input box, buttons, and containers. It does not make things
look good or work. It just defines what exists on the page.

HTML used in this project:

• <input> — the text box where you type a task

• <button> — the + button, filter buttons, delete button
• <div> — containers for the card, stats box, task list
• <h1>, <p> — title and subtitle text
• <span> — wraps the task text inside each task item

What you need to know:

Concept What you need to know

Tags Every HTML element is written inside < > brackets. Example:
<button>Click</button>

id= Used to give an element a unique name so JavaScript can find it. Example:
id="task-input"

onclick= Tells HTML what JS function to run when a button is clicked. Example:
onclick="addTask()"

link CSS <link rel="stylesheet" href="[Link]"> — connects your CSS file to the
HTML

Project Knowledge Report — To-Do List & BMI Calculator Page 2

 link JS <script src="[Link]"></script> — connects your JS file at the bottom of body

<!-- Example from this project -->

<div class="input-row">
<input type="text" id="task-input" placeholder="Add a new task..." />
<button class="add-btn" onclick="addTask()">+</button>
</div>

■ CSS — 30% (Design)

CSS makes the page look beautiful — colors, fonts, spacing, rounded corners, hover effects and
animations. Without CSS the page would look plain and ugly.

CSS used in this project:

• background, color — card background white, buttons indigo colored

• border-radius — rounded corners on card, buttons, task items
• display: flex — puts input and + button side by side
• padding, margin — spacing inside and outside elements
• box-shadow — soft shadow under the white card
• transition — smooth color change on hover
• @keyframes slideIn — task slides in with animation when added
• opacity: 0.55 — completed tasks appear faded
• text-decoration: line-through — strikethrough on done tasks

What you need to know:

Concept What you need to know

Selector Tells CSS which element to style. .app means class="app", #id means
id="id"

class= Used to apply CSS styling. Example: class="add-btn" gets the styles from
.add-btn { }

display: flex Puts items side by side in a row automatically. Used for input+button and
stats row

transition Makes changes smooth/animated instead of instant. Example: transition: all

0.2s

@keyframes Defines an animation. slideIn moves the task from slightly up to its normal
position

/* Task slides in when added */

@keyframes slideIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }

Project Knowledge Report — To-Do List & BMI Calculator Page 3

 }

.todo-item {
animation: slideIn 0.3s ease;
}

■ JavaScript — 40% (Logic + Storage)

JavaScript is the most important part of this project. It handles everything that happens — adding tasks,
deleting, filtering, and saving data.

JS used in this project:

• addTask() — reads input, creates task object, saves, updates screen

• toggle(id) — flips task between done and not done
• del(id) — removes task from array by its id
• setFilter() — changes which tasks are shown (All/Active/Done)
• render() — rebuilds the task list on screen from saved data
• localStorage — saves tasks in browser (like writing to a JSON file)

What you need to know:

Concept What you need to know

Variables let tasks = [] stores the task list. let currentFilter = "all" tracks current filter

Functions function addTask() { } — a block of code that runs only when called

Array .push() Adds a new item to end of array. [Link]({ id, text, done }) adds a new
task

Array .filter() Creates new array keeping only items that match a condition. Used for delete
and filter

Array .map() Goes through every item and changes it. Used in toggle to flip done status

DOM — [Link]("task-input") finds the input box on the page

getElementById

.textContent Changes the text inside an element. Used to update stats numbers

.innerHTML Changes the full HTML inside an element. Used to rebuild the task list

localStorage Browser storage. setItem saves data, getItem reads it — works like a JSON
file

[Link]() Converts array/object to a JSON string so it can be saved in localStorage

Project Knowledge Report — To-Do List & BMI Calculator Page 4

 [Link]() Converts JSON string back to array/object so JS can use it

// Adding a task — full flow

function addTask() {
let text = [Link]("task-input").value; // 1. read input
let tasks = getTasks(); // 2. load saved tasks
[Link]({ id: [Link](), text: text, done: false }); // 3. add new task
saveTasks(tasks); // 4. save back
render(); // 5. update screen
}

■ JSON — 10% (Data Format)

JSON is the format used to store and read task data. It is exactly the same format as a Python dictionary.

■ You already know this! JSON looks exactly like a Python dictionary. The only difference: keys
must have double quotes, and true/false are lowercase.

// How tasks are stored as JSON in localStorage:

[
{ "id": 1716000000001, "text": "Buy milk", "done": true },
{ "id": 1716000000002, "text": "Study HTML", "done": false },
{ "id": 1716000000003, "text": "Submit report","done": false }
]

What you need to know:

Concept What you need to know

JSON format Data stored as key: value pairs inside { }. Arrays use [ ]. Same as Python dict

[Link]() Python's [Link]() — converts JS object to JSON string to save it

[Link]() Python's [Link]() — converts JSON string back to JS object to use it

View in browser Press F12 → Application tab → Local Storage → see the live JSON data

Project Knowledge Report — To-Do List & BMI Calculator Page 5

 ■
Project 2 — BMI Calculator
■

What does this project do?

A health calculator where the user enters weight, height, and age. On clicking Calculate, it shows the BMI
value, category (Underweight / Normal / Overweight / Obese), a colored progress bar, and a health tip.

Languages Used

HTML CSS JavaScript JSON

25% 35% 35% 5%

Structure Design Formula + Logic Category Data

■ HTML — 25% (Structure)

HTML creates all the visible elements — input fields, buttons, and the result area that shows after
calculation.

HTML used in this project:

• <input type="number"> — number fields for weight, height, age

• <button> — unit toggle buttons (Metric/Imperial) and Calculate button
• <div> — card container, result area, progress bar, info boxes
• <span> — unit labels (kg, cm, lbs, in) shown inside input boxes
• class="hidden" — result section is hidden by default, JS removes this class to show it

What you need to know:

Concept What you need to know

input type=number Accepts only numbers. Used for weight, height, age fields

placeholder= Light grey hint text inside input. Disappears when user types

class="hidden" The result div starts hidden. JavaScript removes this class when Calculate is
clicked

id= on every element Every element that JS needs to update must have a unique id

Project Knowledge Report — To-Do List & BMI Calculator Page 6

 <!-- Result section — hidden at start, shown after calculation -->
<div class="result hidden" id="result">
<div class="bmi-value" id="bmi-val"></div>
<div class="bmi-label" id="bmi-cat"></div>
<div class="bar-fill" id="bar"></div>
<div class="tip" id="tip"></div>
</div>

■ CSS — 35% (Design)

CSS gives the BMI calculator its dark theme, green buttons, colored result values, and the animated
progress bar.

CSS used in this project:

• Dark background — background: linear-gradient(#0d1117, #161b22)

• Green button — background: #238636 with hover effect
• Input styling — dark input box, green border on focus
• Progress bar animation — width changes with CSS transition to animate smoothly
• .hidden — display: none hides result until JS removes the class
• position: absolute — unit labels (kg, cm) are placed inside the input box

What you need to know:

Concept What you need to know

.hidden class display: none makes an element invisible. JS adds/removes this class to
show/hide result

transition Makes the progress bar width change smoothly instead of jumping instantly

linear-gradient Creates a gradient background going from one color to another

position: Used to place the unit label (kg/cm) inside the input box on the right side
relative/absolute

:focus input:focus { } styles the input only when the user clicks on it (shows green
border)

::-webkit-... / -moz- Removes the up/down arrows from number inputs in Chrome and Firefox

/* Progress bar animates when width changes */

.bar-fill {
width: 0%;
transition: width 0.6s ease; /* smooth animation */
}

/* JS sets new width → bar animates to it */

[Link] = "42%";

Project Knowledge Report — To-Do List & BMI Calculator Page 7

 ■ JavaScript — 35% (Formula + Logic)
JavaScript does the actual calculation, decides which category the BMI falls in, and updates every part of
the result on screen.

JS used in this project:

• calculate() — reads inputs, applies BMI formula, calls showResult()

• setUnit() — switches between Metric and Imperial, updates unit labels
• showResult() — updates BMI value, category, bar width, color, tip on screen
• if / else if / else — classifies BMI into 4 categories
• parseFloat() — converts text from input box into a decimal number
• [Link]() — rounds BMI to 1 decimal place
• getBoundingClientRect() — forces browser to reset bar before animating again

What you need to know:

Concept What you need to know

parseFloat() Converts string "70" to number 70.0. Input values are always strings, must
convert first

[Link](x*10)/10 Rounds to 1 decimal. [Link](22.857 * 10) / 10 = 22.9

if / else if / else Checks BMI range and assigns category. Same as Python if/elif/else

.[Link]() Removes a CSS class from element. Used to remove "hidden" and show
result

.[Link] Directly changes CSS width of bar from JS. [Link] = "42%"

.[Link] Changes text color from JS. Used to color BMI value based on category

getBoundingClientRe Forces browser to register CSS reset so bar animation replays on recalculate
ct()

function calculate() {
let weight = parseFloat([Link]("weight").value);
let height = parseFloat([Link]("height").value);

// BMI Formula (Metric)

let h = height / 100; // cm → meters
let bmi = weight / (h * h); // BMI = kg / m²
bmi = [Link](bmi * 10) / 10; // round to 1 decimal

// Classify
if (bmi < 18.5) category = "Underweight";
else if (bmi < 25) category = "Normal";

Project Knowledge Report — To-Do List & BMI Calculator Page 8

 else if (bmi < 30) category = "Overweight";
else category = "Obese";
}

■ JSON — 5% (Category Data)

JSON is used minimally in BMI — just to store the 4 category definitions (color, bar percentage, health tip)
as a structured data list.

// [Link] — stores category rules

[
{ "range": "Below 18.5", "category": "Underweight",
"color": "#58a6ff", "barPercent": 15,
"tip": "Consider eating more nutrient-rich foods." },

{ "range": "18.5-24.9", "category": "Normal Weight",

"color": "#3fb950", "barPercent": 42,
"tip": "Great! Keep maintaining a balanced diet." }
// ... 2 more categories
]

■ In BMI, JSON is not used for storage (no data to save). It is only used as a clean way to organize
the 4 category definitions instead of writing 4 separate if/else blocks with repeated code.

Project Knowledge Report — To-Do List & BMI Calculator Page 9

 ■ Quick Summary — Both Projects

Language Usage at a Glance

Language To-Do List BMI Calculator What it does

Page structure — inputs, buttons,

HTML 20% 25%
containers

CSS 30% 35% Colors, fonts, spacing, animations

JavaScript 40% 35% All the logic, events, calculation, storage

Data format for saving/organising

JSON 10% 5%
information

Most Important Things to Learn

# Concept Used In Why Important

1 HTML tags + id= + onclick= Both Foundation of every web project

2 CSS selectors + flexbox Both Makes UI look clean and aligned

3 JS functions + if/else Both Core logic of every feature

DOM — getElementById +
4 Both How JS talks to the page
.textContent/.innerHTML

5 Arrays — .push() .filter() .map() To-Do How task list is managed

6 localStorage + [Link]/parse To-Do How data is saved permanently

Convert input text to number for

7 parseFloat + [Link] BMI
formula

8 CSS transition + classList BMI Animate bar and show/hide result

Both projects are built using only HTML, CSS, and JavaScript — no frameworks, no installation needed.
Just open [Link] in any browser and it works.

— End of Report —

Project Knowledge Report — To-Do List & BMI Calculator Page 10