Scribd
Upload
2 views55 pages

Maths Internet Lab

The document outlines various examples of HTML web pages, each with specific aims such as text formatting, navigation, style sheets, image maps, semantics, and tables. Each example includes an algorithm for creating the web page, the corresponding HTML code, and a confirmation of successful execution. The document serves as a guide for designing web pages using different HTML elements and structures.

Uploaded by

Jeyanthi Vel
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
2 views55 pages

Maths Internet Lab

The document outlines various examples of HTML web pages, each with specific aims such as text formatting, navigation, style sheets, image maps, semantics, and tables. Each example includes an algorithm for creating the web page, the corresponding HTML code, and a confirmation of successful execution. The document serves as a guide for designing web pages using different HTML elements and structures.

Uploaded by

Jeyanthi Vel
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/ 55

Ex :No: 1

Date : TEXT FORMATTING TAG

AIM :

To design a web page using different text formatting tags.

ALGORITHM :

Step 1: Start with the basic HTML structure.

Step 2: Define the document type <!DOCTYPE html>.

Step 3: Open the <html> tag with the appropriate language attribute (lang="en").

Step 4: Inside the <head> section, set the character set and viewport.

Step 5: Title the document (<title>)

Step 6: Start the <body> section

Step 7: Use various text formatting tags within the body to demonstrate their effects.

Step 8: Close all opened tags properly.

Step 9: Save the file with a .html extension.

Step 10: Open the file in a web browser to see the formatted text.

Step 11: End the program.


PROGRAM :

<!DOCTYPE htm >

<htm| lang="en" >

<head >

<title> formating text in HTML </title>

</head>

<body>

<p>This is <b>bold text</b>.</P>

<p >this is <strong>strongly important txt </strong>.</p>

<p> This is <i> italic text </i>.</p>

<p>This is <em>emphasized text </em>.</p>

<p>This is <mark> highlighted text </mark>.</p>

<p>This is <sub> subscript </sub>and <sup> superscript </sup> text .</p>

<p>this is <del>deleted text</del>.</p>

<p> This is <ins>inserted text </ins>.</p>

<p> This is <b> bold text </b>.</p>

<p>Visit our <a href="https://example.com" style="color: #3c3fe7”;


target="_blank">website</a> For more information.</p>

</body>

</htm>
OUTPUT :

RESULT :

Thus the html program was executed successfully and the result is verified.
Ex :No: 2

Date : NAVIGATION BETWEEN WEB PAGES

Aim :

To design a web page with links to different pages and allows navigation between
web pages.

ALGORITHM :

Step 1: Start with the basic HTML structure.

Step 2: Create a home page and write content .

Step 3: Create content for each page and link the each page used href attribute used
<a> tag .

Step 4: Close all opened tags properly.

Step 5: Save the file with a .html extension.

Step 6 Open the file in a web browser to see the navigation between the web pages.

Step 7: End the program.


PROGRAM :

Navigation.html

<!DOCTYPE html>

<html lang="en">

<head>

<title>Navigation </title>

</head>

<body>

<h1>Welcome to My Website!</h1>

<nav>

<ul>

<li><a href="kerala.html">Kerala</a></li>

<li><a href="delhi.html">Delhi</a></li>

<li><a href="tamilnadu.html">Tamilnadu</a></li>

</ul>

</nav>

<p>Welcome to the home page!.</p>

</body>

</html>

Kelala.html

<!DOCTYPE html>

<html lang="en">

<head>
<title>kerala</title>

</head>

<body>

<h1>Welcome to kerala!</h1>

<p>Kerala called Keralam in Malayalam , is a state on the Malabar Coast of


India.</p>

<img src="kerala.jpeg"width="600">

<br>

<a href="navigation.html">Home</a>

<br>

<a href="delhi.html">Next</a>

</nav>

</body>

</html>

Delhi.html

<!DOCTYPE html>

<html lang="en">

<head>

<title>Delhi</title>

</head>

<body>

<h1>Welcome to Delhi</h1>

<nav>
<p> Delhi is a city and a union territory of India containing New Delhi, the capital
of India.</p>

