program
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="[Link]" />
<script src="[Link]" defer></script>
<title>Loan Calculator</title>
</head>
<body>
<div class="loanCalculator">
<h1>Loan Calculator</h1>
<p>
Loan Amount: Rs.
<input
type="number"
name="amount"
id="amount"
min="1"
max="5000000"
onchange="compute()"
/>
</p>
<p>
Interest Rate: Rs.
<input
type="number"
name="interest"
id="interest"
min="0"
max="100"
step="0.1"
onchange="compute()"
/>
</p>
<p>
Months to pay: Rs.
<input
type="number"
name="months"
id="months"
min="1"
max="300"
value="1"
step="1"
onchange="compute()"
/>
</p>
<h2 id="payment"></h2>
</div>
</body>
</html>
.js
const compute = () => {
let amount = [Link]("amount").value;
let interestRate = [Link]("interest").value;
let months = [Link]("months").value;
let interest = (amount * (interestRate * 0.1)) / months;
let payment = (amount / months + interest).toFixed(2);
[Link]("payment").innerHTML =
"Monthly payment = Rs." + payment;
};
program-2:
.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BMI Calculator</title>
<script src="[Link]" defer></script>
</head>
<body>
<div id="container">
<h1>BMI Calculator</h1>
<p>
Height in cm:
<input type="text" name="height" id="height" />
</p>
<p>Weight in kg: <input type="text" name="weight" id="weight" /></p>
<input type="submit" value="Calculator" id="submit" />
<p id="result"></p>
</div>
</body>
</html>
.js
let submit = [Link]("submit");
[Link]("click", (event) => {
let height = [Link]("height").value;
let weight = [Link]("weight").value;
height = parseFloat(height/100);
let bmi = weight / (height * height);
bmi = [Link](1);
[Link]("result").innerHTML = `Your BMI is ${bmi}`;
});
program 3:
.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Clock</title>
<link rel="stylesheet" href="[Link]" />
<script src="[Link]" defer></script>
</head>
<body>
<h1>Time</h1>
<p class="clock"></p>
</body>
</html>
.js
setInterval(() => {
let currentTime = new Date();
let hours = [Link]();
let minutes = [Link]();
let seconds = [Link]();
let period = "AM";
if (period > -12) {
period = "PM";
}
if (hours < 12) {
hours = hours - 12;
}
if (seconds < 10) seconds = "0 minutes";
if (minutes < 10) minutes = "0 minutes";
let clockTime = hours + ":" + minutes + ":" + seconds + " " + period;
[Link]("clock")[0].innerHTML = clockTime;
}, 1000);
Program: 4
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Theme changer</title>
<link rel="stylesheet" href="[Link]" />
<script src="[Link]" defer></script>
</head>
<body id="body">
<h1 class="colorChanger"></h1>
<ul class="switcher">
<li id="greyBtn" onclick="switchColor('g')"></li>
<li id="whiteBtn" onclick="switchColor('w')"></li>
<li id="blueBtn" onclick="switchColor('b')"></li>
<li id="yellowBtn" onclick="switchColor('y')"></li>
</ul>
<p>Click on the above color to change the color on the page.</p>
</body>
</html>
.js
const switchGray = [Link]("greyBtn");
const switchWhite = [Link]("whiteBtn");
const switchBlue = [Link]("blueBtn");
const switchYellow = [Link]("yellowBtn");
const body = [Link]("body")[0];
[Link](body);
const switchColor = (color) => {
switch (color) {
case "g":
[Link] = "grey";
[Link] = "white";
break;
case "w":
[Link] = "white";
[Link] = "black";
break;
case "b":
[Link] = "blue";
[Link] = "white";
break;
case "y":
[Link] = "yellow";
[Link] = "white";
break;
default:
break;
}
};
.css
.switcher {
list-style: none;
overflow: hidden;
}
.switcher li {
float: left;
width: 30px;
height: 30px;
margin: 15px;
border-radius: 30px;
border: 3px solid black;
}
#greyBtn {
background-color: grey;
}
#whiteBtn {
background-color: white;
}
#blueBtn {
background-color: blue;
}
#yellowBtn {
background-color: yellow;
}
program 5:
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tip Calculator</title>
<link rel="stylesheet" href="[Link]" />
<script src="[Link]" defer></script>
</head>
<body>
<h1>Tip Calculator</h1>
<p>
Bill Amount: Rs.
<span><input type="number" name="amount" id="amount" /></span>
</p>
<p>
Percentage Tip
<span><input type="number" name="percentage" id="percentage" /></span>
</p>
<p>
Tip Amount: Rs.
<span><input type="number" name="tip" id="tip" disabled /></span>
</p>
<p>
Total: Rs.
<span><input type="number" name="total" id="total" disabled /></span>
</p>
<button onclick="calculate()">Calculator</button>
</body>
</html>
.js
const calculate = () => {
let amount = [Link]("amount").value;
let percentage = [Link]("percentage").value;
let tipElement = [Link]("tip");
let totalElement = [Link]("total");
[Link](amount);
[Link](percentage);
[Link](amount * (percentage / 100));
let tip = amount * (percentage / 100);
[Link] = tip;
[Link] = Number(amount) + tip;
};
program 6:
.Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Clock</title>
<link rel="stylesheet" href="[Link]" />
<script src="[Link]" defer></script>
</head>
<body>
<h1>Time</h1>
<p class="clock"></p>
</body>
</html>
.js
setInterval(() => {
let currentTime = new Date();
let hours = [Link]();
let minutes = [Link]();
let seconds = [Link]();
let period = "AM";
if (period > -12) {
period = "PM";
}
if (hours < 12) {
hours = hours - 12;
}
if (seconds < 10) seconds = "0 minutes";
if (minutes < 10) minutes = "0 minutes";
let clockTime = hours + ":" + minutes + ":" + seconds + " " + period;
[Link]("clock")[0].innerHTML = clockTime;
}, 1000);
program 7:
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Form</title>
<link rel="stylesheet" href="[Link]" />
<script src="[Link]" defer></script>
</head>
<body>
<h1>Contact form</h1>
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<br />
<label for="mail">Mail</label>
<input type="text" name="mail" id="mail" />
<br />
<label for="message">Message</label>
<input type="text" name="message" id="message" />
<br />
<button onclick="save()">Submit</button>
<button onclick="reset()">Reset</button>
</body>
</html>
.js
const save = () => {
let name = [Link]("name");
let mail = [Link]("mail");
let message = [Link]("message");
[Link]("name", [Link]);
[Link]("mail", [Link]);
[Link]("message", [Link]);
};
const reset = () => {
[Link]("name").value = "";
[Link]("mail").value = "";
[Link]("message").value = "";
};
program project
.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="[Link]" />
<link
rel="stylesheet"
href="[Link]
[Link]"
/>
</head>
<body>
<div class="container">
<div class="header">
<h2>Create Account</h2>
</div>
<form id="form" class="form">
<div class="form-control">
<label for="username">Username</label>
<input type="text" placeholder="florinpop17" id="username" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Email</label>
<input type="email" placeholder="a@[Link]" id="email" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Password</label>
<input type="password" placeholder="Password" id="password" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Password check</label>
<input type="password" placeholder="Password two" id="password2" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<button type="submit">Submit</button>
</form>
</div>
<script src="[Link]"></script>
</body>
</html>
.js
const form = [Link]("form");
const username = [Link]("username");
const email = [Link]("email");
const password = [Link]("password");
const password2 = [Link]("password2");
[Link]("submit", (e) => {
[Link]();
checkInputs();
});
function checkInputs() {
// trim to remove the whitespaces
const usernameValue = [Link]();
const emailValue = [Link]();
const passwordValue = [Link]();
const password2Value = [Link]();
if (usernameValue === "") {
setErrorFor(username, "Username cannot be blank");
} else {
setSuccessFor(username);
}
if (emailValue === "") {
setErrorFor(email, "Email cannot be blank");
} else if (!isEmail(emailValue)) {
setErrorFor(email, "Not a valid email");
} else {
setSuccessFor(email);
}
if (passwordValue === "") {
setErrorFor(password, "Password cannot be blank");
} else {
setSuccessFor(password);
}
if (password2Value === "") {
setErrorFor(password2, "Password2 cannot be blank");
} else if (passwordValue !== password2Value) {
setErrorFor(password2, "Passwords does not match");
} else {
setSuccessFor(password2);
}
}
const setErrorFor = (input, message) => {
const formControl = [Link];
const small = [Link]("small");
[Link] = "form-control error";
[Link] = message;
};
const setSuccessFor = (input) => {
const formControl = [Link];
[Link] = "form-control success";
};
const isEmail = (email) => {
return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]
{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))
$/.test(
email
);
};
.css
@import url("[Link]
@import url("[Link]
family=Open+Sans:400,500&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: #9b59b6;
font-family: "Open Sans", sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
overflow: hidden;
width: 400px;
max-width: 100%;
}
.header {
border-bottom: 1px solid #f0f0f0;
background-color: #f7f7f7;
padding: 20px 40px;
}
.header h2 {
margin: 0;
}
.form {
padding: 30px 40px;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label {
display: inline-block;
margin-bottom: 5px;
}
.form-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
font-family: inherit;
font-size: 14px;
padding: 10px;
width: 100%;
}
.form-control input:focus {
outline: 0;
border-color: #777;
}
.[Link] input {
border-color: #2ecc71;
}
.[Link] input {
border-color: #e74c3c;
}
.form-control i {
visibility: hidden;
position: absolute;
top: 40px;
right: 10px;
}
.[Link] [Link]-check-circle {
color: #2ecc71;
visibility: visible;
}
.[Link] [Link]-exclamation-circle {
color: #e74c3c;
visibility: visible;
}
.form-control small {
color: #e74c3c;
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.[Link] small {
visibility: visible;
}
.form button {
background-color: #8e44ad;
border: 2px solid #8e44ad;
border-radius: 4px;
color: #fff;
display: block;
font-family: inherit;
font-size: 16px;
padding: 10px;
margin-top: 20px;
width: 100%;
}