Lab Practical Submission
Date: 09/01/24
Roll No. and Name: 22BCE305 ROSHNI PANKAJKUMAR RANA
Course Code and Name: 2CS201 FULL STACK WEB DEVELOPMENT
Practical-2:
1. Create a Jason object and display the same using [Link] in the terminal.
[Link]
//creating json object
constjsonObj={
name: 'Roshni Rana',
age: 19,
city: 'Ahmedabad',
};
//displaying
[Link](constjsonObj);
Output
2. Create a [Link] script to read and display the content of the external Jason file.
[Link]
{
"name": "Roshni Rana",
"age": 19,
"city": "Ahmedabad"
}
[Link]
const fs = require('fs');
constfilePath='C:/Users/HP/Desktop/uni/fourth
sem/fswd/lab/[Link]';
//reading the json file
[Link](constfilePath,'utf8',(err,datap2)=>{
if(err){
[Link]('Error reading the JSON file:',err);
return;
}
try{
//parse json data
//convert json data to javascript data
const jsonObj=[Link](datap2);
[Link]('JSON object content:',jsonObj);
[Link]('Formatted JSON object content:',
[Link](jsonObj, null, 2));
}catch(parseError){
[Link]('Error parsing JSON:', parseError);
}
});
Output
3. Create and display multi-dimensional Jason Arrays, also demonstrate Accessing
individual elements of the multi-dimensional Jason Arrays.
[Link]
// Create a multi-dimensional JSON array
const multiDimArray = [
[1, 2, 3],
[4, 5, 6],
['orange', 'chikoo', 'mango'],
['carrot', 'cucumber', 'beetroot']
];
// Display the multi-dimensional JSON array
[Link]('Multi-dimensional JSON Array:');
[Link](multiDimArray);
// Accessing individual elements
[Link]('\nAccessing individual elements:');
[Link]('Element at [1][2]:', multiDimArray[1][2]);
[Link]('Element at [0][1]:', multiDimArray[0][1]);
[Link]('Element at [1][1]:', multiDimArray[1][1]);
[Link]('Element at [2][1]:', multiDimArray[2][1]);
[Link]('Element at [3][0]:', multiDimArray[3][0]);
Output
4. Simple web-based application example using JavaScript and JSON, you can
create a basic HTML page with JavaScript to manipulate JSON data. In this
example, let's create a simple to-do list application where tasks are stored in a
JSON array. Users can add tasks, mark them as completed, and remove them from
the list.
Code
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>To-do List App</title>
<style>
body {
background-color: beige;
text-align: center;
}
ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
li {
margin: 5px 0;
cursor: pointer;
font-size: 18px;
display: flex;
align-items: center;
}
h1 {
background-color: darkred;
color: beige;
}
.completed {
text-decoration: line-through;
color: brown;
}
</style>
</head>
<body>
<h1>To-do List App</h1>
<input type="text" id="taskInput" placeholder="Add a new task">
<button onclick="addTask()">Add Task</button>
<ul id="taskList"></ul>
<script>
// Sample JSON array for tasks
let tasks = [
{ id: 1, text: 'Complete chores', completed: false },
{ id: 2, text: 'Organize study table', completed: true },
{ id: 3, text: 'Do laundry', completed: false }
];
// Function to display tasks on the web page
function displayTasks() {
const taskListElement = [Link]('taskList');
[Link] = '';
[Link](task => {
const li = [Link]('li');
const checkbox = [Link]('input');
[Link] = 'checkbox';
[Link] = [Link];
[Link](checkbox);
const textSpan = [Link]('span');
[Link] = [Link];
[Link](textSpan);
if ([Link]) {
[Link]('completed');
}
[Link]('change', () =>
toggleTaskStatus([Link], li));
[Link](li);
});
}
// Function to add a new task
function addTask() {
const taskInput = [Link]('taskInput');
const newTaskText = [Link]();
if (newTaskText !== '') {
const newTask = {
id: [Link] + 1,
text: newTaskText,
completed: false
};
[Link](newTask);
displayTasks();
[Link] = '';
}
}
// Function to toggle the status of a task (completed or not)
function toggleTaskStatus(taskId, li) {
const taskIndex = [Link](task => [Link] === taskId);
if (taskIndex !== -1) {
tasks[taskIndex].completed = !tasks[taskIndex].completed;
[Link]('completed');
}
}
// Initial display of tasks
displayTasks();
</script>
</body>
</html>
Output