Web Programming Surya

WEB PROGRAMMING
Assessment -3
Name: Surya J M
Reg No.: 22BCI0307
Task 1:
Code:
<!DOCTYPE html>
<html>
<body>
<center>
<script>
console.log("Hello, World!");
</script>
<script>
window.onload =
function() {
alert("Hello,
World!");
};
</script>
<script>
document.write("Hello, World!");
</script>
<p id="output"></p>
<script>
document.getElementById("output").innerHTML = "Hello,
World!";
</script>
<button onclick="popup()">Click Me</button>
<script>
function popup() {
window.open("", "",
"width=200,height=100").document.write("Hello, World!");
}
</script>
<button onclick="showPrompt()">Click Me</button>
<script>
function showPrompt() {
var userInput = prompt("Please enter your
name", ""); if (userInput !== null) {
alert("Hello, " + userInput + "!");
}
}
</script>
</body>
</html>
Output:
Task 2:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
label {
display: block;
margin-bottom: 5px;
}
select, input[type="number"] {
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#operationResults {
font-size: 18px;
margin-top: 20px;
}
hr {
margin-top: 30px;
}
</style>
</head>
<body>
<h1>TASK-2</h1>
<label for="mainOperationSelect">Select operation:</label>
<select id="mainOperationSelect">
<option value="arithmetic">Arithmetic Operations</option>
<option value="positiveNegativeZero">Check
Positive/Negative/Zero</option>
<option value="evenOdd">Check Even/Odd</option>
</select><br><br>
<div id="arithmeticOptions" style="display:none;">
<label for="subOperationSelect">Select arithmetic
operation:</label>
<select id="subOperationSelect">
<option value="addition">Addition</option>
<option value="subtraction">Subtraction</option>
<option value="multiplication">Multiplication</option>
<option value="division">Division</option>
</select><br><br>
</div>
<label for="numberInput1">Enter a number:</label>
<input type="number" id="numberInput1"><br><br>
<label for="numberInput2" id="numberLabel2"
style="display:none;">Enter second number:<br></label>
<input type="number" id="numberInput2" style="display:none;"><br><br>
<button onclick="performOperations()">Perform Operation</button>
<h3>Results:</h3>
<p id="operationResults"></p>
<script>
function performOperations() {
var mainOperation =
document.getElementById("mainOperationSelect").value;
var num1 =
parseInt(document.getElementById("numberInput1").value);
var num2 =
parseInt(document.getElementById("numberInput2").value);
var result;
if (mainOperation === "arithmetic") {
var subOperation =
document.getElementById("subOperationSelect").value;
if (subOperation === "addition") {
result = num1 + num2;
} else if (subOperation === "subtraction") {
result = num1 - num2;
} else if (subOperation === "multiplication") {
result = num1 * num2;
} else if (subOperation === "division") {
if (num2 === 0) {
result = "Cannot divide by zero!";
} else {
result = num1 / num2;
}
}
} else if (mainOperation === "positiveNegativeZero") {
if (num1 > 0) {
result = "The number is Positive.";
} else if (num1 < 0) {
result = "The number is Negative.";
} else {
result = "The number is Zero.";
}
} else if (mainOperation === "evenOdd") {
if (num1 % 2 === 0) {
result = "The number is Even.";
} else {
result = "The number is Odd.";
}
}
document.getElementById("operationResults").innerText =
"Result: " + result;
}
document.getElementById("mainOperationSelect").addEventListener("c
hange", function() {
var selectedMainOperation =
document.getElementById("mainOperationSelect").value;
if (selectedMainOperation === "arithmetic") {
document.getElementById("arithmeticOptions").style.display
= "block";
document.getElementById("numberLabel2").style.display =
"inline";
document.getElementById("numberInput2").style.display =
"inline";
} else {
document.getElementById("arithmeticOptions").style.display
= "none";
document.getElementById("numberLabel2").style.display =
"none";
document.getElementById("numberInput2").style.display =
"none";
}});
</script>
</body>
</html>
Output:
Task 3:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
max-width: 400px;
margin: 50px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
label {
display: block;
margin-bottom: 5px;
color: #333;
}
input[type="number"],
select {
width: 100%;
padding: 10px;
border-radius: 4px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
}
button:active {
}
#result {
margin-top: 20px;
padding: 10px;
border-radius: 4px;
font-size: 18px;
text-align: center;
}
.error {
color: #ff0000;
}
</style>
</head>
<body>
<div class="container">
<h1>Calculator</h1>
<label for="num1">Enter first number:</label>
<input type="number" id="num1">
<label for="num2">Enter second number:</label>
<input type="number" id="num2">
<label for="operation">Select operation:</label>
<select id="operation">
<option value="add">Addition (+)</option>
<option value="subtract">Subtraction (-)</option>
<option value="multiply">Multiplication (*)</option>
<option value="divide">Division (/)</option>
</select>
<button onclick="calculate()">Calculate</button>
<div id="result"></div>
</div>
<script>
function calculate() {
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
var operation = document.getElementById('operation').value;
var resultElement = document.getElementById('result');
var result;
if (isNaN(num1) || isNaN(num2)) {
resultElement.innerHTML = '<p class="error">Please enter
valid numbers.</p>';
return;
}
switch(operation) {
case 'add':
result = num1 + num2;
break;
case 'subtract':
result = num1 - num2;
break;
case 'multiply':
result = num1 * num2;
break;
case 'divide':
if (num2 !== 0) {
result = num1 / num2;
} else {
resultElement.innerHTML = '<p class="error">Cannot
divide by zero!</p>';
return;
}
break;
default:
resultElement.innerHTML = '<p class="error">Invalid
operation</p>';
return;
}
resultElement.innerHTML = '<p>Result: ' + result + '</p>';

}
document.addEventListener('keyup', function(event) {
if (event.key === 'Enter') {
calculate();
}
});
</script>
</body>
</html>
Output:
Task 4:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.input-container {
display: flex;
flex-direction: column;
}
#text-input {
padding: 10px;
border-radius: 4px;
margin-right: 10px;
flex: 1;
}
#result {
text-align: center;
font-weight: bold;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h1>Palindrome Checker</h1>
<div class="input-container">
<input type="text" id="text-input" placeholder="Enter text to
check">
</div>
<div class="input-container">
<button onclick="checkPalindrome()">Check</button>
</div>
<p id="result"></p>
<script>
function isPalindrome(str) {
const processedStr = str.toLowerCase().replace(/[^a-z0-9]/g, "");
let left = 0;
let right = processedStr.length - 1;
while (left < right) {
if (processedStr[left] !== processedStr[right]) {
return false;
}
left++;
right--;}
return true;}
function checkPalindrome() {
const textInput = document.getElementById("text-input");
const result = document.getElementById("result");
const text = textInput.value;
if (!text) {
result.textContent = "Please enter some text to check.";
return;
}
const isPal = isPalindrome(text);
result.textContent = `"${text}" is ${isPal ? "" : "not"} a
palindrome.`;
}
</script>
</body>
</html>
Output:
Task 5:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
}
.container {
max-width: 600px;
margin: 50px auto;
text-align: center;
}
button {
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Enter the Task Number to Execute (1-10):</h2>
<input type="text" id="taskNumber" placeholder="Task Number">
<button onclick="executeTask()">Execute Task</button>
<p id="output"></p>
</div>
<script>
function executeTask() {
var taskNumber =
parseInt(document.getElementById('taskNumber').value);
var output = document.getElementById('output');
switch (taskNumber) {
case 1:
var colors = ['red', 'green', 'blue'];
output.innerText = "Array colors: " + colors.join(', ');
break;
case 2:
var fruits = ['apple', 'banana', 'orange'];
output.innerText = "Second fruit: " + fruits[1];
break;
case 3:
var numbers = [5, 10, 15, 20, 25];
output.innerText = "Length of numbers array: " +
numbers.length;
break;
case 4:
var fruits = ['apple', 'banana', 'orange'];
fruits.push('grape');
output.innerText = "Modified fruits array: " +
fruits.join(', ');
break;
case 5:
var colors = ['red', 'green', 'blue'];
output.innerText = "Colors array:";
colors.forEach(function(color) {
output.innerText += "\n" + color;
});
break;
case 6:
var numbers = [5, 10, 15, 20, 25];
output.innerText = "Comma-separated string of numbers: " +
numbers.join(',');
break;
case 7:
var names = ['John', 'Alice', 'Bob', 'Charlie'];
output.innerText = "Sorted names array: " +
names.sort().join(', ');
break;
case 8:
var ages = [12, 18, 20, 25, 30];
var filteredAges = ages.filter(age => age >= 18);
output.innerText = "Ages greater than or equal to 18: " +
filteredAges.join(', ');
break;
case 9:
var matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
output.innerText = "Matrix:";
matrix.forEach(function(row) {
output.innerText += "\n" + row.join(' ');
});
break;
case 10:
function getEvenNumbers(numbers) {
return numbers.filter(number => number % 2 === 0);
}
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
output.innerText = "Even numbers: " +
getEvenNumbers(numbers).join(', ');
break;
default:
output.innerText = "Invalid task number.";
}
}
</script>
</body>
</html>
Output:
Task 6:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
display: flex;
height: 100vh;
}
h1 {
}
#tasks {
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 5px;
cursor: pointer;
color: white;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
}
.output-container {
display: none;
margin-top: 20px;
border-radius: 5px;
padding: 10px;
}
</style>
</head>
<body>
<h1>Task-6</h1>
<div id="tasks">
<button onclick="executeTask(1)">Task 1</button>
</div>
<div id="task1Result" class="output-container"></div>
<script>
function executeTask(taskNumber) {
let outputContainer =
document.getElementById(`task${taskNumber}Result`);
outputContainer.style.display = 'block';
if (taskNumber === 1) {
let name = prompt("Enter your name:");
let greeting = "Hello, " + name + "!";
outputContainer.innerText = greeting;
} else if (taskNumber === 2) {
let sentence = prompt("Enter a sentence:");
let length = sentence.length;
outputContainer.innerText = "Length of the sentence: " +
length;
} else if (taskNumber === 3) {
let str = prompt("Enter a string:");
let upperStr = str.toUpperCase();
outputContainer.innerText = "Uppercase string: " + upperStr;
} else {
outputContainer.innerText = "Invalid task number.";
}
}
</script>
</body>
</html>
Output
Task 7:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
max-width: 400px;
margin: 50px auto;
text-align: center;
}
h1 {
color: #333;
}
label {
display: block;
}
input[type="text"] {
width: 100%;
padding: 5px;
}
button {
padding: 10px 20px;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
}
#outputDiv {
margin-top: 20px;
padding: 10px;
}
</style>
</head>
<body>
<h1>String Manipulation</h1>
<label for="task">Choose a task:</label>
<select id="task">
<option value="1">Reverse String</option>
<option value="2">Capitalize Words</option>
<option value="3">Count Vowels</option>
</select>
<div id="inputDiv">
<label for="inputText">Enter text:</label>
<input type="text" id="inputText">
</div>
<button onclick="performTask()">Submit</button>
<div id="outputDiv"></div>
</div>
<script>
function reverseString(str) {
return str.split('').reverse().join('');
}
function capitalizeWords(sentence) {
return sentence.split(' ').map(word =>
word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
}
function countVowels(str) {
return str.match(/[aeiou]/gi).length;
}
function performTask() {
const task = document.getElementById('task').value;
const inputText = document.getElementById('inputText').value;
let output = '';
switch (task) {
case '1':
output = reverseString(inputText);
break;
case '2':
output = capitalizeWords(inputText);
break;
case '3':
output = countVowels(inputText).toString();
break;
default:
output = 'Invalid task';
}
document.getElementById('outputDiv').innerText = output;
}
</script>
</body>
</html>
Output:
Task 8:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
#output {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Remove Duplicates from String</h2>
<input type="text" id="inputString" placeholder="Enter a string">
<button onclick="removeDuplicates()">Remove Duplicates</button>
<div id="output"></div>
<script>
function removeDuplicates() {
var input = document.getElementById("inputString").value;
var uniqueChars = '';
for (var i = 0; i < input.length; i++) {
if (uniqueChars.indexOf(input[i]) === -1) {
uniqueChars += input[i];
}
}
document.getElementById("output").innerText = "Result: " +
uniqueChars;
}
</script>
</body>
</html>
Output:
Task 9:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
padding: 5px;
}
button {
padding: 8px 20px;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#output {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Find Longest Common Substring</h2>
<input type="text" id="inputString1" placeholder="Enter first string">
<br>
<input type="text" id="inputString2" placeholder="Enter second
string">
<br>
<button onclick="findLongestCommonSubstring()">Find Longest Common
Substring</button>
<div id="output"></div>
<script>
function longestSubstring(str1, str2) {
const m = str1.length;
const n = str2.length;
const dp = Array.from({ length: m + 1 }, () => Array(n +
1).fill(0));
let maxLength = 0;
let endIndex = 0;
for (let i = 1; i <= m; i++) {
for (let j = 1; j <= n; j++) {
if (str1[i - 1] === str2[j - 1]) {
dp[i][j] = dp[i - 1][j - 1] + 1;
if (dp[i][j] > maxLength) {
maxLength = dp[i][j];
endIndex = i - 1;
}
} else {
dp[i][j] = 0;
}
}
}
if (maxLength === 0) {
return '';
} else {
return str1.substring(endIndex - maxLength + 1, endIndex +
1);
}
}
function findLongestCommonSubstring() {
const inputString1 =
document.getElementById("inputString1").value;
const inputString2 =
document.getElementById("inputString2").value;
const outputDiv = document.getElementById("output");
const longestCommonSubstring = longestSubstring(inputString1,
inputString2);
outputDiv.innerText = "Longest Common Substring: " +
longestCommonSubstring;
}
</script>
</body>
</html>
Output:
Task 10:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
display: flex;
height: 100vh;
}
.top {
align-items: top;
}
#container {
text-align: center;
}
padding: 10px;
font-size: 16px;
}
button {
padding: 10px 20px;
font-size: 16px;
color: white;
border: none;
cursor: pointer;
}
#result {
margin-top: 20px;
}
footer {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Reverse String</h1>
<div id="container">
<input type="text" id="sentenceInput" placeholder="Enter a
sentence">
<button onclick="reverseAndDisplay()">Reverse Words</button>
<div id="result"></div>
</div>
<footer>
<p style="text-align:center;">© Parth Suri-22BDS0116</p>
</footer>
<script>
function reverseWords(sentence) {
return sentence.split(" ").reverse().join(" ");
}
function reverseAndDisplay() {
var sentenceInput =
document.getElementById("sentenceInput").value;
var reversedSentence = reverseWords(sentenceInput);
document.getElementById("result").textContent =
reversedSentence;
}
</script>
</body>
</html>
Output:
Task 11:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
min-height: 100vh;
}
#container {
text-align: center;
}
padding: 8px;
margin: 5px;
width: 200px;
}
button {
padding: 8px 16px;
color: white;
border: none;
cursor: pointer;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
width: 100%;
}
</style>
</head>
<body>
<h2>Anagram Checker</h2>
<input type="text" id="string1" placeholder="Enter first string">
<br>
<input type="text" id="string2" placeholder="Enter second string">
<br>
<button onclick="checkAnagrams()">Check Anagrams</button>
<p id="result"></p>
</div>
<footer>
<p>© Parth Suri-22BDS0116</p>
</footer>
<script>
function areAnagrams(str1, str2) {
str1 = str1.replace(/\s/g, '').toLowerCase();
str2 = str2.replace(/\s/g, '').toLowerCase();
if (str1.length !== str2.length) {
return false;
}
const sortedStr1 = str1.split('').sort().join('');
const sortedStr2 = str2.split('').sort().join('');
return sortedStr1 === sortedStr2;
}
function checkAnagrams() {
const string1 = document.getElementById('string1').value;
const string2 = document.getElementById('string2').value;
const resultElement = document.getElementById('result');
if (areAnagrams(string1, string2)) {
resultElement.textContent = "The strings are anagrams!";
} else {
resultElement.textContent = "The strings are not anagrams.";
}
}
</script>
</body>
</html>
Output:
Task 12:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
min-height: 100vh;
}
#container {
text-align: center;
}
padding: 8px;
margin: 5px;
width: 200px;
}
button {
padding: 8px 16px;
color: white;
border: none;
cursor: pointer;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
width: 100%;
flex-shrink: 0;
}
</style>
</head>
<body>
<h2>String Compressor</h2>
<input type="text" id="inputString" placeholder="Enter a string">
<br>
<button onclick="compressString()">Compress String</button>
<p id="result"></p>
</div>
<footer>
<p>© Parth Suri-22BDS0116</p>
</footer>
<script>
function compressString() {
const inputString = document.getElementById('inputString').value;
const compressedString = compress(inputString);
const resultElement = document.getElementById('result');
resultElement.textContent = compressedString;
}
function compress(str) {
let compressed = '';
let count = 1;
for (let i = 0; i < str.length; i++) {
if (str[i] === str[i + 1]) {
count++;
} else {
compressed += str[i] + count;
count = 1;
}
}
return compressed.length < str.length ? compressed : str;
}
</script>
</body>
</html>
Output:
Task 13:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: 1px solid #fff;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="200"></canvas>
<script>
document.addEventListener("DOMContentLoaded", function() {
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(45, 45, 75, 75);
ctx.beginPath();
ctx.arc(275, 140, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'blue';
ctx.fill();
});
</script>
</body>
</html>
Output:
Task 14:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
display: flex;
height: 100vh;
position: relative;
}
canvas {
border: 2px solid black;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
border-top: 2px solid black;
padding: 10px 0;
text-align: center;
}
</style>
</head>
<body>
<div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 50);
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(150, 100, 30, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(250, 100);
ctx.lineTo(150, 100);
ctx.closePath();
ctx.fill();
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText('Hello, Canvas!', 100, 200);
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
setTimeout(clearCanvas, 6000);
});
</script>
</div>
</body>
</html>
Output:
Initially:
After sometime:
Task 15:
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
display: flex;
min-height: 100vh;
}
canvas {
border: 1px solid #333;
}
footer {
margin-top: 10px;
}
</style>
</head>
<body>
<footer>
© Parth Suri-22BDS0116
</footer>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'https://w0.peakpx.com/wallpaper/270/733/HD-wallpaper-
dream-land-flowers-nature-green.jpg';
img.onload = function() {
var scaleFactor = Math.max(canvas.width / img.width,
canvas.height / img.height);
var scaledWidth = img.width * scaleFactor;
var scaledHeight = img.height * scaleFactor;
var x = (canvas.width - scaledWidth) / 2;
var y = (canvas.height - scaledHeight) / 2;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, x, y, scaledWidth, scaledHeight);
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
ctx.fillRect(0, canvas.height, canvas.width, canvas.height);
};
</script>
</body>
</html>
Output:

Web Programming Surya

Uploaded by

Copyright:

Available Formats

Web Programming Surya

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Programming Surya

Uploaded by

Copyright:

Available Formats

WEB PROGRAMMING

resultElement.innerHTML = '<p>Result: ' + result + '</p>';

You might also like