Web technology Assignment
Project 1 : Text Growing & Shrinking
Aim:
To display text with increasing and decreasing font size using JavaScript.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Text Growing & Shrinking</title>
</head>
<body>
<h2 id="text">TEXT-GROWING</h2>
<script>
let size = 5;
let growing = true;
let text = [Link]("text");
setInterval(() => {
if (growing) {
[Link] = "red";
[Link] = "TEXT-GROWING";
size++;
if (size >= 50) growing = false;
} else {
[Link] = "blue";
[Link] = "TEXT-SHRINKING";
size--;
if (size <= 5) growing = true;
[Link] = size + "pt";
}, 100);
</script>
</body>
</html>
Project 2: Simple Calculator
Aim:
To design a simple calculator that performs sum, difference, product, and quotient using JavaScript.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
</head>
<body>
<h2>Calculator</h2>
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<br><br>
<button onclick="calculate()">Calculate</button>
<p id="result"></p>
<script>
function calculate() {
let a = parseFloat([Link]("num1").value);
let b = parseFloat([Link]("num2").value);
let sum = a + b;
let product = a * b;
let difference = a - b;
let quotient = (b !== 0) ? (a / b) : "Infinity";
[Link]("result").innerHTML =
`Sum: ${sum} <br> Product: ${product} <br> Difference: ${difference} <br> Quotient: ${quotient}`;
</script>
</body>
</html>
Project 3: Squares & Cubes Table
Aim:
To display squares and cubes of numbers from 0 to 10 in an HTML table using JavaScript.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Squares and Cubes</title>
</head>
<body>
<h2>Squares and Cubes of Numbers (0-10)</h2>
<table border="1" cellpadding="8">
<tr><th>Number</th><th>Square</th><th>Cube</th></tr>
<tbody id="tableBody"></tbody>
</table>
<script>
let tbody = [Link]("tableBody");
for (let i = 0; i <= 10; i++) {
let row = `<tr>
<td>${i}</td>
<td>${i*i}</td>
<td>${i*i*i}</td>
</tr>`;
[Link] += row;
</script>
</body>
</html>
Project 4: Visitor Counter (PHP)
Aim:
To keep track of the number of visitors visiting the webpage using PHP.
Source Code:
<?php
$file = "[Link]";
if(!file_exists($file)){
file_put_contents($file,"0");
$count = (int)file_get_contents($file);
$count++;
file_put_contents($file, $count);
echo "<h2>Welcome Visitor!</h2>";
echo "<p>You are visitor number: <b>$count</b></p>";
?>
Project 5: Image Carousel Slider
Aim:
To create an auto-rotating image slider with navigation arrows using HTML, CSS, and JavaScript.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Image Carousel</title>
<style>
.slider { position: relative; width: 400px; height: 250px; margin: auto; overflow: hidden; }
.slides { display: flex; width: 100%; height: 100%; transition: transform 0.5s ease-in-out; }
.slides img { width: 400px; height: 250px; }
.nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 24px; cursor: pointer; color:
white; background: rgba(0,0,0,0.5); padding: 5px; }
.prev { left: 10px; }
.next { right: 10px; }
</style>
</head>
<body>
<h2>Image Carousel Slider</h2>
<div class="slider">
<div class="slides" id="slides">
<img src="[Link] alt="">
<img src="[Link] alt="">
<img src="[Link] alt="">
</div>
<span class="nav prev" onclick="prev()">❮</span>
<span class="nav next" onclick="next()">❯</span>
</div>
<script>
let index = 0;
const slides = [Link]("slides");
const total = [Link];
function showSlide() {
[Link] = `translateX(${-index * 400}px)`;
function next() {
index = (index + 1) % total;
showSlide();
function prev() {
index = (index - 1 + total) % total;
showSlide();
setInterval(next, 2000);
</script>
</body>
</html>