Lab Report Web

LAB REPORT
TECHNOLOGY PARK MALAYSIA

CT053-3-1
FUNDAMENTAL OF WEB DEVELOPMENT

NPT1F2309IT
MODULE CODE: CT053-3-1

STUDENT ID: NP069670
SUBMITTED TO: Biraj Wagley
LAB 1
Title: Introduction to HTML
Description:
This lab report focuses on the basics of web design using HTML and CSS. It covers important
topics such as understanding HTML tags like <head>, <body>, and elements such as <title>,
<meta>, and <script>. You'll also learn about the evolution of HTML from its early days to
HTML5 today. The report shows how CSS styles can be added to HTML to improve how web
pages look. It also explains different HTML elements and their features, especially those that
have moved from older versions to CSS. This knowledge will help you create better-designed
web pages effectively.
Objective:
• Help students understand how to use HTML effectively for making web content.
• Stress the importance of writing correct HTML code for better browser performance.
• Introduce how CSS can improve the look and function of web pages.
Conclusion:
By completing this lab report, students will have a solid foundation in HTML and CSS. They
will understand HTML’s history, why writing good HTML is important, and how CSS can
enhance web page design. This knowledge will prepare them well for more advanced web
development studies.
LAB 2
Title: Linkage of Document
Description:
Here is the lab report that shows how to connect three different websites using HTML and CSS.
In this project, we created four websites: one as the main homepage and the others for breakfast,
lunch, and dinner.
Objective:
• Understand how the anchor tag <a></a> is used.
• Learn how to use HTML and CSS to create websites that are linked together.
Code:
Home Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
box-sizing: border-box;
}
body {
width: 70vw;
/* border: 1px solid gray; */
}
.head {
display: flex;
width: 100%;
justify-content: space-between;
background-color: rgb(217, 195, 26);
}
.main{
display: flex;
width: 100%;
}
.mainright{
display: flex;
flex-direction: column;
}
i{
margin: 0px;
padding: 0px;
}
h5,h4{
margin-bottom: 0px;
margin-top: 0px;
}
.top{
margin-top: 20px;
}
.left,.right,.mainleft,.mainright{
border: 1px solid gray;
width: 50%;
}
.boddy{
border: 1px solid gray;
}
</style>
</head>
<body>
<h3>ABC Resturant</h3>
<div class="boddy">
<div class="head">
<div class="left">
<h4>Operating Hours</h4>
</div>
<div class="right">
<h4>Our Menu</h4>
</div>
</div>
<div class="main">
<div class="mainleft">
<div>
<h5 >Monday - Saturday</h5>
<i>7:30am - 11:30pm</i>
</div>
<div>
<h5 class="top">Sunday</h5>
<i>Closed</i>
</div>
</div>
<div class="mainright">
<a href="breakfast.html">Breakfast</a>
<a href="lunch.html">Lunch</a>
<a href="dinner.html">Dinner</a>
</div>
</div>
</div>
</body>
</html>
1. Breakfast Page:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h3>ABC Restaurant</h3>
<h2>Breakfast Menu</h2>
<table>
<tr>
<td><img width="300px" src="Smoothie.png"></td>
<td>Smoothie</td>
<td>$3.5</td>
</tr>
<tr>
<td><img src="Overnight oats.png"></td>
<td>Overnight oats</td>
<td>$7</td>
</tr>
<tr>
<td><img height="200px" src="Egg tacos.png"></td>
<td>Egg tacos</td>
<td>$6</td>
</tr>
</table>
<a href="lab2.html">Home</a>
</body>
</html>
2. Lunch Page:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Lunch Menu</h2>
<table>
<tr>
<td><img src="Pasta Salad.png"></td>
<td>Pasta Salad</td>
<td>$13</td>
</tr>
<tr>
<td><img src="cheese quesadilla.png"></td>
<td>cheese quesadilla</td>
<td>$10</td>
</tr>
<tr>
<td><img src="green goddess salad.png"></td>
<td>green goddess salad</td>
<td>$5</td>
</tr>
</table>
<a href="lab2.html">Home</a>
</body>
</html>
3. Dinner Page:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Dinner Menu</h2>
<table>
<tr>
<td><img src="./boiled salad.jpeg" width="200px"></td>
<td>Boiled Salad and Meat</td>
<td>$15</td>
</tr>
<tr>
<td><img src="./Fried rice.jpeg" width="200px"></td>
<td>Fried Rice</td>
<td>$17</td>
</tr>
<tr>
<td><img src="./Whole meal.jpeg" width="200px"></td>
<td>Full course Meal</td>
<td>$59</td>
</tr>
</table>
</body>
</html>
Output:
Hosting Output:
Conclusion:
This lab report teaches us how to use HTML and CSS to link multiple websites together, and it
shows how to host these websites for free on a web hosting platform.
LAB 3
3.1
Title: Introduction of CSS
Description:
The document offers a thorough introduction to CSS, beginning with a definition and
explanation of its role in web design. It explains how CSS functions by connecting CSS files to
HTML files and discusses the use of IDs and classes for styling particular elements. The
document clarifies the CSS syntax, detailing how to create CSS rules and apply styles to HTML
elements, IDs, and classes. Practical examples are provided, demonstrating CSS techniques such
as adding borders, applying colors, and positioning elements on web pages. Overall, the
document aims to empower learners with the understanding and abilities necessary to effectively
utilize CSS in their web design endeavors.
Objective:
 Introduce beginners to fundamental concepts in Cascading Style Sheets (CSS).
 Clarify the role and functionality of CSS in the realm of web design.
 Illustrate how CSS influences the visual presentation of web pages, adjusting attributes
