Scribd
Upload
3 views2 pages

HTML, CSS and JS Projects

The document outlines five web development projects: a Dynamic To-Do List focusing on DOM manipulation, a Simple Calculator for event delegation and math logic, a Responsive Portfolio Landing Page for design on various devices, a Tip Calculator for handling form data and arithmetic, and a Loan/EMI Calculator for practicing complex math formulas. Each project includes specifications for HTML, CSS, and JavaScript functionalities. These projects are aimed at enhancing skills in web development and programming.

Uploaded by

Kaniga Kannathasan
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views2 pages

HTML, CSS and JS Projects

The document outlines five web development projects: a Dynamic To-Do List focusing on DOM manipulation, a Simple Calculator for event delegation and math logic, a Responsive Portfolio Landing Page for design on various devices, a Tip Calculator for handling form data and arithmetic, and a Loan/EMI Calculator for practicing complex math formulas. Each project includes specifications for HTML, CSS, and JavaScript functionalities. These projects are aimed at enhancing skills in web development and programming.

Uploaded by

Kaniga Kannathasan
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

1.

Dynamic To-Do List

A staple for any developer. This project focuses on DOM manipulation: creating, reading,
and deleting elements based on user input.

• HTML: An input field and an "Add" button.

• CSS: Styling lists, hover effects for buttons, and "checked" states for completed tasks.

• JavaScript: Event listeners to capture clicks, appendChild() to add new tasks, and
remove() to delete them.

2. Simple Calculator

The calculator is excellent for learning about event delegation and mathematical logic in
code.

• HTML: A grid layout for numbers and operators.

• CSS: CSS Grid or Flexbox to create the button layout.

• JavaScript: Uses the eval() function (for simplicity in basics) or a custom logic switch
to perform calculations when the "equals" button is pressed.

3. Responsive Portfolio Landing Page

This project focuses more on design and layout, teaching you how to make a site look good
on both desktop and mobile.

• HTML: Semantic tags like <header>, <section>, and <footer>.

• CSS: Media queries (@media) to change the layout for small screens.

• JavaScript: A simple "Hamburger Menu" toggle for mobile navigation.

4. Tip Calculator

A practical utility project that teaches you how to handle form data and perform basic
arithmetic on user-provided numbers.

• HTML: Inputs for "Bill Amount," "Service Quality" (dropdown), and "Number of
People."

• CSS: Form styling, including labels and neatly aligned input fields.
• JavaScript: Calculates the tip based on a percentage and divides the total bill by the
number of people.

5. Loan/EMI Calculator

A financial tool that helps you practice complex math formulas and display results in a
structured table or chart.

• HTML: Inputs for Loan Amount, Interest Rate, and Tenure (months/years).

• CSS: Clean input fields with labels and a prominent "Total Interest" display area.

• JavaScript: Uses the standard EMI formula to calculate monthly payments and the
total cost of the loan.

You might also like