Scribd
Upload
47 views21 pages

Program 7,9,10

Uploaded by

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

Program 7,9,10

Uploaded by

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

Program 7 :

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Operations</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>JSON Operations</h1>

<div class="container">
<!-- Textarea for JSON input -->
<textarea id="jsonInput" placeholder="Enter JSON here (e.g., [{'name':
'John'}, {'name': 'Jane'}])"></textarea>

<!-- Buttons for operations -->


<div class="button-container">
<button onclick="convertJsonToObject()">Convert JSON to
Object</button>
<button onclick="convertJsonDate()">Convert JSON Date</button>
<button onclick="convertJsonToCsv()">Convert JSON to CSV</button>
<button onclick="convertCsvToJson()">Convert CSV to JSON</button>
</div>
</div>

<!-- Hash creation section -->


<div class="hash-container">
<input id="hashInput" type="text" placeholder="Enter text to create SHA-
256 hash">
<button onclick="createHash()">Create Hash from String</button>
</div>

<!-- Output area -->


<div class="output">
<h3>Output:</h3>
<pre id="output"></pre>
</div>

<script src="script.js"></script>
</body>
</html>

Style.css

/* Basic layout and styling */


body {
font-family: Arial, sans-serif;
padding: 20px;
}

h1 {
text-align: center;
margin-bottom: 20px;
}

/* Container for textarea and buttons */


.container {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}

textarea {
width: 80%;
height: 150px;
margin-right: 20px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}

/* Button container aligned to the left of textarea */


.button-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 10px;
}

button {
padding: 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #f0f0f0;
}

/* Hash input and hash button container */


.hash-container {
margin-top: 20px;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}

#hashInput {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
width: 70%;
}

/* Output section */
.output {
margin-top: 30px;
}

pre {
background: #f8f8f8;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
white-space: pre-wrap;
word-wrap: break-word;
}

.error {
color: red;
}
Script.js

// Function to parse JSON and display as an object


function convertJsonToObject() {
const input = document.getElementById("jsonInput").value;
const output = document.getElementById("output");
try {
const jsonObject = JSON.parse(input);
output.textContent = JSON.stringify(jsonObject, null, 4);
} catch (error) {
output.textContent = "Invalid JSON format!";
}
}

// Function to convert JSON date to a readable format


function convertJsonDate() {
const input = document.getElementById("jsonInput").value;
const output = document.getElementById("output");
try {
const jsonObject = JSON.parse(input);
if (typeof jsonObject === "string" || jsonObject instanceof String) {
const date = new Date(jsonObject);
output.textContent = date.toString();
} else {
output.textContent = "Input is not a valid date string!";
}
} catch (error) {
output.textContent = "Invalid JSON format!";
}
}

// Function to convert JSON to CSV


function convertJsonToCsv() {
const input = document.getElementById("jsonInput").value;
const output = document.getElementById("output");
try {
const jsonArray = JSON.parse(input);
const keys = Object.keys(jsonArray[0]);
const csv = [
keys.join(","), // Header row
...jsonArray.map((row) => keys.map((key) => row[key]).join(","))
].join("\n");
output.textContent = csv;
} catch (error) {
output.textContent = "Invalid JSON array format!";
}
}

// Function to convert CSV to JSON


function convertCsvToJson() {
const input = document.getElementById("jsonInput").value;
const output = document.getElementById("output");
try {
const lines = input.split("\n");
const keys = lines[0].split(",");
const json = lines.slice(1).map((line) => {
const values = line.split(",");
return keys.reduce((obj, key, index) => {
obj[key] = values[index];
return obj;
}, {});
});
output.textContent = JSON.stringify(json, null, 4);
} catch (error) {
output.textContent = "Invalid CSV format!";
}
}

// Function to create a SHA-256 hash from a string


async function createHash() {
const input = document.getElementById("hashInput").value;
const output = document.getElementById("output");
const encoder = new TextEncoder();
const data = encoder.encode(input);
const hashBuffer = await crypto.subtle.digest("SHA-256", data);
const hashArray = Array.from(new Uint8Array(hashBuffer));
const hashHex = hashArray.map((byte) => byte.toString(16).padStart(2,
"0")).join("");
output.textContent = hashHex;
}

OUTPUT:
1. Convert JSON to Object

2. Convert JSON Date


3. Convert JSON to CSV

4. Convert CSV to JSON


5. Create Hash from String

PROGRAM09:
Html code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Append and Animate</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div class="container">
<p id="my-paragraph">This is a paragraph.</p>
<ul id="my-list">
<li>List item 1</li>
<li>List item 2</li>
</ul>
<textarea id="user-input" placeholder="Enter your content
here..."></textarea>
<br>
<button id="appendContent">Append Content</button>
<button id="animateDiv">Animate Div</button>
<div id="animated-div" class="animated-div"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Script.js: code