such as colors, fonts, alignments, and spacing.
 Foster a basic comprehension of how CSS interacts with HTML to craft aesthetically
pleasing and structurally sound web pages.
Conclusion:
This lab wraps up by highlighting the vital role CSS plays in web design. CSS isn't just about
aesthetics; it's about making web pages visually appealing and user-friendly. The lab offers clear
explanations and practical examples to help you grasp CSS fundamentals. With this solid
understanding, you'll be able to create well-designed web pages that stand out. The knowledge
you gain here is a crucial stepping stone, setting you up for further exploration and mastery in the
world of web design and development.
3.2
Title: Web Lay outing using CSS
Description:
This lab starts by introducing CSS and explaining why it's important for designing web pages. It
shows how CSS is used to style and organize HTML documents. You'll learn about CSS basics
like selectors (which select HTML elements), properties (which define how elements look), and
values (which specify the details of properties). The lab also covers three ways to use CSS:
directly in HTML (inline), inside HTML files (internal), or in separate CSS files (external). With
practical examples, you'll see how to create a basic web layout using <div> tags and apply CSS
to style headers, menus, and content areas. The lab includes exercises to help you practice and
suggests resources for further learning about CSS.
Objective:
• Gain an in-depth understanding of web layout design using CSS.
• Learn to effectively use CSS for styling and formatting HTML elements.
• Understand the basic syntax of CSS.
• Explore different methods of incorporating CSS into HTML.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
main {
width: 900px;
height: fit-content;
}
.circle {
width: 900px;
height: 250px;
display: flex;
align-items: center;
gap: 10px;
}
.circlee {
width: 200px;
height: 200px;
border-radius: 50%;
}
.inner1 {
background-color: yellow;
}
.inner2 {
background-color: yellowgreen;
}
.inner3 {
background-color: gainsboro;
}
.menu {
width: 100%;
display: flex;
justify-content: space-evenly;
height: 50px;
}
.image {
width: 100%;
height: 100px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin-top: 10px;
gap: 20px ;
}
.im {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
overflow: hidden;
}
.im img {
width: 100%;
height: 100%;
}
.text {
display: flex;
gap: 20px;
height: 75px;
margin-top: 10px;
}
.text1, .text2, .text3 {
flex: 1;
height: 100%;
background-color: lightgray;
border-radius:10px;
}
</style>
</head>
<body>
<main>
<div class="circle">
<div class="circlee inner1"></div>
</div>
<div class="menu">
<div class="menu1"><h4>Menu1</h4></div>
</div>
<div class="image">
<div class="image1 im"><img src="./pexels-photo-1257860.jpeg" alt=""></div>
</div>
<div class="text">
<div class="text1"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non
ratione reprehenderit deserunt.
</p></div>
<div class="text2"><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis
eos nam voluptate?</p></div>
<div class="text3"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
beatae mollitia cumque!</p></div>
</div>
</main>
</body>
</html>
Output:
Conclusion:
This lab wraps up by highlighting the crucial role of CSS in web design, showcasing how it can
greatly enhance the look and usability of web pages. With a solid foundation in CSS syntax,
practical examples, and exercises, learners will gain the confidence to create visually appealing
web layouts. These skills are essential for any aspiring web designer and serve as a stepping
stone for more advanced web development studies.
LAB 4
4.1
Title: Introduction to Web Lay Outing
Description:
The lab report explores essential aspects of designing web layouts, concentrating on organizing
web pages using HTML elements such as <div> and enhancing their appearance with CSS. It
demonstrates how to create and design different parts of a web page, like headers, menus, and
content areas. The guide takes a hands-on approach to teach effective web design techniques,
ensuring that web pages look good and work well.
Objectives:
• Help readers grasp the basics of web layout design principles.
• Teach essential methods for structuring and styling web pages with HTML and CSS.
• Empower readers to craft organized and attractive web layouts.
• Improve user experience through effective web design practices.
Conclusion:
The lab report stresses the importance of mastering web layout techniques for anyone aiming to
become a web designer. It points out that a well-structured web page not only looks better but
also makes it easier for people to use and access information. The practical examples and
strategies shared in the document give a solid starting point for developing more complex web
designs, encouraging readers to experiment and improve their skills.
4.2
Title: Lay Outing and Navigation Bar
Objectives:
 Employ <ul> tags (unordered list) and <li> tags (list item) for organizing the menu.
 Establish a primary menu using <ul>, where each menu item is represented by an <li>.
 To create dropdown menus, nest an additional <ul> inside an <li> of the main menu.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
