Scribd
Upload
6 views8 pages

cs241121 Assignment07

The document contains two HTML code examples for web applications. The first example is a Square and Cube Calculator that computes the square and cube of a user-input number. The second example allows users to change the background color of a paragraph by clicking different buttons.

Uploaded by

umersaudf20
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
6 views8 pages

cs241121 Assignment07

The document contains two HTML code examples for web applications. The first example is a Square and Cube Calculator that computes the square and cube of a user-input number. The second example allows users to change the background color of a paragraph by clicking different buttons.

Uploaded by

umersaudf20
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/ 8

Nabeel Waqas Section 1-A cs241121

AICT LAB
ASSIGNMENT 07
QUESTION 1:-
CODE:-
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Square and Cube Calculator</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

input[type="number"] {

padding: 10px;

width: 200px;

margin-right: 10px;

button {

padding: 10px 15px;

margin-right: 10px;

cursor: pointer;

#result {

margin-top: 20px;

font-size: 20px;
Nabeel Waqas Section 1-A cs241121

font-weight: bold;

</style>

</head>

<body>

<h1>Square and Cube Calculator</h1>

<form id="calculatorForm">

<input type="number" id="numberInput" placeholder="Enter a number" required>

<button type="button" id="squareButton">Square</button>

<button type="button" id="cubeButton">Cube</button>

</form>

<div id="result"></div>

<script>

document.getElementById('squareButton').addEventListener('click', function() {

const number = parseFloat(document.getElementById('numberInput').value);

if (!isNaN(number)) {

const square = number * number;

document.getElementById('result').innerText = `Square: ${square}`;

} else {

document.getElementById('result').innerText = 'Please enter a valid number.';

});

document.getElementById('cubeButton').addEventListener('click', function() {

const number = parseFloat(document.getElementById('numberInput').value);

if (!isNaN(number)) {

const cube = number * number * number;

document.getElementById('result').innerText = `Cube: ${cube}`;


Nabeel Waqas Section 1-A cs241121

} else {

document.getElementById('result').innerText = 'Please enter a valid number.';

});

</script>

</body>

</html>

OUTPUT:-
Nabeel Waqas Section 1-A cs241121

QUESTION 2:-
CODE:-
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Color Change Paragraph</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

#colorParagraph {
Nabeel Waqas Section 1-A cs241121

padding: 20px;

border: 1px solid #ccc;

margin-bottom: 20px;

button {

padding: 10px 15px;

margin-right: 10px;

cursor: pointer;

</style>

</head>

<body>

<h1>Change Paragraph Background Color</h1>

<p id="colorParagraph">This is a sample paragraph. Click a button below to change my background color!</p>

<button id="salmonButton">Salmon</button>

<button id="springgreenButton">Springgreen</button>

<button id="rosybrownButton">Rosybrown</button>

<button id="tealButton">Teal</button>

<script>

document.getElementById('salmonButton').addEventListener('click', function() {

document.getElementById('colorParagraph').style.backgroundColor = 'salmon';

});

document.getElementById('springgreenButton').addEventListener('click', function() {

document.getElementById('colorParagraph').style.backgroundColor = 'springgreen';

});

document.getElementById('rosybrownButton').addEventListener('click', function() {
Nabeel Waqas Section 1-A cs241121

document.getElementById('colorParagraph').style.backgroundColor = 'rosybrown';

});

document.getElementById('tealButton').addEventListener('click', function() {

document.getElementById('colorParagraph').style.backgroundColor = 'teal';

});

</script>

</body>

</html>

OUTPUT:-
Nabeel Waqas Section 1-A cs241121
Nabeel Waqas Section 1-A cs241121

You might also like