<img src="delhi.jpg"width="600">

<br>

<a href="navigation.html">Home</a>

<br>

<a href="tamilnadu.html">Next</a>

</nav>

</body>

</html>

Tamilnadu.html

<!DOCTYPE html>

<html lang="en">

<head>

<title>Tamilnadu</title>

</head>

<body>

<h1>Welcome to Tamilnadu!</h1>

<nav>

<p>Tamil Nadu is the southernmost state of India.The capital and largest city is
Chennai.</p>

<img src="tamilnadu.jpeg"width="600">

<br>
<a href="navigation.html">Home</a>

<br>

<a href="navigation.html">Exit</a>

</nav>

</body>

</html>

OUTPUT :

Navigation.html
RESULT :

Thus the html program was executed successfully and the result is verified.
Ex :No: 3

Date : STYLE SHEET TYPES

AIM :
To design a web page demonstrating all style sheet types .

ALGORITHM :
Step 1: Start with the basic HTML structure .

Step 2: Inline Style: Applied directly to an HTML element using the style attribute.

Step 3: Internal Style: Defined within the <style> element in the HTML <head> .

Step 4: External Style: Linked to an external CSS file using the <link> element in the
HTML <head>.

Step 5: Close all opened tags properly.

Step 6: Save the file with a .html extension.

Step 7: Open the file in a web browser to see the formatted text.

Step 8: End the program.


PROGRAM :

Style sheet.html

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="external.css">

</head>

<body>

<h2> Learning HTML with internal css </h2>

<p class="blue">This is a blue color paragraph </p>

<p class="red">This is a red color paragraph </p>

<p class="yellow">This is a green color paragraph </p>

</body>

</html>

External.css

.external-style

/*internal css using element name */

body

background-color:rgb(235, 196, 243);

text-align: center;

h2

