Using react native build a cross platform application for a BMI calculator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background: #fff;
padding: 20px;
border-radius: 10px;
width: 300px;
text-align: center;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
input {
width: 90%;
padding: 8px;
margin: 10px 0;
}
button {
padding: 10px 15px;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
.result {
margin-top: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h2>BMI Calculator</h2>
<input type="number" id="weight" placeholder="Weight (kg)">
<input type="number" id="height" placeholder="Height (m)">
<button onclick="calculateBMI()">Calculate</button>
<div class="result" id="result"></div>
</div>
<script>
function calculateBMI() {
let weight = [Link]("weight").value;
let height = [Link]("height").value;
if (weight === "" || height === "") {
[Link]("result").innerText = "Please enter all values";
return;
}
let bmi = weight / (height * height);
bmi = [Link](2);
let category = "";
if (bmi < 18.5) category = "Underweight";
else if (bmi < 24.9) category = "Normal weight";
else if (bmi < 29.9) category = "Overweight";
else category = "Obese";
[Link]("result").innerText =
"BMI: " + bmi + " (" + category + ")";
}
</script>
</body>
</html>
Build a cross platform application for a simple expanse manager which allow entering expanses and
income on each day and display category wise weakly income and expanse
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expense Manager</title>
<style>
body {
font-family: Arial;
background: #f2f2f2;
display: flex;
justify-content: center;
}
.container {
background: #fff;
padding: 20px;
width: 350px;
margin-top: 20px;
border-radius: 10px;
box-shadow: 0 0 10px #ccc;
}
h2 { text-align: center; }
input, select, button {
width: 100%;
padding: 8px;
margin: 8px 0;
}
button {
background: #28a745;
color: white;
border: none;
cursor: pointer;
}
button:hover { background: #218838; }
.summary {
margin-top: 15px;
background: #f9f9f9;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h2>Expense Manager</h2>
<input type="date" id="date">
<select id="type">
<option value="income">Income</option>
<option value="expense">Expense</option>
</select>
<input type="text" id="category" placeholder="Category (Food, Salary...)">
<input type="number" id="amount" placeholder="Amount">
<button onclick="addTransaction()">Add</button>
<button onclick="showWeekly()">Show Weekly Summary</button>
<div class="summary" id="output"></div>
</div>
<script>
let transactions = [];
function addTransaction() {
let date = [Link]("date").value;
let type = [Link]("type").value;
let category = [Link]("category").value;
let amount = parseFloat([Link]("amount").value);
if (!date || !category || isNaN(amount)) {
alert("Please fill all fields");
return;
}
[Link]({ date, type, category, amount });
alert("Added successfully!");
}
function showWeekly() {
let now = new Date();
let weekAgo = new Date();
[Link]([Link]() - 7);
let summary = {};
let totalIncome = 0;
let totalExpense = 0;
[Link](t => {
let tDate = new Date([Link]);
if (tDate >= weekAgo && tDate <= now) {
if (!summary[[Link]]) {
summary[[Link]] = { income: 0, expense: 0 };
}
if ([Link] === "income") {
summary[[Link]].income += [Link];
totalIncome += [Link];
} else {
summary[[Link]].expense += [Link];
totalExpense += [Link];
}
}
});
let result = "<h3>Weekly Summary</h3>";
for (let cat in summary) {
result += `<p><b>${cat}</b> → Income: ₹${summary[cat].income} | Expense:
₹${summary[cat].expense}</p>`;
}
result += `<hr>Total Income: ₹${totalIncome}<br>`;
result += `Total Expense: ₹${totalExpense}`;
[Link]("output").innerHTML = result;
}
</script>
</body>
</html>