Scribd
Upload
7 views

Web-Tech Programs

Uploaded by

yuvarajacb11
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Web-Tech Programs

Uploaded by

yuvarajacb11
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

WEB TECHNOLOGY PRACTICAL PROGRAMS

1. Create a form having number of elements(Textboxes, Radio buttons, checkboxes)


write Javascript code to count the number of element in a form.
<html>
<head>
<title>Registration Form</title>
<script>
function display() {
alert(document.getElementById("form1").length);
}
</script>
<style>
body {
background-color: rgb(0, 225, 255);
}

form {
width: 50%;
position: relative;
margin: auto;
background-color: rgb(232, 232, 237);
line-height: 2rem;
}

legend {
text-align: center;
}
</style>
</head>

<body>
<form action="" id="form1">
<fieldset>
<legend>SIMPLE FORM(USING CHECKBOX, RADIO BUTTONS,
TEXT BOXES)</legend>
<div class="inputfield">
<label for="name">Name</label>
<input type="text" placeholder="firstname">
</div>

<div class="inputfield">
<label for="username">Choose Your Username</la-
bel>
<input type="text" placeholder="Username" />
</div>

<div class="inputfield">
<label for="gender">GENDER: </label>

<input type="radio" name="gender" id="gender">


<label for="male">MALE</label>

<input type="radio" name="gender" id="gender">


<label for="female">FEMALE</label>
</div>

<div class="inputfield">LANGUAGE KNOWN:


<input type="checkbox" name="C" id="">
<label for="C">C</label>

<input type="checkbox" name="C++" id="">


<label for="C++">C++</label>

<input type="checkbox" name="JAVA" id="">


<label for="C++">JAVA</label>
<input type="checkbox" name="JAVA" id="">
<label for="PYTHON">PYTHON</label>
</div>

<div class="inputfield">
<span style="display: flex; align-items: baseline;">
<label for="feedback">STUDENTS FEEDBACK</label>
<textarea name="feedback" id="feedback" placeholder="enter some
text">
</textarea>
</span>
</div>
<button type="submit" onclick="display()">COUNT ELEMENTS</but-
ton>
</fieldset>
</form>
</body>

</html>
OUTPUT:
2. Create a HTML document form that has number of textboxes. when if it is, display
popup alert indicating which textboxes has been left empty.

