CSS Report
CSS Report
CSS Report
Micro project
On
“EMI Calculator”
Submitted By
Prajwal More(41)
Sinhgad Institutes
Mrs. S.S Kadam Mrs. A.V. Kurkute Dr. (Mrs.) M.S. Jadhav
Subject Teacher HOD Principal
INDEX
SR NO CONTENTS PAGE NO
2 Rationale 3
7 Skills Developed 15
Name of
Sr. Planned Planned responsible
Details of Activity
No. Start Date Finish Date Team members
Prajwal More
2 Design the structure of the project. 02/10/2023 02/10/2023
Prajwal More
5 Test the project. 15/10/2023 15/10/2023
Prajwal More
6 Prepare the final report. 20/10/2023 20/10/2023
1.0 Rationale:
The EMI (Equated Monthly Installment) Calculator Project is a practical and user-
oriented application designed to assist individuals in managing their financial
commitments, specifically related to loans. This project aims to provide a tool that
empowers users to calculate and understand the monthly installment they need to pay
for various types of loans, such as home loans, car loans, or personal loans. It serves as
an essential financial planning and decision-making tool by offering transparency,
accuracy, and educational value.
i. HTML is the standard markup language used to create the structure and
content of web pages. In this project, HTML is used to define the structure of the
web page, including headings, input elements, buttons, and lists.
i. Efficiency: CSS promotes code efficiency. When you need to change the styling
of a website, you can make a single change in the CSS file, and it will affect all
pages that reference that CSS file.
ii. CSS helps in ensuring cross-browser compatibility. While some CSS properties
may need vendor-specific prefixes for older browsers, CSS is generally well-
supported by modern browsers.
3 Software’s Notepad++
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
.container
{
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
border: 1px solid #ddd;
border-radius: 5px;
}
.input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
.button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.result {
display: none;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container" id="loginContainer">
<h2>Login</h2>
<input type="text" class="input" placeholder="Username" id="username">
<input type="password" class="input" placeholder="Password" id="password">
<button class="button" onclick="login()">Login</button>
</div>
<script>
function login() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
//Validation
if (username === 'css' && password === 'password') {
document.getElementById('loginContainer').style.display = 'none';
document.getElementById('emiContainer').style.display = 'block';
} else {
alert('Invalid username or password. Please try again.');
}
}
function calculateEMI() {
const loanAmount = parseFloat(document.getElementById('loanAmount').value);
const interestRate = parseFloat(document.getElementById('interestRate').value);
const loanTenure = parseFloat(document.getElementById('loanTenure').value);
document.getElementById('emiResult').style.display = 'block';
}
</script>
</body>
</html>
8.0 Output:
b) Task Addition: Users can enter tasks in the "Enter a task" input field and select a
due date using the date input field. When they click the "Add Task" button, the
task is added to the list with the due date.
c) Task Display: Each task is displayed as a list item with the task description and
due date. The tasks have a unique background color, which is generated
randomly.
d) Task Interactivity: Tasks have interactivity built in. Clicking on a task item
toggles its font size, providing a visual cue that the task has been selected. Users
can also mark tasks as completed by checking a checkbox, which adds a line-
through decoration to the task text.
e) Task Count: The project keeps track of the total number of tasks and displays it
at the top. This count is updated as tasks are added and cleared.
12.0 Conclusion:
The "Enhanced To-Do List" project is a valuable exercise for learning web
development fundamentals. It involves both front-end and back-end aspects and can
be further enhanced with additional features such as persistence (saving tasks even
after the page is closed), category tagging, and more. It's a practical way to apply your
knowledge and build a functional web application.