Scribd
Upload
68 views8 pages

EMI Calculator Interface Design

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop p

Uploaded by

mydatahs
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
68 views8 pages

EMI Calculator Interface Design

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop p

Uploaded by

mydatahs
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

Q.

11) Design an EMI calculator interface with input fields for


principal amount, annual interest rate, and loan term. Upon user
submission, display the calculated EMI.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="[Link]">
<meta charset="UTF-8">
<title>EMI Calculator</title>

<style>
*{
margin: 0;
padding: 0;
font-family: "Roboto Light";
}

.input{
width: 320px;
height: 25px;
border-radius: 10px;
padding-left: 10px;
background-color: lightyellow;
}
#input_div{
font-size: 25px;
margin-left: 250px;
margin-top: 50px;
}

#heading_div{
text-align: center;
margin-top: 25px;
height: 70px;
}

#heading_line{
font-size: 35px;
font-weight: 700;
}
#heading_subline{
font-size: 20px;
color: gray;
}
#radio_div{
font-size: 20px;
}
#bank_heading{
font-size: 20px;
font-weight: 600;
}

.bank_logo{
height: 17px;
width: 17px;
}
#button{
margin-top: 50px;
height: 40px;
width: 250px;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.5px;
border-radius: 10px;
cursor: pointer;
background-color: rgba(125, 205, 216,0.25);
}

#result_div{
text-align: center;
margin-left: 280px;
margin-top: 50px;
font-size: 25px;
border: 0.5px solid black;
height: 550px;
width: 370px;
background-color: rgba(141,160,255,0.2);
border-radius: 20px;
}

#result_img{
height: 250px;
width: 250px;
margin-top: 80px;
}

#inputAndResult{
display: flex;
margin-top: 20px;
}
#result_output {
width: 320px;
height: 32px;
border-radius: 10px;
padding-left: 10px;
text-align: center;
font-size: 20px;
color: black;
background-color: lightyellow;
border: 1px solid black;
margin-top: 12px;
}
</style>

</head>
<body>
<div id="main_container">

<div id="heading_div">
<p id="heading_line">EMI Calculator</p>
<p id="heading_subline">Calculate your EMI efficiently</p>
</div>

<div id="inputAndResult">
<div id="input_div">
<p> <label>Enter Principal Amount (P) in INR:</label> </p>
<p> <input id="p_input" class="input" type="number"
placeholder="Principal Amount"> </p>
<br>
<p> <label>Enter Annual Interest Rate (R) in %:</label> </p>
<p> <input id="r_input" class="input" type="number"
placeholder="Annual Interest Rate"> </p>
<br>
<p> <label>Enter Loan Term (N) in months:</label> </p>
<p> <input id="n_input" class="input" type="number"
placeholder="Loan Term"> </p>

<br><br>

<div id="radio_div">
<p id="bank_heading">Select your bank </p>
<br>
<input type="radio" name="bank" id="sbi"><img CLASS="bank_logo"
src="Assests/[Link]"><img src="Assests/[Link]" class="bank_logo">
<label for="sbi">State Bank of India (SBI)</label>
<p></p>
<input type="radio" name="bank" id="hdfc"><img
CLASS="bank_logo" src="Assests/[Link]"><img src="Assests/[Link]"
class="bank_logo">
<label for="hdfc">HDFC Bank</label>
<p></p>
<input type="radio" name="bank" id="icici"><img
CLASS="bank_logo" src="Assests/[Link]"><img src="Assests/[Link]"
class="bank_logo">
<label for="hdfc">ICICI Bank</label>
<p></p>
<input type="radio" name="bank" id="pnb"><img CLASS="bank_logo"
src="Assests/[Link]"><img src="Assests/[Link]" class="bank_logo">
<label for="hdfc">Punjab National Bank (PNB)</label>
<p></p>
<input type="radio" name="bank" id="axis"><img
CLASS="bank_logo" src="Assests/[Link]"><img src="Assests/[Link]"
class="bank_logo">
<label for="hdfc">Axis Bank</label>
</div>

<div id="button-div">
<button id="button">CALCULATE EMI</button>
</div>

</div>

<div id="result_div">
<img id="result_img" src="Assests/[Link]">
<br><br>
<label for="result_output" id="result_output_text">Your EMI</label>
<br>
<input type="text" placeholder="EMI" id="result_output" disabled>
</div>
</div>

</div>