main {
width: 900px;
height: fit-content;
}
.circle {
width: 900px;
height: 250px;
display: flex;
gap: 10px;
}
.circlee {
width: 200px;
height: 200px;
border-radius: 50%;
}
.inner1 {
}
.inner2 {
background-color: yellowgreen;
}
.inner3 {
background-color: gainsboro;
}
.menu {
width: 100%;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
}
.menu > ul > li {
position: relative;
padding: 10px;
}
.menu ul li ul {
display: none;
position: absolute;
background-color: white;
top: 100%;
left: 0;
min-width: 150px;
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
z-index: 1;
}
.menu ul li ul li {
padding: 10px;
background-color: white;
border-bottom: 1px solid #ccc;
}
.menu ul li ul li:hover {
background-color: #f1f1f1;
}
.menu ul li:hover > ul {
display: block;
}
.image {
width: 100%;
height: 100px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin-top: 10px;
gap: 20px ;
}
.im {
width: 100%;
height: 100%;
display: flex;
overflow: hidden;
}
.im img {
width: 100%;
height: 100%;
object-fit: cover;
}
.text {
display: flex;
gap: 20px;
height: 75px;
margin-top: 10px;
}
.text1, .text2, .text3 {
flex: 1;
height: 100%;
background-color: lightgray;
border-radius:10px;
}
</style>
</head>
<body>
<main>
<div class="circle">
</div>
<div class="menu">
<ul>
<li>Home
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
<li>Python
<ul>
<li>Fundamental of python</li>
<li>OOP</li>
<li>DSA with PYthon</li>
</ul>
</li>
<li>Learn more
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
<li>About Us
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
</ul>
</div>
<div class="image">
<div class="image1 im"><img src="night.png" alt=""></div>
</div>
<div class="text">
<div class="text1"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non
ratione reprehenderit deserunt.
</p></div>
<div class="text2"><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis
eos nam voluptate?</p></div>
<div class="text3"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
beatae mollitia cumque!</p></div>
</div>
</main>
</body>
</html>
Output:
Conclusion:
The lab aims to show readers how to make a well-organized 2-level dropdown menu for a
website. By following the clear instructions, readers will learn how to use HTML and CSS to
create a useful and attractive navigation menu that makes their website easier to use and
navigate.
LAB 5
Title: Responsive Web Design
Description:
The objective of this lab report is to demonstrate the principles and techniques of Responsive
Web Design (RWD) through practical application. This includes creating web pages that adapt
seamlessly to various devices and screen sizes, ensuring an optimal user experience.
Objective:
1. Use CSS properties to scale appropriately and maintain quality across various devices.
2. Write and apply media queries to adjust the layout and design of web pages based on
device characteristics such as width, height, and orientation.
Code:
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Layout</title>
<link rel="stylesheet" href="lab5.css">
</head>
<body>
<div class="container-main">
<div class="header">This is header</div>

