0% found this document useful (0 votes)
4 views10 pages

assignment-1

The document contains multiple HTML snippets with JavaScript functions for various tasks such as checking if a string is a palindrome, converting the first letter of each word to uppercase, extracting file extensions, calculating date differences, and finding the largest number in an array. Each snippet includes a form for user input and displays results dynamically on the webpage. The snippets demonstrate basic web development concepts using HTML and JavaScript.

Uploaded by

vorashruti678
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
4 views10 pages

assignment-1

The document contains multiple HTML snippets with JavaScript functions for various tasks such as checking if a string is a palindrome, converting the first letter of each word to uppercase, extracting file extensions, calculating date differences, and finding the largest number in an array. Each snippet includes a form for user input and displays results dynamically on the webpage. The snippets demonstrate basic web development concepts using HTML and JavaScript.

Uploaded by

vorashruti678
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 10

5.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Palindrome</title>
</head>
<body>
<h3>If string is palindrome or not</h3>
<script>
function pali()
{
let str=document.getElementById("c1").value;
d1.innerHTML=str;
var j=0;
let str2="";
for(var i=str.length-1;i>=0;i--)
{
str2 += str[i];
}
d2.innerHTML=str2;
if(str==str2)
{
alert("String is palindrome");
}
else
{
alert("String is not palindrome");
}
}
</script>
<form>
Enter the value of string :-
<input type="text" id="c1">
<input type="button" onclick="pali()" value="Palindrome">
</form>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

6.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function convert()
{
let str=document.getElementById("c1").value;
d1.innerHTML=str;
let str2=str.split(' ');
for(var i=0;i<str2.length;i++)
{
str2[i]=str2[i][0].toUpperCase() + str2[i].slice(1);
//alert(str2[i]);
}
d2.innerHTML=str2.join(' ');
}
</script>
<form>
Enter the value of string :-
<input type="text" id="c1">
<input type="button" onclick="convert()" value="uppercase">
</form>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

7.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function ext()
{
let str=document.getElementById("c1").value;
d1.innerHTML=str;
let str2=str.split('.');
d2.innerHTML=str2[1];
}
</script>
<form>
Enter the filename with extension :-
<input type="text" id="c1">
<input type="button" onclick="ext()" value="Extension">
</form>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

8.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function ext()
{

let str=document.getElementById("c1").value;
d1.innerHTML=str;
let str2=str.split(' ');
let max=str2[0];
let str3='';
for(var i=0;i<str2.length-1;i++)
{
if(max.length < str2[i].length)
{
max=str2[i];
}
}
d2.innerHTML=max;
}
</script>
<form>
Enter the filename with extension :-
<input type="text" id="c1">
<input type="button" onclick="ext()" value="Extension">
</form>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

9.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function tim()
{
let date=document.getElementById("c1").value;
d1.innerHTML=date;
}
</script>
<form>
Time :-
<input type="time" id="c1">
<input type="button" value="submit" onclick="tim()">
</form>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>

10.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leap year</title>
</head>
<body>
<script>
var year;
year=prompt("Enter the year : ");
if(year%4===0)
{
document.write(year," is a leap year");
}
else
{
document.write(year," is not a leap year");
}
</script>
</body>
</html>

11.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function tim()
{
let date=document.getElementById("c1").value;
d1.innerHTML=date;
let date1=document.getElementById("c2").value;
d2.innerHTML=date1;
var dat = new Date(date);
var dat1 = new Date(date1);
var date3 = dat1.getTime() - dat.getTime();
date3 = date3 / (1000 * 60 * 60 * 24);
d3.innerHTML=date3 + " days of difference between two dates";
}
</script>
<form>
Calender :-</br>
<input type="date" id="c1"></br>
<input type="date" id="c2"></br>
<input type="button" value="submit" onclick="tim()">
</form>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>

12.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function tim()
{
let date=document.getElementById("c1").value;
d1.innerHTML=date;
let date1=document.getElementById("c2").value;
d2.innerHTML=date1;
var dat = new Date(date);
var dat1 = new Date(date1);
var date3 = dat1.getFullYear() - dat.getFullYear();
d3.innerHTML=date3 + " years old";
}
</script>
<form>
Enter birth date :-</br>
<input type="date" id="c1"></br>
<input type="date" id="c2"></br>
<input type="button" value="submit" onclick="tim()">
</form>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>

13.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Largest among array</title>
</head>
<body>
<h3>Find largest among array</h3>
<script>
var n;
n=prompt("Enter the size of the array : ");
var a = [];
for(var i=0;i<n;i++)
{
a[i]=prompt("Enter values for array element a : " + (i+1));
}
for(var i=0;i<n;i++)
{
document.write(" ",a[i]);
}
var max=a[0];
for(var i=0;i<n;i++)
{
if(max < a[i])
{
max=a[i];
}
}
alert("Largest among the array is : " + max);
document.write("</br>Largest among the array is : " + max);
</script>
</body>
</html>

