KANO STATE POLYTECHNIC
SCHOOL OF TECHNOLOGY,
DEPARTMENT OF COMPUTER SCIENCES
FRONTEND DEVELOPMENT II PRACTICAL REPORT
NAME OF STUDENT: ZAINAB SALIHU MAI KARFI
REG. NO.: HND/SWD/23/0048
PROGRAMME: SOFTWARE ENGR. & WEB DEVELOPMENT
SEMESTER: 1ST SEMESTER HND II
INSTRUCTOR/TECHNOLOGIST NAME: MAL.JAMILA ABDULLAHI SANI
FRONTEND GROUP PRACTICAL REPORT
Introduction:
This report on our frontend practical includes six practical exercises that help in learning the basics of front-end web
development. The main focus is on using JavaScript to work with the webpage’s structure (called the DOM),
responding to user actions, handling errors, and sending or receiving data using APIs. Each task shows how to use
these features to make websites more interactive and useful.
PRACTICAL 1:
Utilize DOM traversal methods to navigate the DOM Tree, targeting parent, child and sibling element.
THE INPUT
The Output
To check traverse DOM click on the button” Traverse DOM”
PRACTICAL 2:
Create a webpage and manipulate the contents using the methods explained.
Input
The Output
When we open the webpage
And we click the “change content” button, the title and paragraph text will change, and their
Styles will be updated.
Practical 3:
Create a webpage that responds to user interaction/events. Attach eventListener to HTML
element using method like addEventListener.
Input:
Output:
When you interact with the buttons, the webpage responds by changing the text in the
paragraph element.
When you click “click me” button this will appears
When you click the “hover me” button this will appears:
When you remove the cursor from the button this will appears:
PRACTICAL 4:
Write event handler function to execute desired behaviour when event occur like button click.
Input:
Output:
When you click the “Greet” button, the event handler function greetUser is executed,
prompting you for your name and displaying a personalized greeting message.
When you click the “Greet” button.
When you enter your Name:
The Greet message will appear:
PRACTICAL 5:
Create document showing various errors and identify their courses. Show error handling using
try ,catch in javascript.
Input:
Output:
When you click the “trigger Errors” button, the triggerErrors function is executed, triggering
various errors. The try-catch blocks catch these errors and display their messages in the
paragraph element.
PRACTICAL 6:
Implement PUT, GET, POST, PATCH and DELETE requests. demonstrate how to make GET and Post request to
internal RESTful APIs using the fetch function. Demonstrate RESTful call using public or already existing APIs.
FOR GET:
<!DOCTYPE html>
<html>
<head>
<title>GET Request</title>
</head>
<body>
<h2>GET Request Example</h2>
<p>Open the console to see the output.</p>
<script>
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => console.log("GET Response:", data))
.catch(error => console.error("Error:", error));
</script>
</body>
</html>
OUTPUT:
FOR PUT:
<!DOCTYPE html>
<html>
<head>
<title>PUT Request Example</title>
</head>
<body>
<h2>PUT Request Example</h2>
<p>Open the browser console to see the output.</p>
<script>
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id: 1,
title: 'Updated Post',
body: 'This is the updated full content.',
userId: 1
})
})
.then(response => response.json())
.then(data => console.log("PUT Response:", data))
.catch(error => console.error("Error:", error));
</script>
</body>
</html>
OUTPUT:
FOR PATCH:
<!DOCTYPE html>
<html>
<head>
<title>PATCH Request Example</title>
</head>
<body>
<h2>PATCH Request Example</h2>
<p>Open the browser console to see the output.</p>
<script>
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'Patched Title'
})
})
.then(response => response.json())
.then(data => console.log("PATCH Response:", data))
.catch(error => console.error("Error:", error));
</script>
</body>
</html>
OUTPUT:
FOR DELETE:
<!DOCTYPE html>
<html>
<head>
<title>DELETE Request Example</title>
</head>
<body>
<h2>DELETE Request Example</h2>
<p>Open the browser console to see the output.</p>
<script>
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'DELETE'
})
.then(() => console.log("DELETE Response: Post deleted successfully."))
.catch(error => console.error("Error:", error));
</script>
</body>
</html>
OUTPUT:
EXPLANATION:
The GET method retrieves data from the server, converts the response from JSON into a JavaSript object,
and then prints that object to the console.
The PUT method completely replaces the existing resources at /posts/1 with the new data.
The PATCH method updates part of the resources. In this, only the title property is changed.
The DELETE method sends a request to remove the resource at /posts/1.
CONCLUSION
By doing these practicals, we learned how to make websites that can react to users, handle problems in the code, and
connect with other systems using APIs. These skills are important for building modern websites that are easy to use
and work well. The exercises helped us understand how JavaScript works and how it can be used to improve web
pages.
