[HTML+CSS+JAVASCRIPT] QUESTIONS
1. Write a JavaScript code to design and implement
Soln.
<!DOCTYPE html>
<html>
<head>
<title>Palindrome Checker</title>
<style>
div
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
</style>
<script>
function checkPalindrome()
{
let str=[Link]("inp").value;
let reversed=[Link]("").reverse().join("");
if(str==reversed)
[Link]("result").innerText="Palindrome";
else
[Link]("result").innerText="Not a Palindrome";
</script>
</head>
<body>
<div><h2>Palindrome Checker</h2></div>
<div style="display:flex; flex-direction:row; gap:10px;">
<input type="text" id="inp" placeholder="Enter text" >
<button onclick="checkPalindrome()">Check</button></div>
<div><p id="result"></p></div>
</body>
</html>
2. Write a JavaScript code to design and implement
Soln.
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<style>
body{
display:flex;
flex-direction:column;
align-items:center;
</style>
<script>
function validate(action){
let un=[Link]("username").value;
let c=1;
if([Link]('@') === -1)
alert("username must contain '@' ");
c=0;
}
if([Link]<12 || [Link]>20)
alert("username must be 12 to 20 characters");
c=0;
if([Link]('.')<[Link]('@'))
alert("Dot '.' must not be before @ ");
c=0;
if([Link]('.')===[Link]-1)
alert("Dot '.' must not be the end of username ");
c=0;
let pw=[Link]("pw").value;
if([Link]<8 || [Link]>16)
alert("password must be 8 to 16 characters");
c=0;
if(!/[0-9]/.test(pw))
{
alert("Password must contain atleast 1 no.");
c=0;
if(!/[!@#$^*&%]/.test(pw))
alert("Password must contain atleast 1 special character ");
c=0;
if(/\s/.test(pw))
alert("Password must not contain spaces.");
c=0;
if(c===1)
if(action=="login")
alert("Login successfully.");
if(action=="signup")
alert("Signing up.");
</script>
</head>
<body>
<h2>LOGIN</h2>
<Label style="margin-bottom:5px">USERNAME</Label>
<input type="text" id="username" placeholder="Enter your email id">
<br>
<Label style="margin-bottom:5px;">PASSWORD</Label>
<input type="password" id="pw" placeholder="Enter your Password">
<br>
<div>
<button onclick="validate('login')">Login</button>
<button onclick="validate('signup')">Sign Up</button>
</div>
</body>
</html>
3. Design following form and perform validation as text boxes should accept positive numbers only and
cannot be empty.:
Soln.
<!DOCTYPE html>
<html>
<head>
<title>Area of Rectange</title>
<style>
body{
display:flex;
align-items:center;
flex-direction:column;
</style>
<script>
function calculate()
let l = Number([Link]("len").value);
let b = Number([Link]("br").value);
if(l<=0 || b<=0)
alert("Give valid(+ve) values in input fields");
return;
[Link]("area").value=l*b;
</script>
</head>
<body>
<h2> Calculate Area of Rectangle</h2>
<br>
<div>
<Label>Length: </Label>
<input type="text" id="len" placeholder="Enter the length of rectangle">
</div>
<br>
<div>
<Label>Breadth: </Label>
<input type="text" id="br" placeholder="Enter the breadth of rectangle">
</div>
<br>
<div>
<Label>Area of Rectangle:</Label>
<input type="text" disabled id="area">
</div>
<br>
<button onclick="calculate()">Calculate</button>
</body>
</html>
4. Design the following page and ensure proper functioning. Clicking on button will display the
result in popup box.
Soln.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<style>
#container
position:relative;
left:200px;
top:100px;
height:500px;
width:850px;
border:2px black solid;
#thumbnail
{
color:white;
position:absolute;
background:url('[Link]') right / cover no-repeat;
height:500px;
width:400px;
#thumb-text
position:absolute;
bottom:30px;
left:50px;
color:white;
font-size:22px;
#form
position:absolute;
left:450px;
height:500px;
width:400px;
</style>
<script>
function register(){
let em=[Link]('email').value;
let p=[Link]('pass').value;
let cp=[Link]('copass').value;
let c=1;
if([Link]('@') === -1)
alert("Email must contain '@' ");
c=0;
if([Link]<12 || [Link]>20)
alert("Email must be 12 to 20 characters");
c=0;
if([Link]('.')<[Link]('@'))
alert("Dot '.' must not be before @ ");
c=0;
if([Link]('.')===[Link]-1)
alert("Dot '.' must not be the end of email ");
c=0;
if([Link]<8 || [Link]>16)
alert("password must be 8 to 16 characters");
c=0;
if(!/[0-9]/.test(p))
alert("Password must contain atleast 1 no.");
c=0;
if(!/[!@#$^*&%]/.test(p))
alert("Password must contain atleast 1 special character ");
c=0;
if(/\s/.test(p))
alert("Password must not contain spaces.");
c=0;
if(p!==cp)
alert('Incorrect password. Reconfirm');
c=0;
if(.checked)
{
alert('Agree to Terms of Service.');
c=0;
if(c==1)
alert('Registered successfully.');
</script>
</head>
<body>
<div id="container">
<div id="thumbnail">
<div id="thumb-text">
<pre>Bring Your Music Along
try Unlimited
$9.99/month</pre>
</div>
</div>
<div id="form">
<h2>Registration Form</h3>
<h4>Full name</h4>
<input type="text" id="fn" required placeholder="ex:Lindsey Wilson">
<h4>Your email</h4>
<input type="text" required id="email">
<h4>Password</h4>
<input type="password" required id="pass">
<h4>Confirm Password</h4>
<input type="password" required id="copass">
<br><br>
<input type="checkbox" required id="sub" >
<label for="sub">By signing up,you agree to <a href="[Link]">Play's Term of Service</a>
</label>
<br><br>
<button onclick="register()">Register</button>
</div>
</div>
</body>
</html>
5. A cloth showroom has announced the following festival discounts on the purchase of items,
based on the total cost of the items purchased: -
Total Cost Discount (in %)
Less than Rs. 3000 5%
Rs 3001 to Rs. 5000 20%
Rs. 5001 to Rs 10000 35%
Above 10000 50%
Design a form/web page and add funtionality to input the total cost and to compute and display
the amount to be paid by the customer after availing the discount.
Soln.
<!DOCTYPE html>
<html>
<head>
<title>Cloth Showroom Sale</title>
<style>
body
display:flex;
flex-direction:column;
align-items:center;
table{
background-color:cyan;
font-size:20px;
border:2px black solid;
border-collapse:collapse;
td,th{
border:1px black solid;
padding:10px 30px 10px 30px;
</style>
<script>
function calculate()
let cost=Number([Link]('cost').value);
let dis;
if(cost <= 3000){
dis = cost * 0.05;
else if(cost <= 5000){
dis = cost * 0.20;
else if(cost <= 10000){
dis = cost * 0.35;
else{
dis = cost * 0.50;
let net=cost-dis;
[Link]('d').value=dis;
[Link]('netamt').value=net;
</script>
</head>
<body>
<h2 style="color:orange;">Cloth Showroom Sale!!!!</h2>
<caption><h3> Discount Slab</h3></caption>
<table>
<tr><th>Total cost</th><th>Discount(in%)</th></tr>
<tr><td>Less Than Rs. 3000</td><td>5%</td></tr>
<tr><td>Rs. 3001 to 5000</td><td>20%</td></tr>
<tr><td>Rs. 5001 to 10000</td><td>35%</td></tr>
<tr><td>Above Rs. 10000</td><td>50%</td></tr>
</table>
<br><br>
<label>Total Cost of Purchase:</label>
<input type="text" id="cost">
<br>
<label>Discount (in Rs.) applied:</label>
<input type="text" id="d" disabled>
<br>
<label>Net amount to be paid:</label>
<input type="text" id="netamt" disabled>
<br>
<button onclick="calculate()">Calculate Discount</button>
</body>
</html>