{
font-style: bold italic;

font-size:60px;

color:rgb(152, 238, 40);

/*internal css using class name */

.blue {color:rgb(0, 110, 255);font-size: 50px;}

.red {color:red;font-size: 40px;}

.yellow {color:yellow;font-size: 30;}

OUTPUT :

RESULT :

Thus the html program was executed successfully and the result is verified.
Ex :No: 4

Date : IMAGE MAPS

AIM :
To design a web page with image maps.

ALGORITHM :
Step 1: Start with the basic HTML structure.

Step 2:Use the <map> tag to define the clickable area on the image.

Step 3:Each area will be define by the <area> tag .

Step 4:With in each <area> tag specify the href attribute to link the area to another

web page or resource.

Step 5: Use the <map> tag to insert the image into your html document.

Step 6: Close all opened tags properly.

Step 7: Save the file with a .html extension.

Step 8: Open the file in a web browser to see the image maps.

Step 9: End the program.


PROGRAM :

<!DOCTYPE html>

<html lang="en">

<head>

<title>Image Map </title>

</head>

<body>

<h1>Image Map</h1>

<img src="facebook.jpg" alt="Example Image" width=500 height=332


usemap="#examplemap">

<map name="examplemap">

<area href="https://www.facebook.com/" target="_blank" shape=poly


coords="30,100, 140,50, 290,220, 180,280">

<area href="https://en.wikipedia.org/wiki/Social_media" target="_blank"


alt="Wikipedia Social Media Article" shape=poly coords="190,75, 200,60,
495,60, 495,165, 275,165">

</map>

</body>

</html>
OUTPUT :

RESULT :

Thus the html program was executed successfully and the result is verified.
Ex :No: 5

Date : SEMANTICS

AIM :
To design a web page demonstrating different semantics.

ALGORITHM :
Step 1: Start with the basic HTML structure.

Step 2:Open the <body> tag to start the body section of the html document .

Step 3: Use the <header> tag to define the header section of the web page, including

<h1> tag .

Step 4: Create a navigation bar using the <nav> tag.

Step 5: Include various semantic elements , like <section>, <article>,<aside>

represent different part of content .

Step 6:Use the <footer> tag to define the footer section of the web page.

Step 7: Close all opened tags properly.

Step 6: Save the file with a .html extension.

Step 7: Open the file in a web browser to see the different semantics.

Step 8: End the program.


PROGRAM :

<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic HTML Example</title>
<style>
body
{
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, nav, section, article, aside, footer {
padding: 20px;
margin-bottom: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<header>
<h1>This is a Header</h1>
<p>Some introductory text goes here.</p>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<h2>This is a Section</h2>
<article>
<h3>Article 1</h3>
<p>This is the content of article 1.</p>
</article>
<article>
<h3>Article 2</h3>
<p>This is the content of article 2.</p>
</article>
</section>
<aside>
<h2>This is an Aside</h2>
<p>Some additional information goes here.</p>
</aside>
<footer>
<p>&copy; 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>
OUTPUT :

RESULT :

Thus the html program was executed successfully and the result is verified.
Ex :No: 6

Date : TABLES

AIM :
To design a web page with different tables.

ALGORITHM :
Step 1: Start with the basic HTML structure.

Step 2:Open the <body> tag to start the body section of the html document .

Step 3: Use the <header> tag to define the header section of the web page, including

<h1> tag .

Step 4: Create a table using the <table> tag.

Step 5: Include various table elements , like <tr >, <th >,<td> represent different part

of content .

Step 6:Use the <colspan> ,<rowspan>tag to define the combined cells of the table .

Step 7: Close all opened tags properly.

Step 6: Save the file with a .html extension.

Step 7: Open the file in a web browser to see the time table.

Step 8: End the program.


PROGRAM :

<!DOCTYPE html>

<html>

<body>

<h1> TIME TABLE </h1>

<table border ="8" cellspacing ="3"align="center">

<tr>

<td align ="center"height="50" width="100"><br><b>Day|period</b></td>

<td align ="center"height="50"width="100"><b>I<br>9:45-10:35</b></td>

<td align ="center"height="50"width="100"><b>II<br>10:35-11:25</b></td>

<td align ="center"height="50"width="100"><b>III<br>11:35-12:25</b></td>

<td align ="center"height="50"width="100"><b>IV<br>12:25-1:15</b></td>

<td align ="center"height="50"width="100"><b><br>1:15-1:55</b></td>

<td align ="center"height="50"width="100"><b>V<br>1:55-2:45</b></td>

<td align ="center"height="50"width="100"><b>VI<br>2:45-3:35</b></td>

</tr>

<tr>

<td align="center"height="50"><b>monday</b></td>

<td align="center"height="50">ss</td>

<td align="center"height="50">eng</td>

<td align="center"height="50">web</td>

<td align="center"height="50">la</td>
<td rowspan="8"align="center" height="50">
<h3>L<br>U<br>N<br>C<br>H<br><br>B<br>R<br>E<br>A<br>K<br></h
3></td>

<td align="center"height="50">tam</td>

<td align="center"height="50">tt</td>

</tr>

<tr>

<td align="center"height="50"><b>tuesday</b></td>

<td align="center"height="50">la</td>

<td align="center"height="50">web</td>

<td align="center"height="50">eng</td>

<td align="center"height="50">tt</td>

<td align="center"height="50">ss</td>

<td align="center"height="50">tam</td>

</tr>

<tr>

<td align="center"height="50"><b>wednesday</b></td>

<td align="center"height="50">ss</td>

<td align="center"height="50">la</td>

<td align="center"height="50">tam</td>

<td align="center"height="50">web</td>

<td align="center"height="50">eng</td>

<td align="center"height="50">nme</td>

</tr>
<tr>

<td align="center"height="50"><b>thursday</b></td>

<td align="center"height="50">la</td>

<td align="center"height="50">ss</td>

<td align="center"height="50">tt</td>

<td align="center"height="50">web</td>

<td align="center"height="50">eng</td>

<td align="center"height="50">la</td>

</tr>

<tr>

<td align="center"height="50"><b>friday</b></td>

<td align="center"height="50">ss</td>

<td colspan="2" align="center"height="50">lab</td>

<td align="center"height="50">tt</td>

<td align="center"height="50">eng</td>

<td align="center"height="50">tam</td>

</tr>

<tr>

<td align="center"height="50"><b>saturday</b></td>

<td align="center"height="50">tt</td>

<td align="center"height="50">eng</td>

<td align="center"height="50">tam</td>

<td align="center"height="50">web</td>

<td align="center"height="50">la</td>
<td align="center"height="50">ss</td>

</tr>

</table>

</body>

</html>

OUTPUT :

RESULT :

Thus the html program was executed successfully and the result is verified.
Ex :No: 7

Date : INPUT CONTROLS

AIM :
To design a web page with a form that uses all types of input controls.

ALGORITHM :
Step 1: Start with the basic HTML structure.

Step 2:Open the <body> tag to start the body section of the html document .

Step 3: Use the <header> tag to define the header section of the web page, including

<h2> tag .

Step 4: Create a form using the <form> tag.

Step 5: Include various input control elements , <select >, <label >,<input types>

represent different part of input values.

Step 6:Use the checkbox and radio buttons to the selection purpose of the form .

Step 7: Close all opened tags properly.

Step 6: Save the file with a .html extension.

Step 7: Open the file in a web browser to see the input control form.

Step 8: End the program.


PROGRAM :

<!DOCTYPE html>

<html lang="en">

<head>

<title>Form with input contorls</title>

</head>

<body>

<h2>STUDENT DATA</h2>

<form action="#" method="post">

<label for="text_input"> Student Name:</label>

<input type="text"id="text_input"name="text_input"><br><br>

<label for="text_input"> Father Name :</label>

<input type="text"id="text_input"name="text_input"><br><br>

<label for="radio_input">Gender :</label>

<input type="radio" id="Female" name="Gender" value="Female">

<label for="Female">Female</label>

<input type="radio" id="Male" name="Gender" value="Male">

<label for="Male">Male</label><br><br>

<label for="date_input">Date Of Birth :</label>

<input type="date"id="date_input"name="date_input"><br><br>

<label for="select_input">Select Degree:</label>

<select id="'select_input"name="select_input">

<option value="select">select</option>

<option value="option 1">UG</option>


<option value="option 2">PG</option>

</select><br><br>

<label for="checkbox_input"><b>Courses</b> </label><br>

<input type="checkbox"id="checkbox_input"value="checkbox_value">B.Sc
(Maths)<br>

<input type="checkbox"id="checkbox_input"value="checkbox_value">
B.Sc(CS)<br>

<input type="checkbox"id="checkbox_input"value="checkbox_value">BCA
<br>

<input type="checkbox"id="checkbox_input"value="checkbox_value">B.Sc
(chemistry)<br>

<input type="checkbox"id="checkbox_input"value="checkbox_value">
B.Com <br><br>
<label for="number_input">Mobile Number:</label>

<input type="number"id="number_input"name="number_input"><br><br>

<label for="email_input">Email Id :</label>

<input type="email"id="email_input"name="email_input"><br> <br>

<label for="file_input">Upload Photo :</label>

<input type="file"id="file_input"name="file_input"><br> <br>

<label for="text_input">Staff Name :</label>

<input type="text"id="text_input"name="text_input"><br> <br>

<label for="password_input">Password :</label>

<input type="password"id="password_input"name="password_input"><br> <br>

<label for="text_input">Remarks :</label>

<textarea id="textarea_input"name="textarea_input"rows="2"cols="50"> </textarea>


<br> <br><br>
<input type="submit" value="SUBMIT"> </form>

</body>

</html>

OUTPUT :

RESULT :

Thus the html program was executed successfully and the result is verified.
Ex :No: 8

Date : MULDI MEDIA

AIM :
To design a web page embedding with multimedia features.

ALGORITHM :
Step 1: Start with the basic HTML structure ..

Step 2: Open the <body> tag to start the body section of the html document .

Step 3: Use the <header> tag to define the header section of the web page, including

<h1> tag .

Step 4: The image source using the <src >attribute.

Step 5: Use the <video> and <audio> elements to embed video and audio on your

pages.

Step 6: Close all opened tags properly.

Step 7: Save the file with a .html extension.

Step 8: Open the file in a web browser to see the image maps.

Step 9: End the program.


PROGRAM :

<!DOCTYPE html>

<html lang="en">

<head>

<title>Embedding Multimedia in HTML</title>

</head>

<body>

<h1>Multimedia Web Page</h1>

<h1>Embedding image</h1>

<img src="computer.jpg"alt="image"width="300"height="300">

<br>

<br>

<h1>Embedding video </h1>

<video width="500px" height="300px" controls>

<source src="media.mp4" type="video/mp4"width="100">

Your browser does not support the video tag.

</video>

<br>

<br>

<h1>Embedding Audio</h1>

<audio controls>

<source src="audio.mp3" type="audio/mp3">

Your browser does not support the audio tag.

</audio>
</body>

</html>

OUTPUT :

RESULT :

Thus the html program was executed successfully and the result is verified.
Ex :No: 9

Date : FACTORIAL VALUE

AIM :
To write a JavaScript program to find the factorial value.

ALGORITHM :
Step 1: Start with the basic HTML structure .

Step 2: Open the <body> tag to start the body section of the html document .

Step 3: The button triggers the factorial() function when clicked.

Step 4: The factorial() function is defined within a <script> tag.

Step 5: The variable fact is initialized to 1.

Step 6: The loop iterates from 1 to the entered number (i=1; i<=a; i++).

Step 7: Close all opened tags properly.

Step 8: Save the file with a .html extension.

Step 9: Open the file in a web browser to see the image maps.

Step 10: End the program.


PROGRAM :

<!DOCTYPE html>

<html>

<body>

<script>

function factorial()

var fact=1,i;

var a=prompt("Enter a number :");

for (i=1;i<=a;i++)

fact=fact*i;

document.write("Factorial of number" +a+ "is : ",fact);

</script>

<form>

<input type="button" value="factorial" onclick="factorial();">

</form>

</body>

</html>
OUTPUT :

RESULT :

Thus the java script program was executed successfully and the result is verified.
Ex :No: 10

Date : FIBONACCI SERIES

AIM :
To write a JavaScript program to print the Fibonacci series.

ALGORITHM :
Step 1: Start with the basic HTML structure .

Step 2: The button has an onclick attribute that triggers the fibonacci() function when

clicked.

Step 3: The fibonacci() function is defined within a <script> tag..

Step 4: The function initializes variables a, b, and fib to 0, 1, and 0 respectively.

Step 5: it calculates the next Fibonacci number (fib) by adding the previous two

numbers (a and b).

Step 6: It uses a while loop to generate the Fibonacci series up to the specified length.

Step 7: Close all opened tags properly.

Step 8: Save the file with a .html extension.

Step 9: Open the file in a web browser to see the image maps.

Step 10: End the program.


PROGRAM :

<!DOCTYPE html>

<html>

<h1> fibonacci </h1>

<body>

<script>

function fibonacci ()

var a=0,b=1,fib=0,n,i;

var n=prompt ("Enter the length of series:");

document.write (a+"<br>"+b+"<br>");

i=2;

while (i<n)

fib=a+b;

document.write (fib+"<br>");

a=b;

b=fib;

i++;

</script>

<form>
<input type ="button" value="fibonacci" title="fibonacci series"
onclick="fibonacci()";>

</form>

</body>

</html>

OUTPUT :

RESULT :

Thus the java script program was executed successfully and the result is verified.
Ex :No: 11

Date : VALIDATE THE CONTROLS

AIM :
To design a form and validate all the controls placed on the form using Java Script.

ALGORITHM :
Step 1: Start with the basic HTML structure .

Step 2: An input field with the id attribute set to “name” ,”email”,”password” .

Step 3: The name attribute set to “name” ,”email”,”password” .

Step 4: The validateForm() function is called when the form is submitted

(onsubmit="return validateForm()").

Step 5: If the name field is empty (x == ""), it displays an alert message: “Name must

be filled out”.

Step 6: Close all opened tags properly.

Step 7: Save the file with a .html extension.

Step 8: Open the file in a web browser to see the image maps.

Step 9: End the program.


PROGRAM :

<!DOCTYPE html>

<html lang="en">

<head>

<title>Form Validation</title>

</head>

<body>

<form name="myForm" onsubmit="return validateForm()" method="post">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<br>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<br>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>

<br>

<input type="submit" value="Submit">

</form>

</body>

</html>
OUTPUT :

RESULT :

Thus the java script program was executed successfully and the result is verified.
Ex :No: 12

Date : PRIME NUMBERS

AIM :
To write a JavaScript program to display all the prime numbers between 1 to 100.

ALGORITHM :
Step 1: Start with the basic HTML structure .

Step 2: Open the <body> tag to start the body section of the html document .

Step 3: Use the <header> tag to define the header section of the web page, including

<h1> tag .

Step 4: A <script> tag containing JavaScript code.

Step 5: The getPrimes(max) function calculates prime numbers up to the specified

maximum value (max).

Step 6: The PrimeNumbers array is populated with prime numbers up to 100 using the

getPrimes(100) function.

Step 7: Close all opened tags properly.

Step 8: Save the file with a .html extension.

Step 9: Open the file in a web browser to see the image maps.

Step 10: End the program.


PROGRAM :
</html>
<body>
<h1>Prime Numbers </h1>
<p id="piyu"></p>
<p id="prime-list"></p>

<script>

for (let i = 1; i <= 100; i++) {


let isPrime = true;
for (let j = 2; j < i; j++) {
if (i % j === 0) {
isPrime = false;
break;
}
}
if (isPrime && i > 1) {
const li = document.createElement("li");
li.textContent = i;
document.getElementById("prime-list").appendChild(li);
}
}
</script>
</body>
</html>
OUTPUT :

RESULT :

Thus the java script program was executed successfully and the result is verified.
Ex :No: 13

Date : SUM OF DIGITS

AIM :
To write a JavaScript program to accept a number from the user and display the
sum of digits.

ALGORITHM :
Step 1: Start with the basic HTML structure .

Step 2: Open the <body> tag to start the body section of the html document .

Step 3: A button labeled “Calculate Sum” that triggers the calculateSum() function

when clicked.

Step 4: A <script> tag containing JavaScript code.

Step 5: The getSum(number) function calculates the sum of digits for the given

number.

Step 6: It initializes a variable sum to 0.Using a while loop.

Step 7: Close all opened tags properly.

Step 8: Save the file with a .html extension.

Step 9: Open the file in a web browser to see the image maps.

Step 10: End the program.


PROGRAM :

<!DOCTYPE html>

<html>

<head>

<title>Sum of Digits</title>

</head>

<body>

<p>Enter a number: <input type="number" id="userNumber"></p>

<button onclick="calculateSum()">Calculate Sum</button>

<p id="result"></p>

<script>

function calculateSum()

const userNumber = document.getElementById("userNumber").value;

const sum = getSum(userNumber);

document.getElementById("result").textContent = `Sum of the digits:


${sum}`;

function getSum(number)

sum = 0;

while (number !== 0)

sum += number % 10;


number = Math.floor(number / 10);

return sum;

</script>

</body>

</html>

OUTPUT :

RESULT :

Thus the java script program was executed successfully and the result is verified.
Ex :No: 14

Date : WORDS COUNT

AIM :
To write a program in JavaScript to accept a sentence from the user and display
the number of words in it.

ALGORITHM :
Step 1: Start with the basic HTML structure .

Step 2: Open the <body> tag to start the body section of the html document .

Step 3: A button labeled “Calculate Sum” that triggers the calculateSum() function

when clicked.

Step 4: A <script> tag containing JavaScript code.

Step 5: A button labeled “Count Words” that triggers the countWords() function when

clicked.

Step 6: The countWords() function is called when the user clicks the “Count Words”

button (onclick="countWords()").

Step 7: Close all opened tags properly.

Step 8: Save the file with a .html extension.

Step 9: Open the file in a web browser to see the image maps.

Step 10: End the program.


PROGRAM :
<!DOCTYPE html>
<html>
<head>
<title>Word Counter</title>
</head>
<body>
<textarea id="textInput"></textarea>
<br>
<button onclick="countWords()">Count Words</button>
<p id="wordCount">Words: 0</p>

<script>
function countWords() {
let text = document.getElementById("textInput").value;
let count = 0, inWord = false;

for (let char of text) {


if (char !== ' ' && char !== '\n' && char !== '\t') {
if (!inWord) {
count++;
inWord = true;
}
} else {
inWord = false;
}
}

document.getElementById("wordCount").textContent = "Words:
" + count;
}
</script>
</body>
</html>
OUTPUT :

RESULT :

Thus the java script program was executed successfully and the result is verified.
Ex :No: 15

Date : CALCULATOR

AIM :
To write a JavaScript program to design simple calculator.

ALGORITHM :
Step 1: Start with the basic HTML structure .

Step 2: Open the <body> tag to start the body section of the html document .

Step 3: A button labeled “Calculate Sum” that triggers the calculateSum() function

when clicked.

Step 4: A <script> tag containing JavaScript code.

Step 5: operator buttons (+, -, *, /), add the operator to the input value.

Step 6: The equals button (=), evaluate the expression using eval() and display the

result in the input field.

Step 7: Close all opened tags properly.

Step 8: Save the file with a .html extension.

Step 9: Open the file in a web browser to see the image maps.

Step 10: End the program.


PROGRAM :

<!DOCTYPE html>

<html lang="en">

<head>

<title>JavaScript Calculator</title>

<style>

h2 {

text-align: center;

padding: 23px;

background-color: rgb(39, 241, 241);

color: white;

#clear {

width: 270px;

border: 3px solid rgba(12, 1, 11, 0.74);

border-radius: 3px;

padding: 20px;

background-color: rgba(221, 20, 120, 0.589);

.formstyle {

width: 300px;

height: 600px;

margin: auto;

border: 3px solid rgba(3, 14, 15, 0.973);


border-radius: 5px;

padding: 20px;

input {

width: 20px;

background-color: rgba(102, 227, 236, 0.404);

color: rgba(7, 1, 26, 0.979);

border: 3px solid rgba(58, 6, 6, 0.76);

border-radius: 5px;

padding: 26px;

margin: 5px;

font-size: 15px;

#calc {

width: 250px;

border: 5px solid rgba(0, 0, 0, 0.336);

border-radius: 3px;

padding: 20px;

margin: auto;

</style>

</head>

<body>

<h2>Calculator Program in JavaScript</h2>


<div class="formstyle">

<form name="form1">

<input id="calc" type="text" name="answer">

<br><br>

<input type="button" value="1" onclick="form1.answer.value += '1'">

<input type="button" value="2" onclick="form1.answer.value += '2'">

<input type="button" value="3" onclick="form1.answer.value += '3'">

<input type="button" value="+" onclick="form1.answer.value += '+'">

<br><br>

<input type="button" value="4" onclick="form1.answer.value += '4'">

<input type="button" value="5" onclick="form1.answer.value += '5'">

<input type="button" value="6" onclick="form1.answer.value += '6'">

<input type="button" value="-" onclick="form1.answer.value += '-'">

<br><br>

<input type="button" value="7" onclick="form1.answer.value += '7'">

<input type="button" value="8" onclick="form1.answer.value += '8'">

<input type="button" value="9" onclick="form1.answer.value += '9'">

<input type="button" value="*" onclick="form1.answer.value += '*'">

<br><br>

<input type="button" value="/" onclick="form1.answer.value += '/'">

<input type="button" value="0" onclick="form1.answer.value += '0'">

<input type="button" value="." onclick="form1.answer.value += '.'">

<input type="button" value="=" onclick="form1.answer.value =


eval(form1.answer.value)">
<br><br>

<input type="button" value="Clear All" onclick="form1.answer.value = '' "


id="clear" >

<br>

</form>

</div>

</body>

</html>
OUTPUT :

RESULT :

Thus the java script program was executed successfully and the result is verified.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy