CS Final Exam Study Pack

All practical HTML/JavaScript examples combined into one place for quick revision.

Table of contents

1. HTML basics and lists

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

2. Array: even/odd

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

3. Operators: sum, product, average

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

4. Multiplication tables

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

5. Square of a positive number

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

6. String length counter

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

7. Even / odd check

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

Variation

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

8. Factorial

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

Another version

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

9. Largest number

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

Another version

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

10. Sum of array

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

Another version

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

11. Sum of squares

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

Another version

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

12. Extra exam practice

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