[go: up one dir, main page]
Scribd
Upload
80 views16 pages

WP Practical Sample Questions Solutions

The document contains questions related to HTML, CSS and JavaScript. For HTML/CSS questions, it asks to write code to generate specific output related to forms, tables, media queries etc. For JavaScript questions, it asks to write code for common tasks like loops, conditionals, functions for validation, error handling etc. Overall, the document tests skills in HTML/CSS page layout and formatting and JavaScript programming concepts.

Uploaded by

meetttp1210
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
80 views16 pages

WP Practical Sample Questions Solutions

The document contains questions related to HTML, CSS and JavaScript. For HTML/CSS questions, it asks to write code to generate specific output related to forms, tables, media queries etc. For JavaScript questions, it asks to write code for common tasks like loops, conditionals, functions for validation, error handling etc. Overall, the document tests skills in HTML/CSS page layout and formatting and JavaScript programming concepts.

Uploaded by

meetttp1210
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/ 16

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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</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");
else alert("Test Failed");
}
else alert("Test Failed");
}
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>

You might also like