A

Micro project

On

“EMI Calculator”
Submitted By

Prajwal More(41)

Guided By Mrs. S.S Kadam

Diploma Course in Computer Technology (As

per directives of I Scheme, MSBTE)

Sinhgad Institutes

Sinhgad Technical Education Society’s

SOU.VENUTAI CHAVAN POLYTECHNIC PUNE - 411041 ACADEMIC

YEAR 2023-2024
 Maharashtra State Board of Technical
Education
Certificate
This is to certify that Mr. Prajwal More with Roll No. 41 of Semester V of
Diploma in Computer Technology of Institute Sou. Venutai Chavan
Polytechnic (Code: 0040) has successfully completed the Micro-Project in
Client Side Scripting Language (22519) for the academic year 2023-2024 as
prescribed in the curriculum.

Place: SVCP, Pune Enrollment No: 2100400155

Date: Exam Seat No:

Mrs. S.S Kadam Mrs. A.V. Kurkute Dr. (Mrs.) M.S. Jadhav
Subject Teacher HOD Principal

INDEX
SR NO CONTENTS PAGE NO

1 Aim of the Micro-Project 1

2 Rationale 3

3 Course Outcomes Achieved 3

4 Literature Review 3

5 Actual Methodology Followed 4

6 Actual Resources Used 5

7 Skills Developed 15

8 Applications of Micro Project 15

Client side scripting language -22519 Enhanced To Do List

Annexure - I Micro-Project Proposal

1.0 Aim of the Micro-Project:

The aim of a microproject for an EMI (Equated Monthly Installment) Calculator
project could be to create a simple, user-friendly tool that allows users to calculate the
monthly installment they need to pay for a loan, such as a car loan or a home loan.

2.0 Intended Course Outcomes:

a) Develop programs using applying web development skills.
b) Apply concept of HTML, CSS and Javascript for code reusability.

3.0 Proposed methodology:

I. Study the concept of Client Side Scripting(CSS).
II. Study various syntax and functions of CSS.
III. Study to create small programs using CSS
IV. Study to calling the methods of different syntax in CSS.
V. Make program for given criteria.
VI. Prepare the final report.

4.0 Action Plan:

Department of Computer Technology Academic Year 2023-24 1

Client side scripting language -22519 EMI Calculator

Name of
Sr. Planned Planned responsible
Details of Activity
No. Start Date Finish Date Team members

Identify the requirements of the

1 project. 30/09/2023 30/09/2023 Prajwal More

Prajwal More
2 Design the structure of the project. 02/10/2023 02/10/2023

Develop the program using in JAVA. Prajwal More

3 05/10/2023 05/10/2023

Debug code and eliminate errors Prajwal More

4 occurred. 10/10/2023 10/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

5.0 Resources Required:

S. No. Resources required Specifications

1 Computer system Intel(R) Pentium CPU, RAM 4 GB
2 Operating System Windows 10, 64 Bit Operating System
3 Software’s Notepad++

6.0 Team members:

S. No. Roll. number Name of Student

1 41 Prajwal More

Annexure - II Micro-Project Report

1.0 Rationale:

Department of Computer Technology Academic Year 2023-24

 Client side scripting language -22519 EMI Calculator

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.

2.0 Aim of the Micro-Project:

The aim of a microproject for an EMI (Equated Monthly Installment) Calculator

project could be to create a simple, user-friendly tool that allows users to calculate the
monthly installment they need to pay for a loan, such as a car loan or a home loan.

3.0 Course Outcomes Achieved:

a) Develop programs using applying web development skills.
b) Apply concept of HTML, CSS and Javascript for code reusability

4.0 Literature Review:

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.

ii. JavaScript is a programming language that adds interactivity to web pages. In

this project, JavaScript is used to handle user input, manipulate the Document
Object Model (DOM), and manage tasks. Key JavaScript concepts include event
handling, dynamic element creation, and DOM manipulation.

Advantages of Client Side Scripting:

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.

Department of Computer Technology Academic Year 2023-24

Client side scripting language -22519 EMI Calculator

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.

5.0 Actual Methodology Followed:

To create a package and develop a java file in it, and to create a method for displaying.

I. Study the concept of Client Side Scripting.

II. Study various syntaxes and functions of CSS.
III. Study to create small programs using CSS.
IV. Study to calling the methods of different Styles in CSS.
V. Make program for given criteria.
VI. Prepare the final report.

6.0 Actual Resources Used:

S. No. Resources required Specifications

1 Computer system Intel(R) Pentium CPU, RAM 4 GB
2 Operating System Windows 10, 64 Bit Operating System

3 Software’s Notepad++

7.0 Source code of program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

Department of Computer Technology Academic Year 2023-24

 Client side scripting language -22519 EMI Calculator

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Login and EMI Calculator</title>
<style>

.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;
}

Department of Computer Technology Academic Year 2023-24

Client side scripting language -22519 EMI Calculator

.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>

<div class="container" id="emiContainer" style="display: none;">

<h2>EMI Calculator</h2>
<input type="number" class="input" placeholder="Loan Amount" id="loanAmount">
<input type="number" class="input" placeholder="Interest Rate (%) per annum"
id="interestRate">
<input type="number" class="input" placeholder="Loan Tenure (months)"
id="loanTenure">
<button class="button" onclick="calculateEMI()">Calculate EMI</button>

<div class="result" id="emiResult">

<h3>EMI Result:</h3>
<p id="emiAmount"></p>
<p id="totalInterest"></p>
<p id="totalPayment"></p>
</div>
</div>

Department of Computer Technology Academic Year 2023-24

 Client side scripting language -22519 EMI Calculator

<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);

const monthlyInterestRate = (interestRate / 100) / 12;

const emi = (loanAmount * monthlyInterestRate) / (1 - Math.pow(1 +
monthlyInterestRate, -loanTenure));

const totalPayment = emi * loanTenure;

const totalInterest = totalPayment - loanAmount;

document.getElementById('emiAmount').textContent = `EMI: ₹${Math.round(emi)}`;

document.getElementById('totalInterest').textContent = `Total Interest: ₹$
{Math.round(totalInterest)}`;
document.getElementById('totalPayment').textContent = `Total Payment: ₹$
{Math.round(totalPayment)}`;

Department of Computer Technology Academic Year 2023-24

Client side scripting language -22519 EMI Calculator

document.getElementById('emiResult').style.display = 'block';
}
</script>
</body>
</html>

8.0 Output:

Fig. 1.1 Output

Department of Computer Technology Academic Year 2023-24

 Client side scripting language -22519 EMI Calculator

Fig. 1.2 Output

9.0 Skills Developed:

During the course of this micro-project, we learnt to creating a check box and define a
function even for displaying Add Task and Date.

a) We learnt various concepts of Client Side Scripting language.

b) We learnt to create Text Field and button .
c) We also learnt to call Functions and creating Basic Javascript concepts.

10.0 Applications of this Micro-project:

This micro-project finds its application in:

a) User Interface: The project begins with a user-friendly web interface. The
interface includes a title, text input for entering tasks, a date input for due dates,
buttons for adding tasks and clearing completed tasks, and a list to display the
tasks.For defining classes in another package.

Department of Computer Technology Academic Year 2023-24

Client side scripting language -22519 EMI Calculator

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.

11.0 Area of future Improvement:

Creating an "Enhanced To-Do List" is a practical project that can help you learn the
basics of web development using HTML, JavaScript, and potentially CSS for styling.
This project combines both front-end and back-end features to create a web-based task
management application. Here's an overview of the project:.

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.

Department of Computer Technology Academic Year 2023-24