Ad Manual Cse
Ad Manual Cse
Name:
Reg. No:
Department:
Year: Sem:
THIRUMALAI ENGINEERING COLLEGE
KILAMBI, KANCHIPURAM – 631551
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
BONAFIDE CERTIFICATE
AIM
Build a BMI (Body Mass Index) Calculator app using React Native.
ALGORITHM
Step 1: Start
Step 2: Import the required components from React Native and install the npm
module.
Step 3: Create a class-based component named BMI App.
Step 4: The initial state with height, weight, bmi, and bmi Result fields.
Step 5: Define methods handle Height and handle Weight to update the state when
height and weight inputs change.
Step 6: Create a calculate method to perform the BMI calculation and classify the
result.
Step 7: Implement the render method with necessary UI components.
Step 8: Use Text Input for user input of height and weight.
Step 9: Utilize Touchable Opacity for the Calculate button.
Step 10: Display the calculated BMI and its classification as output.
1
PROGRAM
1.App.js
this.calculateBMI = this.calculateBMI.bind(this);
}
heightchange(e){ this.setState({height:
e.target.value}); e.preventDefault();
blur(e){ this.calculateBMI();
}
weightchange(e){ this.setState({weight:
e.target.value}); e.preventDefault();
}
calculateBMI(){
2
var heightSquared = (this.state.height/100 *
this.state.height/100); var bmi = this.state.weight /
heightSquared;
var low = Math.round(18.5 * heightSquared);
var high = Math.round(24.99 * heightSquared);
var message = "";
if( bmi >= 18.5 && bmi <= 24.99 ){
message = "You are in a healthy weight range";
}
else if(bmi >= 25 && bmi <= 29.9){
message = "You are overweight";
}
else if(bmi >= 30){
message ="You are obese";
}
else if(bmi < 18.5){
message = "You are under weight";
}
this.setState({message: message});
this.setState({optimalweight: "Your suggested weight range is between
"+low+ " - "+high}); this.setState({bmi: Math.round(bmi * 100) / 100});
submitMe(e) { e.preventDefault();
this.calculateBMI();
}
ticker() {
3
this.setState({time: new Date().toLocaleTimeString()})
}
componentDidMount(){
setInterval(this.ticker, 60000);
}
change(e){ e.preventDefault();
console.log(e.target);
this.setState({name: e.target.value});
}
render() { return (
<div className="App">
<div className="App-header">
<h2>BMI Calculator</h2>
</div>
<form onSubmit={this.submitMe}>
<label>
Please enter your name
</label>
<input type="text" name="name" value={this.state.name}
onBlur={this.blur} onChange={this.change} />
<label>
Enter your height in cm:
</label>
<input type="text" name="height" value={this.state.height}
onBlur={this.blur} onChange={this.heightchange} />
4
<label>
Enter your weight in kg :
</label>
<input type="text" name="weight" value={this.state.weight}
onChange={this.weightchange}
/>
<label>{this.state.checked} Hello {this.state.name}, How are you my friend?
It's currently
{this.state.time} where you are living. Your BMI is {this.state.bmi} </label>
<label>{this.state.message}</label>
<label>{this.state.optimalweight}</label>
</div>
);
}
}
export default App;
2. //index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI Calculator with JavaScript</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
5
</head>
<body>
<div class="wrapper">
<p>Height in CM:
<input type="number" id="height"><br><span id="height_error"></span>
</p>
<p>Weight in KG:
<input type="number" id="weight"><br><span id="weight_error"></span>
</p>
<button id="btn">Calculate</button>
<p id="output"></p>
</div>
</body>
</html>
6
SAMPLE OUTPUT
RESULT
Thus the program to work with react native was implemented and executed
successfully.
7
Ex.No.2
AIM:
To Build a cross platform application for simple expense manager which
allows entering expenses and income
ALGORITHM
8
PROGRAM
};
9
alert('Please enter the details');
} else {
setExpenseList([...expenseList, { id: Math.random().toString(), expense:
expense }]); setExpense(parseInt(expense) + parseInt(expense));
setTextExpense('');
}
};
return (
<View style={styles.container}>
<Text style={styles.title}>Expense Manager</Text>
<View style={styles.inputContainer}>
<TextInput style={styles.input}
placeholder="Enter Income"
keyboardType="numeric"
value={textIncome}
onChangeText={(text) => setIncome(text)}
/>
<TouchableOpacity style={styles.button} onPress={() => addIncome()}>
<Text style={styles.buttonText}>Add Income</Text>
</TouchableOpacity>
<TextInput style={styles.input}
placeholder="Enter Expense"
keyboardType="numeric"
value={textExpense}
onChangeText={(text) => setExpense(text)}
/>
10
<TouchableOpacity style={styles.button} onPress={() => addExpense()}>
<Text style={styles.buttonText}>Add Expense</Text>
</TouchableOpacity>
</View>
<View style={styles.listContainer}>
<View style={styles.list}>
<Text style={styles.listTitle}>Weekly Income</Text>
{incomeList.map((item) => (
<View key={item.id} style={styles.listItem}>
<Text>{item.income}</Text>
</View>
))}
</View>
<View style={styles.list}>
<Text style={styles.listTitle}>Weekly Expense</Text>
{expenseList.map((item) => (
<View key={item.id} style={styles.listItem}>
<Text>{item.expense}</Text>
</View>
))}
</View>
</View>
</View>
);
}
11
const styles = StyleSheet.create({ container: {
flex: 1, backgroundColor: '#fff',
alignItems: 'center', justifyContent:
'center',
},
title: { fontSize: 30,
fontWeight: 'bold', marginBottom:
20,
},
inputContainer: { width: '80%',
marginBottom: 20,
},
input: { borderWidth: 1,
borderColor: '#777',
padding: 8,
marginVertical: 10,
borderRadius: 5,
},
button: {
backgroundColor: '#f4511e',
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 5, alignItems:
'center', marginVertical: 10,
},
buttonText: { color: '#fff',
12
fontSize: 18, fontWeight: 'bold',
},
listContainer: { flexDirection: 'row',
justifyContent: 'space-between', width:
'80%',
},
listTitle: { fontSize: 20,
fontWeight: 'bold', marginBottom:
10,
},
});
13
SAMPLE OUTPUT
RESULT
Thus the cross platform application for simple expense manager was
Implemented and executed successfully.
14
Ex.No.3 Develop an Application to Convert Units from
Imperial System to Metric System
Date:
AIM
Build a application to Convert Units from Imperial System to Metric
System
ALGORITHM
Step 1: Initialize state variables for kilometers input, kilometers converted value,
kilograms input, and kilograms converted value.
Step 2: Create conversion functions for kilometers to miles and kilograms to
pounds.
Step 3: Implement a clear function to reset all fields.
Step 4: Render input fields, conversion buttons, and result displays for both
conversions.
Step 5: Set up input handlers to update state variables.
Step 6: Attach conversion functions to the "Convert" buttons.
Step 7: Display the converted values or error messages.
Step 8: Add a "Clear" button to reset fields.
Step 9: Integrate the component into your React Native app.
Step 10: Test and optimize as needed for production.
15
PROGRAM
function UnitConverter() {
const [kmInputValue, setKmInputValue] = useState('');
const [kmConvertedValue, setKmConvertedValue] = useState('');
16
setKmConvertedValue('');
setKgInputValue('');
setKgConvertedValue('');
};
return (
<View>
<Text>Kilometers to Miles Converter</Text>
<TextInput
placeholder="Enter value in kilometers"
keyboardType="numeric"
value={kmInputValue}
onChangeText={(text) => setKmInputValue(text)}
/>
<Button title="Convert" onPress={convertKmToMiles} />
<Text>{kmConvertedValue}</Text>
17
SAMPLE OUTPUT
RESULT
Thus the Cross Platform Application to Convert Units from Imperial System
to Metric System was Implemented and executed successfully.
18
Ex.No.4 Design and develop a cross platform application for day to day
task (to-do) management
Date:
AIM:
To develop a cross platform application for day to day task (To-Do)
management using reacts native.
ALGORITHM
Step 1: Start
Step 3: Import required components and libraries Step 4: Set up state variables using
use State.
Step 5: Implement add Todo to add items to the list.
19
PROGRAM
import React, { useState } from 'react';
import { StyleSheet, View, Text, FlatList } from 'react-native';
import { Button, TextInput, List, Checkbox } from 'react-
native-paper'; export default function App() {
const [text, setText] = useState(''); const
[todos, setTodos] = useState([]); const
addTodo = () => {
if (text.trim() !== '') {
setTodos([...todos, { text, id: Date.now(), completed: false }]);
setText('');
}
};
const toggleTodo = (id) => {
setTodos( todos.map((todo) =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
)
);
};
20
SAMPLE OUTPUT
RESULT
Thus the Cross Platform Application for day to day task management was
Implemented and executed successfully.
21
Ex.No.5 Design an android application using Cordova for user login scree
with username and password
Date:
AIM:
To design android application using Cordova for a user login screen with
username and password..
ALGORITHM
Step 1: Start
Step 6: Create an index.html filefor the login screen and include form elements for
username, password ,reset, and submit buttons.
Step 7: Create an index.js file to handle form interactions and Add event listeners for
reset and submit buttons and Implement logic for form reset and login validation.
Step 8: Add a listener for the device ready event in JavaScript.
Step 9: Set AndroidX Enabled to trueand Configure preferences in the config.xml
file.
Step 10: Use Cordova to build the Android app and Run the app on an Android
emulator or physical device using Cordova or Android Studio.
22
PROGRAM
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<h1>Login</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
</form>
<script src="js/index.js"></script>
</body>
</html>
JS:
document.addEventListener("deviceready", onDeviceReady, false);
23
function onDeviceReady()
{ document.getElementById("resetButton").addEventListener("click",
resetForm);
document.getElementById("submitButton").addEventListener("click"
, submitForm);
}
function resetForm()
{ document.getElementById("username").value = "";
document.getElementById("password").value = "";
}
function submitForm() {
var username
=document.getElementById("username").value; var
password = document.getElementById("password").value;
// Perform login validation here (e.g., check username and
password) if (username === "example" && password ===
"password") {
alert("Login Successful!");
} else {
alert("Login Failed. Please check your credentials.");
}
}
24
XML:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.getElementById("resetButton").addEventListener("click",
resetForm);
document.getElementById("submitButton").addEventListener("click",
submitForm);
}
function resetForm() {
document.getElementById("username").value = "";
document.getElementById("password").value = "";
}
function submitForm() {
var username =
document.getElementById("username").value; var
password = document.getElementById("password").value;
// Perform login validation here (e.g., check username and
password) if (username === "example" && password ===
"password") {
alert("Login Successful!");
} else {
alert("Login Failed. Please check your credentials.");
}
}
25
SAMPLE OUTPUT
RESULT
Thus we design android application using Cordova for a user login screen
with username and password was Implemented and executed successfully
26
Ex.No.6 Design an and develop an android application using Apache
Cordov to find and display the current location of the user
Date:
AIM:
ALGORITHM
Step 1: Start
Step 3: Create a new Cordova project and add Android platform for your project.
Step 4: Add the Cordova Geolocation plugin and create index.html and index.js
for UI and logic.
Step 5: Set up a device ready event listener and Implement get
Location function using navigator.geolocation.
Step 6: Create on Success function to display location info and Implement on
Error function for error handling.
Step 7: Configure app preferences in config.xml.
27
PROGRAM
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Location App</title>
</head>
<body>
<h1>Current Location</h1>
<p id="locationInfo"></p>
<script src="js/index.js"></script>
</body>
</html>
JS:
document.addEventListener("deviceready", onDeviceReady,
false); function onDeviceReady() {
// Device is ready, initialize geolocation.
28
function getLocation() {
navigator.geolocation.getCurrentPosition(
onSuccess,
onError,
{ enableHighAccuracy: true }
);
function onSuccess(position) {
var latitude = position.coords.latitude;
document.getElementById("locationInfo").innerHTML = locationInfo;
function onError(error) {
29
XML:
<platform name="android">
...
...
</platform>
30
SAMPLE OUTPUT
RESULT
Thus we design and develop an android application using Apache
Cordova to find and display the current location of the user Implemented and
executed successfully.
31
Ex.No.7 (a) Write programs using Java to create Android application
having Databases for a simple library application.
Date:
AIM:
To write program using Java to create Android application having Databases
for a simple library application.
ALGORITHM
Step 1: Start
Step 7: Retrieve all books from the database and display a list of all books, including
their titles and authors.
Step 8: Allow the user to input a title to search for.
Step10: Implement error handling to catch and display any database-related errors
Step11:Compile the Javacode and run the application in a console or terminal.
Step12: Stop.
32
PROGRAM
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.Scanner;
public class LibraryApp {
33
System.out.println("Library Application");
viewBooks(connection);
break; case 3:
searchBookByTitle(connection, scanner);
break; case 4:
System.out.println("Goodbye!");
connection.close(); System.exit(0);
default:
System.out.println("Invalid choice. Try again.");
} catch (SQLException e) {
e.printStackTrace();
}
34
}
preparedStatement.executeUpdate();
36
System.out.println(id + ". " + title + " by " + author);
37
SAMPLE OUTPUT
RESULT
Thus we implemented program using Java to create Android application
having Databases for a simple library Implemented and executed successfully.
38
Ex.No.7(b)
Write programs using Java to create Android application having
Databases For displaying books available, books lend, etc.,
Date:
AIM:
To write programs using Java to create Android application having
Databases For displaying books available, books lend, book reservation
ALGORITHM
Step 1: Start
Step 2: Set up a SQLite database for storing book information.
Step 3: Create "books" and "loans" tables for book and loan information.
Step 7: Retrieve all books from the database and display a list of all books, including
their titles and authors.
Step 8:Provide an option to exit the application gracefully.
Step 9: Implement error handling to catch and display any database-related errors
Step10:Compile the Javacode and run the application in a console or terminal.
Step11: Stop.
39
PROGRAM
case 4:
System.out.println("Goodbye!");
connection.close(); System.exit(0);
default:
System.out.println("Invalid choice. Try again.");
}
}
} catch (SQLException e) {
e.printStackTrace();
}
}
41
// Create "loans" table
String createLoansTableSQL = "CREATE TABLE IF NOT
EXISTS loans (" + "id INTEGER PRIMARY KEY
AUTOINCREMENT," +
"book_id INTEGER NOT NULL," +
"user_name TEXT NOT NULL," +
"FOREIGN KEY (book_id) REFERENCES books (id))";
connection.createStatement().execute(createLoansTableSQL);
}
42
// Check if the book is available
String checkAvailabilitySQL = "SELECT is_available FROM books WHERE
id = ?"; PreparedStatement availabilityStatement =
connection.prepareStatement(checkAvailabilitySQL);
availabilityStatement.setInt(1, bookId);
ResultSet availabilityResult = availabilityStatement.executeQuery();
if (availabilityResult.next()) {
boolean isAvailable =
availabilityResult.getBoolean("is_available"); if
(isAvailable) {
// Book is available, lend it
System.out.print("Enter your name: "); String
userName = scanner.nextLine();
PreparedStatement updateAvailabilityStatement =
connection.prepareStatement(updateAvailabilitySQL);
updateAvailabilityStatement.setInt(1, bookId);
updateAvailabilityStatement.executeUpdate();
43
insertLoanStatement.setInt(1, bookId);
insertLoanStatement.setString(2, userName);
insertLoanStatement.executeUpdate();
44
SAMPLE OUTPUT
RESULT
Thus we implemented programs using Java to create Android application
having Databases for displaying books available, books lend, book reservation
Implemented and executed successfully.
45