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>
<head>
<script src="[Link]
[Link]"></script>
<title>Simple Converter | vtucode</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
body {
font-family: Arial, sans-serif;
color: #000000;
}
.container {
width: 60%;
margin: 0 auto;
padding: 20px;
.head-title h1 {
font-size: 28px;
padding: 10px;
color: #fff;
margin-bottom: 50px;
.head-title {
width: 100%;
background: #000;
text-align: center;
border-radius: 10px;
.section {
margin-bottom: 40px;
padding: 20px;
border-radius: 8px;
background: #fff;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px
2px 0px;
transition: all 0.3s;
overflow: hidden;
.section h2 {
color: #000000;
font-size: 20px;
margin-bottom: 15px;
textarea {
font-size: 14px;
width: 100%;
height: 120px;
margin-bottom: 15px;
padding: 12px;
border-radius: 8px;
border: 1px solid #00000022;
box-sizing: border-box;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
textarea:focus {
background: transparent;
border: 1px solid #00000022;
border-color: #007BFF;
box-shadow: 0 0 12px rgba(0, 123, 255, 0.5);
outline: none;
input[type="text"] {
width: calc(100% - 24px);
padding: 12px;
border-radius: 8px;
border: 1px solid #ddd;
box-sizing: border-box;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
margin-bottom: 15px;
}
input[type="text"]:focus {
border-color: #007BFF;
box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
outline: none;
button {
display: inline-block;
padding: 15px 15px;
margin: 10px 0;
font-weight: 600;
border: none;
border-radius: 7px;
background-color: #007BFF;
color: #fff;
cursor: pointer;
font-size: 16px;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
button:hover {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007BFF;
button:focus {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007BFF;
pre {
display: none;
background: #f8f9fa;
border: 1px solid #ddd;
padding: 15px;
border-radius: 8px;
overflow: auto;
transition: opacity 0.3s ease;
.error {
margin-top: 10px;
font-size: 14px;
color: #000;
background: #ffdddd;
border-color: #ff0000;
padding: 10px;
.success {
margin-top: 10px;
font-size: 14px;
color: #000;
background: #6ef08d38;
border-color: #47e56d;
padding: 10px;
.adjust-area {
margin-top: 30px;
</style>
</head>
<body>
<div class="container">
<div class="head-title">
<h1>Simple Converter</h1>
</div>
<div class="section">
<h2>1. Convert JSON Text to JavaScript Object</h2>
<textarea id="jsonInput" placeholder="Enter JSON here..."></textarea>
<button onclick="convertJsonToObject()">Convert JSON</button>
<pre id="jsonOutput" class="output"></pre>
</div>
<div class="section">
<h2>2. Convert JSON Results into Date</h2>
<textarea id="jsonDateInput" placeholder='Enter JSON with date in "yyyy-
mm-dd" format'></textarea>
<button onclick="convertJsonToDate()">Convert to Date</button>
<pre id="jsonDateOutput" class="output"></pre>
</div>
<div class="section">
<h2>3. Convert JSON to CSV and CSV to JSON</h2>
<textarea id="jsonCsvInput" placeholder="Enter JSON for CSV
conversion..."></textarea>
<button onclick="convertJsonToCsv()">JSON to CSV</button>
<pre id="csvOutput" class="output"></pre>
<textarea id="csvInput" placeholder="Enter CSV here..." class="adjust-
area"></textarea>
<button onclick="convertCsvToJson()">CSV to JSON</button>
<pre id="jsonCsvOutput" class="output"></pre>
</div>
<div class="section">
<h2>4. Create Hash from String</h2>
<input type="text" id="hashInput" placeholder="Enter string to hash">
<button onclick="createHash()">Create Hash</button>
<pre id="hashOutput" class="output"></pre>
</div>
</div>
<script>
function showResult(id, text, isSuccess) {
const element = [Link](id);
[Link] = text;
[Link] = isSuccess ? 'success' : 'error';
[Link] = 'block';
[Link] = '1';
function convertJsonToObject() {
const jsonInput = [Link]('jsonInput').value;
try {
const jsonObject = [Link](jsonInput);
showResult('jsonOutput', [Link](jsonObject, null, 2), true);
} catch (error) {
showResult('jsonOutput', 'Invalid JSON', false);
function convertJsonToDate() {
const jsonDateInput = [Link]('jsonDateInput').value;
try {
const data = [Link](jsonDateInput);
if ([Link] && !isNaN(new Date([Link]).getTime())) {
const date = new Date([Link]);
showResult('jsonDateOutput', [Link](), true);
} else {
showResult('jsonDateOutput', 'Invalid Date Format', false);
}
} catch (error) {
showResult('jsonDateOutput', 'Invalid JSON', false);
function convertJsonToCsv() {
const jsonInput = [Link]('jsonCsvInput').value;
try {
const jsonArray = [Link](jsonInput);
if ([Link](jsonArray) && [Link] > 0) {
const keys = [Link](jsonArray[0]);
const csv = [
[Link](','),
...[Link](row => [Link](key =>
[Link](row[key])).join(','))
].join('\n');
showResult('csvOutput', csv, true);
} else {
showResult('csvOutput', 'Invalid JSON: Expected an array with
objects.', false);
}
} catch (error) {
showResult('csvOutput', 'Invalid JSON', false);
function convertCsvToJson() {
const csvInput = [Link]('csvInput').value;
try {
const lines = [Link]().split('\n');
if ([Link] > 1) {
const keys = lines[0].split(',');
if ([Link] > 0) {
const jsonArray = [Link](1).map(line => {
const values = [Link](',');
return [Link]((obj, key, index) => {
obj[key] = values[index];
return obj;
}, {});
});
showResult('jsonCsvOutput', [Link](jsonArray, null, 2), true);
} else {
showResult('jsonCsvOutput', 'Invalid CSV: No columns found.', false);
}
} else {
showResult('jsonCsvOutput', 'Invalid CSV: No data found.', false);
} catch (error) {
showResult('jsonCsvOutput', 'Invalid CSV', false);
function createHash() {
const hashInput = [Link]('hashInput').[Link]();
if ([Link] > 0) {
const hash = CryptoJS.SHA256(hashInput).toString();
showResult('hashOutput', hash, true);
} else {
showResult('hashOutput', 'Input cannot be empty', false);
</script>
</body>
</html>
OUTPUT
Steps to run:
1. Create an HTML File
[Link] VS Code:
o Click on the Explorer icon (top-left).
o Click New File (icon or right-click).
o Name the file: [Link]
[Link] your full code into [Link] and save it.
2. Install Live Server Extension (One-time Setup)
1. Go to the Extensions tab on the left sidebar (or press Ctrl+Shift+X).
2. Search for Live Server by Ritwick Dey.
3. Click Install.
3. Run the HTML File
After installing Live Server:
Right-click anywhere in the [Link] file.
Click "Open with Live Server".
1)Convert JSON Text to JavaScript Object
"name": "Alice",
"age": 30,
"city": "New York"
2)Convert JSON Results into Date
"date": "2024-09-01"
}
3)Convert JSON to CSV
{"name": "Alice", "age": 30, "city": "New York"},
{"name": "Bob", "age": 25, "city": "San Francisco"},
{"name": "Charlie", "age": 35, "city": "Chicago"}
4)Convert CSV to JSON
name,age,city
Alice,30,New York
Bob,25,San Francisco
Charlie,35,Chicago
5)Create Hash from String
krishna