3.
Use JavaScript for doing client – side validation of the pages implemented in experiment 1 and
experiment 2.
<html>
<head>
<title> login page</title>
<script language="javascript">
function validate() {
var uname = f1.username.value;
if (uname.length<=0)
{
alert("Please Enter UserName");
f1.username.focus();
return false;
}
if (uname.length < 8)
{
alert("Please enter UserName not less than 8");
f1.username.focus();
return false;
}
var pwd = f1.password.value;
if (pwd.length<=0)
{
alert("Please Enter password");
f1.password.focus();
return false;
}
if (pwd.length < 6)
{
alert("Please enter Password not less than 6");
f1.password.focus();
return false;
}
var email = f1.email.value;
if (email.length<=0)
{
alert("Please Enter email");
f1.email.focus();
return false;
}
else {
let eflag=false;
for(i=0;i<email.length;i++) {
if(email.charAt(i)=="@")
{
eflag=true;
}
}
if(!(eflag))
{
alert("Please enter a valid Email ID");
f1.email.focus();
return false;
}
}
var phno = f1.phno.value;
if (phno.length<=0)
{
alert("Please Enter Phone Number");
f1.phno.focus();
return false;
}
if (isNaN(phno))
{
alert("Please Enter Valid Phone Number");
f1.phno.focus();
return false;
}
if (phno.length != 10)
{
alert("Please Enter Valid Phone Number");
f1.phno.focus();
return false;
}
let flag=false;
for(i=0;i<f1.gen.length;i++)
if(f1.gen[i].checked)
flag=true;
if(!(flag))
{
alert("Please choose a Gender");
return false;
}
flag=false;
for(i=0;i<f1.lang.length;i++)
if(f1.lang[i].checked)
flag=true;
if(!(flag))
{
alert("Please select at least one of the Language options.");
return false;
}
alert("Registration Successful");
}
</script>
</head>
<body bgcolor="powderedblue">
<center><br>
<h3>Registration Form </h3>
<br/>
<form name="f1">
<table cellpadding="1" align="center" >
<tr><td> User Name:*</td>
<td><input type="text" name="username"></td></tr>
<tr><td>Password:*</td>
<td><input type="password" name="password"></td></tr>
<tr><td>Email ID:*</td>
<td><input type="text" name="email"></td></tr>
<tr><td>Phone Number:*</td>
<td><input type="text" name="phno"></td></tr>
<tr><td valign="top">Gender:*</td>
<td><input type="radio" name="gen" value="Male">Male
<input type="radio" name="gen" value="Female">Female</td></tr>
<tr> <td valign="top">Choose Language:*</td>
<td> <input type="checkbox" name="lang" value="Operating Systems">Operating Systems<br/>
<input type="checkbox" name="lang" value="Java">Java<br>
<input type="checkbox" name="lang" value="Python">Python<br>
<input type="checkbox" name="lang" value="Database Management Systems">Database Management
Systems
</td></tr>
<tr><td></td><td><input type="button" value="SUBMIT" hspace="10" onclick="validate()">
<input type="reset" value="RESET"></td></tr>
<tr> <td colspan=2 >*<font color="#FF0000">fields are mandatory</font>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
OUTPUT :
4. Explore the features of ES6 like arrow functions, callbacks, promises, async/await. Implement an
application for reading the weather information from openweathermap.org and display the
information in the form of a graph on the web page.
<!DOCTYPE html>
<head>
<title>Weather app</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.weather-card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
}
h3 {
margin-top: 5px;
}
input[type="text"] {
padding: 8px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
padding: 8px 20px;
border-radius: 5px;
border: none;
background-color: #4CAF50;
color: white;
cursor: pointer;
margin-top: 10px;
}
button:hover {
background-color: #45a049;
}
#weather-info {
display: none;
margin-top: 20px;
}
#weather-icon {
width: 50px;
height: 50px;
margin-top: 10px;
}
#wind-speed {
margin-top: 10px;
}
</style>
</head>
<body>
<script>
const city = document.getElementById('city-input');
const url =
'https://api.openweathermap.org/data/2.5/weather';
const apiKey =
'f00c38e0279b7bc85480c3fe775d518c';
$(document).ready(function () {
weatherFn(city);
});
async function weatherFn(cName) {
const temp =
`${url}?q=${cName}&appid=${apiKey}&units=metric`;
try {
const res = await fetch(temp);
const data = await res.json();
if (res.ok) {
weatherShowFn(data);
} else {
alert('City not found. Please try again.');
}
} catch (error) {
console.error('Error fetching weather data:', error);
}
}
function weatherShowFn(data) {
$('#city-name').text(data.name);
$('#date').text(moment().
format('MMMM Do YYYY, h:mm:ss a'));
$('#temperature').
html(`${data.main.temp}°C`);
$('#description').
text(data.weather[0].description);
$('#wind-speed').
html(`Wind Speed: ${data.wind.speed} m/s`);
$('#weather-icon').
attr('src',
`...`);
$('#weather-info').fadeIn();
}
</script>
<div class="container">
<div class="weather-card">
<h1 style="color: green;">
BVRIT HYDERABAD
</h1>
<br>
<h3>
Weather App
</h3>
<input type="text" id="city-input"
placeholder="Enter city name">
<br>
<button id="city-input-btn"
onclick="weatherFn($('#city-input').val())">
Get Weather
</button>
<br>
<div id="weather-info"
class="animate__animated animate__fadeIn">
<h3 id="city-name"></h3>
<p id="date"></p>
<p id="temperature"></p>
<p id="description"></p>
<p id="wind-speed"></p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="w.js"></script>
</body>
</html>
OUTPUT :
5. Develop a java standalone application that connects with the database (Oracle / mySql) and
perform the CRUD operation on the database tables
package com.bvrith;
import java.sql.*;
public class DatabaseCRUDOperations {
// Database connection credentials
static final String URL = "jdbc:mysql://localhost:3306/testdb"; // Your MySQL URL
static final String USER = "root"; // MySQL username
static final String PASSWORD = "1234"; // MySQL password
public static void main(String[] args) {
// Perform CRUD operations
createUser("Alice", "alice@example.com");
readUsers();
updateUser(1, "John Smith", "john.smith@example.com");
deleteUser(2);
readUsers(); // Check the updated data
}
// CREATE operation: Insert new user
public static void createUser(String name, String email) {
try (Connection connection = DriverManager.getConnection(URL, USER,
PASSWORD);
PreparedStatement preparedStatement = connection.prepareStatement(
"INSERT INTO users (name, email) VALUES (?, ?)")) {
preparedStatement.setString(1, name);
preparedStatement.setString(2, email);
int rowsAffected = preparedStatement.executeUpdate();
if (rowsAffected > 0) {
System.out.println("User added successfully: " + name);
}
} catch (SQLException e) {
e.printStackTrace();
}
}
// READ operation: Retrieve all users
public static void readUsers() {
try (Connection connection = DriverManager.getConnection(URL, USER,
PASSWORD);
Statement statement = connection.createStatement();
ResultSet resultSet = statement.executeQuery("SELECT * FROM users")) {
System.out.println("Users in the database:");
while (resultSet.next()) {
int id = resultSet.getInt("id");
String name = resultSet.getString("name");
String email = resultSet.getString("email");
System.out.println("ID: " + id + ", Name: " + name + ", Email: " + email);
}
} catch (SQLException e) {
e.printStackTrace();
}
}
// UPDATE operation: Update user details
public static void updateUser(int userId, String newName, String newEmail) {
try (Connection connection = DriverManager.getConnection(URL, USER,
PASSWORD);
PreparedStatement preparedStatement = connection.prepareStatement(
"UPDATE users SET name = ?, email = ? WHERE id = ?")) {
preparedStatement.setString(1, newName);
preparedStatement.setString(2, newEmail);
preparedStatement.setInt(3, userId);
int rowsAffected = preparedStatement.executeUpdate();
if (rowsAffected > 0) {
System.out.println("User with ID " + userId + " updated successfully.");
}
} catch (SQLException e) {
e.printStackTrace();
}
}
// DELETE operation: Delete user by ID
public static void deleteUser(int userId) {
try (Connection connection = DriverManager.getConnection(URL, USER,
PASSWORD);
PreparedStatement preparedStatement = connection.prepareStatement(
"DELETE FROM users WHERE id = ?")) {
preparedStatement.setInt(1, userId);
int rowsAffected = preparedStatement.executeUpdate();
if (rowsAffected > 0) {
System.out.println("User with ID " + userId + " deleted successfully.");
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
OUTPUT :
User added successfully: Alice
Users in the database:
ID: 1, Name: John Smith, Email: john.smith@example.com
ID: 3, Name: Alice, Email: alice@example.com
ID: 4, Name: Alice, Email: alice@example.com
User with ID 1 updated successfully.
Users in the database:
ID: 1, Name: John Smith, Email: john.smith@example.com
ID: 3, Name: Alice, Email: alice@example.com
ID: 4, Name: Alice, Email: alice@example.com
