PPF CALCULATOR
<!DOCTYPE html>
<html>
<head>
<title>PPF Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 100px;
}
label {
font-weight: bold;
}
input[type="number"] {
padding: 8px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
border: none;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
#result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>PPF Calculator</h1>
<label for="principal">Enter your initial investment amount:</label>
<br>
<input type="number" id="principal" min="500" step="100" required>
<br>
<label for="addon">Enter your annual investment add-on:</label>
<br>
<input type="number" id="addon" min="0" step="100">
<br>
<label for="rate">Select interest rate (%):</label>
<br>
<select id="rate">
<option value="6.4">6.4%</option>
<option value="6.8">6.8%</option>
<option value="7.1">7.1%</option>
<option value="7.5">7.5%</option>
<option value="7.9">7.9%</option>
<option value="8.3">8.3%</option>
</select>
<br>
<label for="duration">Select investment duration (in years):</label>
<br>
<select id="duration">
<option value="5">5 years</option>
<option value="10">10 years</option>
<option value="15">15 years</option>
<option value="20">20 years</option>
<option value="25">25 years</option>
<option value="30">30 years</option>
</select>
<br>
<button onclick="calculatePPF()">Calculate</button>
<div id="result"></div>
<script>
function calculatePPF() {
var principal = parseInt(document.getElementById("principal").value);
var addon = parseInt(document.getElementById("addon").value) || 0;
var rate = parseFloat(document.getElementById("rate").value);
var duration = parseInt(document.getElementById("duration").value);
var totalAmount = principal;
for (var i = 1; i <= duration; i++) {
totalAmount += (totalAmount * rate) / 100;
totalAmount += addon;
}
document.getElementById("result").innerHTML = "Your PPF maturity amount after " + duration + " years: " + totalAmount.toFixed(2);
}
</script>
</body>
</html>
AGE CALCULATOR
<html>
<head>
<title>Age Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 100px;
}
label {
font-weight: bold;
}
input[type="date"] {
padding: 8px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
border: none;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
#result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Age Calculator</h1>
<label for="birthdate">Enter your birthdate:</label>
<br />
<input id="birthdate" required="" type="date" />
<br />
<button onclick="calculateAge()">Calculate Age</button>
<div id="result"></div>
<script>
function calculateAge() {
var birthdate = document.getElementById("birthdate").value;
var today = new Date();
var birthDate = new Date(birthdate);
var age = today.getFullYear() - birthDate.getFullYear();
var monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
document.getElementById("result").innerHTML = "Your age is: " + age;
}
</script>
</body>
</html>
GST CALCULATOR
<html>
<head>
<title>GST Calculator</title>
<style>
.container {
width: 300px;
margin: 0 auto;
}
.input-field {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>GST Calculator</h2>
<div class="input-field">
<label for="amount">Amount:</label>
<input id="amount" min="0" step="0.01" type="number" />
</div>
<div class="input-field">
<label for="gstRate">GST Rate (%):</label>
<input id="gstRate" min="0" step="0.01" type="number" />
</div>
<div class="input-field">
<button onclick="calculateGST()">Calculate</button>
</div>
<div class="input-field">
<label for="total">Total Amount (including GST):</label>
<input id="total" readonly="" type="text" />
</div>
<div class="input-field">
<label for="gstAmount">GST Amount:</label>
<input id="gstAmount" readonly="" type="text" />
</div>
</div>
<script>
function calculateGST() {
var amount = document.getElementById("amount").value;
var gstRate = document.getElementById("gstRate").value;
// Perform validation
if (amount === "" || gstRate === "") {
alert("Please enter an amount and GST rate.");
return;
}
var gstAmount = (amount * (gstRate / 100)).toFixed(2);
var total = (parseFloat(amount) + parseFloat(gstAmount)).toFixed(2);
document.getElementById("total").value = total;
document.getElementById("gstAmount").value = gstAmount;
}
</script>
</body>
</html>
SALES TAX CALCULATOR
<html>
<head>
<title>Sales Tax Calculator</title>
<style>
.container {
width: 300px;
margin: 0 auto;
}
.input-field {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>Sales Tax Calculator</h2>
<div class="input-field">
<label for="subtotal">Subtotal:</label>
<input id="subtotal" min="0" step="0.01" type="number" />
</div>
<div class="input-field">
<label for="taxRate">Tax Rate (%):</label>
<input id="taxRate" min="0" step="0.01" type="number" />
</div>
<div class="input-field">
<button onclick="calculateTax()">Calculate</button>
</div>
<div class="input-field">
<label for="total">Total:</label>
<input id="total" readonly="" type="text" />
</div>
</div>
<script>
function calculateTax() {
var subtotal = document.getElementById("subtotal").value;
var taxRate = document.getElementById("taxRate").value;
// Perform validation
if (subtotal === "" || taxRate === "") {
alert("Please enter a subtotal and tax rate.");
return;
}
var taxAmount = (subtotal * (taxRate / 100)).toFixed(2);
var total = (parseFloat(subtotal) + parseFloat(taxAmount)).toFixed(2);
document.getElementById("total").value = total;
}
</script>
</body>
</html>
RESUME BUILDER CODE
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Resume Builder</title>
<style>
/* CSS styles for the resume builder */
/* Add your own custom styles here */
</style>
</head>
<body>
<h1>Resume Builder</h1>
<form id="resumeForm">
<label for="name">Name:</label>
<input id="name" required="" type="text" />
<label for="email">Email:</label>
<input id="email" required="" type="email" />
<label for="phone">Phone:</label>
<input id="phone" required="" type="tel" />
<label for="education">Education:</label>
<textarea id="education" required=""></textarea>
<label for="experience">Experience:</label>
<textarea id="experience" required=""></textarea>
<button type="submit">Generate Resume</button>
</form>
<div id="resumeOutput"></div>
<script>
// JavaScript code for handling form submission and generating the resume
document.getElementById("resumeForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form submission
// Get form values
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var education = document.getElementById("education").value;
var experience = document.getElementById("experience").value;
// Generate the resume HTML
var resumeHTML = "<h2>Resume</h2>" +
"<h3>Name: " + name + "</h3>" +
"<p>Email: " + email + "</p>" +
"<p>Phone: " + phone + "</p>" +
"<h3>Education</h3>" +
"<p>" + education + "</p>" +
"<h3>Experience</h3>" +
"<p>" + experience + "</p>";
// Display the generated resume
document.getElementById("resumeOutput").innerHTML = resumeHTML;
});
</script>
</body>
</html>
WORD COUNTER CODE
<html>
<head>
<title>Word Counter</title>
<style>
#text-input {
width: 100%;
height: 150px;
resize: none;
}
</style>
</head>
<body>
<h1>Word Counter</h1>
<textarea id="text-input" placeholder="Type or paste your text here"></textarea>
<p>Word Count: <span id="word-count">0</span></p>
<script>
var textarea = document.getElementById('text-input');
var wordCount = document.getElementById('word-count');
textarea.addEventListener('input', function() {
var text = textarea.value;
var words = text.trim().split(/\s+/);
var numWords = words.length;
if (text === '') {
numWords = 0;
}
wordCount.textContent = numWords;
});
</script>
</body>
</html>
INTEREST RATE CALCULATOR CODE
<html>
<head>
<title>Interest Rate Calculator</title>
<style>
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-group {
margin-bottom: 10px;
}
.form-group label {
display: block;
font-weight: bold;
}
.form-group input {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h2>Interest Rate Calculator</h2>
<div class="form-group">
<label>Principal Amount:</label>
<input id="principalAmount" placeholder="Principal amount" type="number" />
</div>
<div class="form-group">
<label>Interest Earned:</label>
<input id="interestEarned" placeholder="Interest earned" type="number" />
</div>
<div class="form-group">
<label>Time Period (in years):</label>
<input id="timePeriod" placeholder="Time period in years" type="number" />
</div>
<button onclick="calculateInterestRate()">Calculate Interest Rate</button>
<div class="result" id="interestRateResult"></div>
</div>
<script>
function calculateInterestRate() {
var principalAmount = parseFloat(document.getElementById('principalAmount').value);
var interestEarned = parseFloat(document.getElementById('interestEarned').value);
var timePeriod = parseInt(document.getElementById('timePeriod').value);
if (isNaN(principalAmount) || isNaN(interestEarned) || isNaN(timePeriod)) {
document.getElementById('interestRateResult').innerHTML = 'Please enter valid inputs.';
return;
}
var interestRate = (interestEarned / (principalAmount * timePeriod)) * 100;
interestRate = interestRate.toFixed(2);
document.getElementById('interestRateResult').innerHTML = 'Interest Rate: ' + interestRate + '%';
}
</script>
</body>
</html>
online calculator , ppf calculator , age calculator , Gst calculator , Sales tax calculator , Resume builder , word counter , Interest rate calculator
Comments
Post a Comment