Scribd
Upload
22 views13 pages

Smy Ite Ex8

Uploaded by

crazyedits249
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
22 views13 pages

Smy Ite Ex8

Uploaded by

crazyedits249
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/ 13

EXP NO : 7.

1 Develop a Client-Side Scripts for Validating Web Form


DATE : Random Number Generator
AIM :
A Javascript program that generates a random number between 1 and 100. Get input values from
HTML form.
CODE:
HTML:
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Random Number Generator</h2>
<form action="">
<div class="input-holder">
<div class="input1-holder">
<label for="input1">Enter Number 1 : </label>
<input type="text" id="input1" required>
</div>
<div class="input2-holder">
<label for="input2">Enter Number 2 : </label>
<input type="text" id="input2" required>
</div>
<div class="btn-holder">
<button type="button" onclick="myFunction()">Generate</button>
</div>
</div>
</form>
<h2 id="result"></h2>
<script>
function myFunction()

REG NO : 2127230801106 PG NO :
{
const input1 = document.getElementById("input1").value;
const input2 = document.getElementById("input2").value;
const result = document.getElementById("result");
var res = Math.floor(Math.random() * (Number(input2) - Number(input1))) + Number(input1);
result.textContent = res;
}
</script>
</body>
</html>

CSS:
*{
margin: 0;
padding: 0;
}
body{
padding: 75px;
height: 100vh;
}
body h2{
text-align: center;
padding-bottom: 20px;
}
.input-holder{
display: flex;
justify-content: center;
align-items: center;
width: max-content;
margin: auto;
flex-direction: column;
}
.input1-holder{
padding-bottom: 20px;
}
.btn-holder{

REG NO : 2127230801106 PG NO :
padding-top: 20px;
width: 100%;
}
.btn-holder button{
width: 100%;
font-size: 15px;
background-color: indianred;
color: white;
border: none;
border-radius: 10px;
padding: 5px;
}

OUTPUT:

RESULT :
Thus, a Javascript program that generates a random number between 1 and 100. Get input values
from HTML form have been executed successfully.

REG NO : 2127230801106 PG NO :
EXP NO : 7.2 Develop a Client-Side Scripts for Validating Web Form
DATE : Simple Calculator
AIM :
To implement a simple calculator that performs basic arithmetic operations (addition, subtraction,
multiplication, division).
ALGORITHM :
Step 1 : Display Title: "CALC"
Step 2: Create input fields for A and B
Step 3: Create buttons for Add (+), Subtract (-), Multiply (*), and Divide (/)
Step 4: Create a result display area
Step 5: When user clicks "Add":
a. Get value from input A and input B
b. Convert values to numbers
c. Perform A + B
d. Display result
e. Change background color of Add button to red
Step 6: When user clicks "Subtract":
a. Get value from input A and input B
b. Convert values to numbers
c. Perform A - B
d. Display result
e. Change background color of Subtract button to green
Step 7: When user clicks "Multiply":
a. Get value from input A and input B
b. Convert values to numbers
c. Perform A * B
d. Display result
e. Change background color of Multiply button to blue
Step 8: When user clicks "Divide":
a. Get value from input A and input B
b. Convert values to numbers
c. Perform A / B
d. Display result
e. Change background color of Divide button to orange
Step 9: Ensure buttons have hover effect (opacity changes).

REG NO : 2127230801106 PG NO :
CODE:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title">CALC</h1>
<div class="calc-holder">
<div class="input-holder">
<div class="num-holder">
<label for="a">A</label>
<input type="text" name="a" id="a" value="" />
</div>
<div class="num-holder">
<label for="b">B</label>
<input type="text" name="b" id="b" value="" />
</div>
</div>
<div class="btn-holder">
<button type="" id="add" onclick="addition()">+</button>
<button type="" id="sub" onclick="subtraction()">-</button>
<button type="" id="mul" onclick="multiply()">*</button>
<button type="" id="divi" onclick="division()">/</button>
</div> <p id="result"></p></div>
<script src="script.js"></script>
</body>
</html>

CSS :
body{
padding: 25px;
}
.title {
color: #5C6AC4;
text-align: center;
}
.btn-holder{
display: flex;
justify-content: center;
align-items:center;
gap: 10px;
}
label{
font-size: 30px;
}
.btn-holder button{
font-size: 20px;
border-radius: 50px;
padding: 20px;
background-color: yellow;
}