$(document).ready(function () {
// Append content to paragraph and list
$('#appendContent').click(function () {
// Get the content from the text area
var userContent = $('#user-input').val();

// Check if there's any content entered or only spaces


if (userContent.trim() !== "") {
// Append content to the paragraph
$('#my-paragraph').append(' ' + userContent);

// Append content to the list


$('#my-list').append('<li>' + userContent + '</li>');

// Clear the text area after appending


$('#user-input').val('');
} else {
alert('Please enter some content to append!');
}
});

// Animate the div and change its state using animate()


$('#animateDiv').click(function () {
// Apply animation on the div (move and change size)
$('#animated-div').animate({
width: '200px',
height: '200px',
opacity: 0.7
}, function () {
// This is a callback function, which runs after animation is complete
$(this).addClass('animate-state1'); // Change the background color
});
});
});

Style1.css: code

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4; /* Light background for better contrast */
color: #333; /* Darker text for readability */
margin: 0; /* Remove default margin */
padding: 20px; /* Add padding to the body */
}

.container {
max-width: 600px; /* Limit the width of the container */
margin: 20px auto; /* Center the container */
padding: 20px; /* Add padding inside the container */
background-color: #fff; /* White background for the container */
border-radius: 8px; /* Rounded corners */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

#my-paragraph {
margin-bottom: 10px;
font-size: 1.2em; /* Slightly larger font size */
}
#my-list {
margin-bottom: 10px;
padding-left: 20px; /* Indent list items */
}

textarea {
margin-top: 10px;
width: 95%; /* Full width for better usability */
height: 50px;
padding: 10px; /* Padding for better text input */
border: 1px solid #ccc; /* Light border */
border-radius: 5px; /* Rounded corners */
resize: none; /* Disable resizing */
}

button {
margin-right: 10px;
padding: 10px 15px; /* Increased padding for better click area */
background-color: #007BFF; /* Primary button color */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease; /* Smooth transition for hover effect
*/
}

button:hover {
background-color: #0056b3; /* Darker shade on hover */
}

.animated-div {
width: 100%; /* Full width for better visibility */
height: 100px;
background-color: #4CAF50; /* Initial color */
margin-top: 20px;
transition: background-color 0.5s ease; /* Smooth transition for color change
*/
border-radius: 5px; /* Rounded corners */
}

.animate-state1 {
background-color: #FF5733; /* Change color after animation */
}
.animate-state2 {
background-color: #6dff33; /* Another state */
}

OUTPUT
PROGRAM10: CODE
Index.html:

<!DOCTYPE html>

<head>
<title>AJAX Examples | vtucode</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
h1 {
text-align: center;
color: #333;
padding: 20px 0;
}

#content {
flex-direction: column;
display: flex;
max-width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
display: inline-block;
padding: 10px 15px;
margin: 12px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: box-shadow 0.3s;
}

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;
}

#output {
display: none;
margin-top: 20px;
padding: 10px;
border-radius: 5px;
white-space: pre-wrap;
max-height: 300px;
overflow-y: auto;
}

#output.plain-ajax {
background-color: #f0f8ff;
border: 1px solid #b0c4de;
}

#output.jquery-ajax {
background-color: #f5fffa;
border: 1px solid #98fb98;
}

#output.jquery-json {
background-color: #fffaf0;
border: 1px solid #ffd700;
}

#output.parse-json {
background-color: #fff0f5;
border: 1px solid #ff69b4;
}
</style>
</head>

<body>
<h1>AJAX Examples</h1>
<div id="content">
<button id="plain-ajax-btn">Load Text (Plain AJAX)</button>
<button id="jquery-ajax-btn">Load Text (jQuery AJAX)</button>
<button id="jquery-json-btn">Load JSON (jQuery getJSON)</button>
<button id="parse-json-btn">Load and Parse JSON (jQuery get)</button>
<div id="output"></div>
</div>

<script>

function showOutput(className) {
const output = document.getElementById('output');
output.className = className;
output.style.display = 'block';
}
document.getElementById('plain-ajax-btn').addEventListener('click',
function () {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'textfile.txt', true);
xhr.onload = function () {
if (xhr.status === 200) {
document.getElementById('output').innerText =
xhr.responseText;
} else {
document.getElementById('output').innerText = 'Error loading
file.';
}
showOutput('plain-ajax');
};
xhr.send();
});

$('#jquery-ajax-btn').on('click', function () {
$.ajax({
url: 'textfile.txt',
method: 'GET',
success: function (data) {
$('#output').text(data);
},
error: function () {
$('#output').text('Error loading file.');
}
}).always(function () {
showOutput('jquery-ajax');
});
});

$('#jquery-json-btn').on('click', function () {
$.getJSON('data.json')
.done(function (data) {
$('#output').text(JSON.stringify(data, null, 2));
})
.fail(function () {
$('#output').text('Error loading JSON file.');
})
.always(function () {
showOutput('jquery-json');
});
});

$('#parse-json-btn').on('click', function () {
$.get('data.json')
.done(function (data) {
try {
let jsonData;

if (typeof data === 'string') {


jsonData = JSON.parse(data);
} else {
jsonData = data;
}
$('#output').text(JSON.stringify(jsonData, null, 2));
} catch (e) {
$('#output').text('Error parsing JSON: ' + e.message);
}
})
.fail(function () {
$('#output').text('Error loading JSON file.');
})
.always(function () {
showOutput('parse-json');
});
});
</script>
</body>

</html>

Data.json:

{
"name": "John Doe",
"age": 30,
"city": "New York"
}

TEXTFILE.TXT:

hi this is example text...


OUTPUT:

You might also like