Scribd
Upload
25 views13 pages

App Development Ex 1 To Ex 3

Uploaded by

d22z609
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
25 views13 pages

App Development Ex 1 To Ex 3

Uploaded by

d22z609
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Ex.

No: 1
BMI CALCULATOR
Date:

AIM
To Build a cross platform application for a BMI (Body Mass Index) Calculator app using React
Native.
ALGORITHM

Step 1: Start building a new application with react native and install node.js.
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.

PROGRAM
1.App.js

import React, { Component } from 'react';


import './App.css';

class App extends Component {

constructor(props) {
super(props);
this.state = { name: 'Guest', weight: 90, height: 180, bmi: 27, message: '', optimalweight: '', time:
new Date().toLocaleTimeString() };
this.submitMe = this.submitMe.bind(this);
this.heightchange = this.heightchange.bind(this);
this.weightchange = this.weightchange.bind(this);
this.change = this.change.bind(this);
this.ticker = this.ticker.bind(this);
this.blur = this.blur.bind(this);
this.calculateBMI = this.calculateBMI.bind(this);
}

1
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(){

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});

2
}

submitMe(e) {
e.preventDefault();
this.calculateBMI();
}

ticker() {
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>

3
<input type="text" name="height" value={this.state.height} onBlur={this.blur}
onChange={this.heightchange} />
<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>

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


</form>

</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>
</head>
<body>
<div class="wrapper">
<p>Height in CM:
<input type="number" id="height"><br><span id="height_error"></span>

4
</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>

SAMPLE OUTPUT

RESULT

Thus the cross platform application for BMI calculator using react native is implemented and executed
successfully.

5
6
Ex. No: 2
Date:
SIMPLE EXPENSE MANAGER

AIM:
To Build a cross platform application for simple expense manager which allows entering expenses
and income

ALGORITHM
Step 1:Initialize state variables for income, expense, incomeList, expenseList, textIncome, and
textExpense.
Step 2:Create functions addIncome and addExpense to handle adding income and expenses.
Step 3:In addIncome and addExpense, check if textIncome or textExpense is empty or not a number.
If so, show an alert and exit.
Step 4:If input is valid, add a new item to incomeList or expenseList with a unique ID and the
provided income or expense value.
Step 5:Update the income and expense state by adding the entered value to their respective totals.
Step 6:Clear the textIncome or textExpense field.
Step 7:Render the UI with title, input fields, buttons, and two lists.
Step 8:Map through incomeList and expenseList to display their items in separate lists.
Step 9:Style the UI elements using predefined styles.
Step 10:The app allows users to add income and expenses, which are displayed in separate lists for
weekly tracking.

PROGRAM
import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';

export default function App() {


const [income, setIncome] = useState(0);
const [expense, setExpense] = useState(0);
const [incomeList, setIncomeList] = useState([]);
const [expenseList, setExpenseList] = useState([]);
const [textIncome, setTextIncome] = useState('');
const [textExpense, setTextExpense] = useState('');

const addIncome = () => {


if (textIncome === '' || income === '') {
alert('Please enter the details');
} else {
setIncomeList([...incomeList, { id: Math.random().toString(), income: income }]);
setIncome(parseInt(income) + parseInt(income));
setTextIncome('');
}
};

const addExpense = () => {


if (textExpense === '' || expense === '') {
alert('Please enter the details');
} else {
setExpenseList([...expenseList, { id: Math.random().toString(), expense: expense }]);
setExpense(parseInt(expense) + parseInt(expense));

7
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)}
/>
<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>
);
}

const styles = StyleSheet.create({


container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
8
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',
fontSize: 18,
fontWeight: 'bold',
},
listContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
width: '80%',
},
listTitle: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 10,
},
});

SAMPLE OUTPUT

9
RESULT
Thus the cross platform application for simple expense manager is implemented and executed
successfully.

10
Ex. No: 3
Develop an Application to Convert Units from Imperial
Date: System to Metric System

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.

PROGRAM
import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';

function UnitConverter() {
const [kmInputValue, setKmInputValue] = useState('');
const [kmConvertedValue, setKmConvertedValue] = useState('');

const [kgInputValue, setKgInputValue] = useState('');


const [kgConvertedValue, setKgConvertedValue] = useState('');

const convertKmToMiles = () => {


const km = parseFloat(kmInputValue);
if (!isNaN(km)) {
const miles = km / 1.60934;
setKmConvertedValue(`${miles.toFixed(2)} miles`);
} else {
setKmConvertedValue('Invalid input');
}
};

const convertKgToPounds = () => {


const kg = parseFloat(kgInputValue);
if (!isNaN(kg)) {
const pounds = kg * 2.20462;
setKgConvertedValue(`${pounds.toFixed(2)} pounds`);
} else {
setKgConvertedValue('Invalid input');
}
};

const clearFields = () => {


setKmInputValue('');
11
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>

<Text>Kilograms to Pounds Converter</Text>


<TextInput
placeholder="Enter value in kilograms"
keyboardType="numeric"
value={kgInputValue}
onChangeText={(text) => setKgInputValue(text)}
/>
<Button title="Convert" onPress={convertKgToPounds} />
<Text>{kgConvertedValue}</Text>

<Button title="Clear" onPress={clearFields} />


</View>
);
}

export default UnitConverter;

SAMPLE OUTPUT

12
RESULT
Thus the Cross Platform Application to Convert Units from Imperial System to Metric System is
Implemented and executed successfully

13

You might also like