Scribd
Upload
5 views

webprog7

The document is an HTML/CSS template for a simple converter application that allows users to convert JSON text to JavaScript objects, convert JSON dates, and convert between JSON and CSV formats. It also includes functionality to create a hash from a string using the crypto.createHash() method. The interface consists of sections for each conversion type, with corresponding input fields and buttons to execute the conversions.

Uploaded by

tejusangolli
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

webprog7

The document is an HTML/CSS template for a simple converter application that allows users to convert JSON text to JavaScript objects, convert JSON dates, and convert between JSON and CSV formats. It also includes functionality to create a hash from a string using the crypto.createHash() method. The interface consists of sections for each conversion type, with corresponding input fields and buttons to execute the conversions.

Uploaded by

tejusangolli
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

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 crypto.createHash() method

<!DOCTYPE html>

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-
js.min.js"></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 = document.getElementById(id);

element.textContent = text;

element.className = isSuccess ? 'success' : 'error';

element.style.display = 'block';

element.style.opacity = '1';

function convertJsonToObject() {

const jsonInput = document.getElementById('jsonInput').value;

try {

const jsonObject = JSON.parse(jsonInput);

showResult('jsonOutput', JSON.stringify(jsonObject, null, 2), true);

} catch (error) {

showResult('jsonOutput', 'Invalid JSON', false);

function convertJsonToDate() {

const jsonDateInput = document.getElementById('jsonDateInput').value;

try {

const data = JSON.parse(jsonDateInput);

if (data.date && !isNaN(new Date(data.date).getTime())) {

const date = new Date(data.date);


showResult('jsonDateOutput', date.toString(), true);

} else {

showResult('jsonDateOutput', 'Invalid Date Format', false);

} catch (error) {

showResult('jsonDateOutput', 'Invalid JSON', false);

function convertJsonToCsv() {

const jsonInput = document.getElementById('jsonCsvInput').value;

try {

const jsonArray = JSON.parse(jsonInput);

if (Array.isArray(jsonArray) && jsonArray.length > 0) {

const keys = Object.keys(jsonArray[0]);

const csv = [

keys.join(','),

...jsonArray.map(row => keys.map(key =>


JSON.stringify(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 = document.getElementById('csvInput').value;

try {

const lines = csvInput.trim().split('\n');

if (lines.length > 1) {

const keys = lines[0].split(',');

if (keys.length > 0) {

const jsonArray = lines.slice(1).map(line => {

const values = line.split(',');

return keys.reduce((obj, key, index) => {

obj[key] = values[index];

return obj;

}, {});

});

showResult('jsonCsvOutput', JSON.stringify(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 = document.getElementById('hashInput').value.trim();

if (hashInput.length > 0) {

const hash = CryptoJS.SHA256(hashInput).toString();

showResult('hashOutput', hash, true);

} else {

showResult('hashOutput', 'Input cannot be empty', false);

</script>

</body>

</html>

You might also like