Scribd
Upload
48 views59 pages

Web Programming Surya

The document discusses three web programming tasks involving JavaScript. Task 1 demonstrates different ways to output text to the page using console.log, alert, document.write, and getElementById. Task 2 creates an interactive calculator using HTML and JavaScript that performs arithmetic, positive/negative/zero, and even/odd checks. Task 3 builds a simple calculator app with a user interface.

Uploaded by

Aswath Vikranth
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
48 views59 pages

Web Programming Surya

The document discusses three web programming tasks involving JavaScript. Task 1 demonstrates different ways to output text to the page using console.log, alert, document.write, and getElementById. Task 2 creates an interactive calculator using HTML and JavaScript that performs arithmetic, positive/negative/zero, and even/odd checks. Task 3 builds a simple calculator app with a user interface.

Uploaded by

Aswath Vikranth
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/ 59

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;
margin-bottom: 30px;
border: 1px solid #ccc;
}
</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 {
font-family: Arial, sans-serif;
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;
margin-bottom: 20px;
color: #333;
}
label {
display: block;
margin-bottom: 5px;
color: #333;
}
input[type="number"],
select {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
button:active {
background-color: #0056b3;
}
#result {
margin-top: 20px;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
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;
margin-bottom: 20px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.input-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
}
#text-input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
margin-right: 10px;
flex: 1;
}
#result {
text-align: center;
font-weight: bold;
margin-bottom: 20px;
}
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 {
font-family: Arial, sans-serif;
}
.container {
max-width: 600px;
margin: 50px auto;
text-align: center;
}
button {
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<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 {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
h1 {
margin-bottom: 20px;
}
#tasks {
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 5px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
}
.output-container {
display: none;
margin-top: 20px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}
</style>
</head>
<body>
<h1>Task-6</h1>
<div id="tasks">
<button onclick="executeTask(1)">Task 1</button>
<button onclick="executeTask(2)">Task 2</button>
<button onclick="executeTask(3)">Task 3</button>
</div>
<div id="task1Result" class="output-container"></div>
<div id="task2Result" class="output-container"></div>
<div id="task3Result" 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;
margin-bottom: 10px;
}
input[type="text"] {
width: 100%;
padding: 5px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#outputDiv {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<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 {
font-family: Arial, sans-serif;
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 {
font-family: Arial, sans-serif;
text-align: center;
}
input[type="text"] {
margin-bottom: 10px;
padding: 5px;
}
button {
padding: 8px 20px;
background-color: #4CAF50;
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 {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.top {
align-items: top;
}
#container {
text-align: center;
}
input[type="text"] {
padding: 10px;
font-size: 16px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
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;">&copy; 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 {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
background-color: #f4f4f4;
}
#container {
text-align: center;
margin-bottom: 50px;
}
input[type="text"] {
padding: 8px;
margin: 5px;
width: 200px;
}
button {
padding: 8px 16px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<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>&copy; 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 {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
background-color: #f4f4f4;
}
#container {
text-align: center;
margin-bottom: 50px;
}
input[type="text"] {
padding: 8px;
margin: 5px;
width: 200px;
}
button {
padding: 8px 16px;
background-color: #4CAF50;
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>
<div id="container">
<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>&copy; 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;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
position: relative;
}
canvas {
border: 2px solid black;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #f0f0f0;
border-top: 2px solid black;
padding: 10px 0;
text-align: center;
}
</style>
</head>
<body>
<div>
<canvas id="myCanvas" width="400" height="300"></canvas>
<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;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
canvas {
border: 1px solid #333;
}
footer {
margin-top: 10px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="900" height="500"></canvas>
<footer>
&copy; 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:

You might also like