Simple CALCULATOR
<html>
<h1> Calculator </h1>
<body>
<font size="20" color="blue">Calculator</font><br>
<img src="calculator.jpg" height="300" width="400"><br>
input1<input type="number" name=input1><br>
input2<input type="number" name=input2><br>
<input type="image" name="head" src="calculator.jpg" />
width="400" height="300"
Select Operation<Select name="operation">
<option value="Select..">Select..</option>
<option value="ADD">ADD</option>
<option value="SUBTRACT">SUBTRACT</option>
<option value="MULTIPLY">MULTIPLY</option>
<option value="DIVIDE">DIVIDE</option>
</select><br>
<input type="image" name="submit" src="calc.jpg"
alt="submit" height="80" width="80"/>
<input type="image" name="reset" src="reset.jpg"
alt="reset" height="80" width="80"/>
</body>
</html>
Learning Material Styling
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="LearningMaterial.css">
</head>
<body>
<h1>Why to Learn java Programming?</h1>
<div>
<p title="Java Programming">Java is a MUST for students and working professionals
to become a great Software Engineer specially when they are working
in Software Development Domain. I will list down some of the key
advantages of learning Java Programming:</p>
<dl>
<dt class="reasons">Object Oriented</dt>
<dd id="description01">In Java, everything is an Object. Java can be easily
extended since it is based on the Object model.</dd>
<dt class="reasons">Platform Independent</dt>
<dd id="description02">Unlike many other programming languages including C
and C++,
when Java is compiled, it is not compiled into platform specific
machine, rather into platform independent byte code. This byte code
is distributed over the web and interpreted by the Virtual Machine
(JVM) on whichever platform it is being run on.</dd>
<dt class="reasons">Simple</dt>
<dd id="description03">Java is designed to be easy to learn. If you understand
the
basic concept of <em>OOP Java</em>, it would be easy to
master.</dd>
<dt class="reasons">Secure</dt>
<dd id="description04">With Java's secure feature it enables to develop virus-
free,
tamper-free systems. Authentication techniques are based on
public-key encryption.</dd>
<dt class="reasons" >Architecture-neutral</dt>
<dd id="description05">Java compiler generates an architecture-neutral object
file
format, which makes the compiled code executable on many
processors,
with the presence of Java runtime system.</dd>
<dt class="reasons" >Portable</dt>
<dd id="description06">Being architecture-neutral and having no
implementation
dependent aspects of the specification makes Java portable.
<em>Compiler
in Java is written in ANSI C</em> with a clean portability boundary,
which is a POSIX subset.</dd>
<dt class="reasons">Robust</dt>
<dd id="description07">Java makes an effort to eliminate error prone situations
by
emphasizing mainly on compile time error checking and runtime
checking.</dd>
</dl>
</div>
</body>
</html>
FeedBack Details
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FeedBack Details</title>
<style>
body {
display: flex;
flex-direction: column;
#container {
display: grid;
place-items: center;
input {
margin-top: 1rem;
display: block;
margin-right: auto;
margin-left: auto;
</style>
</head>
<body>
<div id="container">
<h1>Feedback for the ART OF LIVING session</h1>
<form onsubmit="addFeedback(); return false;">
<div>
<label for="feedback">Enter the Feedback:</label>
<textarea name="feedback" id="feedback" cols="30" rows="3" required></textarea>
</div>
<input type="submit" id="create" value="Add Feedback">
<input type="button" id="view" value="View Feedback" onclick="displayFeedback()">
</form>
</div>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
Java scrpit
const feedbackTextArea = document.getElementById("feedback");
const container = document.getElementById("container");
const result = document.getElementById("result");
const feedbacks = [];
function addFeedback(){
const feedback = feedbackTextArea.value;
feedbacks.push(feedback);
container.style.alignSelf = "flex-end";
result.innerHTML = "<h2>Feedback Details</h2><p><strong>Sussessfully Added Feedback
Details!</strong></p>";
function displayFeedback(){
var feedbackText = "";
for (var i = 0; i < feedbacks.length; ++i) {
if (i !== 0) {
feedbackText += "<br>";
feedbackText += "Feedback " + (i + 1) + "<br>" + feedbacks[i] + "";
result.innerHTML = "<h2>Feedback Details</h2>" + "<p>" +
feedbackText +
"</p>";
Bill Calculator
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bill Calculator</title>
<link rel="stylesheet" href="billcalc.css">
</head>
<body>
<h1>Bill Calculator</h1>
<form onsubmit="return calculateTotalPrice();">
<table>
<tr>
<td>
<label for="productName">Product Name</label>
</td>
<td>
<input type="text" id="productName" name="productName" placeholder="Product Name"
required>
</td>
</tr>
<tr>
<td>
<label for="price">Product Price in Rs.</label>
</td>
<td>
<input type="number" id="price" name="price" placeholder="Product Price" required>
</td>
</tr>
<tr>
<td>
<label for="qty">Quantity</label>
</td>
<td>
<input type="number" id="qty" name="qty" min="1" placeholder="Enter quantity" required>
</td>
</tr>
<tr>
<td>
<label for="totalprice">Total Price in Rs.</label>
</td>
<td>
<output id="totalprice" name="totalprice" for="price qty"></output>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" id="submit" name="submit" value="Submit">
</td>
</tr>
</table>
</form>
<script>
function calculateTotalPrice() {
totalprice.innerHTML = price.value * qty.value;
return false;
</script>
</body>
</html>
CSS
h1{
text-align:center;
color:#FF00FF;
font-style:italic;
font-weight:bold;
table{
text-align:left;
margin-left:35%;
border-spacing:10px;
border-width:10%;
border-style:solid;
background-color:#F899A4;
td{
border-style:ridge;
padding:10px;
}
Trainer Feedback Rating Chart
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Trainer's Feedback Rating Chart</title>
<link rel="stylesheet" href="trainerfeedbackchart.css">
</head>
<body>
<div class="foot">
<form>
<h1>Trainer's Feedback Rating Chart</h1>
<table id="chart">
<caption>Trainer's Name: Elite Parker</caption>
<tr class="theader" >
<th>S.No.</th>
<th>Training Module Name</th>
<th>Overall Rating</th>
<th>Feedback</th>
</tr>
<tr class="tr1" >
<td>1</td>
<td>HTML5, CSS3, JavaScript</td>
<td>5</td>
<td id="ex1" >Excellent</td>
</tr>
<tr class="tr2">
<td>2</td>
<td>Basic Java Programming</td>
<td>4</td>
<td id="vg1">Very Good</td>
</tr>
<tr class="tr1">
<td>3</td>
<td>Advanced Java Programming</td>
<td>3</td>
<td id="go1">Good</td>
</tr>
<tr class="tr2">
<td>4</td>
<td>UNIX Shell Scripting</td>
<td>2</td>
<td id="av1">Average</td>
</tr>
<tr class="tr1">
<td>5</td>
<td>Python Programming</td>
<td>1</td>
<td id="ba1" >Below Average</td>
</tr>
</table>
</form>
</div>
</body>
</html>
CSS
h1 {
text-align: center;
color: #FF00FF;
font-style: italic;
table {
text-align: left;
margin-left: 35%;
background-color: #F0F0F0;
td {
text-align: center;
caption {
text-align: left;
font-weight: bold;
.theader {
background-color: #800000;
color: white;
.tr1 {
background-color: #ff0080;
.tr2 {
background-color: #00ffff;
#ex1, #vg1 {
background-color: #00ff00;
#go1 {
background-color: #ffff00;
#av1 {
background-color: #d3d3d3;
color: white;
#ba1 {
background-color: #ff0000;
color: white;
}
Fixed And Reducing Interest Loan Estimator
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Reducing Interest Loan Estimation</title>
<style type="text/css">
h2 {
text-align: center;
color: #FF0000;
font-style: italic;
font-weight: bold;
table {
text-align: left;
background-color: #FFE77A;
padding: 10px;
thead {
text-align: center;
#tablemain {
margin-left: 35%;
#Estimate {
background-color: #F1F334;
color: #000000;
font-size: 15px;
height: 35px;
width: 100px;
</style>
</head>
<body>
<h2>Reducing Interest Loan Estimation</h2>
<table id="tablemain">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<label for="principalAmount">Principal Loan Amount (Rs.)</label>
</td>
<td>
<input type="text" id="principalAmount" placeholder="Principal Amount" required>
</td>
</tr>
<tr>
<td>
<label for="interestRate">Interest Rate (%)</label>
</td>
<td>
<input type="text" id="interestRate" placeholder="Interest Per Annum" required>
</td>
</tr>
<tr>
<td>
<label for="tenure">Tenure (in months)</label>
</td>
<td>
<input type="text" id="tenure" placeholder="Tenure in Months" required>
</td>
</tr>
<tr>
<td></td>
<td align="left" style="padding: 10px">
<input id="Estimate" type="button" value="Estimate"
onclick="EstimateReducingInterestLoan()">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<caption><b>Loan Estimation</b></caption>
<thead>
<tr>
<th>Details</th>
<th>Reducing Interest Loan</th>
<th>Fixed Interest Loan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Total Interest Rs.</td>
<td>
<output id="tInterest"></output>
</td>
<td>
<output id="tInterestFixed"></output>
</td>
</tr>
<tr>
<td>Total Payment Rs.</td>
<td>
<output id="tPayment"></output>
</td>
<td>
<output id="tPaymentFixed"></output>
</td>
</tr>
<tr>
<td>Monthly EMI Rs.</td>
<td>
<output id="EMI"></output>
</td>
<td>
<output id="EMIFixed"></output>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script src="Estimation.js"></script>
</body>
</html>
Java scrpit
const _principalAmount = document.getElementById("principalAmount");
const _interestRateYear = document.getElementById("interestRate");
const _tenureMonth = document.getElementById("tenure");
function getEmiReducing(P, N, R) {
return (P * R * (Math.pow((1 + R), N) / (Math.pow((1 + R), N) - 1)));
function EstimateReducingInterestLoan() {
calculateEMI();
totalPayment();
totalInterest();
EstimateFixedInterestLoan();
function EstimateFixedInterestLoan() {
const principalAmount = Number(_principalAmount.value);
const interestRateYear = Number(_interestRateYear.value);
const tenureMonth = Number(_tenureMonth.value);
const totalInterestFixed = principalAmount * interestRateYear * tenureMonth / 1200;
const totalPaymentFixed = principalAmount + totalInterestFixed;
const emiFixed = totalPaymentFixed / tenureMonth;
document.getElementById("tInterestFixed").innerHTML =
Number(totalInterestFixed).toFixed(2).toString();
document.getElementById("tPaymentFixed").innerHTML =
Number(totalPaymentFixed).toFixed(2).toString();
document.getElementById("EMIFixed").innerHTML = Number(emiFixed).toFixed(2).toString();
function reducingLoan() {
const principalAmount = Number(_principalAmount.value);
const interestRateYear = Number(_interestRateYear.value);
const interestRateMonth = Number(interestRateYear / 1200);
const tenureMonth = Number(_tenureMonth.value);
const emiReducing = getEmiReducing(principalAmount, tenureMonth, interestRateMonth);
const totalPaymentReducing = tenureMonth * emiReducing;
const totalInterestReducing = totalPaymentReducing - principalAmount;
return {
emiReducing: emiReducing,
totalPaymentReducing: totalPaymentReducing,
totalInterestReducing: totalInterestReducing
};
function calculateEMI() {
const emiReducing = reducingLoan().emiReducing;
document.getElementById("EMI").innerHTML = Number(emiReducing).toFixed(2).toString();
function totalPayment() {
const totalPaymentReducing = reducingLoan().totalPaymentReducing;
document.getElementById("tPayment").innerHTML =
Number(totalPaymentReducing).toFixed(2).toString();
function totalInterest() {
const totalInterestReducing = reducingLoan().totalInterestReducing;
document.getElementById("tInterest").innerText =
Number(totalInterestReducing).toFixed(2).toString();
}
Word Play - Operators, Conditional Control Statements & Loops
Java script
function wordPlay(number){
if(number>50){
return "Range is High";
else if(number<1){
return "Not Valid";
else if(number>=1 && number <=50)
var i=1;
var res=" ";
while(i <= number)
if(i%5===0 && i%3===0)
if(i===number){
res+="Jump";
else{
res+="Jump ";
else if(i%3===0)
{
if(i===number){
res+="Tap";
else{
res+="Tap ";
else if(i%5===0)
if(i===number){
res+="Clap";
else{
res+="Clap ";
else{
if(i===number){
res+=i;
else{
res+=i+" ";
i++;
res=res.substring(0,res.length);
return res;
}
}
console.log(wordPlay(16))
Find Unique Characters - Functions
Java script
function modifyString(str)
//fill code here
for(var i=0;i<str.length;i++)
if(str.includes(" "))
str=str.replace(" ","");
var res=str.toLowerCase();
return res;
function uniqueCharacters(str)
//fill code here
var res="";
for(var i=0 ;i<str.length;i++)
{
if(res.includes(str[i])===false)
res+=str[i];
return modifyString(res);
Placing Order For Cake - String & Math
function OrderCake(str) {
//fill the code
var kg,cake,cakeid,cakesize;
cakesize=str.length;
kg=str.substring(0,4);
cakeid=str.substring(cakesize-3);
cake=str.substring(4,cakesize-3);
var weight=(parseInt(kg)/1000);
var kgw=Math.round(weight);
var cost=Math.round((weight)*450);
return "Your order for "+kgw+" kg "+cake+" cake has been taken. You are requested to pay Rs. "+cost+"
on the order no "+cakeid;
}
Validate Email - Regular Expression & test Function
java script
function validateEmail(email)
var emailformat = /^\w+([\.-]?\w+)@\w+([\.-]?\w+)(\.\w{2,3})+$/;
var result="";
if(email.match(emailformat))
result = 'Valid email address!';
else
result = 'Invalid email address!';
return result;
console.log(validateEmail("[email protected]"));
Greetings - DOM
Java script
<html>
<head>
</head>
<body>
<h1>Elite Coaching Center</h1>
<script src="script.js"></script>
<table border="1">
<tr>
<td><label for="sname">Student Name</label></td>
<td><input type="text" id="sname" name="sname" required></td>
</tr>
<tr>
<td><label for="course">Course</label></td>
<td><select name="course" id="course" required>
<option value="Python">Python</option>
<option value="Java">Java</option>
<option value="Oracle">Oracle</option>
</select>
</td>
</tr>
</table>
<input type="button" id="submit" value="Register" onclick="display()">
<p>
<div id="greet"></div>
</p>
</body>
</html>
Employee Experience Details - Class and Object & Date
class Employee
constructor(name,designation,year_of_experience)
{
this.name=name;
this.designation=designation;
this.year_of_experience=year_of_experience;
function createEmployee(name, designation, year_of_experience)
const emp=new Employee(name,designation,year_of_experience);
return emp;
function validateObject(employee)
return employee instanceof Employee;
function displayEmployee(name,designation,year_of_experience)
const emp=createEmployee(name,designation,year_of_experience);
if(validateObject(emp))
var date=new Date().getFullYear();
var exp=date-year_of_experience-2;
return(emp.name+" is serving the position of "+emp.designation+" since "+exp);
console.log(displayEmployee("Jerold","Manager",15));
