Name : Shah Vatsal Mukeshbhai
Roll no : 128
Sem : 4th
Subject : Web Development
Subject code : 405

  1. Reverse a number.
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    <h2 style="color:green;">
    Que 1: Reverse a number.</h2>
    <script language="javascript">
    function reverse(){
    var num=document.getElementById("num").value;
    var reverse=0;
    while(num !=0)
    {
    reverse= (reverse*10)+(num % 10);
    num= parseInt(num/10);
    }
    document.getElementById("div1").innerHTML="<br>"+ reverse + " is a reverse
    number";
    }
    </script>
    <form>
    <input type="text" id="num" placeholder="Enter Number"><br><br>
    <input type="button" value="check if reverse number" onclick="reverse()">
    <div id="div1"></div>
    </form>
    </body>
    </html>
  2. Write a program to convert temperatures to and from Celsius, Fahrenheit.
    <html>
    <head>
    <meta charset="utf-8"/>
    </head>
    <body>
    <h2 style="color:green;">Que 2: Write a program to convert temperatures to and from
    Celsius, Fahrenheit.</h2>
    <script language="javascript">
    function temp_convert(degree){
    var temprature;
    if(degree=="C")
    {
    temprature=document.getElementById("c").value * 9/5+32;
    document.getElementById("f").value=Math.round(temprature);
    }
    else
    {
    temprature=(document.getElementById("f").value -32)*5/9;
    document.getElementById("c").value=Math.round(temprature);
    }
    }

</script>
<form>
<p><input id="c" onkeyup="temp_convert('C')">degrees in celcius</p><br><br>
<p><input id="f" onkeyup="temp_convert('F')">degrees in farenhit</p><br><br>

<div id="div1"></div>
</form>
</body>
</html>

  1. Check if input number is prime or not.
    <html>
    <head>
    <meta charset="utf-8"/>
    </head>
    <body>
    <h2 style="color:green;">Que 3:Check if input number is prime or not.</h2>
    <script language="javascript">
    function is_prime(){
    var n=document.getElementById("n").value;
    for(var i=2;i<n;i++)
    {
    if(n%i0)
    {
    var flag=1;
    break;
    }
    }
    if(flag
    1)
    {
    document.getElementById("div1").innerHTML=n+" is not a prime number";
    }
    else
    {
    document.getElementById("div1").innerHTML=n+" is a prime number";
    }
    }
    </script>
    <form>
    <input type="text" id="n" placeholder="Enter Number"><br><br>
    <input type="button" value="check if prime or not" onclick="is_prime()"><br><br>
    <div id="div1"></div>
    </form>
    </body>
    </html>
  2. Write a program to calculate the factorial of a number.
    <html>
    <head>
    <meta charset="utf-8"/>
    </head>
    <body>
    <h2 style="color:green;">Que 4: Write a program to calculate the factorial of a number
    using recursion.</h2>
    <script language="javascript">
    function factorial(){
    var n=document.getElementById("n").value;
    var fact=1;
    for(var i=1;i<=n;i++)
    {
    fact=fact*i;
    }
    document.getElementById("div1").innerHTML= "Factorial of "+n+" is "+fact;
    }
    </script>
    <form>
    <input type="text" id="n" placeholder="Enter Number"><br><br>
    <input type="button" value="click here" onclick="factorial()"><br><br>
    <div id="div1"></div>
    </form>
    </body>
    </html>
  3. Check if string is palindrome or not.
    <html>
    <head>
    <meta charset="utf-8"/>
    </head>
    <body>
    <h2 style="color:green;">Que 5: Check if string is palindrome or not.</h2>
    <script language="javascript">
    function palindrome() {
    var str =document.getElementById("str").value;
    var len = str.length;
    for (var i = 0; i < len / 2; i++) {
    if (str[i] !== str[len - 1 - i]) {
    return document.getElementById("div1").innerHTML="is not a palindrome";
    }
    }
    return document.getElementById("div1").innerHTML="is a palindrome";
    }
    document.getElementById("string is "+str+"<br>");
    </script>
    <form>
    <input type="text" id="str" placeholder="Enter String"><br><br>
    <input type="button" value="is string palindrome or not"
    onclick="palindrome()"><br><br>
    <div id="div1"></div>
    </form>
    </body>
    </html>
  4. Write a function that accepts a string as a parameter and converts the first letter of
    each word of the string in upper case.
    <html>
    <head>
    <meta charset="utf-8"/>
    </head>
    <body>
    <h2 style="color:green;">Que 6:Write a function that accepts a string as a parameter and
    converts
    the first letter of each word of the string in upper case.</h2>
    <script language="javascript">
    function convertstring() {
    var str = document.getElementById("str").value;
    var a = str.split(" ");
    for (var i=0;i<a.length;i++) {
    a[i] =a[i].charAt(0).toUpperCase() + a[i].slice(1);
    }
    const str2 = a.join(" ");
    document.getElementById("div1").innerHTML= str2;
    // alert(str2);
    }
    </script>
    <form>
    <input type="text" id="str" placeholder="Enter String"><br><br>
    <input type="button" value="click here" onclick="convertstring()"><br><br>
    <div id="div1"></div>
    </form>
    </body>
    </html>
  5. Write a program to get the extension of a filename.
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Extension</title>
    <script>
    function exten()
    {
    var a = document.getElementById("e1").value.split(".")
    document.getElementById("ext").innerHTML = "Extension is :" + a[a.length-1];
    }
    </script>
    </head>
    <body>
    <form>
    Enter Url : <input type="text" id="e1"><br>
    <input type="button" id="b1" value="Click" onclick="exten()">
    </form>
    <div id="ext">
    </div>
    </body>
    </html>
  6. Write a function that accepts a string as a parameter and find the longest word within
    the string.
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Longest Word</title>
    <script>
    function show()
    {
    var a = document.getElementById("l1").value.split(" ")
    var l = a[0]
    for(var i=0;i<a.length-1;i++)
    {
    if(a[i].length>l.length)
    {
    l=a[i]
    }
    }
    document.getElementById("long").innerHTML = "Longest Word is : " + l
    }

