Cheat Sheet

GROUP B
Q1 Design a web page that contains two fields and four radio buttons Addition,
Subtraction,Division, Multiplication and Submit Button. Write code to implement calculator using
jsp
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body>
<h2>Calculator</h2>
<form action="calculate.jsp" method="post">
<label for="num1">Number 1:</label>
<input type="text" name="num1" id="num1" required><br><br>

<input type="text" name="num2" id="num2" required><br><br>
<label>Operation:</label><br>
<input type="radio" name="operation" value="addition" required> Addition<br>
<input type="radio" name="operation" value="subtraction"> Subtraction<br>
<input type="radio" name="operation" value="division"> Division<br>
<input type="radio" name="operation" value="multiplication">
Multiplication<br><br>
<input type="submit" value="Calculate">

</form>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body>
<h2>Result</h2>
<%-- Retrieve form data --%>
<% String num1Str = request.getParameter("num1");
String num2Str = request.getParameter("num2");
String operation = request.getParameter("operation");
// Convert form data to numbers
double num1 = Double.parseDouble(num1Str);
double num2 = Double.parseDouble(num2Str);
// Perform the selected operation

double result = 0.0;
if (operation.equals("addition")) {
result = num1 + num2;
} else if (operation.equals("subtraction")) {
result = num1 - num2;
} else if (operation.equals("division")) {
result = num1 / num2;
} else if (operation.equals("multiplication")) {
result = num1 * num2;
}
%>
<p>Number 1: <%= num1 %></p>
<p>Number 2: <%= num2 %></p>
<p>Operation: <%= operation %></p>
<p>Result: <%= result %></p>
</body>
</html>
Q2 Design a web page that contains two fields and four radio buttons Addition, Subtraction,
Division, Multiplication and Submit Button. Write code to implement calculator using Servlet
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body>
<h1>Calculator</h1>
<form action="calculatorServlet" method="post">
<input type="text" id="num1" name="num1" required><br><br>

<input type="text" id="num2" name="num2" required><br><br>
<input type="radio" id="addition" name="operation" value="addition" required>

<label for="addition">Addition</label><br>
<input type="radio" id="subtraction" name="operation" value="subtraction">

<label for="subtraction">Subtraction</label><br>
<input type="radio" id="division" name="operation" value="division">

<label for="division">Division</label><br>
<input type="radio" id="multiplication" name="operation" value="multiplication">

<label for="multiplication">Multiplication</label><br><br>
<input type="submit" value="Calculate">

</form>
</body>
</html>
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CalculatorServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
int num1 = Integer.parseInt(request.getParameter("num1"));
int num2 = Integer.parseInt(request.getParameter("num2"));
String operation = request.getParameter("operation");
int result = 0;
switch (operation) {
case "addition":
result = num1 + num2;
break;
case "subtraction":
result = num1 - num2;
break;
case "division":
if (num2 != 0) {
result = num1 / num2;
} else {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<h3>Error: Division by zero is not allowed.</h3>");
return;
}
break;
case "multiplication":
result = num1 * num2;
break;
}
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<h3>Result: " + result + "</h3>");
}
}
Q3 Design a web application using JSP that takes name, user name, password and age from
an HTML page. When submit button is pressed it displays the following message:
i) WelCome <name>...!! You are eligible for UG course (if user name & password matches and
age>18)
ii) Welcome <name>...!! You are not eligible for UG course (if user name & password matches
and age<18)
iii) You are not a registered student here (if user name & password do not matche (In this
application check hardcoded information.)
<!DOCTYPE html>
<html>
<head>
<title>UG Course Application</title>
</head>
<body>
<h1>UG Course Application</h1>
<form action="checkEligibility.jsp" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" required><br><br>
<input type="submit" value="Submit">

</form>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Eligibility Result</title>
</head>
<body>
<%
String name = request.getParameter("name");
String username = request.getParameter("username");
String password = request.getParameter("password");
int age = Integer.parseInt(request.getParameter("age"));
// Hardcoded information for checking username and password

String validUsername = "admin";
String validPassword = "password";
if (username.equals(validUsername) && password.equals(validPassword)) {

if (age >= 18) {
out.println("<h2>Welcome " + name + "...!! You are eligible for UG
course.</h2>");
} else {
out.println("<h2>Welcome " + name + "...!! You are not eligible for UG
course.</h2>");
}
} else {
out.println("<h2>You are not a registered student here.</h2>");
}
%>
</body>
</html>
Q4 Design a web application using servlet which validates user name & password entered by
the user. If both are correct, it will forward the request to the WelcomeServlet, otherwise will
show an error message: "Sorry username or password is incorrect..!!!!". (In this application
check hardcoded information.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<h2>Login</h2>
<form action="login" method="post">
<input type="submit" value="Login">

</form>
</body>
</html>
public class LoginServlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response)

String username = request.getParameter("username");
String password = request.getParameter("password");
// Hardcoded credentials for validation

String validUsername = "admin";
String validPassword = "password";
if (username.equals(validUsername) && password.equals(validPassword)) {

// Forward the request to WelcomeServlet
request.getRequestDispatcher("WelcomeServlet").forward(request, response);
} else {
// Display error message
response.getWriter().println("Sorry, username or password is incorrect!");
}
}
}
public class WelcomeServlet extends HttpServlet {

protected void doGet(HttpServletRequest request, HttpServletResponse response)

response.getWriter().println("Welcome! Login successful!");
}
}
*optional code
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<display-name>LoginApplication</display-name>
<servlet>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>LoginServlet</servlet-class>
</servlet>
<servlet>
<servlet-name>WelcomeServlet</servlet-name>
<servlet-class>WelcomeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>WelcomeServlet</servlet-name>
<url-pattern>/welcome</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
GROUP A
Q1 Develop JavaScript code with POP-UP boxes and functions for the following problems: a)
Input: Click on Display Date button using onclick() function b) Output: Display date in the
textbox.
<!DOCTYPE html>
<html>
<head>
<title>Display Date Example</title>
<script>
function displayDate() {
// Get the current date
var currentDate = new Date();
// Get the elements from the HTML page

var dateTextBox = document.getElementById('dateTextBox');
// Display the date in the textbox

dateTextBox.value = currentDate.toDateString();
// Display a pop-up box with the date

alert("The current date is: " + currentDate.toDateString());
}
</script>
</head>
<body>
<h1>Display Date Example</h1>
<button onclick="displayDate()">Display Date</button>

<br><br>
<input type="text" id="dateTextBox" readonly>

</body>
</html>
Q2 Design an HTML page that contains a selection box with a list of 5 countries. When the user
selects a country, its capital should be printed next in the list. Add CSS to customize the
properties of the font of the capital (color, bold and font size
<!DOCTYPE html>
<html>
<head>
<title>Country Capitals</title>
<style>
#capital {
color: red;
font-weight: bold;
font-size: 20px;
}
</style>
<script>
function showCapital() {
var countrySelect = document.getElementById('countrySelect');
var capitalDisplay = document.getElementById('capital');
var selectedCountry = countrySelect.value;
// Map country to capital

var countryToCapital = {
"USA": "Washington, D.C.",
"France": "Paris",
"China": "Beijing",
"Germany": "Berlin",
"Brazil": "Brasília"
};
// Display the capital of the selected country

capitalDisplay.innerHTML = countryToCapital[selectedCountry];
}
</script>
</head>
<body>
<h1>Country Capitals</h1>
<label for="countrySelect">Select a country:</label>

<select id="countrySelect" onchange="showCapital()">
<option value="USA">United States</option>
<option value="France">France</option>
<option value="China">China</option>
<option value="Germany">Germany</option>
<option value="Brazil">Brazil</option>
</select>
<p>The capital is: <span id="capital"></span></p>

</body>
</html>
Q3 Design the following static web pages required for an online book store web site. HOME
PAGE: The static home page must contain three frames. ii) LOGIN PAGE ii) CATOLOGUE
PAGE: The catalogue page should contain the details of all the books available in the web site
in a table. iv) REGISTRATION PAGE.
<!DOCTYPE html>
<html>
<head>
<title>Online Book Store - Home</title>
</head>
<body>

<frame src="header.html" noresize="noresize" frameborder="0">


<frame src="sidebar.html" noresize="noresize" frameborder="0">


<frame src="main.html" noresize="noresize" frameborder="0">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Online Book Store - Login</title>
</head>
<body>
<h1>Login</h1>
<form>
<input type="submit" value="Login">

</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Online Book Store - Catalog</title>
</head>
<body>
<h1>Catalog</h1>
<table>
<tr>
<th>Title</th>
<th>Author</th>
<th>Price</th>
</tr>
<tr>
<td>Book 1</td>
<td>Author 1</td>
<td>$10.00</td>
</tr>
<tr>
<td>Book 2</td>
<td>Author 2</td>
<td>$12.50</td>
</tr>

</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Online Book Store - Registration</title>
</head>
<body>
<h1>Registration</h1>
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Register">

</form>
</body>
</html>
Q4 Design a web page on your own to demonstrate the usage of inline, internal and external
style sheet using CSS.
<!DOCTYPE html>
<html>
<head>
<title>CSS Stylesheet Example</title>
<style>
/* Internal style sheet */
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #333333;
text-align: center;
}
p{
color: #666666;
line-height: 1.5;
margin-bottom: 20px;
}
</style>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
<h1>Web Page Example</h1>
<p>This is an example of a web page.</p>
<div>
<h2 style="color: blue;">Inline Style</h2>
<p style="font-size: 18px;">This paragraph uses inline style.</p>
</div>
<div>
<h2>Internal Style</h2>
<p>This paragraph uses the styles defined in the internal style sheet.</p>
</div>
<div>
<h2>External Style</h2>
<p>This paragraph uses the styles defined in the external style sheet.</p>
</div>
</body>
</html>
/* External style sheet */

div {
background-color: #ffffff;
border: 1px solid #cccccc;
padding: 20px;
margin-bottom: 20px;
}

Cheat Sheet

Uploaded by

Document Information

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

Cheat Sheet

Uploaded by

Copyright:

Available Formats

GROUP B

<label for="num2">Number 2:</label>

<input type="submit" value="Calculate">

<%@ page language="java" contentType="text/html; charset=UTF-8"

// Perform the selected operation

<label for="num2">Number 2:</label>

<input type="radio" id="addition" name="operation" value="addition" required>

<input type="radio" id="subtraction" name="operation" value="subtraction">

<input type="radio" id="division" name="operation" value="division">

<input type="radio" id="multiplication" name="operation" value="multiplication">

<input type="submit" value="Calculate">

<input type="submit" value="Submit">

<%@ page language="java" contentType="text/html; charset=UTF-8"

// Hardcoded information for checking username and password

if (username.equals(validUsername) && password.equals(validPassword)) {

<input type="submit" value="Login">

public class LoginServlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response)

// Hardcoded credentials for validation

if (username.equals(validUsername) && password.equals(validPassword)) {

public class WelcomeServlet extends HttpServlet {

protected void doGet(HttpServletRequest request, HttpServletResponse response)

// Get the elements from the HTML page

// Display the date in the textbox

// Display a pop-up box with the date

<button onclick="displayDate()">Display Date</button>

<input type="text" id="dateTextBox" readonly>

var selectedCountry = countrySelect.value;

// Map country to capital

// Display the capital of the selected country

<label for="countrySelect">Select a country:</label>

<p>The capital is: <span id="capital"></span></p>

<input type="submit" value="Login">

<input type="submit" value="Register">

/* External style sheet */

You might also like