Scribd
Upload
7 views23 pages

Source Code:: HTML Head Meta Title Title Script Function

The document contains various HTML code snippets for different web applications including a calculator, a date selector, and a negative number checker. Each section includes JavaScript functions to perform specific tasks such as calculations, date manipulations, and user input validations. Additionally, it showcases a cafe ordering system with options for starters, main courses, and desserts, along with their respective pricing logic.

Uploaded by

Usama Ali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views23 pages

Source Code:: HTML Head Meta Title Title Script Function

The document contains various HTML code snippets for different web applications including a calculator, a date selector, and a negative number checker. Each section includes JavaScript functions to perform specific tasks such as calculations, date manipulations, and user input validations. Additionally, it showcases a cafe ordering system with options for starters, main courses, and desserts, along with their respective pricing logic.

Uploaded by

Usama Ali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 23

Name: Usama Ashraf

Enrollment: 02-134202-044

SOURCE CODE:
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>

<script> function
Calculate(opreater) {
</script>
</head>
<body >
<center>
<h1>Calculater</h1>
</center>
<form name="calc">
<div>
<table>
<center>
<tr><input type="text" name="box" id="in" /></tr>
</center>
<tr>
<td><input onclick="document.calc.box.value += '1'"
class="button" value="1"/ type="button"></td>
<td><input onclick="document.calc.box.value += '2'"
class="button" value="2"/ type="button"></td>
<td><input onclick="document.calc.box.value += '3'"
class="button" value="3"/ type="button"></td>
<td><input onclick="document.calc.box.value += '+'"
class="button" value="+"/ type="button" style="width:
50px;"></td>
<td><input onclick="document.calc.box.value += '-'"
class="button" value="-"/ type="button" style="width:
Moazzam Shah Khan
02-134192-041
50px;"></td>
<td><input
onclick=document.calc.in.value=Math.log(document.calc.in.value)
class="button" value="log"/ type="button"></td>
</tr>
<tr>
<td><input onclick="document.calc.box.value += '4'"
class="button" value="4"/ type="button"></td>
<td><input onclick="document.calc.box.value += '5'"
class="button" value="5"/ type="button"></td>
<td><input onclick="document.calc.box.value += '6'"
class="button" value="6"/ type="button"></td>
<td><input onclick="document.calc.box.value +=
'*'" class="button" value="*" type="button" style="width: 50px;"></td>
<td><input class="button"
onclick="document.calc.box.value += '/'" value="/" type="button"
style="width:
50px;"></td>
<td><input
onclick=document.calc.in.value=Math.sqrt(document.calc.in.value)
class="button" value="Sq"/ type="button"></td>
</tr>
<tr>
<td><input onclick="document.calc.box.value += '7'"
class="button" value="7"/ type="button"></td>
<td><input onclick="document.calc.box.value += '8'"
class="button" value="8"/ type="button"></td>
<td><input onclick="document.calc.box.value +=
'9'" class="button" value="9"/ type="button"></td>
<td><input type="button"
onclick=document.calc.in.value=Math.pow(document.calc.in.value,2)
class="button" style="width: 58px" value="x^2"></td>
<td><input type="button"
onclick=document.calc.in.value=Math.pow(document.calc.in.value,3)
class="button" name="cube" type="button" style="width: 58px" value="x^3"
/></td>
<td><input
onclick=document.calc.in.value=Math.tan(document.calc.in.value)
class="button" value="tan" type="button"></td>
</tr>
<tr>
<td><input onclick="document.calc.box.value += '.'"
class="button" value="."/ type="button"></td>
<td><input onclick="document.calc.box.value += '0'"
class="button" value="0"/ type="button"></td>
<td colspan="2"><input
Name: Usama Ashraf
Enrollment: 02-134202-044

onclick=document.calc.in.value=eval(document.calc.in.value)
class="button" value="=" onclick="" style=" width:125px"
type="button"></td> <td colspan="2"><input
class="button" onclick="document.calc.in.value='' " value="C" type="button"
style=" width:125px"></td>
</tr>
<tr> </tr>
</table>
</div>
</form>
</body>
</html>

SCREEN SHOT:

Code:

<!DOCTYPE html>
<html>
<head>
Moazzam Shah Khan
02-134192-041
<title>Get The First and Last Day of a Given Month</title>
</head>

<body bgcolor="lightblue">
Select a Date: <input type="date" id="theDate"
onmouseout="getTheDays()" />
<p>First Day: <label id="fday"></label></p>
<p>Last Day: <label id="lday"></label></p>
</body>

<script> function
getTheDays() {
// THE DATE OBJECT.
var dt = new Date(document.getElementById('theDate').value);
// GET THE MONTH AND YEAR OF THE SELECTED DATE.
var month = dt.getMonth(),
year = dt.getFullYear();

// GET THE FIRST AND LAST DATE OF THE MONTH.


var FirstDay = new Date(year, month, 1); var
LastDay = new Date(year, month + 1, 0);

// FINALLY, GET THE DAY.


var weekday = new Array(); weekday[0] = "Sunday";
weekday[1] = "Monday"; weekday[2] = "Tuesday";
weekday[3] = "Wednesday"; weekday[4] = "Thursday";
weekday[5] = "Friday"; weekday[6] = "Saturday"; if
(typeof weekday[FirstDay.getDay()] != 'undefined') { // CHECK FOR
'undefined'.

document.getElementById('fday').innerHTML =')'
weekday[FirstDay.getDay()] + ;
' (' + FirstDay.toDateString('dd/mon/yyyy') +
document.getElementById('lday').innerHTML = weekday[LastDay.getDay()]
+
' (' + LastDay.toDateString('dd/mon/yyyy') + ')';;
} else {
document.getElementById('fday').innerHTML
= '';
Name: Usama Ashraf
Enrollment: 02-134202-044

document.getElementById('lday').innerHTML
= '';
}
}
</script>

</html>

Output:

Code:
<!doctype html>
<html>
<head> <script>
function palin()
{ var a,no,b,temp=0;
no=Number(document.getElementById("no_input").val
ue); b=no; while(no>0) { a=no%10;
no=parseInt(no/10); temp=temp*10+a;
Moazzam Shah Khan
02-134192-041
} alert(temp);
}
</script>
</head>
<body>
Enter any Number: <input id="no_input">
<button onclick="palin()">Check</button></br></br>
</body>
</html>

Output:

<!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>Document</title>
<style> body { background-
color: burlywood;
}
h1
Name: Usama Ashraf
Enrollment: 02-134202-044

{ fon
t-size: 280%;
padding: 5px;
text-align:
center;
} button {
fontsize: 1.1em;
backgroundcolor: #EBF5FF;
color: #4312AE; border: 2px
solid black; box-shadow:
4px 4px 4px #999999;
}
button:hover,
button:focus, button:active {
color: #EBF5FF; background-
color: #4312AE; cursor:
pointer;
}
</style>
</head>

<body>
<h1>Check Negative Numbers</h1>
<center>
<button style="width: 150px" onclick="Check()">Enter a
Number</button> <H2>Your answer: <h2 id="show">0</h2>
</H2>

</center>
</body>
</html> <script> function Check() { const number =
prompt("Enter a number: "); if (number >= 0) { if
(number == 0) { document.getElementById('show').innerHTML
= number;
} else
{ document.getElementById('show').innerHTML = number;
} } else
{ document.getElementById('show').innerHT
ML = 0 alert("The number is negative");
}
}
Moazzam Shah Khan
02-134192-041
</script>

Output:
Result 1:

Result 2 (Positive Number):

Result 3 (Zero):
Name: Usama Ashraf
Enrollment: 02-134202-044

Result 4 (Negative Number):


Moazzam Shah Khan
02-134192-041
Name: Usama Ashraf
Enrollment: 02-134202-044

Code:
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> h1 { text-
align: center;
}
label, th {
font-size:
25px;
}
select {
font-size: 32px;
border-radius:
8px;
}

.textbox {
width: 50px;
height: 40px;
text-align: center;
font-size: 25px;
}

.button
{ background-color:
black; text-align:
center; color:
white; border: 1px
solid black; height:
50px; width:
250px;
HUZAIFA MUHAMMAD ABDUL WAHAB LAB-05 02-134182-045

border-radius: 8px;
font-size: 30px;
}
</style>
HUZAIFA MUHAMMAD ABDUL WAHAB LAB-05 02-134182-045
HUZAIFA MUHAMMAD ABDUL WAHAB LAB-05 02-134182-045

<script> var costPriceTotal = 0;


var totalPriceTotal = 0; function
starter(item) { var qunt =
document.getElementById('starter').value;
var costPrice = "", totalPrice = "";
var cost = 0, total = 0; if
(item == "") { costPrice = "0Rs Only";
totalPrice = "0Rs Only"; } else if (item ==
"Salaed") { costPrice = 70 + "Rs Only";
cost = 70; total = 70 * qunt;
totalPrice = total + "Rs Only"; } else if (item ==
"Fries") { costPrice = 70 + "Rs Only";
cost = 70; total = 70 * qunt;
totalPrice = total + "Rs Only"; }
document.getElementById('Starter_costprice').innerHTML =
costPrice; costPriceTotal += cost;
totalPriceTotal += total; }

function major(item) {
var qunt =
document.getElementById('major').value; var
costPrice = "", totalPrice = "";
var cost = 0, total = 0; if
(item == "") { costPrice = "0Rs Only";
totalPrice = "0Rs Only"; } else if (item ==
"Chiness") { costPrice = 170 + "Rs Only";
cost = 170;
HUZAIFA MUHAMMAD ABDUL WAHAB LAB-05 02-134182-045

total = cost * qunt;


totalPrice = total + "Rs Only";
} else if (item == "Continetal")
{ costPrice = 470 + "Rs Only";
HUZAIFA MUHAMMAD ABDUL WAHAB LAB-05 02-134182-045
HUZAIFA MUHAMMAD ABDUL WAHAB LAB-05 02-134182-045

cost = 470;
total = cost * qunt;
totalPrice = total + "Rs Only";
} else if (item == "Pakistani") {
costPrice = 1470 + "Rs Only";
cost = 1470; total = cost
* qunt; totalPrice = total
+ "Rs
Only";
}
document.getElementById('Major_costprice').innerHTML = costPrice;
costPriceTotal += cost; totalPriceTotal += total;
} function desert(item) {
var qunt = document.getElementById('desert').value;
var costPrice = "", totalPrice = "";
var cost = 0, total = 0; if
(item == "") { costPrice = "0Rs Only";
totalPrice = "0Rs Only"; } else if (item ==
"ChamCham") { costPrice = 270 + "Rs
Only"; cost = 270;
total = cost * qunt; totalPrice =
total + "Rs
Only"; } else if (item ==
"Falooda") { costPrice = 370 +
"Rs Only"; cost = 370;
total = cost * qunt;
totalPrice = total + "Rs
Only"; } else if (item ==
"Rasmalai") { costPrice = 170
+ "Rs Only"; cost = 170;
total = cost * qunt;
totalPrice = total + "Rs Only";
}
document.getElementById('Desert_costprice').innerHTML = costPrice;
costPriceTotal += cost;
HUZAIFA MUHAMMAD ABDUL WAHAB LAB-05 02-134182-045

totalPriceTotal += total;
} function order()
{
document.getElementById('costP').innerHTML = costPriceTotal
+ "Rs Only";
document.getElementById('costT').innerHTML = costPriceTotal
+ "Rs Only";
}
</script>
</head>

<body bgcolor=BCE2E8>
<h1>WELCOME TO THE CAFE<h1>
<table cellspacing="10" cellpadding="10">
<tr>
<th>Categries</th>
<th>List</th>
<th>Quantity</th>
<th>Cost Price</th>
</tr>
<tr>
<td align="center"><label>Starters</label></td>
<td align="center">
<select name="starter"
onchange="starter(this.value)">
<option value="">Select</option>
<option value="Salaed">Salaed</option>
<option value="Fries">Fries</option>
</select>
</td>
<td><input type="text" value="1" id="starter"
onchange="starter1()" class="textbox"></td>
<td align="center"><label
id="Starter_costprice">0Rs
Only</label></td>
</tr>
<tr>
<td align="center"><label>Major Foods</label></td>
<td align="center">
<select name="major"
onclick="major(this.value)">
<option value="">Select</option>
<option value="Chiness">Chiness</option>
<option
value="Continetal">Continetal</option>
HUZAIFA MUHAMMAD ABDUL WAHAB LAB-05 02-134182-045

<option
value="Pakistani">Pakistani</option>
</select>
</td>
HUZAIFA MUHAMMAD ABDUL WAHAB LAB-05 02-134182-045
HUZAIFA MUHAMMAD ABDUL WAHAB LAB-05 02-134182-045
HUZAIFA MUHAMMAD ABDUL WAHAB LAB-05 02-134182-045

<td><input type="text" value="1" name="starter"


id="major" class="textbox"></td>
<td align="center"><label id="Major_costprice">0Rs
Only</label></td>
</tr>
<tr>
<td align="center"><label>Deserts</label></td>
<td align="center">
<select name="desert"
onchange="desert(this.value)">
<option value="">Select</option>
<option value="Falooda">Falooda</option>
<option value="Rasmalai">Rasmalai</option>
<option value="Cham Cham">ChamCham</option>
</select>
</td>
<td><input type="text" value="1" name="starter"
id="desert" class="textbox"></td>
<td align="center"><label id="Desert_costprice">0Rs
Only</label></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><b>_____________</b></td>
</tr>
<tr>
<td></td>
<td></td>
<td><label>Cost Price : </label></td>
<td><label id="costP"><b>0 RS</b></label></td>
</tr>
<tr>
<td></td>
<td></td>
<td><label>Total Price : </label></td>
<td><label id="costT"><b>0 RS</b></label></td>
</tr>
<tr>
<td colspan="5" align="center"><button class="button"
onclick="order()">Place Order</button></td>
</tr>
</table>
</body>
HUZAIFA MUHAMMAD ABDUL WAHAB LAB-05 02-134182-045

</html>

Output:

You might also like