<!DOCTYPE html>
<html>
<head>
<title>Dynamic Table</title>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<link href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.5/js/dataTables.bootstrap4.min.js"></script>
</head>
<style>
/* Your CSS styles here */
</style>
<body>
<div class="navbar">
<h4 style="color: white;">SUM ITEMS PRICE</h4>
</div>
<br>
<div id="tableContainer">
<input type="text" id="name" placeholder="Name" required>
<input type="text" id="price" placeholder="Item name" required>
<input type="text" id="amount" placeholder="Amount" onkeypress="return isNumberKey(event);" required>
<button onclick="addData()">Add Data</button>
</div>
<br>
<div id="all_amt">
<table>
<tr>
<th>Prakash</th>
<td id="prakashTotalAmountDisplay">Your data here</td>
<th>Utsav</th>
<td id="utsavTotalAmountDisplay">Your data here</td>
<th>Rishi</th>
<td id="rishiTotalAmountDisplay">Your data here</td>
<th>Total </th>
<td id="totalAmountDisplay">0</td>
<th>per person</th>
<td id="dividedResult">0</td>
</tr>
</table>
</div>
<hr>
<table id="table_data" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Items</th>
<th>Amount</th>
<th>Date</th>
<th>Time</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
<div class="footer">
<h6>Developed By <a href="#">Anant Prakash</a></h6>
<h6>© 2023 Sum Items Price. All Rights Reserved.</h6>
</div>
<script>
// Your JavaScript code here
</script>
</body>
</html>
const express = require('express');
const fs = require('fs');
const bodyParser = require('body-parser');
const app = express();
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
const port = 3000;
const dataFilePath = 'data.json';
const deletedDataFilePath = 'deleted_data.json';
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.post('/addData', (req, res) => {
const { name, price, amount, date, time } = req.body;
if (!name || !price || !amount || !date || !time) {
return res.status(400).json({ error: 'All fields are required.' });
}
fs.readFile(dataFilePath, 'utf8', (err, data) => {
if (err) {
return res.status(500).json({ error: 'Internal server error.' });
}
let products = [];
if (data) {
products = JSON.parse(data);
}
products.push({ name, price, amount, date, time });
fs.writeFile(dataFilePath, JSON.stringify(products, null, 2), 'utf8', (err) => {
if (err) {
return res.status(500).json({ error: 'Internal server error.' });
}
return res.status(200).json({ message: 'Data added successfully.' });
});
});
});
app.get('/getData', (req, res) => {
fs.readFile(dataFilePath, 'utf8', (err, data) => {
if (err) {
return res.status(500).json({ error: 'Internal server error.' });
}
let products = [];
try {
products = JSON.parse(data);
} catch (error) {
console.error('Error parsing JSON data:', error);
return res.status(500).json({ error: 'Error parsing JSON data.' });
}
return res.status(200).json(products);
});
});
app.post('/deleteData', (req, res) => {
const index = req.body.index;
fs.readFile(dataFilePath, 'utf8', (err, data) => {
if (err) {
return res.status(500).json({ error: 'Internal server error.' });
}
let products = [];
if (data) {
products = JSON.parse(data);
}
if (index >= 0 && index < products.length) {
const deletedData = products.splice(index, 1)[0];
fs.writeFile(dataFilePath, JSON.stringify(products, null, 2), 'utf8', (err) => {
if (err) {
return res.status(500).json({ error: 'Internal server error.' });
}
fs.readFile(deletedDataFilePath, 'utf8', (err, deletedDataFileData) => {
let deletedDataArray = [];
if (deletedDataFileData) {
deletedDataArray = JSON.parse(deletedDataFileData);
}
deletedDataArray.push(deletedData);
fs.writeFile(
deletedDataFilePath,
JSON.stringify(deletedDataArray, null, 2),
'utf8',
(err) => {
if (err) {
return res.status(500).json({ error: 'Internal server error.' });
}
return res.status(200).json({ message: 'Data deleted and moved to deleted_data.json successfully.' });
}
);
});
});
} else {
return res.status(400).json({ error: 'Invalid index.' });
}
});
});
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
SHOW DEMO CLICK HERE
0 Comments