Scribd
Upload
2 views

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
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

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
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