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="[Link] 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 :
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Navigation </title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<nav>
<ul>
<li><a href="[Link]">Kerala</a></li>
<li><a href="[Link]">Delhi</a></li>
<li><a href="[Link]">Tamilnadu</a></li>
</ul>
</nav>
<p>Welcome to the home page!.</p>
</body>
</html>
[Link]
<!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="[Link]"width="600">
<br>
<a href="[Link]">Home</a>
<br>
<a href="[Link]">Next</a>
</nav>
</body>
</html>
[Link]
<!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="[Link]"width="600">
<br>
<a href="[Link]">Home</a>
<br>
<a href="[Link]">Next</a>
</nav>
</body>
</html>
[Link]
<!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 [Link] capital and largest city is
Chennai.</p>
<img src="[Link]"width="600">
<br>
<a href="[Link]">Home</a>
<br>
<a href="[Link]">Exit</a>
</nav>
</body>
</html>
OUTPUT :
[Link]
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 [Link]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</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>
[Link]
.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="[Link]" alt="Example Image" width=500 height=332
usemap="#examplemap">
<map name="examplemap">
<area href="[Link] target="_blank" shape=poly
coords="30,100, 140,50, 290,220, 180,280">
<area href="[Link] 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>© 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">[Link]
(Maths)<br>
<input type="checkbox"id="checkbox_input"value="checkbox_value">
[Link](CS)<br>
<input type="checkbox"id="checkbox_input"value="checkbox_value">BCA
<br>
<input type="checkbox"id="checkbox_input"value="checkbox_value">[Link]
(chemistry)<br>
<input type="checkbox"id="checkbox_input"value="checkbox_value">
[Link] <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="[Link]"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;
[Link]("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:");
[Link] (a+"<br>"+b+"<br>");
i=2;
while (i<n)
fib=a+b;
[Link] (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 = [Link]("li");
[Link] = i;
[Link]("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 [Link] 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 = [Link]("userNumber").value;
const sum = getSum(userNumber);
[Link]("result").textContent = `Sum of the digits:
${sum}`;
function getSum(number)
sum = 0;
while (number !== 0)
sum += number % 10;
number = [Link](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 = [Link]("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;
}
}
[Link]("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="[Link] += '1'">
<input type="button" value="2" onclick="[Link] += '2'">
<input type="button" value="3" onclick="[Link] += '3'">
<input type="button" value="+" onclick="[Link] += '+'">
<br><br>
<input type="button" value="4" onclick="[Link] += '4'">
<input type="button" value="5" onclick="[Link] += '5'">
<input type="button" value="6" onclick="[Link] += '6'">
<input type="button" value="-" onclick="[Link] += '-'">
<br><br>
<input type="button" value="7" onclick="[Link] += '7'">
<input type="button" value="8" onclick="[Link] += '8'">
<input type="button" value="9" onclick="[Link] += '9'">
<input type="button" value="*" onclick="[Link] += '*'">
<br><br>
<input type="button" value="/" onclick="[Link] += '/'">
<input type="button" value="0" onclick="[Link] += '0'">
<input type="button" value="." onclick="[Link] += '.'">
<input type="button" value="=" onclick="[Link] =
eval([Link])">
<br><br>
<input type="button" value="Clear All" onclick="[Link] = '' "
id="clear" >
<br>
</form>
</div>
</body>
</html>
OUTPUT :
RESULT :
Thus the java script program was executed successfully and the result is verified.