Scribd
Upload
11 views11 pages

Report

Uploaded by

ayshaindabawa9
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
11 views11 pages

Report

Uploaded by

ayshaindabawa9
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/ 11

FRONTEND DEVELOPMENT

We designed our first page and insert some images and text using HTML and CSS
to make our web more interested. Here is the code and the result.
<!DOCTYPE html>
<html>
<head>
<title>home page</title>
<style>
body{
background-color:palevioletred;
text-align: left;
text-decoration: none;
}
.icon-bar{
background-color: brown;
text-align: center;
font-size: 50px;
margin: 10px;
}
header{
text-align: center;

}
img{
width: 200px;
height: 200px;
border-radius: 100px;
}
</style>
</head>
<body>
<div class="icon-bar">

<a href="HOME.html"><i class="fa fa-home">HOME</i></a>


<a href="SERVICE.html"><i class="fa fa-home">SERVICE</i></a>
<a href="ABOUT.html"><i class="fa fa-home">ABOUT</i></a>
<a href="FILE.html"><i class="fa fa-home">FILE</i></a>
</div>
<h1>GROUP MEMBERS</h1>
<table border="11" cell spacing="200"cell padding="500"
width="300" height="500" >
<marquee direction="right"scrollamount="5">DREAM
PHONES;</marquee>
<th style="border:2px solid white;">INFINIX</th>
<th style="border:2px solid white;">TECHNO</th>
<th style="border:2px solid white;">IPHONE</th>
<th style="border:2px solid white;">SAMSUNG</th>
<th style="border:2px solid white;">HAUWEI</th>
<tr>
<td style="border:1px solid white; text-
align:center"><img src="images (1).jpeg" alt="images (1)"width="200px";
height="200px"></a></td>
<td style="border:1px solid white; text-
align:center"><img src="images (2).jpeg" alt="images (2)"width="200px";
height="200px"></a></td>
<td style="border:1px solid white; text-
align:center"><img src="images (3).jpeg" alt="images (3)"width="200px";
height="200px"></td></a>
<td style="border:1px solid white; text-
align:center"><img src="images (4).jpeg" alt="images (4)"width="200px";
height="200px"></td>
<td style="border:1px solid white; text-
align:center"><img src="images (5).jpeg" alt="images (5)"width="200px";
height="200px"></td>
</tr>
<td style="border: 1px solid white">$100</td>
<td style="border: 1px solid white">$120</td>
<td style="border: 1px solid white">$131</td>
<td style="border: 1px solid white">$145</td>
<td style="border: 1px solid white">$95</td>
</table>
</body>
</html>
RESULT

Q1. Create HTML web pages then link them together and use different inline and
internal styling on each page.
We linked our second page with the first one by using <a></a> tag here is the
code and the result.
Code
<!DOCTYPE html>
<html>
<head>
<title>my first page</title>
<style>
body{
background-color: lightblue;
colour:lightblue;
text-align: left;
font-family: Arial,sans-serif;
}
a{
color: purple;
text-decoration: aqua;
}
</style>
</head>
<body>
<h1>KANO POLYTECHNIC STUDENTS</h1>
<h2>COMPUTER SCIENCE DEPARTMENT</h2>
<P>SOFTWARE DEVELOPMENT STUDENTS</P>
<a href="grp.html"><button>previous</button></a>
</body>
</html>

Result.

Q2. We created a that displays an if, else and switch statement.


Code. If and else statement
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<title>Hello, World!</title>
</head>
<body>
<h1>GROUP MEMBERS</h1>
<h2>SOFTWARE AND WEB DEVELOPMENT</h2>
<label for="numberInput">ENTER A NUMBER</label>

<label for="search" type="scrh">search</label>


<input id="numberInput" type="text">
<button onclick="checkNumber()">submit</button>
<script>
function checkNumber() {
var number = document.getElementById('numberInput').value;
//using if-Else
if(number > 10){
alert("The number is positive.");
}else if(number < 12){
alert("The number is negetive.");
}else
alert("The number is zero");
}
//using swith statement

}
</script>
<style>
body{
background-color: lightpink;
colour:darkgreen;
text-align: left;
font-family: 'Times New Roman', Times, serif;
}
a{
color: navy
text-decoration:none;
}
</style>
<a href="grp.html"><button>PREVIOUS</button></a>
</body>
</html>

