Scribd
Upload
3 views53 pages

Ad Manual

The document outlines the development of three cross-platform applications using Apache Cordova: a BMI calculator, an expense manager, and a unit conversion tool. Each application is designed to function on both iOS and Android, featuring user-friendly interfaces and specific functionalities such as BMI calculation, expense tracking, and unit conversions. The procedures include creating projects, designing UIs, implementing data handling, and testing, along with sample HTML and JavaScript code for each application.

Uploaded by

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

Ad Manual

The document outlines the development of three cross-platform applications using Apache Cordova: a BMI calculator, an expense manager, and a unit conversion tool. Each application is designed to function on both iOS and Android, featuring user-friendly interfaces and specific functionalities such as BMI calculation, expense tracking, and unit conversions. The procedures include creating projects, designing UIs, implementing data handling, and testing, along with sample HTML and JavaScript code for each application.

Uploaded by

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

EX.

NO:1
CROSS PLATFORM APPLICATION FOR A BMI
DATE: CALCULATOR

Aim:
To Build a cross platform application for a BMI calculator using Apache Cordova.

Description:
BMI calculator app is designed to work seamlessly on both iOS and Android devices,
ensuring a broad user reach without the need for separate development efforts. The
application features an intuitive and user-friendly interface that makes it easy for users to
input their weight and height, allowing them to calculate their Body Mass Index (BMI) with
a simple tap. The app provides instant BMI calculation, offering users an accurate assessment
of their current health status based on their weight and height.

Procedure:
1. HTML Structure:
- This is an HTML document that contains elements for calculating and displaying
BMI.

2. Select Gender:

- There's a dropdown menu for selecting gender, but the code snippet doesn't show the
actual <select> element. Ensure you have a <select> element with the id "gender" in your
HTML.

3. Calculate BMI Button:


- There's a button with the text "Calculate BMI." When this button is clicked, it triggers
the calculateBMI () JavaScript function.

4. Display Area for BMI:


- A <div> element with the text "Your BMI" is used to label the result.
- An <input> element with the id "result" is used to display the calculated BMI value.
This input field is marked as "readonly," meaning the user can't edit it.
5. JavaScript Function calculateBMI():

- This function is defined in a <script> tag.


- When the "Calculate BMI" button is clicked, this function is executed.

6. Variable Initialization:
- Inside the calculateBMI () function, it retrieves the values of three inputs: height,
weight, and gender.
- These values are stored in the height, weight, and gender variables.

7. BMI Calculation:

- It calculates the BMI using the formula BMI = weight (kg) / (height (m) * height (m)).
- However, it calculates the BMI the same way regardless of whether the selected
gender is "male" or "female." Normally, BMI calculations don't differ by gender, so this
distinction seems unnecessary.
-
8. Display Result:

- The calculated BMI value is stored in the bmi variable.


- The BMI value is then displayed in the "result" input field with two decimal places
using to Fixed.
-
9. Missing Input Fields:

- The provided code snippet does not include the actual input fields for height and
weight. You should have input fields with corresponding id attributes ("height" and
"weight") in your HTML.

[Link] Tags:

- Ensure that you have the appropriate opening and closing HTML tags (<html>,
<body>, etc.) surrounding this code for it to be part of a complete HTML document.

[Link] and Testing:

- After adding the missing elements (height and weight input fields and the gender
select), you should test and debug this code to ensure it works as expected.

Program:

<!DOCTYPE html>
<html>
<head>
<title>BMI Calculator</title>
<style>
.container {
background-color: #f2f2f2;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 400px;
margin: 0 auto;
text-align: center;
}
input[type="number"]
{
padding: 10px;
border-radius: 5px;
border: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
margin: 10px 0;
width: 95%;
}
select {
padding: 10px;
border-radius: 10px;
border: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
margin: 10px 0;
width: 100%;
font-size: 16px; color: #555;
} button { background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
margin-top: 10px;
width: 100%;
} button:hover {
background-color: #3e8e41;
}
input[type="text"] {
padding: 10px;
border-radius: 5px;
border: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
margin: 10px 0;
width: 95%;
font-size: 20px;
color: #f50202;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<h1>BMI Calculator</h1>
<div><b>Height (in cms)</b></div>
<input type="number" class="form-control" id="height" name="height" required>
<div><b>Weight (in kg)</b></div>
<input type="number" class="" id="weight" name="weight" required>
<div><b>Gender</b></div>
<select id="gender" name="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<button onclick="calculateBMI()">Calculate BMI</button>
<div><b>Your BMI</b></div>
<input type="text" id="result" name="result" readonly>
</div>
</div>
<script>
function
calculateB
MI() {
let height = [Link]("height").value;
let weight = [Link]("weight").value;
let gender = [Link]("gender").value;
let bmi;
if (gender == "male") { bmi =(weight / ((height / 100) ** 2));
} else {
bmi = (weight / ((height / 100) ** 2));
}
[Link]("result").value =
[Link](2); }
</script>
</body>
</html>

OUTPUT:
RESULT:
Thus, the cross platform application for a BMI calculator using Apache Cordova is created
successfully.
[Link]
CROSS PLATFORM APPLICATION FOR A SIMPLE
DATE: EXPENSE MANAGER

Aim:
To Build a cross platform application for a simple expense manager using Apache Cordova.

Description:

The expense manager app is built using a cross-platform framework, ensuring that it works
seamlessly on iOS and Android devices, allowing you to manage your expenses without
device limitations. The application boasts an intuitive and user-friendly interface, making it
effortless to input and categorize expenses, manage income, and track financial
transactions. Keep a real- time record of your daily expenses, including categories like food,
transportation, utilities, entertainment, and more, to gain a clear understanding of your
spending habits.

Procedure:

Step 1: Create a New Cordova Project


Create a new Cordova project by running the following command:

cordova create ExpenseManager [Link]


ExpenseManager

This command creates a new Cordova project named "ExpenseManager" with the
specified package name and display name.

Step 2: Add Platforms


Navigate to the project directory and add platforms for which you want to build the
app.

Step 3: Design the User Interface


Create your app's user interface using HTML, CSS, and JavaScript. You can use
frameworks like Bootstrap or jQuery Mobile for styling and UI components.

Step 4: Implement Data


Entry Create forms for entering expenses and income. Use JavaScript for form
validation and data storage. You can use local storage or SQLite databases for data
persistence.
Step 5: Implement Category-wise Summaries
To display category-wise income and expenses, create logic to group and calculate
data based on categories. You can use JavaScript arrays and objects to manage this
data.

Step 6: Native Features


If you want to access native device features, such as the camera or geolocation, you
can use Cordova plugins. Install and configure the necessary plugins based on your
app's requirements.

Step 7: Test Your App


Test your app using Cordova's built-in development server or by building and
running it on actual devices or emulators/simulators:

cordova run
android
cordova run
ios
Step 8: Debugging Use browser developer tools for debugging the web part of
your app

For debugging native code, you can use platform-specific debugging tools like
Android Studio for Android and Xcode for iOS.

Step 9: Deployment Prepare your app for deployment


To generate release builds, follow the platform-specific guidelines:

For Android: Follow the Android Studio or Gradle-based build system for generating
APK files.

For iOS: Use Xcode to create an IPA file.

Step 10: Continuous Improvement


Listen to user feedback and continuously improve your application. You can add
more features, improve the user interface, and optimize performance in future
updates.

PROGRAM:

<!DOCTYPE html>
<html>
<head>
<title>
EXPENDITURE MANAGER
</title>
<style>
Body {
Margin: 4rem;
Background-image: url(‘C:\\Users\\vivek\\Downloads\\[Link]’); /* Replace
‘your- [Link]’ with the actual URL or path to your background image */
Background-size: cover; /* This property ensures the background image
covers the entire viewport */
Background-repeat: no-repeat; /* Prevents the background image from
repeating */ Background-attachment: fixed; }

#formContainer {
Margin-bottom: 20px;
Background-color: rgba(255, 255, 255, 0); /* Add a semi-transparent white
background to the form container for better readability */
Padding: 20px;
Border-radius: 10px; }
Label {
Display: block;
Margin-top: 10px;
}
Input, Textarea {
Width: 300px;
Padding: 8px;
Margin-top: 5px;
Border: 1px solid #ae76e4;
Border-radius: 4px;
}