<html>
<head>
<title>Form Validation</title>
<style>
body{
background-color: beige;
}
form{
background-color: aqua;
width: 80%;
position: relative;
margin: auto;
line-height: 2rem;
}
</style>
<script>
function validateForm() {
// Get all textboxes in the form
var textboxes = document.querySelectorAll('in-
put[type="text"]');
// Loop through each textbox to check if it's filled
for (var i = 0; i < textboxes.length; i++)
{
if (textboxes[i].value.trim() === "")
{
alert("Textbox " + (i + 1) + " has been left
empty.");
return false;
}
}
return true;
}
</script>
</head>
<body>

<h2>Student Form</h2>
<form onsubmit="return validateForm()">
<fieldset><legend>STUDENT FROM</legend>

<div>
<label for="reg">REGISTER NO</label>
<input type="text" id="reg" name="reg">
</div>

<div>
<label for="name">STUDENT NAME:</label>
<input type="text" id="name" name="name">
</div>

<div>
<label for="dept">DEPARTMENT</label>
<input type="text" id="dept" name="dept">
</div>

<div>
<label for="year">GRADUATING YEAR:</label>
<input type="text" id="year" name="year">
</div>

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


</fieldset>
</form>

</body>
</html>

OUTPUT:
3. Develop a arithmetic calculator using HTML, JAVASCRIPT.

<html>
<head>
<title>HTML CALCULATOR</title>
<style>
body{
background-color: bisque;
}
form{
line-height: 2rem;
width: 80%;
position: relative;
margin: auto;
}
legend{
text-align: center;
}
</style>
<script>
function calculate()
{
const num1 = parseFloat(document.getEle-
mentById("num1").value);
const num2 = parseFloat(document.getEle-
mentById("num2").value);
const operator = document.getElementById("opera-
tor").value;
let result;

switch (operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;

case '*':
result = num1 * num2;
break;

case '/':
if (num2 === 0)
result = "Division by zero is not allowed";

else
{
result = num1 / num2;
break;
}

default:
result = "Invalid operator";
}

document.getElementById("result").textContent= result;
}
</script>
</head>
<body>
<h1>SIMPLE CALCULATOR USING HTML & JAVASCRIPT</h1>
<form action="">
<fieldset>
<legend>ARITHMETIC CALCULATOR</legend>

<!--getting num1-->
<label for="num1">Number 1: </label>
<input type="number" id="num1" placeholder="Enter any
number.." required>
<br>
<!--getting num2-->
<label for="num2">Number 2: </label>
<input type="number" id="num2" placeholder="Enter any
number.." required>
<br>
<!--choosing options-->

<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<button type="button" onclick="calculate()">Calcu-
late</button>

<p >The answer is:


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

</fieldset>
</form>
</body>
</html>
OUTPUT:
4. Basic Animations

<html>
<head>
<title>Basic Animations</title>
<style>
body{
background-color:lightblue;
font-size: 1.5rem;
}
div{
height: 100px;
width: 100px;
position: relative;
top: 0;
left: 0;
text-align: center;
display: block;
}
.box1{

background-color: aqua;
animation-name:rotate;
animation-duration: 2s;
animation-iteration-count: 5;
animation-timing-function: ease-in;
transition: 2s;
}
@keyframes rotate{
0%{
top:0;
left: 0;
}
25%{
top: 0;
left: 300px;
}
50%{
top: 150px;
left: 300px;
}
75%{
top:150px;
left:0;
}
100%{
top: 0;
left: 0;
}
}

/*color change animations*/


.box2{
background-color: rgb(26, 210, 32);
animation-name:color;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: 2s;
}

@keyframes color{
0%{
top:0;
left: 0;
}
25%{
top: 0;
left: 50vw;
background-color: blue;
}
50%{
border-radius: 30%;
left: 100vw;
}
75%{

background-color: rgb(185, 13, 91);


left: 50vw;
border-radius: 50%;
}
100%{
top: 0;
left: 0;
}
}
</style>
</head>
<body>
<p>The CSS animations are controlling the movement and ap-
peranceof elements on web pages.</p>
<p>All the Animation are done by @keyframes</p>
<ol>Animation properties
<li>Animation-name</li>
<li>Animation-delay</li>
<li>Animation-durations</li>
<li>Animation-timing-functions</li>
<li>Animation-iteration-count</li>
</ol>

<div>ROTATING ANIMATION
<div class="box1">
box1
</div>
</div>

<div>COLOR CHANGING BOX


<div class="box2">
box2
</div>
</div>

</body>
</html>
OUTPUT:
5. Write a Javascript code to find the sum of N natural numbers.

<html>
<head>
<title>JavaScript program to find the Sum of n natural num-
bers</title>
<style>
body{
background-color: cadetblue;
}
#cont{
border: 1px solid black;
width: max-content;
padding: 30px;
margin: auto;
text-align: center;
}
</style>
<script>
function sum()
{
var n,i, sum = 0;
n = parseInt(document.getElementById ("first").value);
for (i = 1; i <= n; i++)
{
sum = sum+i;
}
document.getElementById ("num").innerHTML="Sum of "+n+ "
natural numbers is :"+sum;
}
</script>
</head>
<body>
<div id="cont">
<label for="input">Enter a Number:</label>
<br>
<input type="text" id="first" placeholder="Enter a
number"/>
<button onclick="sum ()">Submit</button>

<div id="num"></div>
</div>
</body>

</html>
OUTPUT:
6. write a html javascript code block using arrays and grnerate the urrent date in
word, this should include the day,month, year.

<!DOCTYPE html>
<html>
<head>
<title>Current Date in Words</title>
</head>
<body>
<div id="currentDate"></div>
<script>
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday',
'Thursday', 'Friday', 'Saturday'];
const months = ['January', 'February', 'March', 'April',
'May', 'June', 'July', 'August', 'September', 'October', 'Novem-
ber', 'December'];

function getCurrentDateInWords() {
const date = new Date();
const dayOfWeek = days[date.getDay()];
const dayOfMonth = date.getDate();
const month = months[date.getMonth()];
const year = date.getFullYear();

const ordinalSuffix = getOrdinalSuffix(dayOfMonth);

const formattedDate = `${dayOfWeek}, ${dayOfMonth}${ordi-


nalSuffix} ${month} ${year}`;
document.getElementById('currentDate').textContent = for-
mattedDate;
}
function getOrdinalSuffix(day) {
if (day >= 11 && day <= 13) {
return 'th';
}
switch (day % 10) {
case 1:
return 'st';
case 2:
return 'nd';
case 3:
return 'rd';
default:

return 'th';
}
}

getCurrentDateInWords();
</script>
</body>
</html>

OUTPUT:
7. create a form for student information. write javascript code to find total, average, re-
sults and grade

<!DOCTYPE html>
<html>
<head>
<title>Student Information and Calculations</title>
<style>
body{
background: violet;
}
h1,form{
position: relative;
margin-left:40vw;
}
form{
border: 2px solid black;
width: fit-content;
padding: 30px;
background: rgb(223, 186, 223);
}
</style>
<script>
function calculate() {
// Get input values
const name = document.getElementById("name").value;
const subject1 = parseInt(document.getElementById("sub-
ject1").value);
const subject2 = parseInt(document.getElementById("sub-
ject2").value);
const subject3 = parseInt(document.getElementById("sub-
ject3").value);
const subject4 = parseInt(document.getElementById("sub-
ject4").value);
const subject5 = parseInt(document.getElementById("sub-
ject5").value);

// Calculate total, average, and result


const total = subject1 + subject2 + subject3;
const average = total / 3;
const result = average >= 50 ? "Pass" : "Fail";

// finding grade
let grade;
if (average >= 90) {
grade = "A+";
} else if (average >= 80) {
grade = "A";
} else if (average >= 70) {
grade = "B";
} else if (average >= 60) {
grade = "C";
} else
{
grade = "F";
}

// Display results
const resultsDiv = document.getElementById("results");
resultsDiv.innerHTML = `
<h2>Student Details</h2>
<p>Name: ${name}</p>
<p>Total Marks: ${total}</p>
<p>Average Marks: ${average}</p>
<p>Result: ${result}</p>
<p>Grade: ${grade}</p>
`;
}
</script>
</head>
<body>
<h1>Student Information</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>

<label for="subject1">Subject 1:</label>


<input type="number" id="subject1" name="sub-
ject1"><br><br>

<label for="subject2">Subject 2:</label>


<input type="number" id="subject2" name="sub-
ject2"><br><br>

<label for="subject3">Subject 3:</label>


<input type="number" id="subject3" name="sub-
ject3"><br><br>

<label for="subject4">Subject 4:</label>


<input type="number" name="subject4" id="sub-
ject4"><br><br>

<label for="subject5">subject 5:</label>


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

<button type="button" onclick="calculate()">Calcu-


late</button>

<div id="results">
</div>
</form>

</body>
</html>
OUTPUT:
8. create employee information.write javascript code to find DA, HRA, PF, TAX,
gross pay, deduction and net pay.

<!DOCTYPE html>
<html>
<head>
<title>Employee Information and Salary Calculator</title>
</head>
<body>
<h1>Employee Information</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="basic">Basic Salary:</label>
<input type="number" id="basic" name="basic"><br><br>
<button type="button" onclick="calculateSalary()">Calcu-
late Salary</button>
</form>
<div id="results">
<p id="name"></p>
</div>
<script>
function calculateSalary() {
// Get input values
const name = document.getElementById("name").value;
const basicSalary = parseFloat(document.getEle-
mentById("basic").value);

// Constants (adjust these based on your company's


policies)
const daPercentage = 0.4; // 40% DA
const hraPercentage = 0.2; // 20% HRA
const pfPercentage = 0.12; // 12% PF
const taxPercentage = 0.1; // 10% Tax

// Calculate allowances and deductions


const da = basicSalary * daPercentage;
const hra = basicSalary * hraPercentage;
const pf = basicSalary * pfPercentage;
const grossSalary = basicSalary + da + hra;
const tax = grossSalary * taxPercentage;
const deductions = pf + tax;
const netSalary = grossSalary - deductions;

// Display results
const resultsDiv = document.getElementById("re-
sults");
resultsDiv.innerHTML = `
<h2>Employee Details</h2>
<p>Name: ${name}</p>
<p>Basic Salary: ${basicSalary}</p>
<p>DA: ${da}</p>
<p>HRA: ${hra}</p>
<p>PF: ${pf}</p>
<p>Gross Salary: ${grossSalary}</p>
<p>Tax: ${tax}</p>
<p>Deductions: ${deductions}</p>
<p>Net Salary: ${netSalary}</p>
`;
}
</script>
</body>
</html>
OUTPUT:
9. Create a form consists of a two Multiple choice lists and one single choice list
(a) The first multiple choice list, displays the Major dishes available
(b)The second multiple choice list, displays the Starters available.
(C)The single choice list, displays the Soft drinks available.
<!DOCTYPE html>
<html>
<head>
<title>Food Order Form</title>
<style>
.select{
align-items: baseline;
display: flex;
}
</style>
</head>
<body>
<h2>Food Order Form</h2>
<form>
<div class="select">
<label for="majorDishes">Major Dishes:</label>
<select id="majorDishes" multiple>
<option value="biryani">Biryani</option>
<option value="curry">Curry</option>
<option value="pizza">Pizza</option>
</select>
</div>
<br><br>
<div class="select">
<label for="starters">Starters:</label>
<select id="starters" size="2">
<option value="soup">Soup</option>
<option value="salad">Salad</option>
<option value="frenchFries">French Fries</op-
tion>
</select>
</div>
<br><br>
<div class="select">
<label for="softDrinks">Soft Drinks:</label>
<select id="softDrinks">
<option value="coke">Coke</option>
<option value="pepsi">Pepsi</option>
<option value="fanta">Fanta</option>
</select>
</div>
<br><br>
<button type="submit">Submit Order</button>
</form>
</body>
</html>
OUTPUT:

HTML—CSS---JAVASCRPT

You might also like