Result. If and else statement


Code. Switch statement
<!DOCTYPE html>
<html>
<head>
<title>IF-ELSE AND SWITCH STATEMENTS</title>
</head>
<body>
<h1>IF-ELSE AND SWITCH STATEMENTS</h1>
<p DEMO></p>
<script>
// SWITCH STATEMENT

let fruit = "banana";


switch(fruit){
case"apple":
document.getElementById("demo").innerHTML = "This fruit is an apple";
break;
case"banana":
document.getElementById("demo").innerHTML = "This fruit is a banana";
break;
case"cherry":
document.getElementById("demo").innerHTML = "This fruit is a cherry";
break;
default:
document.getElementById("demo").innerHTML = "This fruit is not
apple,banana, or cherry";
} </script>
<a href="for, do and while.html">For, Do, And While</a>
</body>
</html>

Q3. Code of For, and do while iteration


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpor" content="width=device-width,initial-
scale=2.0">
<title>COMPUTER SCIENCE DEPARTMENT</title>
</head>
<body>
<h1>SOFTWARE DEVELOPMENT</h1>
<div id="for-loop"></div>
<div id="do-while-loop"></div>
<div id="while-loop"></div>
<script>
//for loop
let forloopDiv = document.getElementById( 'for-loop');
let forOutput = '';
for (let i = 1; i < 10; i++) {
forOutput +=`GROUP MEMBERS: ${i}<br>`;
}
forloopDiv.innerHTML = forOutput;
// Do while loop
let dowhileDiv = document.getElementById('do-while-loop');
lej = 1;
let dowhileOutput = '';
do{
dowhileOutput += ` Do While loop iteration: ${j}<br>`;
j++;
}while (j<=5);
dowhileDiv.innerHTML = dowhileOutput;
// While loop
let WhileDiv = document.getElementById('While-loop');
let k = 1;
let whileOutput ='';
while (k <=5) {
whileOutput += `Whlie loopiteration: ${k}<br>`;
k++;
}
WhileDiv.innerHTML = whileOutput;
</script>
<style>
body{
background-color: lightblue;
colour:darkblue;
text-align: center;
font-family: Arial,sans-serif;
}
a{
color: darked;
text-decoration: none;
}
</style>
<a href="frontend.html and frontend 2.html">Go to frontend and
frontend 2.</a>
</body>
</html>
RESULT

Q4. Here is a function program that return its output.


<!DOCTYPE html>
<html>
<head></head>
<body>
<script>

let fruit = "banana";


switch(fruit){
case"apple":
document.getElementById("demo").innerHTML = "This fruit is an apple";
break;
case"banana":
document.getElementById("demo").innerHTML = "This fruit is a banana";
break;
case"cherry":
document.getElementById("demo").innerHTML = "This fruit is a cherry";
break;
default:
document.getElementById("demo").innerHTML = "This fruit is not
apple,banana, or cherry";
</script>
</body>
</html>

Q5. DOM TRAVERSAL


<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM Traversal Example</title>
<style>
.highlight {
background-color: white;
}
body{background-color: aqua}
</style>
</head>
<body>
<div id="container">
<h1>DOM Traversal</h1>
<p id="para1">This is paragraph 1.</p>
<p id="para2">This is paragraph 2.</p>
<p id="para3">This is paragraph 3.</p>
<p id="para4">This is paragraph 4.</p>
</div>
<button onclick="traverseDOM()">Traverse DOM</button>

<script>
function traverseDOM() {
// Target a specific element
var para2 = document.getElementById("para2");

// Highlight the targeted element


para2.classList.add("highlight");

// Get the parent element of para2


var parent = para2.parentElement;
console.log("Parent of para2:", parent);

// Highlight the parent element


parent.style.border = "2px solid red";

// Get the previous sibling of para2


var previousSibling = para2.previousElementSibling;
console.log("Previous sibling of para2:", previousSibling);

// Highlight the previous sibling


if (previousSibling) {
previousSibling.classList.add("highlight");
}

// Get the next sibling of para2


var nextSibling = para2.nextElementSibling;
console.log("Next sibling of para2:", nextSibling);

// Highlight the next sibling


if (nextSibling) {
nextSibling.classList.add("highlight");
}
}
</script>
</body>
</html>
RESULT

You might also like