Button {
Margin: 10px;
Padding: 8px 16px;
Background-color: #168aad;
Color: #f4f2fd;
Border: none;
Border-radius: 4px;
Cursor: pointer; }
Button:hover {
Background-color: #f80a0a; }
Table {
Border-collapse: collapse;
Margin-bottom: 20px;
Width: 100%;
}

Th, Td {
Border: 1px solid #300505;
Padding: 8px;
Text-align: left;
}
Th {
Background-color: #de98ec;
Color: #000000;
}
</style>
</head>
<body>
<center>
<h1 style=”color: rgb(39, 14, 24);”>
<u> EXPENDITURE MANAGER </u>
</h1>
<h2 style=”color: rgb(12, 80, 10);”>
<u>ENTER THE DETAILS</u>
</h2>
<div id=”formContainer”>
<label for=”dateInput”>Date:</label>
<input type=”date” id=”dateInput” placeholder=”Enter the date”>
<label for=”expenseInput”>Expense:</label>
<input type=”number” id=”expenseInput” placeholder=”Enter the expense”>
<label for=”incomeInput”>Income:</label>
<input type=”number” id=”incomeInput” placeholder=”Enter the
income”><br><br>
<button onclick=”addData()”>Add</button>
<button onclick=”[Link]()”>Print details</button>
</div>
<table id=”outputTable”>
<tr>
<th>Date</th>
<th>Expense</th>
<th>Income</th>
<th>Total</th>
<th>Action</th>
</tr>
</table>
</center>
<script>
Function addData() {
// Get input values
Let date = ([Link](“dateInput”).value);
Let expense = parseFloat([Link](“expenseInput”).value);
Let income = parseFloat([Link](“incomeInput”).value);
Let total = (income – expense).toFixed(2); // Calculate the total

// Get the table and insert a new row at the end


Let table =
[Link](“outputTable”); Let
newRow = [Link]([Link]);
// Insert data into cells of the new row
[Link](0).innerHTML = date;
[Link](1).innerHTML = [Link](2); // Display expense
as a number with 2 decimal places
[Link](2).innerHTML = [Link](2); // Display income as
a number with 2 decimal places
[Link](3).innerHTML = total; // Display total
[Link](4).innerHTML =
‘<button onclick=”editData(this)”>Edit</button>’ +
‘<button onclick=”deleteData(this)”>Delete</button>’;

// Clear input fields


clearInputs();
}

Function editData(button) {
// Get the parent row of the clicked button Let row = [Link];

// Get the cells within the row

Let dateCell = [Link][0];


Let expenseCell = [Link][1];
Let incomeCell = [Link][2];
Let totalCell = [Link][3];
// Prompt the user to enter updated values
Let dateInput = prompt(“Enter the updated date:”, [Link]);
Let expenseInput = parseFloat(prompt(“Enter the updated expense:”,
[Link]));
Let incomeInput = parseFloat(prompt(“Enter the updated income:”,
[Link]));
Let total = (incomeInput – expenseInput).toFixed(2); // Calculate the updated
total

// Update the cell contents with the new values


[Link] = dateInput;
[Link] = [Link](2); // Display expense as a
number with 2 decimal places
[Link] = [Link](2); // Display income as a
number with
2 decimal places [Link] = total; // Update total }

Function deleteData(button) {

// Get the parent row of the clicked button


Let row = [Link];
// Remove the row from the table
[Link](row);
}

Function clearInputs() {

// Clear input fields


[Link](“dateInput”).value = “”;
[Link](“expenseInput”).value = “”;
[Link](“incomeInput”).value = “”;
}
</script>
</body>
</html>
OUTPUT:
RESULT:
Thus the cross platform application for a simple expense manager using Apache Cordova.
[Link]
CROSS PLATFORM APPLICATION FOR UNIT
DATE: CONVERSION

Aim:
To Build a cross platform application to convert units from imperial system to metric system
using Apache Cordova.

Description:
The application should have a user-friendly interface where users can input values in imperial
[Link] should provide options to select the type of conversion (e.g., length, weight,
temperature).The UI should display the converted values in metric units. The application
should contain conversion formulas and logic for various units in the imperial system to
convert them to the metric system. For example, converting inches to centimeters, pounds to
kilograms, Fahrenheit to Celsius, and so on. The application should update the converted
values in real- time as users input their values or change the units.

Procedure:
[Link] Up Your Development Environment:

• Install [Link]: [Link] is the runtime environment that Cordova uses. You'll need it
to run Cordova commands.
• Install Cordova: Cordova is a command-line tool that allows you to create and manage
mobile applications. Install it globally using npm.

2. Create a Cordova Project:


• Use Cordova to create a new project with a specified name, package ID, and project
name. This will serve as the foundation for your unit converter app.

3. Add Platforms:

• Choose the target mobile platforms for your app, such as Android and iOS, and add
them to your Cordova project. This step enables you to build your app for these
platforms.

[Link] the User Interface:


• Design the user interface (UI) for your unit converter app. Use HTML and CSS to
create a visually appealing and intuitive interface. You'll need input fields for user
values, dropdowns or buttons for selecting unit types, and an area to display the
converted result.

[Link] Conversion Logic:


• Write JavaScript code to handle unit conversions. Depending on the type of units you
want to convert, create conversion functions or algorithms to process user input and
calculate the converted values.
• Ensure that your code validates user input and provides clear error messages when
necessary.
[Link] Required Plugins:
• Cordova provides a range of plugins that extend the capabilities of your app. If your
unit converter app requires access to specific device features (e.g., camera, location),
install the necessary Cordova plugins.

[Link] the App:


• Use Cordova's build command to generate platform-specific packages for your app.
This step prepares your app for deployment on Android and iOS devices.

PROGRAM:
#HTML
<!DOCTYPE html>
<html>
<head>
<title>Unit Converter</title>
<link rel="stylesheet" type="text/css" href="css/[Link]" /> </head>
<body>
<h1>Unit Converter</h1>
<div class="converter">
<label for="milesInput">Miles:</label>
<input type="text" id="milesInput" />
<button onclick="convertMilesToKilometers()"> Convert to Kilometers
</button>
<p id="resultMilesToKm"></p>
</div>
<div class="converter">
<label for="poundsInput">Pounds:</label>
<input type="text" id="poundsInput" />
<button onclick="convertPoundsToKilograms()">Convert To Kilograms</button>

<p id="resultPoundsToKg"></p>

</div>
<div class="converter">
<label for="litersInput">Liters:</label>
<input type="text" id="litersInput" />
<button onclick="convertLitersToKilograms()">Convert To Kilograms</button>
<p id="resultLitersToKg"></p>
</div>
<script src="js/[Link]"></script>
</body>
</html>

#CSS
/* Dark-themed Unit Converter CSS */

body {

font-family: "Roboto", Arial, sans-serif;

background-color: #121212; /* Dark background color */ color: #ffffff; /* Light text color
*/
margin: 0; padding: 0;
display: flex;
flex-direction: column; align-items: center;
height: 100vh;
}
h1 {
font-size: 36px;
color: #ffffff;
margin-bottom: 20px;
}

.container { background-color: #1f1f1f; /* Dark container background color */


border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 350px;
text-align: center;
}

.label { font-weight: bold; font-size: 16px;


color: #ffffff; /* Light text color */
margin-bottom: 10px;
}
.input { width:100%;
padding: 10px;
border: 1px solid #333; /* Slightly lighter border color */
border-radius: 5px;
margin-bottom: 15px;
font-size: 16px;
color: #ffffff; /* Light text color */
background-color: #1f1f1f; /* Dark input
background color */ }

.button { background-color: #007bff;


color: #ffffff; border: none;
border-radius: 5px;
padding: 12px 20px;
cursor: pointer;
font-size: 18px;
transition: background-color 0.3s ease; }
.button:hover { background-color: #0056b3;
}
.result {
font-weight: bold;
color: #ffffff;
margin-top: 15px;
font-size: 20px;
}
<link rel="stylesheet" type="text/css" href="css/[Link]">
#Javascript

function convertMilesToKilometers() {
const miles = parseFloat([Link]("milesInput").value);
if (!isNaN(miles)) {
const kilometers = miles * 1.60934;
[Link](
"resultMilesToKm"
).textContent = `${miles} miles is approximately ${[Link]( 2 )}
kilometers.`;
}
}
function convertPoundsToKilograms() {
const pounds = parseFloat([Link]("poundsInput").value);
if
(!isNaN(pounds)) {
const kilograms = pounds * 0.453592; [Link](
"resultPoundsToKg"
).textContent = `${pounds} pounds is approximately ${[Link]( 2
)} kilograms.`;
}
}
function convertLitersToKilograms() {
const liters = parseFloat([Link]("litersInput").value); if
(!isNaN(liters)) {
const kilograms = liters * 0.99792; // Conversion factor from liters to
kilograms [Link](
"resultLitersToKg"
).textContent = `${liters} liters is approximately ${[Link]( 2
)} kilograms.`;
}
}
Output:

RESULT:

Thus a cross platform application to convert units from imperial system to metric system
using Apache Cordova is completed Successfully.
[Link]
CROSS PLATFORM APPLICATION FOR DAY TO DAY
DATE: TASK (to-do) MANAGEMENT

Aim:
To Build a cross platform application for day to day task(to-do) management using
Apache Cordova.

Description:
A cross-platform application for day-to-day task (to-do) management is a software tool
designed to help users organize and manage their tasks, appointments, and responsibilities
efficiently. These applications are built to run on multiple operating systems and devices,
such as smartphones, tablets, and desktop computers. They typically offer a range of
features to help users keep track of their tasks and stay organized.

Procedure:

Document Type Declaration and HTML Structure :


•
<!DOCTYPE html>: Declares the document type and version of HTML being
used.
• <html lang="en">: Defines the root element of the HTML document with the
language attribute set to English.
Head Section:

• <head>: Contains metadata and links to external resources for the document. 
<title>: Sets the title of the web page to "To-Do List App."  Meta tags for
character set and viewport settings.
• Links to external stylesheets for fonts, Semantic UI, and Noty (a notification
library).
• Reference to a local favicon file.

Body Section :
<body>: Contains the main content of the web page.

• <header>: Defines the main header of the page with the title "To-Do List App."
i. Add Task Section

ii. <form id="add-task">: Form for adding tasks.


iii. <input>: Text input for entering a new task.
iv. <i class="tasks icon"></i>: Icon indicating a task input.
ii. Buttons Section

• <div id="buttons">: Contains buttons for clearing tasks.


• "Clear all tasks" button with an onclick event to show a modal.  "Clear completed
tasks" button (currently disabled).

iii. Tasks List Section

• <ul id="tasks-list">: Unordered list for displaying tasks as segments.

iv. Edit Modal Section

• <div id="edit-modal">: Modal for editing a task.


• <input id="task-id" type="hidden">: Hidden input for storing the task ID.
• <input id="task-text" type="text">: Input for editing the task text.

v. Delete Modal Section

• <div id="remove-modal">: Modal for confirming task deletion.


• <input id="task-id" type="hidden">: Hidden input for storing the task ID.
• Message asking if the user is sure about deleting the task.

vi. Clear All Tasks Modal Section

<div id="clear-all-tasks-modal">: Modal for confirming clearing all tasks.

<input id="task-id" type="hidden">: Hidden input for storing the task ID.
Message asking if the user is sure about clearing all tasks.

vii. Clear Completed Tasks Modal Section

• <div id="clear-completed-tasks-modal">: Modal for confirming clearing


completed tasks.
• <input id="task-id" type="hidden">: Hidden input for storing the task ID.
• Message asking if the user is sure about clearing completed tasks.
Scripts Section
• JavaScript libraries and scripts:
• Noty: A notification library.
• jQuery: A JavaScript library.
• Semantic UI: A CSS framework for UI.
• Toastify: A library for toast notifications.
• js/[Link]: A custom JavaScript file for handling interactions and logic.
• To complete the app, we’ll need to implement the JavaScript functionality in
"[Link]" to handle task management (adding, editing, deleting, and clearing
tasks) and user interactions.
PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<title>To-Do List App</title>
<!-- Meta Tags -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Links -->
<link rel="icon" href="C:\Users\mhdda\todo_proj\www\img\[Link]"
type="image/x- icon" />
<linkhref="[Link]
splay=swap" rel="stylesheet"
/>
<link rel="stylesheet"
href="[Link]
integrity="sha5128bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+x
PjynxIopALmOPqzo9J Zj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" />
<link rel="stylesheet"
href="[Link]
integrity="sha512NXUhxhkDgZYOMjaIgd89zF2w51Mub53Ru3zCNp5LTlEzMb
NNAjTjDbpURYGS5Mop2cU4b7re1nOIucsVlrx9fA=" crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/[Link]" />
</head>
<body>
<!-- Main Header -->
<header class="main-header">
<div class="ui container">
<h1>To-Do List App</h1>
</div>
</header>
<!-- End Main Header -->
<div class="ui container">
<!-- Add Task -->
<form id="add-task" class="ui left icon input fluid">
<input id="add-task-
input" class="large"
type="text"
placeholder="Write your task here..."
/>
<i class="tasks icon"></i>
</form>
<!-- End Add Task -->

<!-- Buttons -->


<div id="buttons" class="ui stackable grid equal width">
<button id="clear-all-tasks"
class="ui button column"
onclick="showClearAllTasks
Modal()"
>
Clear all tasks
</button>
<button disabled class="ui button column"
onclick="showClearCompletedTasksModal()" >
Clear completed tasks
</button>
</div>
<!-- End Buttons -->

<!-- Tasks List -->


<ul id="tasks-list" class="ui segments"></ul>
<!-- End Tasks List -->
<!-- Edit Modal -->
<div id="edit-modal" class="ui tiny modal">
<div class="header">Update Your Task</div>
<div class="content">
<div class="ui fluid input"
<input id="task-id" type="hidden" />
<input id="task-text" type="text" />
</div>
</div>
<div class="actions">
<div class="ui cancel button">Cancel</div>
<div id="update-button" class="ui positive right labeled icon button">
Update
<i class="checkmark icon"></i>
</div>
</div>
</div>
<!-- End Edit Modal -->
<!-- Delete Modal -->
<div id="remove-modal" class="ui tiny modal">
<div class="header">Delete Your Task</div>
<div class="content">
<div class="ui fluid input">
<input id="task-id" type="hidden" />
<p>Are you sure you want to delete your task?</p>
</div>
</div>
<div class="actions">
<div class="ui cancel red button">No</div>
<div id="remove-button" class="ui positive right labeled icon button">
Yes
<i class="checkmark icon"></i>
</div>
</div>
</div>
<!-- End Delete Modal -->
<!-- Clear All Tasks Modal -->
<div id="clear-all-tasks-modal" class="ui tiny modal">
<div class="header">Clear All Tasks</div>
<div class="content">
<div class="ui fluid input">
<input id="task-id" type="hidden" />
<p>Are you sure you want to clear all
tasks?</p> </div>
</div>
<div class="actions">
<div class="ui cancel red button">No</div>
<div id="remove-button"
onclick="clearAllTasks()"
class="ui positive right labeled
icon button" >
Yes
<i class="checkmark icon"></i>
</div>
</div>
</div>
<!-- End Clear All Tasks Modal -->
<!-- Clear Completed Tasks Modal -->
<div id="clear-completed-tasks-modal" class="ui tiny
modal">
<div class="header">Clear Completed Tasks</div>
<div class="content">
<div class="ui fluid input">
<input id="task-id" type="hidden" />
<p>Are you sure you want to clear completed tasks?</p>
</div>
</div>
<div class="actions">
<div class="ui cancel red button">No</div>
<div id="remove-button" onclick="clearAllTasks()" class="ui
positive right labeled icon button"
>
Yes
<i class="checkmark icon"></i>
</div>
</div>
</div>
<!-- End Clear Completed Tasks Modal --> </div>
<!-- Scripts -->
<script> src="[Link]
integrity="sha512lOrm9FgT1LKOJRUXF3tp6QaMorJftUjowOWiDcG5GFZ/q7uko
f19V0HKx/GWzXCdt9zYju3/KhBNdCLzK8b90Q==" crossorigin="anonymous"
></script>

<script
src=[Link]
integrity="sha512bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FQYoCLt
UjuuRuZo+fjqhx/qtq/1itJ 0C2ejDxltZVFg=="crossorigin="anonymous"></script>

<scriptsrc="[Link]
.js"
integrity="sha512dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1Mr
UhUITE5QU9pkcSox+ynfLhL1 5Sv2al5A0LVyDCmtUw=="
crossorigin="anonymous" >
</script>

<script type="text/javascript"
src="[Link] >
</script>
<script type="text/javascript"
src="js/[Link]"></script> </body>

</html>
OUTPUT:
RESULT:
Thus a cross platform application for day to day task(to-do) management using Apache
Cordova is completed Successfully.
[Link]
CROSS PLATFORM APPLICATION FOR A USER
DATE: LOGIN SCREEN

Aim:
To Build a cross platform android application using Cordova for a user login screen with
username, password, reset button and a submit button.
Description:
Creating an Android application using Cordova for a user login screen with a username
and password input, reset button, submit button, header image, and label can be achieved
using HTML, CSS, and JavaScript. Cordova allows you to package a web-based
application into a native Android app.

Procedure:
Step 1: Creating the Index Page for Login App

• In the development of Login App, the first step was to create the index page. This
page serves as the initial point of entry for users.
• On this page, we designed a user-friendly login form, allowing users to input their
username and password.
• We included an option for users to sign up if they were not already registered. This
provides a seamless path for new users.
• A reset button was implemented to enable users to clear the text in the username and
password fields quickly.
• At the top of the page, we added a logo to give Login App its unique identity.

Step 2: Implementing Sign-Up Page Navigation

• To enhance user experience, we implemented a page redirection mechanism. When


users click the "Sign Up" option on the login page, they are seamlessly redirected to
the sign-up page.

Step 3: Designing the Sign-Up Page

• For users who want to register with Login App, we created a dedicated sign-up page.
• On this page, users can initiate the sign-up process by clicking the "Sign Up" button.
We designed a user-friendly form that prompts users to provide their email, choose a
password, and confirm the password to ensure a match.

Step 4: Implementing the "Remember Me" Option

• To enhance user convenience, we included a "Remember Me" checkbox on the sign-


up page.
• This feature allows users to log in quickly during subsequent visits.
• Users were also prompted to read and agree to the terms of service before
proceeding with account creation, ensuring legal and ethical considerations.

Step 5: Adding Sign-Up and Cancel Buttons

• To finalize the sign-up process, we placed a prominent "Sign Up" button on the
sign-up page.
• Users can click this button to confirm their account registration.
• Additionally, we provided a "Cancel" button for users who may need further
assistance or wish to change their decision.

Step 6: Validating Form Fields

• To maintain data integrity and usability, we implemented form field validation.


• Our application checks for unfilled sections in the form. If any required fields are
left blank, the application prompts users to complete those sections.
• Technologies Used in Developing Login App:
Apache Cordova: We leveraged the power of Apache Cordova, a framework for
building mobile applications using web technologies such as HTML, CSS, and
JavaScript, to create Login App.

HTML: HTML was used extensively to structure and create the content of the app's web
pages, ensuring a seamless and consistent user interface.

CSS: We applied CSS to style and layout the pages, making them visually appealing and
aligning with the app's branding.
Gradle: Gradle support in Visual Studio Code was instrumental in managing dependencies
and building the Cordova application, ensuring the smooth development and deployment of
Login App.
PROGRAM:
LOGIN PAGE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style> body { font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida
Grande', 'Lucida Sans', Arial, sans-serif;
background-image: url('TAYLOR SWIFT NEW [Link]');
background-size: cover; background-repeat: no-repeat; margin: 0;
padding: 0; display: flex; flex-direction: column; align-items: center;
justify-content: center;
height: 100vh;
}
.login-container { background-color: rgb(200, 243, 248); border-radius: 10px;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
text-align: center;
}
input[type="text"], input[type="password"]
{ width: 100%; padding: 10px; margin: 10px 0;
border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;
}
label {
font-weight: bold;
}
.btn-container {
margin-top:
20px; }

button[type="reset"], button[type="submit"]
{
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

button[type="reset"] {
background-color: #ccc;

button[type="submit"]
{ background-color: #000000;
color: #fff;
}

/* Add some style to the "Forgot Password" link */

.forgot-password-link

{ text-decoration: none;

color: #007bff;

font-weight: bold;

margin-top: 10px;

display: inline-block;

</style>

</head>
<body>

<div class="login-container">

<!-- <img src="[Link]" alt="Header Image"


class="header-image"-->

<h2>Login</h2>

<form action="your_login_script.php" method="post">


<div>

<label for="username">Username:</label>

<input type="text" id="username" name="username" required


placeholder="Enter username">

</div>
<div>

<label for="password">Password:</label>

<input type="password" id="password" name "password"


required placeholder="Enter password">

</div>

<div class="btn-container">

<button type="reset">Reset</button>
<button type="submit">Submit</button>

</div>

<!-- Add the "Forgot Password" link -->

<a href="javascript:void(0);" class="forgot-password-link">Forgot


Password? Signup</a>

</form>

</div>

<!-- JavaScript to prevent back button navigation -->

<script>

// Disable the back button when "Forgot Password?" link is clicked

[Link](".forgot-password-link").addEventListener("click", function
(event) { [Link](); // Prevent the default
link behavior

// You can add additional logic here, such as redirecting to the signup page
[Link] = "signup_page.html"; // Redirect to the signup page

});

</script>

</body>

</html>

SIGNUP PAGE:
<!DOCTYPE html>

<html>

<style>
body {

font-family: Arial, Helvetica,


sans-serif;

background-image: url('TAYLOR SWIFT NEW [Link]'); /* Specify the path


to your background image */ background-size: cover; /* Cover the entire viewport
*/ background-repeat: no-repeat; /* Prevent image repetition */

* {box-sizing: border-box;}

/* Full-width input fields */

input[type=text], input[type=password] {

width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none; background: #f1f1f1;
} /* Add a background color when the inputs get focus */

input[type=text]:focus, input[type=password]:focus {

background-color: #ddd;

outline: none;

/* Set a style for all buttons */ button {


background-color: #040404;

color: white; padding: 14px 20px;

margin: 8px 0; border: none;

cursor: pointer; width: 100%; opacity: 0.9;

button:hover {
opacity:1;
}

/* Extra styles for the cancel button */

.cancelbtn {

padding: 14px 20px;


background-color: #09bbf7;

/* Float cancel and signup buttons and add an equal width */

.cancelbtn, .signupbtn { float: left;

width: 50%;

/* Add padding to container elements */

.container
{
padding:
16px;

/* The Modal (background) */


.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */

z-index: 1; /* Sit on top */

left: 0; top: 0;

width: 100%; /* Full width */

height: 100%; /* Full height */

overflow: auto; /* Enable scroll if needed */

background-color: #474e5d; padding-top: 50px;

} /* Modal Content/Box */

.modal-content {

background-color: #fefefe;

margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size
*/ }

/* Style the horizontal ruler */ hr {

border: 1px solid #f1f1f1;


margin-bottom: 25px;

}
/* The Close Button (x) */

.close {

position: absolute;

right: 35px;

top: 15px;

font-size: 40px;

font-weight: bold;

color: #f1f1f1;

.close:hover,

.close:focus { color: #0194fd; cursor: pointer;

/* Clear floats */
.clearfix::after { content: ""; clear: both; display: table;

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {

.cancelbtn, .signupbtn {
width: 100%;

</style>

<body>

<h2>Modal Signup Form</h2>

<button onclick="[Link]('id01').[Link]='block'"
style="width:auto;">Sign Up</button>

<div id="id01" class="modal">


<span onclick="[Link]('id01').[Link]='none'" class="close"
title="Close Modal">&times;</span>

<form class="modal-content" action="/action_page.php">


<div class="container">

<h1>Sign Up</h1>

<p>Please fill in this form to create an account.</p>

<hr>

<label for="email"><b>Email</b></label>

<input type="text" placeholder="Enter Email" name="email" required>

<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>

<input type="password" placeholder="Repeat Password" name="psw-repeat"


required>

<label>

<input type ="checkbox" checked="checked" name="remember" style="m argin-


bottom:15px"> Remember me </label>

<p>By creating an account you agree to our <a href="#"


style="color:dodgerblue">Terms & Privacy</a>.</p>

<div class="clearfix">

<button type="button"
onclick="[Link]('id01').[Link]='none'"
class="cancelbtn">Cancel</button>

<button type="submit" class="signupbtn">Sign Up</button>


</div>

</div>

</form>

</div>

<script> // Get the modal


var modal = [Link]('id01');

// When the user clicks anywhere outside of the modal, close it [Link] =
function(event) {
if ([Link] == modal) { [Link] = "none"; }
} </script>

</body>

</html>

OUTPUT:

RESULT:

Thus a cross platform android application using Cordova for a user login screen with
username, password, reset button and a submit button is completed Successfully.
[Link] ANDROID APPLICATION TO FIND AND DISPLAY
DATE: THE CURRENT LOCATION OF THE USER

Aim:
To develop an android application using Apache Cordova to find and display the current
location of the user.

Description:
This is a web-based "Location App" that integrates with Google Maps to display a user's
current location on a map. Users can click a "Get Location" button to obtain their latitude,
longitude, accuracy, and district information. The app also maintains a location history,
allowing users to view past location data. It incorporates JavaScript for functionality and
styling and may be integrated with the Cordova framework for mobile app development.

Procedure:
Step 1: Set Up Your Development Environment
[Link]: Install [Link] from the official website (e.g.,
[[Link]

[Link] Cordova: Install Apache Cordova globally using npm (e.g., npm
install -g cordova).

[Link] SDK: Download and install the Android SDK. Configure Android
Virtual Devices (AVDs) for testing.

Step 2: Create a New Cordova Project


1. Use the Cordova CLI to create a new project, specifying a name, package name,
and display name (e.g., cordova create [YourAppName] [YourPackageName]
[YourDisplayName]).

Step 3: Add Android Platform


1. Add the Android platform to your Cordova project using the Cordova CLI (e.g.,
cordova platform add android).

Step 4: Install Plugins


1. Install plugins for desired functionalities. For location services, use the Cordova
Geolocation plugin (e.g., cordova plugin add cordova-plugin-geolocation).
Step 5: Build the App
1. Use the Cordova CLI to build your app. This step compiles your HTML, CSS, and
JavaScript into an Android-compatible format (e.g., cordova build).

Step 6: Create the User Interface


1. Design the user interface for your app using HTML, CSS, and JavaScript in the
www folder

Step 7: Access the Geolocation in JavaScript


1. Write JavaScript code to access the device's geolocation using the Cordova
Geolocation plugin.

Step 8: Test Your App


1. Connect an Android device or set up an Android Virtual Device (AVD) for
testing.
2. Use the Cordova CLI to deploy and run your app on the Android device or
AVD (e.g., cordova run android).
Step 9: Permissions
[Link] that your [Link] file includes the necessary permissions
for location access.
[Link] example, include permissions like <uses-permission
android:name="[Link].ACCESS_COARSE_LOCATION"/>and<use
s-permission android:name="[Link].ACCESS_FINE_LOCATION"
/>.
Step 10: Build and Distribute
1. After thorough testing, use the Cordova CLI to build a release APK for distribution
on the Google Play Store (e.g., cordova build android --release).

Use Case:
• The user launches the Location App in a web browser or Cordova-based
mobile app.
• The user clicks the "Get Location" button within the app, triggering the
process to obtain their current location.
• The app uses the device's geolocation services to fetch the user's current
latitude, longitude, and accuracy.
• The app initiates reverse geocoding by sending a request to a Geocoding
Service (e.g., Google Geocoding API) to determine the district based on the
user's latitude and longitude.
• The app updates the user interface to display the user's latitude, longitude,
accuracy, and the district information obtained from the geocoding service.
• The app displays a map centered on the user's location, marking the location
with a pin, providing a visual representation of the user's coordinates.
• The app maintains a location history, storing the user's location data, including
latitude, longitude, accuracy, district, and timestamp for future reference.

Program:

Page:1

<!DOCTYPE html>

<html>

<head>

<title>Where Am I</title>

<style>

body { font-family:

Arial, sans-serif;
text-align: center;

margin: 0;

padding: 20px;

background-color: #0a4e70;

h2 {
color: #fff;
}
button {

padding: 10px 20px;


background-color: #010b10;
color: #fff;

border: none;
cursor: pointer;

font-size: 16px; border-


radius:8px;

button:hover { background-color: #010b10;

</style>

</head>

<body>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<h2>Where Am I</h2>
<button onclick="[Link]='location_details.html'">Click To
Go</button> </body>

</html>

<!DOCTYPE html>

<html>

<head>
<title>Location Details</title>

<script type="text/javascript" src="[Link]"></script>


<script> function loadMapScript() {
var script = [Link]('script');
[Link] =
'[Link]
V07kU4g9rlwWXK0&callback=initMap';
[Link](script); }
</script>

<script type="text/javascript" src="[Link]"></script>

<script> loadMapScript();

</script>
<style>
body {

font-family: Arial, sans-serif;

text-align: center;
margin: 0;

padding: 20px;

background-color: #0a4e70;

}
#location { font-size: 18px;

margin-top: 20px;

background-color:#0a4e70;

padding: 10px;

border-radius: 8px;
border: 2px solid #ccc;

color: white;

button {

padding: 10px 20px;

background-color: #012739;

color: #fff;
border: none;

cursor: pointer;

font-size: 16px;

border-radius: 8px;
}

button:hover { background-color:#010b10;
}

#map {

margin-top: 20px;
border: 2px solid #ccc;

border-radius: 8px;

height: 400px;
}

</style>

</head>

<body>

<br><button onclick="getLocation()">Get Location</button>

<p id="location"></p>
<div id="map" style="height: 450px;"></div>

<ul id="history"></ul>

<button onclick="viewLocationHistory()">Location History</button>

</body>

<script type="text/javascript"> [Link]("deviceready",


onDeviceReady, false);

var map; var district = "Dindigul"; // Default value function onDeviceReady()

{ [Link]("Device is ready");

getLocation();

}
function getLocation() {

[Link](onSuccess, onError);

function onSuccess(position) {

var latitude = [Link];

var longitude = [Link];

var accuracy = [Link];


var locationData = {

latitude: latitude, longitude: longitude, accuracy: accuracy,


timestamp: new Date().toLocaleString(), district: district

};

var locationHistory = [Link]([Link]('locationHistory')) || [];


[Link](locationData);
[Link]('locationHistory', [Link](locationHistory));

// Display location information var locationString = "Latitude: " + latitude


+ "<br>Longitude: " + longitude +

"<br>Accuracy: " + accuracy + " meters<br>District: " + district;


[Link]("location")

.innerHTML = locationString;

initMap(latitude, longitude);
}

function onError(error) { alert("Error getting location: " + [Link]); }

function initMap(latitude, longitude) { var mapOptions = { center: { lat: latitude,


lng: longitude },
zoom: 15

};

map = new [Link]([Link]('map'),


mapOptions);

// Add a marker at the user's location

var userLocation = new [Link](latitude, longitude);

var marker = new [Link]({


position: userLocation, map: map,

title: 'Your Location'

}
)
;
}
Function

{
var locationHistory = [Link]([Link]('locationHistory')) || [];
[Link]('locationHistory', [Link](locationHistory));
[Link] = 'location_history.html'; }

</script>

</html>
<!DOCTYPE html>
<html>

<head>
<title>Location History</title>
<style>

body {

font-family: Arial, sans-serif;

text-align: center;
margin: 0;

padding: 20px;

background-color: #0a4e70;

}
h2 {
color: #f6f6f6;

}
ul { list-style-type: none;

padding: 0;

}
li {

margin: 10px 0;

background-color: #70b8dc;

padding: 10px; border-radius: 8px;


border: 1px solid #ccc;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

text-align: left;
}

</style>

</head>
<body>
<h2>Location History</h2>

<ul id="history"></ul> <script type="text/javascript">


var locationHistory = [Link]([Link]('locationHistory')) || [];

var historyList = [Link]("history");


[Link](function (location) {
var listItem = [Link]("li");

[Link] = `Latitude: ${[Link]}, Longitude:


${[Link]},
Accuracy: ${[Link]} meters, District: ${[Link]}, Time:

${[Link]}`;
[Link](listItem); });
</script>

</body>

</html>

Output:
APP INTERFACE:

RESULT:
Thus an android application using Apache Cordova to find and display the current location
of the user is completed successful.
[Link]
ANDROID APPLICATION FOR SIMPLE LIBRARY
DATE: MANAGEMENT SYSTEM

Aim:

To develop an android application for simple Library Management system for displaying
books available, books lend and book reservation using Apache Cordova

Description:
An Android application for a simple Library Management System using Apache Cordova is
a mobile app designed to manage the basic operations of a library, such as displaying
available books, tracking books that have been lent to users, and allowing users to reserve
books. This application is built using Cordova to ensure cross-platform compatibility, making
it accessible on Android devices without needing to write platform-specific code. The app
provides a user interface that lists the available books in the library. Users can browse through
the collection, search for specific titles, or filter books by genre, author, or other criteria. The
app keeps a record of books that have been lent to library patrons. For each lent book, the
application records details such as the borrower's name, due date, and checkout date. The
application may include user management features, such as user registration, login, and
profiles. This enables users to have personalized experiences and track their borrowed and
reserved books

Procedure:

1. Development Setup:
• Install Android Studio.
• Create a new Android project.
2. UI Design:
• Create XML layout files for the app's screens.
• Design a user-friendly interface to display books, book details, and user
information.
3. Database Integration:
• Set up SQLite for local data storage.
• Set up external database connectivity for user information and potentially
book data.
4. Backend Development:
• Implement user registration and login logic.
• Write code to interact with the databases (SQLite and external).
5. Frontend Development
• Create UI elements and content them to your backend logic.
• Implement book lists,book details, and user profiles.
6. Testing
• Thoroughly test the app,focusing on user registration , login , borrowing,
and reserving books.
• Check database interactions for accuracy and security.

OUTPUT:

WEB VIEW MOBILE VIEW

RESULT:

Thus develop an android application for simple Library Management System for displaying
books available , books lend and book reservation using Apache Cordova is completed
Successfully.

You might also like