lOMoAR cPSD| 7367891

M.A.M. SCHOOL OF ENGINEERING

SIRUGANUR, TRICHY - 621 105.

DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND DATA SCIENCE

CCS332 – APP DEVELOPMENT LABORATORY

Name :………………………..

Register Number :………………………..

Year/Semester :………………………..

Degree/Dept. :………………………..
 lOMoAR cPSD| 7367891

M.A.M. SCHOOL OF ENGINEERING

SIRUGANUR, TRICHY- 621 105.
BONAFIDE CERTIFICATE

Certified that this is the bonafide record of work done by

Mr./Ms…………………….(Reg.No. ………………….) studying in
Third year Fifth semester B.Tech. Artificial Intelligence and Data Science has
completed CCS332 – APP DEVELOPMENT LABORATORY during the
academic year 2024-2025 successfully.

STAFF-IN-CHARGE HEAD OF THE DEPARTMENT

Submitted for the University Practical Examination held on…………. at

M.A.M. School of Engineering, Trichy- 621 105.

INTERNAL EXAMINER EXTERNAL EXAMINER

 lOMoAR cPSD| 7367891

INDEX

EX.NO DATE NAME OF THE EXPERIMENT PAGE NO MARKS SIGN

1. Using react native, build a cross platform application for a

BMI calculator.

Build a cross platform application for a simple expense

2. manager which allows entering expenses and income on
each day and displays category wise weekly income and
expense.
Develop a cross platform application to convert units from
3. imperial system to metric system ( km to miles, kg to
pounds etc.,)

4. Design and develop a cross platform application for day to

day task (to-do) management.

Design an android application using Cordova for a user

5. login screen with username, password, reset button and a
submit button. Also, include header image and a label. Use
layout managers.
6. Design and develop an android application using Apache
Cordova to find and display the current location of the user.
Write programs using Java to create Android application
having Databases
● For a simple library application.
7. ● For displaying books available, books lend, book
reservation.
Assume that student information is available in a database
which has been stored in a database server.
 lOMoAR cPSD| 7367891

M.A.M. SCHOOL OF ENGINEERING, SIRUGANUR, TRICHY-621105

(Approved by AICTE, New Delhi and Affiliated to Anna University, Chennai)
(ACCREDITED BY NAAC)

VISION
“To emerge as a Premier Institute by empowering the students with competent knowledge, employable
skills and research culture to satisfy the needs of the industry and society”

MISSION
 To offer conducive and innovative teaching learning environment.
 To equip the students with value and ethical based training to enhance the employability skills.
 To promote continuous learning and to facilitate exchange of innovative ideas through industry
and institute collaborations.
 To imbibe communication skills, leadership skills, entrepreneurial skills and human values among
the student.
 lOMoAR cPSD| 7367891

DEPARTMENT VISION

To build an ecosystem to contribute to society by producing leaders in Artificial

Intelligence and Data Science through education and research..

DEPARTMENT MISSION

 Train the students in the state-of-the-art technologies of AI&DS.

 Sensitize students to solve societal issues through AI techniques by inculcating values and ethics.
 Enhance employability and entrepreneurial skills in the field of AI & DS through experiential and
self-directed learning.
 Foster research aptitude among the students through project-based learning..

PROGRAM EDUCATIONAL OBJECTIVES (PEO’S)

Graduates can
 Utilize their proficiencies in the fundamental knowledge of basic sciences, mathematics, Artificial
Intelligence, data science and statistics to build systems that require management and analysis of
large volumes of data.
 Advance their technical skills to pursue pioneering research in the field of AI and Data Science
and create disruptive and sustainable solutions for the welfare of ecosystems.
 Think logically, pursue lifelong learning and collaborate with an ethical attitude in a
multidisciplinary team.
 Design and model AI based solutions to critical problem domains in the real world.
 Exhibit innovative thoughts and creative ideas for effective contribution towards economy
building.

PROGRAM SPECIFIC OUTCOMES (PSO’S)

The students will be able to
 Evolve AI based efficient domain specific processes for effective decision making in several
domains such as business and governance domains.
 Arrive at actionable Foresight, Insight, hindsight from data for solving business and engineering
problems
 Create, select and apply the theoretical knowledge of AI and Data Analytics along with practical
industrial tools and techniques to manage and solve wicked societal problems
 Develop data analytics and data visualization skills, skills pertaining to knowledge acquisition,
knowledge representation and knowledge engineering, and hence be capable of coordinating
complex projects.
 Able to carry out fundamental research to cater the critical needs of the society through cutting
