Program 7
Develop JavaScript program (with HTML/CSS) for:
a) Converting JSON text to JavaScript Object.
b) Convert JSON results into a date.
c) Converting From JSON To CSV and CSV to JSON.
d) Create hash from string using [Link]() method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON and Crypto Operations</title>
<script src="[Link]
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.container {
max-width: 800px;
margin: auto;
}
textarea {
width: 100%;
height: 100px;
margin: 10px 0;
}
button {
margin: 5px;
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
button:hover{
background-color: #0056b3;
}
pre {
background: #f4f4f4;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>JSON and Crypto Operations</h1>
<h2>a)Convert JSON Text to JavaScript Object</h2>
<textarea id="jsonInput" placeholder="Enter JSON text"></textarea>
<button onclick="convertJSONtoObject()">Convert to Object</button>
<pre id="objectOutput"></pre>
<h2>b)Convert JSON Results into a Date</h2>
<textarea id="dateInput" placeholder='Enter JSON with date in "yyyy-mm-dd"
format'></textarea>
<button onclick="convertJSONToDate()">Convert to Date</button>
<pre id="dateOutput"></pre>
<h2>c) Convert From JSON to CSV and CSV to JSON</h2>
<textarea id="jsonToCsvInput" placeholder='Enter JSON for CSV
conversion...'></textarea>
<button onclick="convertJSONToCSV()">Convert to CSV</button>
<pre id="csvOutput"></pre>
<textarea id="csvToJsonInput" placeholder="Enter CSV data"></textarea>
<button onclick="convertCSVToJSON()">Convert to JSON</button>
<pre id="jsonOutput"></pre>
<h2>d) Create Hash from String</h2>
<input type="text" id="hashInput" placeholder="Enter a string" style="width: 100%;
padding: 10px; margin: 10px 0;">
<button onclick="createHash()">Generate Hash</button>
<pre id="hashOutput"></pre>
</div>
<script>
// a) Convert JSON text to JavaScript Object
function convertJSONtoObject() {
const jsonInput = [Link]("jsonInput").value;
try {
const obj = [Link](jsonInput);
[Link]("objectOutput").textContent = [Link](obj, null, 2);
} catch (e) {
[Link]("objectOutput").textContent = "Invalid JSON!";
}
}
// b) Convert JSON Results into a Date
function convertJSONToDate() {
const dateInput = [Link]("dateInput").value;
try {
const obj = [Link](dateInput);
const date = new Date([Link]);
if (isNaN(date)) throw new Error("Invalid date");
[Link]("dateOutput").textContent = `Date: ${[Link]()}`;
} catch (e) {
[Link]("dateOutput").textContent = "Invalid JSON or date format!";
}
}
// c) Convert JSON to CSV
function convertJSONToCSV() {
const jsonInput = [Link]("jsonToCsvInput").value;
try {
const array = [Link](jsonInput);
const csv = array
.map((row, i) =>
i === 0
? [Link](row).join(",") + "\n" + [Link](row).join(",")
: [Link](row).join(",")
)
.join("\n");
[Link]("csvOutput").textContent = csv;
} catch (e) {
[Link]("csvOutput").textContent = "Invalid JSON Array!";
}
}
// Convert CSV to JSON
function convertCSVToJSON() {
const csvInput = [Link]("csvToJsonInput").value;
try {
const [headers, ...rows] = [Link]("\n");
const keys = [Link](",");
const json = [Link](row => {
const values = [Link](",");
return [Link]((acc, key, i) => {
acc[key] = values[i];
return acc;
}, {});
});
[Link]("jsonOutput").textContent = [Link](json, null, 2);
} catch (e) {
[Link]("jsonOutput").textContent = "Invalid CSV Format!";
}
}
// d) Create Hash from String
function createHash() {
const input = [Link]("hashInput").value;
if (!input) {
[Link]("hashOutput").textContent = "Please enter a string.";
return;
}
const hash = CryptoJS.SHA256(input).toString();
[Link]("hashOutput").textContent = `Hash: ${hash}`;
}
</script>
</body>
</html>
Output: