All practical HTML/JavaScript examples combined into one place for quick revision.
<html>
<head>
<title>PRACTICALS</title>
</head>
<body>
<h1 style="color:olive;font-size:67px;">This is heading 1 with olive color and 6....7... font size i guess</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<hr>
<h1>TAG THE TEXT + LISTS </h1>
<p>This <b> text is bold </b>, this <strong> text is strong </strong>. There is no difference. This <u> text is underlined </u>, this <em>text is emphasized </em>, <i>this is italic</i> no difference. We use superscript with sup tag, e.g <i>8<sup>2</sup>=64</i>. We use subscript with sub tag, e.g <i>H<sup>2</sup></i>O</p>
<p>Here is<small> Small text</small></p>
<hr>
<h3><u>**There are three types of list**</u></h3>
<h2><i>This is definition list</i></h2>
<dl>
<dt>Hyper text markup labuage(HTML)</dt>
<dd>
Purpose: It is the backbone of web pages.
<br>
Role: Defines the structure and content of a webpage (headings, paragraphs, images, links, forms, etc.).
<br>
Example: Decides what appears on the page.</dd>
<dt>CSS (Cascading Style Sheets)</dt>
<dd>Purpose: It is used for styling and layout.
<br>
Role: Controls the look of a webpage—colors, fonts, spacing, animations, responsive design, etc.
<br>
Example: Decides how the content looks.</dd>
<dt>JavaScript (JS)</dt>
<dd>Purpose: It is the programming language of the web.
<br>
Role: Adds interactivity and functionality to websites (form validation, sliders, popups, dynamic content, games, etc.).
<br>
Example: Decides how the page behaves when users interact with it.</dd>
</dl>
<hr>
<h2>Ordered list</h2>
<h3>My hobbies</h3>
<ol type="I">
<li>Football</li>
<li>Programming</li>
<li>Gaming</li>
<li>Learning new and unique tricks(any)</li>
<li>Exploring MATH'S </li>
<li>Solving puzzles</li>
<li>Gaining knowledge about science</li>
</ol>
<hr>
<h2>Unordered list</h2>
<h3>My hobbies</h3>
<ul style="list-style-type: circle;">
<li>Football</li>
<li>Programming</li>
<li>Gaming</li>
<li>Learning new and unique tricks(any)</li>
<li>Exploring MATH'S </li>
<li>Solving puzzles</li>
<li>Gaining knowledge about science</li>
</ul>
<hr>
<table>
<tr>
<th>NAME</th>
<th>Chemistry</th>
<th>Physics</th>
</tr>
<tr>
<td>Name 1</td>
<td>12</td>
<td>15</td>
</tr>
<tr>
<td>Name 2</td>
<td>13.5</td>
<td>11</td>
</tr>
</table>
<hr>
<a href="https://muhammad4bdullah.github.io/Portfolio/" target="_blank">My website guyss</a>
<hr>
<hr>
I hope you liked it.... :)
<style>
th,td,table{
border:1px solid black;
}
</style>
</body>
</html>
<html>
<body>
<script>
let i;
let a = Number(prompt("Enter size of array"));
let arr = [a];
for (i=0;i<a;i=i+1){
arr[i]= Number(prompt("Enter element: ", i))
}
for (i=0;i<a;i=i+1){
if(arr[i] % 2 === 0){
document.write(arr[i]+ ": EVEN <br>");
}
else{
document.write(arr[i]+ ": ODD <br>")
}
}
</script>
</body>
</html>
<html>
<head>
<title>operators</title>
<script type="text/javascript">
let n1=Number(prompt("Enter number 1"));
let n2=Number(prompt("Enter number 2"));
let n3=Number(prompt("Enter number 3"));
function sum(){
let sum= n1+n2+n3;
alert("sum is:" + sum);
}
function product(){
let product= n1*n2*n3;
alert("product is:" + product);
}
function avg(){
let avg= (n1+n2+n3)/3;
alert("avg is:" + avg);
}
</script>
</head>
<body>
<input type="button" onclick="sum()" value="Sum">
<input type="button" onclick="product()" value="Product">
<input type="button" onclick="avg()" value="Average">
</body>
</html>
<html>
<body>
<script type="text/javascript">
let i, j;
document.write("Tables")
document.write("<br>")
document.write("<br>")
for(i=1;i<=100;i=i+1){
document.write("Table of ", i)
document.write("<br>")
for(j=1;j<=100;j=j+1){
document.write(i,"x", j,"=", i*j,", ")
document.write("<br>")
}
document.write("<br>")
document.write("<br>")
}
document.write("<br>")
document.write("<br>")
document.write("In columns and rows")
document.write("<br>")
document.write("<br>")
for(i=1;i<=5;i=i+1){
for(j=1;j<=10;j=j+1){
document.write(i*j,", ")
}
document.write("<br>")
}
</script>
</body>
</html>
<html>
<head>
<title>Title</title>
<script type="text/javascript">
function square() {
let n = Number(prompt("Enter your number:"));
if (n > 0) {
let n2 = n * n;
alert("The square of the positive number is: " + n2);
} else {
alert("Your number is negative");
}
}
</script>
</head>
<body>
<input type="button" onclick="square()" value="Square">
</body>
</html>
<html>
<body>
<script type="text/javascript">
let i, j;
i = prompt("Enter your text");
j = i.length;
document.write("THE number of characters is"+ j);
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
let no1;
no1 = Number(prompt("Enter your number"));
if (no1 % 2 === 0){
alert(no1 + " is the even")
}
else {
alert(no1 +" is the odd")
}
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
let a;
a = Number(prompt("enter a number"));
if (a % 2 === 0){
alert("ur number: " + a + " is even i guess")
}
else{
alert("maybe odd")
}
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
let a, i, fact = 1;
a= Number(prompt("Enter the number you want factorial of"));
for(i=a;i>=1;i=i-1){
fact = fact * i;
}
document.write("factorial of"+ a +"is"+ fact)
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
let n;
let fact=1;
let i;
n = Number(prompt("Enter a number you want factorial of"));
for (i=n;i>=1;i=i-1){
fact=fact*i;
}
document.write("Factorial of " + n + " is " + fact);
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
let no1, no2, no3;
no1 = Number(prompt("Enter your 1st number"));
no2 = Number(prompt("Enter your 2nd number"));
no3 = Number(prompt("Enter your 3rd number"));
if (no1>no2 && no1>no3){
alert(no1 + " is the largest")
}
else if(no2>no1 && no2>no3){
alert(no2 +" is the largest")
}
else{
alert(no3 +" is largest")
}
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
let a,b,c;
a=Number(prompt("enter number 1"))
b=Number(prompt("enter number 2"))
c=Number(prompt("enter number 3"))
if (a>=b&&a>=c){
alert("First number: "+a+" is largest")
}
if (b>=a&&b>=c){
alert("Second number: "+b+" is largest")
}
if (c>=b&&c>=a){
alert("Third number: "+c+" is largest")
}
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
let i, sum = 0;
let arr = [10];
for(i=1;i<=10;i=i+1){
arr[i]= Number(prompt("Enter number" + i))
sum = sum + arr[i];
}
document.write("the sum is "+ sum)
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
let i, sum=0;
let arr=[];
for(i=1;i<=10;i=i+1){
arr[i]=Number(prompt("Enter your: "+ i+ " number"));
sum=sum+arr[i];
document.write("the "+(i-1)+ " index of array is "+arr[i] +"<br>")
}
document.write("<br><hr><hr>Sum of array is "+ sum);
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
let i, sum=0;
for(i=1;i<=10;i=i+1){
sum=sum+(i*i)
document.write(i, "<sup>2</sup>=", i*i, "<br>")
}
document.write(sum);
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
let i, sum=0;
for(i=0;i<=10;i=i+1){
sum= sum + (i*i)
}
document.write("The sum of squares from 1-10 is : ", sum)
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
let arr= [10];
let i, sum=0;
for(i=1;i<=10;i=i+1){
arr[i]= Number(prompt("Ënter the number for array: ", i));
sum= sum + arr[i];
}
avg = sum/arr.length;
document.write("Average of numbers "+ arr + " is "+ avg)
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
a = Number(prompt("Enter the number"));
if(a % 2 == 0){
document.write(a, " is even");
}
else{
document.write(a, " is odd");
}
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
let n;
let fact=1;
let i;
n = Number(prompt("Enter a number you want factorial of"));
for (i=n;i>=1;i=i-1){
fact=fact*i;
}
document.write("Factorial of " + n + " is " + fact);
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
let i,a,sum=0;
a=Number(prompt("Enter the the total numbers u want sum the squares of. e.g. 1-?"));
for(i=a;i>=1;i=i-1){
sum+=(i*i);
}
alert("SUm of squares from 1-"+a+" is: "+sum);
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
let a,b,c;
a=Number(prompt("Enter first number"))
b=Number(prompt("Enter second number"))
c=Number(prompt("Enter third number"))
if(a>b && a>c){
document.write(a," is the largest among three provided")
}
else if(b>a && b>c){
document.write(b," is the largest among three provided")
}
else{
document.write(c," is the laregst among three provided")
}
</script>
</body>
</html>