edge technologies of AI.
 lOMoAR cPSD| 7367891

PROGRAM OUTCOMES

Engineering Graduates will be able to:

1. Engineering knowledge: (K3) Apply the knowledge of mathematics, science, engineering

fundamentals, and an engineering specialization to the solution of complex engineering problems.

2. Problem analysis: (K4) Identify, formulate, review research literature, and analysis complex
engineering problems reaching substantiated conclusions using first principles of mathematics,
natural sciences, and engineering sciences.

3. Design/development of solutions: (K4) Design solutions for complex engineering problems and
design system components or processes that meet the specified needs with appropriate
consideration for the public health and safety, and the cultural, societal, and environmental
considerations.

4. Conduct investigations of complex problems: (K5) Use research-based knowledge and

research methods including design of experiments, analysis and interpretation of data, and
synthesis of the information to provide valid conclusions.

5. Modern tool usage: (K3, K5, K6) Create, select, and apply appropriate techniques, resources,
and modern engineering and IT tools including prediction and modeling to complex engineering
activities with an understanding of the limitations.

6. The engineer and society: (A3) Apply reasoning informed by the contextual knowledge to assess
societal, health, safety, legal and cultural issues and the consequent responsibilities relevant to the
professional engineering practice.

7. Environment and sustainability: (A2) Understand the impact of the professional engineering
solutions in societal and environmental contexts, and demonstrate the knowledge of, and need for
sustainable development.

8. Ethics: (A3) Apply ethical principles and commit to professional ethics and responsibilities and
norms of the engineering practice.

9. Individual and team work: (A3) Function effectively as an individual, and as a member or leader
in diverse teams, and in multidisciplinary settings.

10. Communication: (A3) Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend and write
effective reports and design documentation, make effective presentations, and give and receive
clear instructions.

11. Project management and finance: (A3) Demonstrate knowledge and understanding of the
engineering and management principles and apply these to one’s own work, as a member and
leader in a team, to manage projects and in multidisciplinary environments.

12. Life-long learning: (A2) recognize the need for and have the preparation and ability to engage
in independent and life-long learning in the broadest context of technological change.
 lOMoAR cPSD| 7367891

SYLLABUS

CCS332 APP DEVELOPMENT LABORATORY

COURSE OBJECTIVES:
• To learn development of native applications with basic GUI Components
• To develop cross-platform applications with event handling
• To develop applications with location and data storage capabilities
• To develop web applications with database access

PRACTICAL EXERCISES: 30 PERIODS

1. Using react native, build a cross platform application for a BMI calculator.
Build a cross platform application for a simple expense manager which allows entering
2. expenses and income on each day and displays category wise weekly income and expense.
Develop a cross platform application to convert units from imperial system to metric
3. system ( km to miles, kg to pounds etc.,)
4. Design and develop a cross platform application for day to day task (to-do) management.
Design an android application using Cordova for a user login screen with username,
5. password, reset button and a submit button. Also, include header image and a label. Use
layout managers.
Design and develop an android application using Apache Cordova to find and display the
6. current location of the user.
Write programs using Java to create Android application having Databases
● For a simple library application.
7. ● For displaying books available, books lend, book reservation.
Assume that student information is available in a database which has been stored in a
database server.

COURSE OUTCOMES:
CO1:Develop Native applications with GUI Components.
CO2:Develop hybrid applications with basic event handling.
CO3 Implement cross-platform applications with location and data storage capabilities.
CO4: Implement cross platform applications with basic GUI and event handling.
CO5:Develop web applications with cloud database access.

Software Requirements:
Android studio.
Ex.No:01 Cross Platform Application for A BMI 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.

10. Closing 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.

11. Debugging 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 calculateBMI() {
let height = document.getElementById("height").value;
let weight = document.getElementById("weight").value;
let gender = document.getElementById("gender").value;
let bmi;
if (gender == "male") {
bmi =(weight / ((height / 100) ** 2));
} else {
 bmi = (weight / ((height / 100) ** 2));
}
document.getElementById("result").value = bmi.toFixed(2);
}
</script>
</body>
</html>

Output:
Result:
Thus, the cross platform application for a BMI calculator using Apache Cordova is created
successfully
EX.NO:02 Cross platform application for a simple 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 com.example.expensemanager 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.
Code:
<!DOCTYPE html>
<html>