14.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sum of array</title>
</head>
<body>
<h3>Find sum of all array elements</h3>
<script>
var n;
n=prompt("Enter the size of the array : ");
var a = [];
for(var i=0;i<n;i++)
{
a[i]=Number(prompt("Enter values for array element a : " + (i+1)));
}
for(var i=0;i<n;i++)
{
document.write(" ",a[i]);
}
var sum1=0;
for(var i=0;i<n;i++)
{
sum1 = sum1 + a[i];
}
document.write("</br>","Sum of the array is : " + sum1);
</script>
</body>
</html>

15.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="searchh()">
<script>
function searchh()
{
var n;
n=parseInt(prompt("Enter the size of the array : "));
var a = [];
for(var i=0;i<n;i++)
{
a[i]=parseInt(prompt("Enter values for array element a : " +
(i+1)));
}
d1.innerHTML=a;
var mid,low,high;
low=0;
high=n-1;
mid = (low + high) /2;
var value=parseInt(prompt("Enter the value to be searched :- "));
for(var i=0;i<n;i++)
{
if(value == a[mid])
{
alert("Value found : " + value,a[mid]);
}
else if(value < a[mid])
{
high = mid-1;
mid = (low + high) /2;
}
else if(value > a[mid])
{
low = mid +1;
mid = (low + high) /2;
}
}
}
</script>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

17.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="joinr()">
<script>
function joinr()
{
var n,str,str1;
n=prompt("Enter the size of the array : ");
var a = [];
for(var i=0;i<n;i++)
{
a[i]=prompt("Enter values for array element a : " + (i+1));
}
str=a.join('+');
str1=a.join(',');
d1.innerHTML=a;
d2.innerHTML=str;
d3.innerHTML=str1;
}
</script>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>

18.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function splitt()
{
let str=document.getElementById("c1").value;
let str1=str.split(/[/.]/);
d1.innerHTML=str1;
for(var i=0;i<str1.length;i++)
{
document.write(" ",str1[i]);
}
}
</script>
<form>
Enter string :- <input type="text" id="c1"></br></br>
<input type="button" onclick="splitt()" value="split">
</form>
<div id="d1"></div>
</body>
</html>

19.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function splitt()
{
let str=document.getElementById("c1").value;
let str1=str.split("://");
d1.innerHTML="Protocol : " + str1[0];
let str2=str1[1].split("/");
d2.innerHTML="Domain : " + str2[0];
let str3=str2[1].split(".");
d3.innerHTML="Page : " + str3[0];
d4.innerHTML="Extension : " + str3[1];
}
</script>
<form>
Enter URL :- <input type="text" id="c1"></br></br>
<input type="button" onclick="splitt()" value="split"></br>
</form>
<div id="d1"></div></br>
<div id="d2"></div></br>
<div id="d3"></div></br>
<div id="d4"></div></br>
</body>
</html>
<!-- http://www.google.com/page1.html -->

20.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="hreff()">
<script>
function hreff()
{
d1.innerHTML = document.getElementById("a1").href;
d2.innerHTML = document.getElementById("a1").hreflang;
d3.innerHTML = document.getElementById("a1").target;
d4.innerHTML = document.getElementById("a1").rel;
}
</script>
<a href="https://www.geeksforgeeks.org/" hreflang="en" target="_self"
rel="nofollow" id="a1" >This a link for w3school</a>
<div>Href : </div><div id="d1"></div></br>
<div>Hreflang : </div><div id="d2"></div></br>
<div>Target : </div><div id="d3"></div></br>
<div>Rel : </div><div id="d4"></div></br>

<img src="image_1.jpg" alt="Wallpaper" height="250" width="500">


</body>
</html>

23.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function change()
{
var color1 = document.getElementById("t1").value;
var p1=document.getElementsByTagName("p");
for(var i=0;i<p1.length;i++)
{
p1[i].style.color=color1;
}
}
</script>
<p style="color : black;" id="p1">This is paragraph 1</p>
<p style="color : red;">This is paragraph 2</p>
<p style="color : orange;">This is paragraph 3</p>
<form>
<label for="colorInput">Enter a color: </label>
<input type="text" id="t1"></br></br>
<input type="button" value="Submit" onclick="change()">
</form>
</body>
</html>

24.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function change()
{
var h = document.getElementById("t1").value;
var w = document.getElementById("t2").value;
var i = document.getElementById("i1");
i.style.height = h;
i.style.width = w;
}
</script>
<img src="image_1.jpg" alt="Wallpaper" id="i1" height="400px"
width="850px"></br></br>
<form>
<label for="colorInput">Enter a height: </label>
<input type="text" id="t1"></br></br>
<label for="colorInput">Enter a width: </label>
<input type="text" id="t2"></br></br>
<input type="button" value="Submit" onclick="change()">
</form>
</body>
</html>

You might also like