REG NO : 2127230801106 PG NO :
#a{
width: 50px;
}
#b{
width: 50px;

}
.calc-holder{
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: max-content;
padding: 20px;
border-radius: 30px;
background-color: grey;
margin: auto;
}
.input-holder{
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.num-holder{
padding: 10px;
}
input{
height: 30px;
}
p{
background-color: white;
font-size: 25px;
}
.btn-holder button:hover{
opacity : 0.5;
}

Javascript:
function showTime() {
document.getElementById('currentTime').innerHTML = new Date().toUTCString();
}
function addition()
{
const a = document.getElementById("a").value;
const b = document.getElementById("b").value;
const add = document.getElementById("add");
const result = document.getElementById("result");
add.style.backgroundColor = "red";
result.textContent = Number(a) + Number(b);
}
function subtraction()
{
const a = document.getElementById("a").value;

REG NO : 2127230801106 PG NO :
const b = document.getElementById("b").value;
const result = document.getElementById("result");
sub.style.backgroundColor = "green";
result.textContent = Number(a) - Number(b);
}
function multiply()
{
const a = document.getElementById("a").value;
const b = document.getElementById("b").value;
const result = document.getElementById("result");
mul.style.backgroundColor = "blue";
result.textContent = Number(a) * Number(b);
}
function division()
{
const a = document.getElementById("a").value;
const b = document.getElementById("b").value;
const result = document.getElementById("result");
divi.style.backgroundColor = "orange";
result.textContent = Number(a) / Number(b);
}

OUTPUT:

RESULT :
Thus, implementation of a simple calculator that performs basic arithmetic operations (addition,
subtraction, multiplication, division) have been executed successfully.

REG NO : 2127230801106 PG NO :
EXP NO : 7.4 Develop a Client-Side Scripts for Validating Web Form
DATE : ON MOUSE OVER EVENT
AIM :
A JavaScript program to change the colour and font size of the text and image source when you
mouse over the cursor on text.
ALGORITHM :
Step 1: HTML Setup:
a. Set the page title as "ON MOUSE OVER EVENT".
b. Display an image (`id="img1"`) with a cat picture.
c. Display a heading (`h1`) that says "Keep the cursor" with `id="cursor"`.
d. Link to an external CSS file for styling.
e. Link to an external JavaScript file for functionality.
Step 2: CSS Styling:
a. Set `body` padding to 25px.
b. Set the `.title` color to #5C6AC4.
c. Set image `#img1` dimensions (height = 200px, width = 300px).
Step 3: JavaScript Functionality:
a. Define function `myFunction()`:
- When mouse is over the `#cursor` element:
i. Increase the image height to 250px.
ii. Change the font size of `#cursor` to 15px.
Step 4: Event Handling:
- On mouse over the `h1` element (`#cursor`), trigger `myFunction()`.
- Modify the styles of the image and the text dynamically.
Step 5. End
CODE:
Html:
<!DOCTYPE html>
<html>
<head>
<title>ON MOUSE OVER EVENT</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title"></h1>
<img src="https://gratisography.com/wp-content/uploads/2024/10/gratisography-cool-cat-800x525.jpg"
id="img1" alt="" />
<h1 onmouseover="myFunction()" id="cursor">Keep the cursor</h1>

REG NO : 2127230801106 PG NO :
<script src="script.js"></script>
</body>
</html>

CSS:
body{
padding: 25px;
}
.title {
color: #5C6AC4;
}
#img1{
height: 200px;
width: 300px;
}

Javascript:
function showTime() {
document.getElementById('currentTime').innerHTML = new Date().toUTCString();
}
function myFunction()
{
const img = document.getElementById("img1");
const cursor = document.getElementById("cursor");
img.style.height = "250px"
cursor.style.fontSize = "15px";
}

REG NO : 2127230801106 PG NO :
OUTPUT:
IMAGE BEFORE MOUSE OVER :

IMAGE AFTER MOUSE OVER :

RESULT :
Thus, JavaScript program to change the colour and font size of the text and image source when you
mouse over the cursor on text.

REG NO : 2127230801106 PG NO :
EXP NO : 7.3 Develop a Client-Side Scripts for Validating Web Form
DATE : Classes and Object
AIM:
To create a JavaScript class representing a car with properties like make, model, and year.
Implement methods to start, stop, and accelerate the car.
ALGORITHM:
Step 1: HTML Setup:
-Set up basic HTML structure with `<h1>`, `<h3>`, and buttons.
- Link the CSS and JavaScript files.
Step 2: CSS Styling:
- Set background image and styles for body.
- Style the buttons (padding, font size, background color, etc.).
Step 3: JavaScript Setup:
- Create a `car` class with properties `make`, `model`, and `year`.
- Create an instance of the `car` class with specific values.
- Display car details in the `<h3>` element with `id="result"`.
Step 4: Functions for Button Clicks:
- `start()`: Display an alert that the car has started.
- `stop()`: Display an alert that the car has stopped.
- `accelerate()`: Display an alert that the car has accelerated.
Step 5: Execution Flow:
- On page load, display the car details.
- On button click, trigger the respective functions (`start()`, `stop()`, `accelerate()`).
Step 6: End Program by closing all tags.
CODE:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Car</title>
<link rel="stylesheet" href="car.css">
</head>

REG NO : 2127230801106 PG NO :
<body>
<h1>Car</h1>
<h3 id="result"></h3>
<button type="button" onclick="start()">Start</button>
<button type="button" onclick="stop()">Stop</button>
<button type="button" onclick="accelerate()">Accelerate</button>
<script>
class car {
constructor(make,model,year) {
this.make = make;
this.model = model;
this.year = year;
}
}
const obj1 = new car("McLaren","650S",2014);
const result = document.getElementById("result");
result.textContent = "Car Make : "+obj1.make+", Car Model : "+obj1.model+", Year : "+obj1.year;
function start(){
alert(obj1.make+" Started!! 🏁");
}
function stop()
{
alert(obj1.make+" Stopped!! 🛑");
}
function accelerate()
{
alert(obj1.make+" Accelerated!! 💨");
}
</script>
</body>
</html>
CSS :
body{
background: url("Car.jpg");
background-repeat: no-repeat;

REG NO : 2127230801106 PG NO :
background-size: cover;
}
button{
padding: 5px;
font-size: 15px;
background-color: tomato;
border: none;
border-radius: 5px;
cursor: pointer;
}
OUTPUT:

RESULT :
Thus, creation of JavaScript class representing a car with properties like make, model, and year.
Implement methods to start, stop, and accelerate the car.

REG NO : 2127230801106 PG NO :

You might also like