</script>
</head>
<body>
<form>
Enter String : <input type="text" id="l1"><br>
<input type="button" id="b1" value="Click" onclick="show()">
</form>
<div id="long">
</div>
</body>
</html>

  1. Write a JavaScript function to add specified minutes to a Date object.
    <html>
    <head>
    <meta charset="utf-8"/>
    </head>
    <body>
    <h2 style="color:green;">Que 9:Write a JavaScript function to add specified minutes to a
    Date object</h2>
    <script>
    function addtime(){
    var date = new Date();
    document.write(date);
    var mins = document.getElementById("mins");
    mins=parseInt(mins)+date.getminutes();
    date.setminutes();
    document.getElementById("div1").innerHTML="after adding the minutes to date, time
    is "+date;
    }
    </script>
    <form>
    <input type="text" id="txtbox" placeholder="Enter minutes">
    <input type="button" id="btn" onclick="addtime()" value="Add mins">
    <div id="div1"></div>
    </form>
    </body>
    </html>
  2. Write a program to determine whether a current year is a leap year or not.
    <html>
    <head>
    <h2 style="color:green;">Que 10:Write a program to determine whether a current year is a
    leap year or not.</h2>
    </head>
    <body>
    <script>
    function leapyear() {
    var date = new Date();
    var year = date.getFullYear();
    if ((0 == year[0] % 4) && (0 != year[0] % 100) || (0 == year[0] % 400)) {
    document.getElementById("div1").innerHTML = year + " is leap year.";
    } else {
    document.getElementById("div1").innerHTML = year + " is not leap year.";
    }
    }
    </script>
    <form>
    <input type="button" onclick="leapyear()" value=" current year is leap or
    not"><br><br>
    <div id="div1"></div>
    </form>
    </body>
    </html>
  3. Write a JavaScript function to get difference between two dates in days.
    <html>
    <head>
    <h2 style="color:green;">Que 11: Write a JavaScript function to get difference between
    two dates in days.</h2>
    </head>
    <body>
    <script>
    function date_difference() {
    var d1 = document.getElementById("datebox1").value;
    var date1 = new Date(d1);
    var d2 = document.getElementById("datebox2").value;
    var date2 = new Date(d2);
    var difference = (date2.getTime() - date1.getTime())/(10006060*24);
    document.getElementById("div1").innerHTML = "difference between date is " +
    difference + " days.";
    }
    </script>
    <form>
    <input type="date" id="datebox1"><br>
    <input type="date" id="datebox2"><br>
    <input type="button" onclick="date_difference()" value="difference"><br><br>
    <div id="div1"></div>
    </form>
    </body>
    </html>
  4. Write a JavaScript program to calculate age from birth date.
    <html>
    <head>
    <h2 style="color:green;">Que 12: Write a JavaScript program to calculate age from birth
    date.</h2>
    </head>
    <body>
    <script>
    function age()
    {
    var d=new Date(date.value);
    var m = Date.now() - d.getTime();
    var dt = new Date(m);
    var y = dt.getUTCFullYear();
    var a = Math.abs(y - 1970);
    document.getElementById("txtR").value = a + " years";
    }
    </script>
    <form name="f1">
    Date :<input type="text" placeholder="MM/DD/YYYY" id="date"><br><br>
    <input type="button" value="Age" onclick="age()"><br><br>
    Age :<input type="text" id="txtR">
    </form>
    </body>
    </html>
  5. Write a program to find the largest of five numbers. Display an alert box to show the
    result.
    <html>
    <head>
    <h2 style="color:green;">Que 13: Write a program to find the largest of five numbers.
    Display an alert box to show the result.</h2>
    </head>
    <body>
    <script>
    function array_max(temp)
    {
    var arr = temp.split(',');
    var largest = arr[0];
    for(var i=0;i<arr.length;i++)
    {
    if(largest<arr[i])
    {
    largest = arr[i];
    }
    }
    alert("largest of five numbers is:"+ largest);
    }
    </script>
    <form>
    Enter Array :<input type="text" placeholder="Enter array elements"
    id="text"><br><br>
    <input type="button" onclick="array_max(text.value)" class="btn"
    value="Result">
    <div id="Result"></div>
    </form>
    </body>
    </html>
  6. Write a program to compute the sum of an array of integers.
    <html>
    <head>
    <h2 style="color:green;">Que 14: Write a program to compute the sum of an array of
    integers.</h2>
    </head>
    <body>
    <script>
    function sum(temp)
    {
    let arr = temp.split(',');
    let sum = arr.reduce(function(a,b)
    {return parseInt(a)+parseInt(b)},0);
    alert("sum of array element is:"+ sum);
    }
    </script>
    <form>
    Enter Array :<input type="text" placeholder="Enter array elements"
    id="text"><br><br>
    <input type="button" onclick="sum(text.value)" class="btn" value="Add">
    <div id="Result"></div>
    </form>
    </body>
    </html>
  7. Write a program for binary search.
    <html>
    <head>
    <h2 style="color:green;">Que 15: Write a program for binary search.</h2>
    </head>
    <body>
    <script>
    var i = 0;
    var array = Array();
    function add()
    {
    array[i] = document.getElementById("text1").value;
    i++;
    document.getElementById("text1").value = "";
    }
    function display()
    {
    var e = "<hr/>";
    for (var i=0;i<array.length;i++)
    {
    e += "Element " + i + " = " + array[i] + "<br/>";
    }
    document.getElementById("Result").innerHTML = e;
    }
    function search()
    {
    var x=prompt("Enter the Number: ");
    var e = "<hr/>";
    var f = 0;
    var l = array.length-1;
    var m = Math.floor((f+l)/2);
    if(array[m]!=x && f<l)
    {
    if(x<array[m])
    {
    l=m-1;
    }
    else if(x>array[m])
    {
    f=m+1;
    }
    m = Math.floor((f+l)/2);
    }
    let res = (array[m]!=x) ? -1 : m;
    e += Index of your element : ${res}.;
    document.getElementById("Result").innerHTML = e;
    }
    </script>
    <form>
    Enter Number: <input type="text" placeholder="Enter Number" id="text1"><br>
    <input type="button" class="btn" value="Add" onclick="add()"><br>
    <input type="button" class="btn" value="Display" onclick="display()"><br>
    <input type="button" class="btn" value="click here" onclick="search()">
    <div id="Result"></div>
    </form>
    </body>
    </html>
  8. Write a merge sort program.
    <html>
    <head>
    <h2 style="color:green;">Que 16: Write a merge sort program.</h2>
    </head>
    <body>
    <script>
    var i = 0;
    var arr = Array();
    function add()
    {
    arr[i] = document.getElementById("text1").value;
    i++;
    document.getElementById("text1").value = "";
    }
    function display()
    {
    var e = "<hr/>";
    for (var i=0;i<arr.length;i++)
    {
    e += "Element " + i + " = " + arr[i] + "<br/>";
    }
    document.getElementById("Result").innerHTML = e;
    }
    function mSort(array)
    {
    if(array.length===1)
    {
    return array
    }
    const m = Math.floor(array.length/2)
    const l = array.slice(0,m)
    const r = array.slice(m)
    return merge(mSort(l),mSort(r))
    }
    function merge(l, r)
    {
    var res = [];
    var l1 = 0;
    var r1 = 0;
    while(l1<l.length && r1<r.length)
    {
    if(l[l1]<r[r1])
    {
    res.push(l[l1]);
    l1++;
    }
    else
    {
    res.push(r[r1]);
    r1++;
    } }
    return res.concat(l.slice(l1).concat(r.slice(r1)));
    }
    function mergeSort()
    {
    var a = Array();
    var ans = mSort(arr);
    document.getElementById("Result").innerHTML = "<hr/>
    SORTED LIST: " + ans;
    }
    </script>
    <form>
    Enter Number: <input type="text" placeholder="Enter Number" id="text1">
    <input type="button" class="btn" value="Add" onclick="add()">
    <input type="button" class="btn" value="Display" onclick="display()">
    <input type="button" class="btn" value="click here" onclick="mergeSort()">
    <div id="Result"></div>
    </form>
    </body>
    </html>
  9. Write a program to join all elements of the given array into a string using given delimeter.
    Input array : myArr = ["str1", " str2", " str3"]; Output : "str1, str2, str3" OR " str1+ str2+str3"
    <html>
    <head>
    <h2 style="color:green;">Que 17:Write a program to join all elements of the
    given array into a string using given delimeter.<br>
    Input array : myArr = ["str1", " str2", " str3"]; <br>Output : "str1, str2, str3"
    <br>OR<br> " str1+ str2+str3"</h2>
    </head>
    <body>
    <script>
    var i = 0;
    var array = Array();
    function add()
    {
    array[i] = document.getElementById("text1").value;
    i++;
    document.getElementById("text1").value = "";
    }
    function display()
    {
    var e = "<hr/>";
    for (var i=0;i<array.length;i++)
    {
    e += "Element " + i + " = " + array[i] + "<br/>";
    }
    document.getElementById("Result").innerHTML = e;
    }
    function res()
    {
    var e = "<hr/>";
    var del = prompt("Enter delimeter: ");
    document.getElementById("Result").innerHTML = e +
    array.join(del);
    }
    </script>
    <form>
    Enter String: <input type="text" placeholder="Enter String" id="text1"><br>
    <input type="button" class="btn" value="Add" onclick="add()"><br>
    <input type="button" class="btn" value="Display" onclick="display()"><br>
    <input type="button" class="btn" value="String" onclick="res()"><br>
    <div id="Result"></div>
    </form>
    </body>
    </html>
  10. Write a program to convert string to array. (Reverse of above program)
    <html>
    <head>
    <meta charset="utf-8"/>
    </head>
    <body>
    <h2 style="color:green;"> Que 9: Decompose parts of input URL.e.g.<br>
    Input: http://www.google.com/page1.html<br>
    Output: <br>
    Protocol: http<br>
    Domain: www.google.com<br>
    Page: page1<br>
    Extension: html<br></h2>
    <script language="javascript">
    var url = prompt("enter url - ", "http://www.google.com/page1.html");
    Protocol = url.split(":");
    document.write("Protocol - " + Protocol[0]);
    Domain = Protocol[1].split("/");
    document.write("<br>Domain - " + Domain[2]);
    Page = Domain[3].split(".");
    document.write("<br>Page - " + Page[0]);
    Extension = Page[1];
    document.write("<br>Extension - " + Extension);
    </script>
    </body>
    </html>
  11. Decompose parts of input URL.
    e.g.
    Input: http://www.google.com/page1.html
    Output:
    Protocol: http
    Domain: www.google.com
    Page: page1
    Extension: html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Document</title>
    <script>
    function url()
    {
    var url = document.getElementById("u1").value.split(":")
    var str = "Protocol : " + url[0] + "<br/>"
    var b = url[1].split("/")
    str += "Domain : " + b[2] + "<br/>"

var c = b[3].split(".")
str += "Page : " + c[0]+ "<br/>"
str += "Extension : " + c[1]
document.getElementById("url").innerHTML = str
}
</script>
</head>
<body>
<form>
Enter URL : <input type="text" id="u1"><br>
<input type="button" value="Click" onclick="url()">
</form>
<div id="url">
</div>
</body>
</html>

  1. Write a JavaScript function to get the value of the all the attributes( href, hreflang, rel,
    target, and type attributes) of the specified hyperlink and image.
    <html>
    <head>
    <h2 style="color:green;">Write a JavaScript function to get the value of the all the
    attributes( href, hreflang, rel, target, and type attributes)
    of the specified hyperlink and image.</h2>
    </head>
    <body>
    <script>
    function att() {
    var link = document.getElementById("link");
    if(link.hasAttributes())
    {
    var a = link.attributes;
    var r = "";
    for(var i=a.length-1;i>=0;i--) {
    r+=a[i].name + " = " + a[i].value + "<br>";
    }
    document.getElementById("div1").innerHTML = r;
    }
    else
    {
    document.getElementById("div1").innerHTML = "No attributes";
    } }
    </script>
    <a id="link" href="http://google.com" target="_blank" rel="noopener noreferrer"
    hreflang="english" type="media_type"></a>
    <form action="">
    <p>
    <input type="button" value="click here" onclick="att()">
    </p>
    </form>
    <div id=div1></div>
    </body>
    </html>
  2. Write a JavaScript function to add rows to a table.
    <html>
    <head>
    <h2 style="color:green;">Que 21: Write a JavaScript function to add rows to a table.</h2>
    </head>
    <body>
    <script>
    function add()
    {
    var t = document.getElementById("table1");
    var r = t.insertRow(3);
    var c1 = r.insertCell(0);
    var c2 = r.insertCell(1);
    c1.innerHTML = " ";
    c2.innerHTML = " ";
    }
    </script>
    <table id="table1" border="1">
    <tr>
    <th>Team Name</th>
    <th>Captain</th>
    </tr>
    <tr>
    <td>chennnai super kings</td>
    <td>M.S. Dhoni</td>
    </tr>
    <tr>
    <td>Mumbai indians</td>
    <td>Rohit sharma</td>
    </tr>
    </table>
    <input type="button" onclick="add()" value="Add">
    </body>
    </html>
  3. Write a program to count and display all H1 elements on the document.
    <html>
    <head>
    <h2 style="color:green;">Que 22: Write a program to count and display all H1 elements
    on the document.</h2>

</head>
<body>
<script>
function H1() {
var result = document.getElementsByTagName("h1");
document.getElementById("div1").innerHTML = "no of h1 tags : " + result.length +
"<br>";
for (var i = 0; i < result.length; i++) {
document.getElementById("div1").innerHTML +=
result[i].childNodes[0].nodeValue + "<br><br>";
}
}
</script>
<h1>H1 - (hello Good morning Everybody!!!)</h1>
<h3>H3 - (I am your tribal chief.)</h3>
<h1>H1 - (Roman Reigns)</h1>
<input type="button" onclick="H1()" value="Count & Display <h1> tags"><br><br>
<div id="div1"></div>
</body>
</html>

  1. Write a program to change color of all paragraphs as per input given in text box.
    <html>
    <head>
    <h2 style="color:green;">
    Que 23: Write a program to change color of all paragraphs as per input given in text
    box.</h2>
    </head>
    <body>
    <script>
    function change_colour(){
    var text=document.getElementsByTagName("P");
    var color=document.getElementById("color").value;
    for(var i=0;i<text.length;i++)
    {
    text[i].style.color=color;
    }
    }
    </script>
    <h1>Good morning!!</h1>
    <p>this is text.</p>
    <p>this is lesson.</p>
    <h3>How are you?</h3>
    <p>this is text</p>
    <h3>Good night!!</h3>
    <form>
    <input type="color" placeholder="Enter color" id="color"
    oninput="change_colour()">
    </form>
    </body>
    </html>
  2. Write a program to change dimensions (height and width) of the image as per input
    given in text boxes
    <html>
    <head>
    <h2 style="color:green;">
    Que 24: Write a program to change dimensions (height and width) of the image as per
    input given in text boxes.
    </h2>

</head>
<body>
<script>
function image() {
document.getElementById("img").style.height =
document.getElementById("textbox1").value;
document.getElementById("img").style.width =
document.getElementById("textbox2").value;
}
</script>
<form>
<input type="textbox" id="textbox1" placeholder="Height of image"
oninput="image()">
<input type="textbox" id="textbox2" placeholder="Width of image"
oninput="image()">
<img src="roman.jpg" id="img">
<div id="div1"></div>
</form>
</body>
</html>

  1. Write a program to display all the elements(textbox, radio etc.) of a form along with
    their values.
    <html>
    <head>
    <h2 style="color:green;">
    Que 25:Write a program to display all the elements(textbox, radio etc.) of a form along
    with their values.</h2>
    </head>
    <body>
    <script>
    function f1(){
    var form=document.forms[0];
    for(var i=0;i<form.elements.length;i++)
    {
    document.getElementById("div1").innerHTML += "child node is "+
    form.elements[i].nodeName;
    switch(i+1)
    {
    case 1:
    document.getElementById("div1").innerHTML += "text";
    break;
    case 2:
    document.getElementById("div1").innerHTML += "checkbox";
    break;
    case 3:
    document.getElementById("div1").innerHTML += "checkbox";
    break;
    case 4:
    document.getElementById("div1").innerHTML += "button";
    break;
    }
    document.getElementById("div1").innerHTML += "node and value is
    "+form.elements[i].value+"<br>";
    }
    }
    </script>
    <form>
    <input type="text" id="name" placeholder="Enter Name"><br>
    select activity :<br>
    <input type="checkbox" id="check1" value="cricket">cricket<br>
    <input type="checkbox" id="check2" value="chess">chess<br>
    <input type="button" value="click here" onclick="f1()">
    </form>
    <div id="div1"></div>
    </body>
    </html>
  2. Write a program to count and display the items of a dropdown list, in an alert window.
    <html>
    <head>
    <h2 style="color:green;">
    Que 26: Write a program to count and display the items of a dropdown list, in an alert
    window.</h2>
    </head>
    <body>
    <script>
    function output()
    {
    var x = document.getElementById("Select");
    var txt = "count: ";
    var l = document.getElementById("Select").length;
    txt += l;
    for(i=0;i<l;i++)
    {
    txt += "\n" + x.options[i].text;
    }
    alert(txt);
    }
    </script>
    <form id="myForm">
    <table>
    <tr>
    <td>
    <select id="Select">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
    <option>Four</option>
    <option>Five</option>
    <option>Six</option>
    </select>
    </td>
    </tr>
    <tr>
    <td>
    <input type="button" onclick="output()" value="Count"></td>
    </tr>
    </table>
    </form>
    </body>
    </html>
  3. Write a program to populate a combo using given array elements.
    <html>
    <head>
    <h2 style="color:green;">
    Que 27: Write a program to populate a combo using given array elements.</h2>
    </head>
    <body>
    <script type="text/javascript">
    var a = new Array("india", "australia");
    function Combo() {
    var str = document.getElementById("text").value;
    var arr = str.split(",");
    country.options[0] = new Option("");
    for(var i=0;i<a.length;i++) {
    country.options[i + 1] = new Option(a[i], a[i]);
    }
    for(var j=0;j<arr.length;j++) {
    country.options[i + 1] = new Option(arr[j], arr[j]);
    i++;
    } }
    </script>

<form id="myForm">
<table>
<tr>
<td>Countries : </td>
<td>
<input type="text" placeholder="Enter country" id="text" size="50px">.
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" onclick="Combo()" value="Click here">
</td>
</tr>
</table>
<div>
<br><br>
<hr>
Select country :
<select id="country" onchange="alert(this.value)" name="country">
</select>
</div>
</form>
</body>
</html>

  1. Write a JavaScript program to get the width and height of the window (any time the
    window is resized).
    <html>
    <head>
    <h2 style="color:green;">
    Que 28: Write a JavaScript program to get the width and height of the window (any
    time the window is resized).</h2>
    </head>
    <body>
    <script>
    window.addEventListener("load",function(){
    document.getElementById("div1").innerHTML = "window size" +" "+ window.innerWidth
    +" "+window.innerHeight;
    })
    window.addEventListener("resize", function(){
    document.getElementById("div1").innerHTML = "window resize" +" "+
    window.innerWidth +" "+window.innerHeight;}
    </script>
    <div id="div1"></div>
    </body>
    </html>
  2. Validate a form using JavaScript. Display error message in red color. If no errors, show
    success message in green color. Form should contain following fields.
    Name (should not be blank), age (15 to 20), gender (required field).
    <html>
    <head>
    <h2 style="color:green;">

Que 29:Validate a form using JavaScript. Display error message in red color.
If no errors, show success message in green color. Form should contain following
fields.
</h2>
</head>
<body bgcolor="#AEEEDB">
<script>
function vf()
{
var name = document.forms["f1"]["name"];
var age = document.forms["f1"]["age"];
var gender = document.forms["f1"]["gender"];
if(name.value"")
{
document.getElementById("error").innerHTML = "Pls Enter Name!";
name.focus();
return false;
}
if(age.value
"")
{
document.getElementById("error").innerHTML = "Pls Enter Age!";
age.focus();
return false;
}
if(gender.value=="")
{
document.getElementById("error").innerHTML = "Pls Select Gender!";
return false;
}
document.getElementById("error").style.color = "green";
document.getElementById("error").innerHTML = "Form Submitted Successfully!!";
document.getElementById("showData").innerHTML = "Name : " + name.value + "<br>" +
"Age : " + age.value + "<br>" + "Gender : " + gender.value + "<br>";
return false;
}
</script>
<h1>REGISTRATION FORM</h1>
<div id="error" style="color: rgb(255, 140, 8);"></div>
<form name="f1" onsubmit="return vf()" method="post">
<table>
<tr>
<td >Name : </td>
<td><input type="text" name="name" size=35></td>
</tr>
<tr>
<td >Age : </td>
<td><input type="number" min="15" max="20"
step="1" name="age" id="n1" pattern="\d+"></td>
</tr>
<tr>
<td >Gender : </td>
<td>
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Female
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit" name="Submit">
<input type="reset" value="Reset" name="Reset">
</td>
</tr>
</table>
</form>
<hr>
<div id="showData" style="color: rgb(0, 0, 0);"></div>
</body>
</html>

Edit

Pub: 23 Jan 2023 03:50 UTC

Views: 49