<head>
<title>
EXPENDITURE MANAGER
</title>
<style>
Body {
Margin: 4rem;
Background-image: url(‘C:\\Users\\vivek\\Downloads\\kk.jpg’); /* Replace ‘your-
image-url.jpg’ 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=”window.print()”>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 = (document.getElementById(“dateInput”).value);
Let expense = parseFloat(document.getElementById(“expenseInput”).value);
 Let income = parseFloat(document.getElementById(“incomeInput”).value);
Let total = (income – expense).toFixed(2); // Calculate the total

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

Let table = document.getElementById(“outputTable”);
Let newRow = table.insertRow(table.rows.length);

// Insert data into cells of the new row

newRow.insertCell(0).innerHTML = date;
newRow.insertCell(1).innerHTML = expense.toFixed(2); // Display expense as a
number with 2 decimal places
newRow.insertCell(2).innerHTML = income.toFixed(2); // Display income as a number
with 2 decimal places
newRow.insertCell(3).innerHTML = total; // Display total
newRow.insertCell(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 = button.parentNode.parentNode;

// Get the cells within the row

Let dateCell = row.cells[0];
Let expenseCell = row.cells[1];
Let incomeCell = row.cells[2];
Let totalCell = row.cells[3];

// Prompt the user to enter updated values

Let dateInput = prompt(“Enter the updated date:”, dateCell.innerHTML);
Let expenseInput = parseFloat(prompt(“Enter the updated expense:”,
expenseCell.innerHTML));
Let incomeInput = parseFloat(prompt(“Enter the updated income:”,
incomeCell.innerHTML));
Let total = (incomeInput – expenseInput).toFixed(2); // Calculate the updated total

// Update the cell contents with the new values

dateCell.innerHTML = dateInput;
expenseCell.innerHTML = expenseInput.toFixed(2); // Display expense as a number
with 2 decimal places
incomeCell.innerHTML = incomeInput.toFixed(2); // Display income as a number with
2 decimal places
totalCell.innerHTML = total; // Update total
}

Function deleteData(button) {

// Get the parent row of the clicked button

Let row = button.parentNode.parentNode;
 // Remove the row from the table
Row.parentNode.removeChild(row);
}

Function clearInputs() {

// Clear input fields

Document.getElementById(“dateInput”).value = “”;
Document.getElementById(“expenseInput”).value = “”;
Document.getElementById(“incomeInput”).value = “”;
}
</script>
</body>
</html>
Output:
Result:
Thus the cross platform application for a simple expense manager using Apache
Cordova.
EX.NO:03 Cross platform application for Unit 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
units.It 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:
1Set Up Your Development Environment:
 Install Node.js: Node.js 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.
4.Design 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.
5.Implement 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.
6.Install 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.

7.Build 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/index.css" />
</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/index.js"></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;
justify-content: 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/index.css">
#Javascript

function convertMilesToKilometers() {
const miles = parseFloat(document.getElementById("milesInput").value);
if (!isNaN(miles)) {
const kilometers = miles * 1.60934;
document.getElementById(
"resultMilesToKm"
).textContent = `${miles} miles is approximately ${kilometers.toFixed(
2
)} kilometers.`;
}
}

function convertPoundsToKilograms() {
const pounds = parseFloat(document.getElementById("poundsInput").value);
if (!isNaN(pounds)) {
const kilograms = pounds * 0.453592;
document.getElementById(
"resultPoundsToKg"
).textContent = `${pounds} pounds is approximately ${kilograms.toFixed(
2
)} kilograms.`;
}
}

function convertLitersToKilograms() {
const liters = parseFloat(document.getElementById("litersInput").value);
if (!isNaN(liters)) {
const kilograms = liters * 0.99792; // Conversion factor from liters to
kilograms
document.getElementById(
"resultLitersToKg"
).textContent = `${liters} liters is approximately ${kilograms.toFixed(
2
)} kilograms.`;
}
}
Output:
Result:
Thus a cross platform application to convert units from imperial system to metric
system using Apache Cordova is completed Successfully.
EX.NO:04 Cross platform application for day to day 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
 <form id="add-task">: Form for adding tasks.
 <input>: Text input for entering a new task.
 <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/main.js: A custom JavaScript file for handling interactions and logic.
 To complete the app, we’ll need to implement the JavaScript functionality in "main.js"
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\favicon.ico" type="image/x-
icon" />
<link
href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;600&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
integrity="sha512-
8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9J
Zj0k6OqqewdGO3EsrQ=="
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.css"
integrity="sha512-
NXUhxhkDgZYOMjaIgd89zF2w51Mub53Ru3zCNp5LTlEzMbNNAjTjDbpURYGS5Mop2cU
4b7re1nOIucsVlrx9fA=="
crossorigin="anonymous"
 />
<link rel="stylesheet" href="css/main.css" />
</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="showClearAllTasksModal()"
>
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="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.js
integrity="sha512-
lOrm9FgT1LKOJRUXF3tp6QaMorJftUjowOWiDcG5GFZ/q7ukof19V0HKx/GWzXCdt9zYju
3/KhBNdCLzK8b90Q=="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-
bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ
0C2ejDxltZVFg=="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"
integrity="sha512-
dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL1
5Sv2al5A0LVyDCmtUw=="
crossorigin="anonymous"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/toastify-js"
></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
OUTPUT:
Result:
Thus a cross platform application for day to day task(to-do) management using Apache
Cordova is completed Successfully
EX.NO:05 Cross platform application for a user 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 MUSIC.jpeg');
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="logo-removebg-preview.png" 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
document.querySelector(".forgot-password-link").addEventListener("click", function
(event) {
event.preventDefault(); // Prevent the default link behavior
// You can add additional logic here, such as redirecting to the signup page
window.location.href = "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 MUSIC.jpeg'); /* 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="document.getElementById('id01').style.display='block'"
style="width:auto;">Sign Up</button>

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

<span onclick="document.getElementById('id01').style.display='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="margin-
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="document.getElementById('id01').style.display='none'"
class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</div>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "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
EX.NO:06 Android application to find and display 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

1. Node.js: Install Node.js from the official website (e.g.,

[https://nodejs.org/](https://nodejs.org/)).

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

3. Android 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

1. Ensure that your AndroidManifest.xml file includes the necessary permissions for location
access.
2. For example, include permissions like <uses-permission
android:name="android.permission.ACCESS_COARSE_LOCATION" /> and <uses-
permission android:name="android.permission.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="window.location.href='location_details.html'">Click To Go</button>
</body>

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

<head>
<title>Location Details</title>
<script type="text/javascript" src="cordova.js"></script>
<script>
function loadMapScript() {
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDGQqyKPp5gbwT5g9z-
V07kU4g9rlwWXK0&callback=initMap';
document.head.appendChild(script);
}
</script>
<script type="text/javascript" src="cordova.js"></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">
document.addEventListener("deviceready", onDeviceReady, false);

var map;
var district = "Dindigul"; // Default value

function onDeviceReady() {
console.log("Device is ready");
getLocation();
}

function getLocation() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}

function onSuccess(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;

var locationData = {
latitude: latitude,
longitude: longitude,
accuracy: accuracy,
timestamp: new Date().toLocaleString(),
district: district
};

var locationHistory = JSON.parse(localStorage.getItem('locationHistory')) || [];

locationHistory.push(locationData);
localStorage.setItem('locationHistory', JSON.stringify(locationHistory));

// Display location information

var locationString = "Latitude: " + latitude + "<br>Longitude: " + longitude +
"<br>Accuracy: " + accuracy + " meters<br>District: " + district;
document.getElementById("location").innerHTML = locationString;

initMap(latitude, longitude);
}

function onError(error) {
alert("Error getting location: " + error.message);
}

function initMap(latitude, longitude) {

var mapOptions = {
center: { lat: latitude, lng: longitude },
zoom: 15
};

map = new google.maps.Map(document.getElementById('map'), mapOptions);

// Add a marker at the user's location

var userLocation = new google.maps.LatLng(latitude, longitude);
var marker = new google.maps.Marker({
position: userLocation,
map: map,
title: 'Your Location'
});
}
 function viewLocationHistory() {
var locationHistory = JSON.parse(localStorage.getItem('locationHistory')) || [];
localStorage.setItem('locationHistory', JSON.stringify(locationHistory));
window.location.href = '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 = JSON.parse(localStorage.getItem('locationHistory')) || [];
var historyList = document.getElementById("history");
 locationHistory.forEach(function (location) {
var listItem = document.createElement("li");
listItem.textContent = `Latitude: ${location.latitude}, Longitude: ${location.longitude},
Accuracy: ${location.accuracy} meters, District: ${location.district}, Time:
${location.timestamp}`;
historyList.appendChild(listItem);
});
</script>
</body>

</html>

OUTPUT:

APP Interface :
APP Interface :

Result:
Thus an android application using Apache Cordova to find and display the current location of
the user is completed successful
EX.NO:07 Android application for simple Library 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 connect 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 reservingbooks.
 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.