Scribd
Upload
69 views50 pages

Web Development Experiments Overview

Uploaded by

Rupesh Prajapati
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
69 views50 pages

Web Development Experiments Overview

Uploaded by

Rupesh Prajapati
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

INDEX

S NAME OF EXPERIMENT DATE OF CHECKED SIGNATURE/


NO. EXPERIMENT DATE REMARKS

1) CREATE A WEB PAGE THAT COVERS YOUR


CV USING VARIOUS HTML
TAGS(UL,OL,TABLE etc.)

2) CREATE A WEB PAGE THAT DISPLAYS BRIEF


DETAILS OF VARIOUS PROGRAMMING
LANGUAGES USING VARIOUS TYPES OF CSS.

3) CREATE A WEBPAGE USING JAVASRIPT AND


HTML TO DEMONSTRATE SIMPLE
CALCULATOR APPLICATION.

4) CREATE A WEB PAGE COVERING THE BASIC


CRUD OPERATIONS(CREATE,
READ,UPDATE,DELETE) THAT IMPLEMENTS
TO-DO/ GROCERY LISTS USING JAVA SCRIPT
AND HTML.

5) CREATE A JAVA SCRIPT APPLICATIONS


BASED ON VARIOUS DATA TYPES,
STATEMENTS, KEYWORDS AND OPERATORS.

6) CREATE A JAVA SCRIPT APPLICATIONS WITH


WINDOWS OBJECTS AND DOCUMENT
OBJECT.

7) CREATE A JAVA SCRIPT APPLICATIONS WITH


OBJECTS CREATION AND BY ADDING
METHODS OF OBJECTS.

8) CREATE A JAVA SCRIPT APPLICATION WITH


LOOPS TO INCORPORATE THE CONCEPT OF
ITERATION.

9) CREATE A JAVA SCRIPT APPLICATION FOR


RANDOM NUMBER GENERATION.

10) BUILD A UNIT CONVERTOR


APPLICATIONUSING HTML AND JAVA
SCRIPT.
EXPERIMENT-1

