17/1/2024
22BCE157
FSWD
PRACTICAL 2:
1. Create a Jason object and display the same using node.js in the terminal.
2. Create a Node.js script to read and display the content of the external Jason file.
3. Create and display multi-dimensional Jason Arrays, also demonstrate Accessing
individual elements of the multi-dimensional Jason Arrays.
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.
Part 1 :JS file:
const fs = require('fs');
const str = {
name: 'sam',
age: 25,
city: 'ahmedabad'
};
const jsonString = JSON.stringify(str, null, 10);
const filePath = "C:\\Users\\Krupa Vyas\\OneDrive\\Desktop\\fswd practicals\\c2.json";
console.log("hello world");
fs.writeFile(filePath, jsonString, 'utf-8', (err) => {
if (err) {
console.log("Error writing to file: " + err);
} else {
console.log("File written successfully");
fs.readFile(filePath, 'utf-8', (readErr, data) => {
if (readErr) {
console.log("Error reading the file: " + readErr);
} else {
data = JSON.parse(data);
console.log("File content:", data);
});
});
JSON file:
{
"name": "sam",
"age": 25,
"city": "ahmedabad"
Snippet:
Part2:
Part 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List App</title>
<style>
body {
background-color: rgb(135, 180, 202);
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
text-align: center;
font-family: Georgia, 'Times New Roman', Times, serif;
letter-spacing: 2px;
background-color: rgb(192, 150, 206);
margin: 0;
padding: 20px 0;
#inputwrapper {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
padding: 10px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
input[type="text"] {
padding: 8px;
margin-right: 8px;
border: 1px solid #ccc;
border-radius: 4px;
button {
padding: 8px 16px;
background-color: rgb(192, 150, 206);
border: none;
border-radius: 4px;
cursor: pointer;
button:hover {
background-color: rgb(162, 120, 176);
ul {
list-style: none;
padding: 10px;
margin: 0;
li {
text-align: left;
margin: 10px;
padding: 10px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: background-color 0.3s ease;
li:hover {
background-color: #f5f5f5;
}
.completed {
text-decoration: line-through;
div {
margin: 20px auto;
max-width: 600px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
</style>
</head>
<body>
<div>
<h1>Todo List</h1>
<div id="inputwrapper">
<input type="text" id="taskInput" placeholder="Add a new task">
<button onclick="addTask()">Add Task</button>
</div>
<ul id="taskList"></ul>
<script>
let tasks = [
{ id: 1, text: 'Task1', completed: false },
{ id: 2, text: 'Task2', completed: true },
{ id: 3, text: 'Task3', completed: false }
];
function displayTasks() {
const taskListElement = document.getElementById('taskList');
taskListElement.innerHTML = '';
tasks.forEach(task => {
const li = document.createElement('li');
li.textContent = task.text;
if (task.completed) {
li.classList.add('completed');
li.onclick = () => toggleTaskStatus(task.id);
taskListElement.appendChild(li);
});
function addTask() {
const taskInput = document.getElementById('taskInput');
const newTaskText = taskInput.value.trim();
if (newTaskText !== '') {
const newTask = {
id: tasks.length + 1,
text: newTaskText,
completed: false
};
tasks.push(newTask);
displayTasks();
taskInput.value = '';
}
function toggleTaskStatus(taskId) {
const taskIndex = tasks.findIndex(task => task.id === taskId);
if (taskIndex !== -1) {
tasks[taskIndex].completed = !tasks[taskIndex].completed;
displayTasks();
displayTasks();
</script>
</div>
</body>
</html>
Snippet:
