WP Practical Sample Questions Solutions

SAMPLE Questions
HTML and CSS

Write a HTML program to design a form which should allow to enter your personal data(Name,
Date of Birth, Address, Email ID, Contact Details) with data validations.
Write a HTML code to generate following output.
<!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>
<table border="5">
<tr>
<th>Country</th>
<th colspan="2">Population(In Crores)</th>
</tr>
<tr>
<th rowspan="3">India</th>
<td>1998</td>
<td>85</td>
</tr>
<tr>
<td>1999</td>
<td>90</td>
</tr>
<tr>
<td>2000</td>
<td>100</td>
</tr>
<tr>
<th rowspan="3">USA</th>
<td>1998</td>
<td>30</td>
</tr>
<tr>
<td>1999</td>
<td>35</td>
</tr>
<tr>
<td>2000</td>
<td>40</td>
</tr>
<tr>
<th rowspan="3">UK</th>
<td>1998</td>
<td>25</td>
</tr>
<tr>
<td>1999</td>
<td>30</td>
</tr>
<tr>
<td>2000</td>
<td>35</td>
</tr>
</table>
</body>
</html>
Write a HTML/CSS code to generate the following output(with validations):

Design an html form to take the information of an article to be uploaded such as file path, author
name, type (technical, literary, general), subject topic (to be selected from a list) etc. One should
provide button to Submit as well as Reset the form contents.
Write a HTML/CSS code that changes the background-color to lightgreen if the viewport is 480
pixels wide or wider . (Hint : Use media Query)
Write a HTML/CSS code that changes screens that are 992px wide or less from four columns to
two columns. (Hint : Use media Query)
Write an HTML code to generate the following output (Validate zip code to not accept more than
6 digits)
Write a HTML Code to generate the following output( Validate password to contain at least 8
characters and one letter should be capital):
Write a HTML code to generate the following output (Validate the password to contain at least 8
characters and one special character):
Write HTML/CSS code to generate the following Output:

JAVASCRIPT
1. Write a JavaScript for loop that iterates from 0 to 15. For each iteration, it checks if the
current number is odd or even, and displays a message on the screen.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
for(let i=0;i<=15;i++)
{
if(i%2==0) console.log("Even");
else console.log("Odd");
}
</script>
</body>
</html>
2. Write a JavaScript conditional statement to find the sign of the product of three numbers.
Display an alert box with the specified sign.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
function findProductSign(a,b,c)
{
let p=a*b*c;
if(p>0) alert("Sign of product is +ve");
else if(p<0) alert("Sign of product is -ve");
else alert("Product is zero");
}
findProductSign(-2,-5,6);
findProductSign(2,5,-6);
findProductSign(-2,0,6);
findProductSign(-2,-5,-6);
</script>
</body>
</html>
3. Write a JavaScript program that displays the largest integer among two integers.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
function largest(n1,n2)
{
if(n1>n2) alert(n1+" is the large among both numbers");
else alert(n2+" is the large among both numbers");
}
let n1=prompt("Enter integer 1 : ");
let n2=prompt("Enter integer 2 : ");
largest(n1,n2);
</script>
</body>
</html>
4. Write a JavaScript program to create a dropdown menu that shows and hides its options
when clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#complete
{
height:700px;
display:flex;
flex-direction: column;
justify-content:center;
align-items: center;
}
#btn
{
border-radius:12px;
cursor: pointer;
}
#List
{
display:none;
}
</style>
</head>
<body bgcolor="orange">
<div id="complete">
<button id="btn" onclick="run()">Click here to open the list</button>
<div id="List">
<ol>
<li class="items">Mango</li>
<li class="items">Banana</li>
<li class="items">Cherry</li>
<li class="items">Pine apple</li>
<li class="items">Kiwi</li>
</ol>
</div>
</div>
<script>
let a = document.getElementById('btn');
let b = document.getElementById('List');
function run()
{
if(b.style.display=='none')
{
b.style.display='block';
}
else
{
b.style.display='none';
}
}
</script>
</body>
</html>
5. Write a JavaScript program that implements a "form" validation that displays an error
message if a required field is left empty when submitting the form.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.form
{
height:750px;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.input
{
display: block;
margin : 10px;
}
</style>
</head>
<body bgcolor="pink">
<div id="complete">
<form action="" class="form">
<input type="text" name="" class="input" id="name" placeholder="Name"
>
<input type="email" name="" class="input" id="email"
placeholder="Email" >
<input type="password" name="" class="input" id="pass"
placeholder="Password" >
<input type="submit" value="Submit" onclick="run()">
</form>
</div>
<script>
function run()
{
let n = document.getElementById('name').value;
let e = document.getElementById('email').value;
let p = document.getElementById('pass').value;
if(n.length==0 || e.length==0 || p.length==0)
{
alert("Please Enter all the required details");
}
else
{
alert("data stored successfully");
}
}
</script>
</body>
</html>
6. Write a JavaScript function that changes the background color of an element when a
mouse enters it.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
background-color: orange;
}
#container{
height:200px;
width:200px;
border:3px solid black;
border-radius:12px;
background-color: aqua;
display:flex;
justify-content: center;
align-items:center;
margin: 300px auto;
padding: 20px;
}
</style>
</head>
<body id="bg">
<div id="container">
<div id="changer">Hover the mouse here to change the background-
color</div>
</div>
<script>
let b = document.getElementById('bg');
let a = document.getElementById('container');
a.addEventListener('mouseover',function run(){
b.style.backgroundColor= 'green';
})
a.addEventListener('mouseout',function run(){
b.style.backgroundColor= 'orange';
})
</script>
</body>
</html>
7. Write a JavaScript function to validate whether a given value type is an error or not.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
function isError(value)
{
if(value instanceof Error) alert("Error");
else alert("Not an error");
}
const s1 = new Error("This is an errored statement");
const s2= "Not an Errored statement";
isError(s1);
isError(s2);
</script>
</body>
</html>
8. Write a JavaScript function to validate whether a given value type is NaN or not.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
function validate(n)
{
if(isNaN(n)) alert("Not a Number");
else alert("It is a number");
}
const a = prompt("Enter to perform Validation of NaN or not");
validate(a);
</script>
</body>
</html>
9. Write a JavaScript program where the program takes a random integer between 1 to 10,
the user is then prompted to input a guess number. If the user input matches with guess
number, the program will display a message "Good Work" otherwise display a message
"Not matched".
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
alert("Enter the no. between 1-10");
const cn = 7;
let n =prompt("Enter the number : ");
if(n==cn) alert("Good Work");
else alert("Not matched");
</script>
</body>
</html>
10. Write a JavaScript program to convert temperatures to and from Celsius, Fahrenheit. [
Formula : c/5 = (f-32)/9 [ where c = temperature in Celsius and f = temperature in
Fahrenheit ] Expected Output :
60°C is 140 °F
45°F is 7.222222222222222°C
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
let con1 = (a)=>
{
return ((9*a)/5)+32;
}
let con2 = (a)=>
{
return ((a-32)/9)*5;
}
let c1=60;
let f2=45;
const f1=con1(c1);
const c2=con2(f2);
alert(c1+"C is "+f1+"F\n"+f2+"F is "+c2+"C");
</script>
</body>
</html>
11. Write a JavaScript program to check from two given integers, whether one is positive and
another one is negative.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
function test(n1,n2)
{
if(n1>0)
{
if(n2<0) alert("Test passed");
else alert("Test Failed");
}
else if(n1<0)
{
if(n2>0) alert("Test passed");
}
}
let a = prompt("Enter no. 1: ");
let b = prompt("Enter no. 2: ");
test(a,b);
</script>
</body>
</html>
12. Write a JavaScript program to check whether a given positive number is a multiple of 3
or a multiple of 7.
13. <!DOCTYPE html>
14. <html lang="en">
15. <head>
16. <meta charset="UTF-8">
17. <meta name="viewport" content="width=device-width, initial-
scale=1.0">
18. <title>Document</title>
19. </head>
20. <body>
21. <script>
22. function check(n)
23. {
24. if(n%3==0 || n%7==0) alert("Given integer is multiple of
3 or 7");
25. else alert("Given integer is not a multiple of 3 or 7");
26. }
27. let a=prompt("Enter the no. : ");
28. check(a);
29. </script>
30. </body>
31. </html>

WP Practical Sample Questions Solutions

Uploaded by

Document Information

Original Description:

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

WP Practical Sample Questions Solutions

Uploaded by

Copyright:

Available Formats

SAMPLE Questions

HTML and CSS

Write a HTML/CSS code to generate the following output(with validations):

Write HTML/CSS code to generate the following Output:

You might also like