<div class="container">
<div class="box box1">Box 1</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
/* height: 100vh; */
}
.container-main{
height: 100vh;
display: grid;
grid-template-rows:1fr 3fr 1fr;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.header {
background-color: #f3b315;
padding: 20px;
text-align: center;
}
.box {
padding: 20px;
text-align: center;
}
.box1 { background-color: #add8e6; }

.box2 { background-color: #ffb6c1; }
.box3 { background-color: #90ee90; }
.box4 { background-color: #dda0dd; }
.box5 { background-color: #ffdab9; }
.box6 { background-color: #ffffe0; }
.box7 { background-color: #98fb98; }
.box8 { background-color: #e0ffff; }
.footer {
background-color: #00ff00;
padding: 20px;
text-align: center;
}
@media (min-width: 600px) {

.container {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto auto;
}
}
@media (min-width: 900px) {

.container {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
}
.box1,.box4,.box5,.box8{
width: 25%;
}
.box2,.box3,.box6,.box7{
width:75%;
}
}
Output:
Conclusion:
The lab report has explored Responsive Web Design principles and the use of the responsive
design to ensure the seamless web page across various screen size devices.
LAB 6
Title: Create the sub menu for each of main menu

Description:
This lab report is centered on the development of web design and layout using HTML, CSS, and
JavaScript. The tasks involve creating a resizable menu with hover effects and integrating a sub-
menu into a responsive layout.
Objective:
 Teach students how to create a resizable menu using HTML and CSS.
 Implement hover effects that change the menu's background color and height.
 Develop sub-menus for the main menu items.
 Integrate the created components into a responsive web layout.
Code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Layout</title>
<link rel="stylesheet" href="lab6.css">
</head>
<body>
<div class="header">
<h1>This is header</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li><a href="#">HTML</a>
<ul>
<li><a href="#">HTML Forms</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">HTML Graphics</a></li>
<li><a href="#">HTML Media</a></li>
<li><a href="#">HTML APIs</a></li>
</ul>
</li>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">CSS3</a></li>
<li><a href="#">CSS Layout</a></li>
<li><a href="#">CSS Box Model</a></li>
<li><a href="#">CSS Responsive</a></li>
</ul>
</li>
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">JS Forms</a></li>
<li><a href="#">JS Objects</a></li>
<li><a href="#">JS Functions</a></li>
<li><a href="#">JS HTML DOM</a></li>
<li><a href="#">JS Browser BOM</a></li>
<li><a href="#">JS AJAX</a></li>
<li><a href="#">JS JSON</a></li>
</ul>
</li>
</ul>
</div>
<div class="col-6">
<h1>Title</h1>
<p>Some text here</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo voluptas quasi illum ullam
doloribus corrupti rem molestiae ex ad assumenda, fugiat mollitia quam itaque ab, optio qui dolorem
aliquid aspernatur dolores! Laboriosam voluptate quo possimus, officia distinctio cupiditate. Quibusdam
blanditiis quis quasi cum commodi beatae.
</p>
</div>
<div class="col-3 aside">
<h2>Another side contents</h2>
<p>Include some text here</p>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
html, body {
height: 100%;
body {
font-family: Arial, sans-serif;
display: flex;
.main {
height: 100vh;
display: flex;
.header {
background-color: orange;
text-align: center;
padding: 10px;
.menu {
background-color: pink;
padding: 10px;
.menu ul {
list-style-type: none;
padding: 0;
.row {
flex: 1;
display: flex;
flex-wrap: wrap;
}
.col-3, .col-6 {
padding: 20px;
.aside {
background-color: purple;
color: white;
padding: 10px;
.footer {
background-color: green;
text-align: center;
padding: 10px;
@media screen and (max-width: 600px) {
.header, .footer, .menu, .col-3, .col-6, .aside {
width: 100%;
@media screen and (min-width: 600px) and (max-width: 768px) {
.menu {
width: 25%;
.col-6 {
width: 75%;
.header, .footer, .aside {
width: 100%;
}
@media screen and (min-width: 768px) {
.menu {
width: 25%;
height: 90%;
.col-6 {
width: 50%;
.aside {
width: 25%;
height: 90%;
.header, .footer {
width: 100%;
a{
text-decoration: none;
color: black;
ul ul {
background-color: #fff;
display: none;
li:hover ul {
display: block;
z-index: 5;
}
ul ul li:hover {
background-color: #f0f0f0;
ul ul li {
padding-left: 10px;
Output:
Conclusion:
This lab provided practical experience in creating interactive web components using HTML,
CSS, and JavaScript. By completing tasks such as developing a resizable menu with hover
effects and integrating sub-menus into a responsive layout, students enhanced their web design
and development skills, preparing them for more complex projects.
LAB 7
Title: Webpage Animation Using CSS
Description:
This HTML document creates a webpage featuring animated elements: a sun that rotates
continuously and a car that moves across the screen with a series of rotations. The background
image of the webpage is set to cover the entire viewport, providing a visually appealing backdrop
for the animations.
Objective:
 Implement a full-screen background image for the webpage.
 Create a sun animation that rotates continuously.
 Animate a car to move across the screen with specific rotation points.
 Utilize CSS keyframes for animating elements.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
background-image:url("background.png");
background-size : 100vw 100vh;
background-repeat: no-repeat;
overflow: hidden;
}
div,img{
width: 200px;
height: 200px;
}
.car{
width: 200px;
position: absolute;
right: 20px;
bottom: 20px;
animation: car 5s linear infinite;
}
.sun{
animation: sun 5s infinite ;
}
@keyframes sun{
0%{
transform: rotate(0deg);
}
100%{
}
}
@keyframes car{
0%{
left:100%;
}
30%{
}
50%{
left: 50%;
transform: rotate(-15deg);
}
65%{
}
100%{
left: 0%;
}
}
</style>
</head>
<body>
<div>
<img class="sun" src="sun.png" alt="">
<img class="car" src="car.png" alt="">
</div>
</body>
</html>
Output:
Conclusion:
This code effectively demonstrates how to use CSS animations to enhance the interactivity and
visual appeal of a webpage. By applying keyframe animations, the sun rotates smoothly, and the
car traverses the screen with dynamic rotations, showcasing the potential of CSS for creating
engaging web content.
LAB 8
Title: JavaScript: Window and Document Objects
Description:
This lab focuses on understanding and utilizing the JavaScript Window and Document objects to
enhance web pages. Through hands-on exercises, students will learn to implement methods and
properties of these objects, interact with HTML elements, and handle user inputs dynamically.
Objective:
 Understand the fundamental concepts of the JavaScript Window and Document objects.
 Learn to use common methods and properties of the Window object.
Code:
Exercise 1:
<html>
<head>
<title>Prompt Example</title>
</head>
<body>
<script>
var num1 = prompt("Enter 1st number:");
var num2 = prompt("Enter 2nd number:");
var add = num1 + num2;
var sub = num1 - num2;
var mul = num1 * num2;
var div = num1 / num2;
document.write(`${num1} + ${num2} = ${add}<br>`);
document.write(`${num1} - ${num2} = ${sub}<br>`);
document.write(`${num1} * ${num2} = ${mul}<br>`);
document.write(`${num1} / ${num2} = ${div}<br>`);
</script>
</body>
</html>
Exercise 2:
<html>
<head>
<title>lab8 Example 2</title>
</head>
<body>
<script>
var myname;
myname = prompt("What is your name ?");
var birthyear = prompt("what is your birth year?")
var age = 2024-birthyear;
document.write(`Hello ${myname}! you are ${age} years old!`);
</script>
</body>
</html>
Output:
Exercise 1
Exercise 2
Conclusion:
In this lab, we explored JavaScript's Window and Document objects, learning to efficiently
manipulate web elements and handle user inputs. This practical experience empowers us to
create more interactive and dynamic web pages, setting the stage for advanced JavaScript
programming.
LAB 9
Title: Webpage Interaction with JavaScript
Description:
This lab report covers two exercises focused on enhancing a webpage's interactivity using
JavaScript. The first exercise involves changing the background image of a webpage based on
the time of day. The second exercise requires creating a tabbed content layout that switches
content sections when clicked.
Objective:
 Implement a JavaScript function to change the webpage background image based on

time.
 Use HTML and CSS to structure a tab content layout.
 Apply JavaScript and the event listeners event to switch between content sections.
Code:
Exercise 1
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Image Based on Time</title>
<style>
body {
margin: 0;
height: 100vh;
background-size: cover;
background-position: center;
display: flex;
}
.datee{
width: 100vw;
height: 50px;
margin: 40px;
display: flex;
}
.time{
width: 100vw;
height: 50px;
display: flex;
}
</style>
</head>
<body>
<div class="datee">
<h1></h1>
</div>
<div class="time"><h3></h3></div>
<script>
function setBackgroundImage() {
var date = new Date();
var hour = date.getHours();
// var hour = 13;
var minute = date.getMinutes();
var second = date.getSeconds();
var month = date.getMonth() + 1 ;
var year=date.getFullYear();
var day = date.getDate();
var imageUrl;
var good;
if (hour >= 6 && hour < 12) {
imageUrl = 'morning.jpg';
good = 'Good Morning!';
} else if (hour >= 12 && hour < 19) {
imageUrl = 'afernoon.png';
good = 'Good Afternoon!';
} else {
imageUrl = 'night.png';
good = 'Good Night!';
}
document.body.style.backgroundImage = `url('${imageUrl}')`;
document.querySelector('.datee h1').innerText = good;
document.querySelector('.time h3').innerText = `Date: ${day}/${month}/${year} Time: $
{hour}:${minute}:${second}`;
}
setBackgroundImage();
setInterval(setBackgroundImage,1000)
</script>
</body>
</html>
Exercise 2:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: flex;
}
.contain {
width: 120px;
height: 60px;
background-color: aqua;
display: flex;
margin: 0px 5px;
cursor: pointer;
/* Add cursor pointer for better UX */
}
.one {
}
.two {
background-color: green;
}
.three {
background-color: pink;
}
.main_content {
width: 100%;
height: 80vh;
}
</style>
</head>
<body>
<div class="container">
<div class="one contain" onclick="content_one()">
<h4>Content 1</h4>
</div>
<div class="two contain" onclick="content_two()">
<h4>Content 2</h4>
</div>
<div class="three contain" onclick="content_three()">
<h4>Content 3</h4>
</div>
</div>
<div class="main_content"></div>
<script>
function content_one() {
document.querySelector('.main_content').innerText = 'This is content 1';
document.querySelector('.main_content').style.backgroundColor = 'yellow';
function content_two() {
document.querySelector('.main_content').style.backgroundColor = 'green';
}
function content_three() {
document.querySelector('.main_content').style.backgroundColor = 'pink';
}
</script>
</body>
</html>
Output:
Exercise 2
Conclusion:
By completing this lab, students learned how to dynamically update webpage content using
JavaScript. They successfully implemented time-based background image changes and created
an interactive tabbed content layout, enhancing their understanding of JavaScript, HTML, and
CSS integration.
LAB 10
Title: JavaScript- Form Manipulation
Description:
This lab report focuses on JavaScript form manipulation, illustrating how to create and style
forms using HTML and CSS. JavaScript is employed to enhance form interactivity and
functionality, enabling tasks such as validation. The report provides practical examples and step-
by-step instructions to help learners understand and implement these techniques effectively,
aiming to enhance their proficiency in web development with JavaScript.
Objective:
 The use of html, CSS and javascript in creating a proper form with validation.
 Use of JavaScript for form manipulation
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration Form</title>
<style>
.error {
background-color: red;
}
</style>
</head>
<body>
<h1>Registration Form</h1>
<form id="registrationForm">
<div>
<label for="fullName">Full Name:</label>
<input type="text" name="fullName" id="fullName" required>
</div>
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="username" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" name="password" id="password" required>
</div>
<div>
<label for="confirmPassword">Confirm Password:</label>
<input type="password" name="confirmPassword" id="confirmPassword" required>
</div>
<div>
<label>Gender:</label>
<input type="radio" name="gender" id="male" value="male"> Male
<input type="radio" name="gender" id="female" value="female"> Female
</div>
<div>
<label for="phoneNumber">Phone Number:</label>
<input type="tel" name="phoneNumber" id="phoneNumber" required>
</div>
<div>
<label for="email">Email Address:</label>
<input type="email" name="email" id="email" required>
</div>
<div>
<label for="homeAddress">Home Address:</label>
<textarea name="homeAddress" id="homeAddress" required></textarea>
</div>
<div>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</div>
</form>
<script>
const form = document.getElementById('registrationForm');
const fullName = document.getElementById('fullName');
const username = document.getElementById('username');
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirmPassword');
const phoneNumber = document.getElementById('phoneNumber');
const email = document.getElementById('email');
const homeAddress = document.getElementById('homeAddress');
form.addEventListener('submit', function(event) {
let error = false;
if (fullName.value.trim() === '') {

fullName.classList.add('error');
error = true;
} else {
fullName.classList.remove('error');
}
if (username.value.trim() === '') {

username.classList.add('error');
error = true;
} else {
username.classList.remove('error');
}
if (password.value === '') {

password.classList.add('error');
error = true;
} else if (password.value.length < 10 || password.value.length > 15) {
password.classList.add('error');
alert('Password must be between 10 and 15 characters.');
error = true;
} else {
password.classList.remove('error');
}
if (confirmPassword.value === '') {
confirmPassword.classList.add('error');
error = true;
} else if (confirmPassword.value !== password.value) {
confirmPassword.classList.add('error');
alert('Passwords must match.');
error = true;
} else {
confirmPassword.classList.remove('error');
}
if (!document.querySelector('input[name="gender"]:checked')) {
alert('Please select your gender.');
error = true;
}
if (phoneNumber.value.trim() === '' || !phoneNumber.value.match(/^\d{10}$/)) {

phoneNumber.classList.add('error');
alert('Please enter a valid 10-digit phone number.');
error = true;
} else {
phoneNumber.classList.remove('error');
}
if (email.value.trim() === '' || !email.value.match(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]

+\.[a-zA-Z]{2,}$/)) {
email.classList.add('error');
alert('Please enter a valid email address.');
error = true;
} else {
email.classList.remove('error');
}
if (homeAddress.value.trim() === '') {

homeAddress.classList.add('error');
error = true;
} else {
homeAddress.classList.remove('error');
}
if (error) {
event.preventDefault();
}
});
</script>
</body>
</html>
Output:
Conclusion:
This code exemplifies the integration of HTML, CSS, and JavaScript for creating and
manipulating forms. It demonstrates the use of essential elements like <input> and <label>,
along with form validation techniques such as required and pattern. By studying and applying
this code, developers can gain practical insights into building robust forms that are both
functional and user-friendly. This knowledge lays a solid foundation for further exploration and
mastery of form development using these core web technologies.

Lab Report Web

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab Report Web

Uploaded by

Copyright:

Available Formats

LAB REPORT

TECHNOLOGY PARK MALAYSIA

FUNDAMENTAL OF WEB DEVELOPMENT

MODULE CODE: CT053-3-1

Title: Responsive Web Design

<div class="header">This is header</div>

.box1 { background-color: #add8e6; }

@media (min-width: 600px) {

@media (min-width: 900px) {

Title: Create the sub menu for each of main menu

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="lab6.css">

<div class="col-3 menu">

<li><a href="#">HTML Graphics</a></li>

<li><a href="#">HTML Media</a></li>

<li><a href="#">HTML APIs</a></li>

<li><a href="#">CSS Layout</a></li>

<li><a href="#">CSS Box Model</a></li>

<li><a href="#">CSS Responsive</a></li>

<li><a href="#">JS Forms</a></li>

<li><a href="#">JS Objects</a></li>

<li><a href="#">JS Functions</a></li>

<li><a href="#">JS HTML DOM</a></li>

<li><a href="#">JS Browser BOM</a></li>

<li><a href="#">JS AJAX</a></li>

<li><a href="#">JS JSON</a></li>

<p>Some text here</p>

<div class="col-3 aside">

<h2>Another side contents</h2>

<p>Include some text here</p>

<h2>Another side contents</h2>

<p>Include some text here</p>

<h2>Another side contents</h2>

<p>Include some text here</p>

font-family: Arial, sans-serif;

@media screen and (max-width: 600px) {

.header, .footer, .menu, .col-3, .col-6, .aside {

@media screen and (min-width: 600px) and (max-width: 768px) {

.header, .footer, .aside {

@media screen and (min-width: 768px) {

Title: Webpage Animation Using CSS

document.write(`Hello ${myname}! you are ${age} years old!`);

 Implement a JavaScript function to change the webpage background image based on

if (fullName.value.trim() === '') {

if (username.value.trim() === '') {

if (password.value === '') {

if (phoneNumber.value.trim() === '' || !phoneNumber.value.match(/^\d{10}$/)) {

if (email.value.trim() === '' || !email.value.match(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]

if (homeAddress.value.trim() === '') {

You might also like