AIM- CREATE A WEB PAGE THAT COVERS YOUR CV USING VARIOUS HTML TAGS(UL,OL,TABLE etc.)
CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pallavi Verma - CV</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #d2b48c;
color: #3e2723;
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: auto;
padding: 20px;
background-color: #f5f5f5;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h1 {
font-family: "Bernard MT Condensed", sans-serif;
color: #3e2723;
text-align: center;
font-size: 2em;
margin: 0;
}
h2 {
color: #5d4037;
font-family: "Book Antiqua", serif;
font-size: 1.2em;
margin-bottom: 5px;
}
ul, ol {
margin: 10px 0;
padding-left: 20px;
}
.section-title {
color: #5d4037;
border-bottom: 2px solid #8d6e63;
padding-bottom: 5px;
margin-bottom: 10px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="container">
<h1>Pallavi Verma</h1>
<p style="text-align:center; font-family: 'Lucida Console', monospace; color:#795548;">
B.Tech Student in AI & DS<br>
Email: <a href="mailto:pallaviverma13@gmail.com">pallaviverma13@gmail.com</a>
</p>
<h2 class="section-title">Education</h2>
<ul>
<li>College: DR. Akhilesh Das Institute of Professional Studies</li>
<li>Schooling: Somerville School, Vasundhara Enclave</li>
</ul>
<h2 class="section-title">Skills</h2>
<ol>
<li>Programming Languages: Python, C++, Java</li>
<li>Web Development: HTML, CSS, JavaScript</li>
<li>Data Science: Machine Learning, Data Analysis, Data Visualization</li>
</ol>
<h2 class="section-title">Experience</h2>
<table>
<tr>
<th>Position</th>
<th>Company</th>
<th>Duration</th>
</tr>
<tr>
<td>Intern</td>
<td>ABC Technologies</td>
<td>June 2023 - Aug 2023</td>
</tr>
<tr>
<td>Research Assistant</td>
<td>XYZ Labs</td>
<td>Jan 2023 - May 2023</td>
</tr>
</table>
<h2 class="section-title">Projects</h2>
<ul>
<li><strong>Smart Attendance System</strong> - Built a facial recognition-based attendance system using
OpenCV.</li>
<li><strong>Data Analysis of E-Commerce</strong> - Analyzed customer behavior using Python and visualization
libraries.</li>
<li><strong>Personal Portfolio Website</strong> - Created a responsive website to showcase projects.</li>
</ul>
<h2 class="section-title">Achievements</h2>
<ul>
<li>Top 10% in National Coding Competition 2023</li>
<li>Published research paper on AI in Healthcare</li>
</ul>
</div>
</body>
</html>
OUTPUT-
EXPERIMENT- 2
AIM- CREATE A WEB PAGE THAT DISPLAYS BRIEF DETAILS OF VARIOUS PROGRAMMING LANGUAGES USING
VARIOUS TYPES OF CSS.

CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Programming Languages Overview</title>
<style>
body {
background-color: #e0f7fa;
font-family: Arial, sans-serif;
color: #2e2e2e;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.container {
width: 90%;
max-width: 800px;
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
text-align: center;
}
.card {
padding: 10px;
border-radius: 8px;
background-color: #f1f8e9;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.card img {
width: 80px;
height: 80px;
object-fit: contain;
margin: 10px auto;
display: block;
}
h2 {
font-size: 1.2em;
color: #00796b;
}
p{
font-size: 0.9em;
color: #424242;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h2>Python</h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg" alt="Python Logo">
<p>Python is a high-level, versatile language used in web development, data science, and AI. It features simple
syntax, making it beginner-friendly. Basic Syntax: <code>print("Hello, World!")</code>.</p>
</div>
<div class="card">
<h2>JavaScript</h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" alt="JavaScript Logo">
<p>JavaScript is a powerful language for web development, enabling dynamic, interactive web pages. Popular
for front-end and back-end with Node.js. Basic Syntax: <code>console.log("Hello, World!")</code>.</p>
</div>
<div class="card">
<h2>C++</h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/1/18/ISO_C%2B%2B_Logo.svg" alt="C++ Logo">
<p>C++ is a compiled, high-performance language used in system programming, game development, and
embedded systems. Basic Syntax: <code>std::cout << "Hello, World!";</code>.</p>
</div>
</div>
</body>
</html>
OUTPUT-
EXPERIMENT-3
AIM- CREATE A WEBPAGE USING JAVASRIPT AND HTML TO DEMONSTRATE SIMPLE CALCULATOR APPLICATION.

CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<style>
/* General page styling */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
/* Calculator container styling */
.calculator {
background-color: #333;
border-radius: 10px;
padding: 20px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
}
/* Display styling */
#display {
background-color: #222;
color: white;
font-size: 2em;
border: none;
padding: 10px;
text-align: right;
margin-bottom: 20px;
width: 100%;
border-radius: 5px;
}
/* Button grid styling */
.button-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
/* Button styling */
.button {
background-color: #444;
color: white;
font-size: 1.5em;
padding: 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
/* Specific button colors */
.button.blue {
background-color: #007bff;
}
.button.blue:hover {
background-color: #0056b3;
}
.button.grey {
background-color: #555;
}
.button.grey:hover {
background-color: #777;
}
.button.black {
background-color: #000;
}
.button.black:hover {
background-color: #333;
}
/* Equal button style */
.button.equal {
grid-column: span 2;
}
</style>
</head>
<body>
<!-- Calculator structure -->
<div class="calculator">
<!-- Display area -->
<input type="text" id="display" disabled>
<!-- Buttons area -->
<div class="button-grid">
<button class="button grey" onclick="clearDisplay()">C</button>
<button class="button grey" onclick="deleteDigit()">←</button>
<button class="button grey" onclick="appendOperator('/')">÷</button>
<button class="button grey" onclick="appendOperator('*')">×</button>

<button class="button" onclick="appendNumber(7)">7</button>


<button class="button" onclick="appendNumber(8)">8</button>
<button class="button" onclick="appendNumber(9)">9</button>
<button class="button grey" onclick="appendOperator('-')">-</button>

<button class="button" onclick="appendNumber(4)">4</button>


<button class="button" onclick="appendNumber(5)">5</button>
<button class="button" onclick="appendNumber(6)">6</button>
<button class="button grey" onclick="appendOperator('+')">+</button>

<button class="button" onclick="appendNumber(1)">1</button>


<button class="button" onclick="appendNumber(2)">2</button>
<button class="button" onclick="appendNumber(3)">3</button>
<button class="button black equal" onclick="calculate()">=</button>

<button class="button" onclick="appendNumber(0)">0</button>


<button class="button blue equal" onclick="appendOperator('.')">.</button>
</div>
</div>
<script>
// Function to append numbers to the display
function appendNumber(number) {
let display = document.getElementById('display');
display.value += number;
}
// Function to append operators to the display
function appendOperator(operator) {
let display = document.getElementById('display');
display.value += operator;
}
// Function to clear the display
function clearDisplay() {
document.getElementById('display').value = '';
}
// Function to delete the last digit or operator
function deleteDigit() {
let display = document.getElementById('display');
display.value = display.value.slice(0, -1);
}
// Function to calculate the expression in the display
function calculate() {
let display = document.getElementById('display');
try {
display.value = eval(display.value); // Evaluate the expression
} catch (error) {
display.value = 'Error'; // Display error if invalid expression
}
}
</script>
</body>
</html>
OUTPUT-
EXPERIMENT-4
AIM-CREATE A WEB PAGE COVERING THE BASIC CRUD OPERATIONS(CREATE, READ,UPDATE,DELETE) THAT
IMPLEMENTS TO-DO/ GROCERY LISTS USING JAVA SCRIPT AND HTML.

CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do/Grocery List</title>
<style>
body {
background-color: #1a1a1a;
color: #f5f5f5;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #333;
padding: 20px;
border-radius: 10px;
width: 90%;
max-width: 500px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5);
}
h1 {
text-align: center;
color: #ffcc00;
font-weight: bold;
margin-bottom: 20px;
}
input, button {
padding: 10px;
margin: 5px 0;
border: none;
border-radius: 5px;
}
input[type="text"] {
width: calc(100% - 22px);
}
button {
cursor: pointer;
color: #333;
background-color: #ffcc00;
}
ul {
list-style: none;
padding: 0;
}
li {
background-color: #444;
padding: 10px;
margin: 5px 0;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.actions button {
background-color: #ff5722;
color: white;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>To-Do / Grocery List</h1>
<input type="text" id="itemInput" placeholder="Add new item...">
<button onclick="addItem()">Add Item</button>
<ul id="itemList"></ul>
</div>

<script>
let items = [];

function displayItems() {
const list = document.getElementById('itemList');
list.innerHTML = '';
items.forEach((item, index) => {
list.innerHTML += `
<li>
<span>${item}</span>
<div class="actions">
<button onclick="editItem(${index})">Edit</button>
<button onclick="deleteItem(${index})">Delete</button>
</div>
</li>`;
});
}

function addItem() {
const input = document.getElementById('itemInput');
if (input.value.trim()) {
items.push(input.value.trim());
input.value = '';
displayItems();
}
}

function editItem(index) {
const newItem = prompt("Update item:", items[index]);
if (newItem) {
items[index] = newItem.trim();
displayItems();
}
}

function deleteItem(index) {
items.splice(index, 1);
displayItems();
}

displayItems();
</script>

</body>
</html>
OUTPUT-

INTIAL LIST- AFTER DELETION-

AFTER UPDATION-
EXPERIMENT-5
AIM-CREATE A JAVA SCRIPT APPLICATIONS BASED ON VARIOUS DATA TYPES, STATEMENTS, KEYWORDS AND
OPERATORS.

CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Data Types and Operators Demo</title>
<style>
/* General body styling */
body {
font-family: 'Arial', sans-serif;
background-color: #e6f7ff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

/* Container styling */
.container {
background-color: #d9f0ff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 70%;
font-size: 1.1em;
}

/* Heading styling */
h1 {
font-family: 'Georgia', serif;
font-size: 2em;
color: #004080;
font-weight: bold;
text-align: center;
}

/* Box for displaying the JavaScript output */


pre {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
white-space: pre-wrap;
word-wrap: break-word;
}

/* Result message styling */


.result {
background-color: #b3e6ff;
padding: 10px;
border-radius: 8px;
margin-top: 20px;
font-family: monospace;
}

</style>
</head>
<body>

<!-- Container to hold the script and results -->


<div class="container">
<!-- Heading of the page -->
<h1>JavaScript Data Types, Keywords, and Operators</h1>

<!-- Box where JavaScript examples are displayed -->


<pre id="scriptOutput"></pre>
<!-- Display result section -->
<div class="result" id="resultOutput"></div>
</div>

<script>
// JavaScript code showcasing data types, operators, and keywords

let output = '';

// DATA TYPES
let stringExample = "Hello, World!"; // String
let numberExample = 42; // Number
let booleanExample = true; // Boolean
let arrayExample = [1, 2, 3, 4, 5]; // Array
let objectExample = {name: "John", age: 30}; // Object
let undefinedExample; // Undefined

// Adding Data types examples to the output


output += "Data Types Examples:\n";
output += "String: " + stringExample + "\n";
output += "Number: " + numberExample + "\n";
output += "Boolean: " + booleanExample + "\n";
output += "Array: " + arrayExample + "\n";
output += "Object: { name: " + objectExample.name + ", age: " + objectExample.age + " }\n";
output += "Undefined: " + undefinedExample + "\n\n";

// OPERATORS
let addition = 10 + 5;
let subtraction = 10 - 5;
let multiplication = 10 * 5;
let division = 10 / 5;
let modulus = 10 % 3;
let increment = ++numberExample;
let decrement = --numberExample;
// Adding Operators examples to the output
output += "Operators Examples:\n";
output += "Addition (10 + 5): " + addition + "\n";
output += "Subtraction (10 - 5): " + subtraction + "\n";
output += "Multiplication (10 * 5): " + multiplication + "\n";
output += "Division (10 / 5): " + division + "\n";
output += "Modulus (10 % 3): " + modulus + "\n";
output += "Increment (++number): " + increment + "\n";
output += "Decrement (--number): " + decrement + "\n\n";

// STATEMENTS
let x = 10;
if (x > 5) {
output += "Statement Example:\n";
output += "If x is greater than 5: x = " + x + "\n";
}

// KEYWORDS
let constExample = "This is constant";
var varExample = "This is var";
let letExample = "This is let";

output += "\nKeyword Examples:\n";


output += "const keyword: " + constExample + "\n";
output += "var keyword: " + varExample + "\n";
output += "let keyword: " + letExample + "\n";

// Displaying the output in the HTML page


document.getElementById('scriptOutput').textContent = output;
document.getElementById('resultOutput').textContent = "JavaScript example has been executed successfully!";
</script>

</body>
</html>
OUTPUT-
EXPERIMENT-6
AIM-CREATE A JAVA SCRIPT APPLICATIONS WITH WINDOWS OBJECTS AND DOCUMENT OBJECT.
CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Window and Document Object Demo</title>
<style>
/* General styling for body */
body {
font-family: 'Arial', sans-serif;
background-color: #f0ebe1;
margin: 0;
padding: 20px;
}

/* Container styling */
.container {
background-color: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: 70%;
margin: 20px auto;
}

/* Heading styling */
h1 {
font-family: 'Georgia', serif;
color: #333;
font-size: 2.5em;
font-weight: bold;
text-align: center;
}

/* Italic and bold text */


.bold {
font-weight: bold;
color: #2c3e50;
}

.italic {
font-style: italic;
color: #2980b9;
}

/* Button styling */
.button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
margin: 10px 0;
font-size: 1.1em;
}

.button:hover {
background-color: #2980b9;
}

/* Output section styling */


.output {
margin-top: 20px;
font-size: 1.2em;
background-color: #eaf2f8;
padding: 15px;
border-radius: 8px;
}
</style>
</head>
<body>

<div class="container">
<h1>Window and Document Object Demo</h1>

<!-- JavaScript Window object methods -->


<p><span class="bold">Window Object:</span> This demo uses the <span class="italic">alert()</span>, <span
class="italic">confirm()</span>, and <span class="italic">prompt()</span> methods of the <span
class="bold">Window</span> object.</p>
<button class="button" onclick="showAlert()">Show Alert</button>
<button class="button" onclick="showPrompt()">Show Prompt</button>
<button class="button" onclick="showConfirm()">Show Confirm</button>

<!-- JavaScript Document object methods -->


<p><span class="bold">Document Object:</span> Using the <span class="italic">getElementById()</span> and
<span class="italic">write()</span> methods of the <span class="bold">Document</span> object.</p>
<button class="button" onclick="changeContent()">Change Document Content</button>

<!-- Output display -->


<div id="output" class="output"></div>
</div>

<script>
// Function to show an alert using window.alert()
function showAlert() {
window.alert("This is an alert from the Window object!");
}

// Function to show a prompt using window.prompt()


function showPrompt() {
let name = window.prompt("Please enter your name:");
if (name) {
document.getElementById("output").textContent = "Hello, " + name + "! Welcome to the demo.";
} else {
document.getElementById("output").textContent = "You didn't enter a name.";
}
}

// Function to show a confirmation dialog using window.confirm()


function showConfirm() {
let result = window.confirm("Do you like this demo?");
if (result) {
document.getElementById("output").textContent = "Thank you for liking the demo!";
} else {
document.getElementById("output").textContent = "We appreciate your feedback!";
}
}

// Function to change the content using document.write() and document.getElementById()


function changeContent() {
document.getElementById("output").textContent = "Content has been changed using the Document Object!";
}
</script>

</body>
</html>
OUTPUT-
EXPERIMENT-7
AIM-CREATE A JAVA SCRIPT APPLICATIONS WITH OBJECTS CREATION AND BY ADDING METHODS OF OBJECTS.
CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Objects and Methods</title>
<style>
/* General body styling */
body {
font-family: 'Verdana', sans-serif;
background-color: #e0f7df;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

/* Container styling */
.container {
background-color: #ffffff;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 70%;
}

/* Heading styling */
h1 {
font-family: 'Georgia', serif;
color: #2e7d32;
font-size: 2.5em;
text-align: center;
font-weight: bold;
}

/* Object description box */


.object-description {
font-size: 1.2em;
margin: 20px 0;
background-color: #f1f8e9;
padding: 20px;
border-radius: 8px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}

/* Button styling */
.button {
background-color: #66bb6a;
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
font-size: 1.1em;
}

.button:hover {
background-color: #388e3c;
}

/* Output box styling */


.output {
margin-top: 20px;
font-size: 1.3em;
background-color: #e8f5e9;
padding: 20px;
border-radius: 8px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}
</style>
</head>
<body>

<!-- Container to hold the content -->


<div class="container">
<!-- Heading for the application -->
<h1>JavaScript Objects and Methods</h1>

<!-- Section describing the object creation -->


<div class="object-description">
<p><b>Person Object:</b> This JavaScript object defines a person with properties like <i>name</i>,
<i>age</i>, and <i>city</i>. It also has a method <i>greet</i> to display a greeting message.</p>
<button class="button" onclick="displayGreeting()">Show Greeting</button>
</div>

<!-- Output section where the object method result will be displayed -->
<div class="output" id="outputBox"></div>
</div>

<script>
// Creating a 'Person' object with properties and methods
const person = {
name: "Alice",
age: 25,
city: "New York",
greet: function() {
return `Hello, my name is ${this.name}, I am ${this.age} years old, and I live in ${this.city}.`;
}
};

// Function to display the greeting using the object's method


function displayGreeting() {
const message = person.greet(); // Calling the greet method of the 'person' object
document.getElementById('outputBox').textContent = message; // Displaying the message in the output box
}
</script>

</body>
</html>
OUTPUT-
EXPERIMENT-8
AIM-CREATE A JAVA SCRIPT APPLICATION WITH LOOPS TO INCORPORATE THE CONCEPT OF ITERATION.
CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Loops and Iteration</title>
<style>
/* Styling for the body */
body {
font-family: 'Arial', sans-serif;
background-color: #e0e0e0;
margin: 0;
padding: 20px;
}

/* Styling for the container */


.container {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: 60%;
margin: 30px auto;
}

/* Heading styling */
h1 {
font-family: 'Georgia', serif;
font-size: 2.5em;
font-weight: bold;
text-align: center;
color: #333;
}

/* Text styling */
p{
font-size: 1.2em;
color: #444;
}

/* Button styling */
.button {
background-color: #3498db;
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
cursor: pointer;
font-size: 1.1em;
margin-top: 10px;
}

.button:hover {
background-color: #2980b9;
}

/* Output box styling */


.output {
margin-top: 20px;
background-color: #f5f5f5;
padding: 15px;
border-radius: 8px;
font-size: 1.2em;
color: #2c3e50;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}
</style>
</head>
<body>

<div class="container">
<!-- Heading for the application -->
<h1>JavaScript Iteration and Loops</h1>

<!-- Paragraph explaining the example -->


<p>This application demonstrates the concept of iteration using <b>for</b>, <b>while</b>, and <b>do-
while</b> loops. Click the button to see the loops in action.</p>

<!-- Button to trigger the loop demo -->


<button class="button" onclick="showLoops()">Run Loops</button>

<!-- Output section for displaying loop results -->


<div id="output" class="output"></div>
</div>

<script>
// Function to demonstrate loops
function showLoops() {
let output = '';

// For loop example


output += 'For Loop (1 to 5): ';
for (let i = 1; i <= 5; i++) {
output += i + ' ';
}
output += '<br>';

// While loop example


output += 'While Loop (1 to 5): ';
let j = 1;
while (j <= 5) {
output += j + ' ';
j++;
}
output += '<br>';

// Do-while loop example


output += 'Do-While Loop (1 to 5): ';
let k = 1;
do {
output += k + ' ';
k++;
} while (k <= 5);

// Displaying the output in the designated div


document.getElementById('output').innerHTML = output;
}
</script>

</body>
</html>
OUTPUT-
EXPERIMENT-9
AIM-CREATE A JAVA SCRIPT APPLICATION FOR RANDOM NUMBER GENERATION.
CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Number Generator</title>
<style>
/* Styling for the body */
body {
font-family: 'Arial', sans-serif;
background-color: #ffe6e6; /* Light red background */
margin: 0;
padding: 20px;
}

/* Container styling */
.container {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
width: 50%;
margin: 50px auto;
text-align: center;
}

/* Heading styling */
h1 {
font-family: 'Georgia', serif;
font-size: 2.5em;
font-style: italic;
color: #c70039; /* Darker red */
margin-bottom: 20px;
}

/* Button styling */
.button {
background-color: #ff4d4d; /* Red */
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
cursor: pointer;
font-size: 1.1em;
transition: background-color 0.3s;
}

.button:hover {
background-color: #c70039; /* Darker red on hover */
}

/* Output box styling */


.output {
margin-top: 20px;
background-color: #fff5f5; /* Very light red */
padding: 15px;
border-radius: 8px;
font-size: 1.5em;
color: #2c3e50; /* Darker text */
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>

<div class="container">
<h1>Random Number Generator</h1>
<button class="button" onclick="generateRandomNumber()">Generate Random Number</button>
<div id="output" class="output">Your random number will appear here!</div>
</div>

<script>
// Function to generate a random number between 1 and 100
function generateRandomNumber() {
const randomNumber = Math.floor(Math.random() * 100) + 1; // Generates a number from 1 to 100
document.getElementById('output').textContent = `Random Number: ${randomNumber}`;
}
</script>

</body>
</html>
OUTPUT-
EXPERIMENT-10
AIM- BUILD A UNIT CONVERTOR APPLICATIONUSING HTML AND JAVA SCRIPT.
CODE-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unit Converter</title>
<style>
/* Styling for the body */
body {
font-family: 'Arial', sans-serif;
background-color: #e6e6fa; /* Light purple background */
margin: 0;
padding: 20px;
}

/* Container styling */
.container {
background-color: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
width: 50%;
margin: 50px auto;
text-align: center;
}

/* Heading styling */
h1 {
font-family: 'Georgia', serif;
font-size: 2.5em;
font-style: italic;
color: #6a5acd; /* Slate blue */
margin-bottom: 20px;
}

/* Label and input styling */


label {
font-size: 1.2em;
margin-right: 10px;
}

/* Button styling */
.button {
background-color: #6a5acd; /* Slate blue */
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
cursor: pointer;
font-size: 1.1em;
transition: background-color 0.3s;
margin-top: 10px;
}

.button:hover {
background-color: #483d8b; /* Dark slate blue on hover */
}

/* Output box styling */


.output {
margin-top: 20px;
background-color: #f5f5f5; /* Light grey */
padding: 15px;
border-radius: 8px;
font-size: 1.5em;
color: #2c3e50; /* Darker text */
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Select box styling */
select, input {
padding: 10px;
margin: 10px 0;
font-size: 1em;
border-radius: 5px;
border: 1px solid #ccc;
width: 100%;
}
</style>
</head>
<body>

<div class="container">
<h1>Unit Converter</h1>

<!-- Length Conversion -->


<h2>Length Conversion</h2>
<label for="length">Meters:</label>
<input type="number" id="length" placeholder="Enter length in meters">
<button class="button" onclick="convertLength()">Convert to Feet</button>
<div id="lengthOutput" class="output"></div>

<!-- Temperature Conversion -->


<h2>Temperature Conversion</h2>
<label for="temperature">Celsius:</label>
<input type="number" id="temperature" placeholder="Enter temperature in Celsius">
<button class="button" onclick="convertTemperature()">Convert to Fahrenheit</button>
<div id="tempOutput" class="output"></div>
</div>

<script>
// Function to convert length from meters to feet
function convertLength() {
const meters = parseFloat(document.getElementById('length').value);
const feet = meters * 3.28084; // Conversion factor
document.getElementById('lengthOutput').textContent = `${meters} meters = ${feet.toFixed(2)} feet`;
}

// Function to convert temperature from Celsius to Fahrenheit


function convertTemperature() {
const celsius = parseFloat(document.getElementById('temperature').value);
const fahrenheit = (celsius * 9/5) + 32; // Conversion formula
document.getElementById('tempOutput').textContent = `${celsius} °C = ${fahrenheit.toFixed(2)} °F`;
}
</script>

</body>
</html>
OUTPUT-

You might also like