<script>
let p_input = [Link]("#p_input");
let r_input = [Link]("#r_input");
let n_input = [Link]("#n_input");
let button = [Link]("#button");
let result_output = [Link]("#result_output");
let result_output_text = [Link]("#result_output_text");
let imgChng = [Link]("#result_img");

let sbi=[Link]("#sbi");
let hdfc =[Link]("#hdfc");
let icici =[Link]("#icici");
let pnb =[Link]("#pnb");
let axis =[Link]("#axis");

[Link]("click", function() {

let bank="";
let img_src="";

if ([Link]){
[Link]("TRUE")
bank="State Bank of India (SBI)";
img_src="Assests/[Link]";
}
else if ([Link]){
bank="HDFC Bank";
img_src="Assests/[Link]";
}
else if ([Link]){
bank="ICICI Bank";
img_src="Assests/[Link]";
}
else if ([Link]){
[Link]("PNB");
bank="Punjab National Bank (PNB)";
img_src="Assests/[Link]";
}
else if ([Link]){
bank="Axis Bank";
img_src="Assests/[Link]";
}

let principal = parseFloat(p_input.value);


let interestRate = parseFloat(r_input.value) / 12 / 100; // Convert
annual interest rate to monthly rate
let term = parseFloat(n_input.value);

let emi = (principal * interestRate * [Link]((1 + interestRate),


term)) / ([Link]((1 + interestRate), term) - 1);
emi=`INR ${[Link](3)}`;

result_output.value=emi;
result_output_text.innerText=`Your ${bank} \n EMI is :`;
[Link]=img_src;

});

</script>
</body>
</html>
Output:
Q.12) Create an age calculator to calculate a person's age based on
their date of birth (DOB) and the current date. The program should
take input for the DOB and the current date and output the age in
years, months, and days.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link]
crossorigin>
<link
href="[Link]
&display=swap" rel="stylesheet">
<link rel="stylesheet" href="[Link]">
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
font-family: "Fredoka", sans-serif;
}
body{
text-align: center;
}
label{
font-size: 25px;
}
input{
width: 270px;
height: 30px;
padding-left: 10px;
font-size: 15px;
border-radius: 8px;
background-color: #fdf8c3;
}
#heading_div{
margin-top: 25px;
}
#heading{
font-size: 45px;
font-weight: 500;
color: #9d0101;
}
#subHeading{
font-size: 20px;
color: #cd6302;
}

#input_div{
margin-top: 50px;
}
#button{
height: 35px;
width: 280px;
background-color: #fbc466;
border-radius: 10px;
font-size: 20px;
margin-top: 20px;
}
#result_box{
height: 40px;
width: 360px;
border-radius: 10px;
font-size: 20px;
background-color: white;
margin-top: 40px;
border: 0.25px solid black;
text-align: center;
}
</style>
<title>Age Calculator</title>
</head>
<body>
<div id="main_container">
<div id="heading_div">
<p id="heading">Age-o-Meter</p>
<p id="subHeading">Calculate Your Age in a Snap!</p>
</div>

<div id="input_div">
<p></p><label>Enter your date of birth : </label></p>
<p></p><input type="date" id="dob"></p>
<br>
<p></p><label>Enter today's date : </label></p>
<p></p><input type="date" id="today"></p>
<br>
</div>

<div id="button_div">
<button id="button">Calculate Age</button>
</div>

<div id="result_div">
<input type="text" id="result_box" placeholder="Wait
for result!" disabled>
</div>
</div>
<script>
let dob = [Link]("#dob");
let today = [Link]("#today");
let button = [Link]("#button");
let result = [Link]("#result_output")

[Link]("click",function (){

let td_year= parseInt([Link](0,4));


let td_month= parseInt([Link](5,7));
let td_day= parseInt([Link](8,10));

let dob_year= parseInt([Link](0,4));


let dob_month= parseInt([Link](5,7));
let dob_day= parseInt([Link](8,10));

let year_diff = td_year-dob_year;


let month_diff = td_month-dob_month;
let day_diff = td_day-dob_day;

if (day_diff < 0) {
month_diff--;
day_diff = day_diff + 30;
}

if (month_diff < 0) {
year_diff--;
month_diff = month_diff + 12;
}
let age = `${year_diff} Years, ${month_diff} Months,
${day_diff} Days`;
result_box.value = `Your age is ${age}`;

})

</script>
</body>
</html>

Output:

You might also like