Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
45 views

HTML, CSS, JS Codes

The documents provide information about calculators, learning materials, feedback forms, bills, charts, and loans. Calculators, bills, and charts contain details of their functionality and design. Learning materials describe the benefits of learning a programming language. Feedback forms and loans include HTML and CSS code for creating relevant web pages and interfaces.

Uploaded by

Ravi Shukla
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
45 views

HTML, CSS, JS Codes

The documents provide information about calculators, learning materials, feedback forms, bills, charts, and loans. Calculators, bills, and charts contain details of their functionality and design. Learning materials describe the benefits of learning a programming language. Feedback forms and loans include HTML and CSS code for creating relevant web pages and interfaces.

Uploaded by

Ravi Shukla
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

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("info123@example.com"));

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

You might also like