Ccs332-App Development Final PDF

PSNA COLLEGE OF ENGINEERING AND TECHNOLOGY KOTHANDARAMAN
NAGAR, DINDIGUL – 624622 TAMILNADU.
RECORD NOTE BOOK
Reg.No.
Certify that this is the bonafide record of work done by Mr./Ms.

Of the
Semester
Branch during the year in the
Laboratory.
Staff-in-charge Head of the Department
Submitted for the university practical Examination on 20
Internal Examiner External Examiner

INDEX
S. Page Marks
Date Name of the Experiment Remarks
No. No. Awarded
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;
margin: 10px 0;
width: 95%;
}
select {
padding: 10px;
border: none;
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;
margin-top: 10px;
width: 100%;
}
button:hover {
background-color: #3e8e41;
}
input[type="text"] {
padding: 10px;
border-radius: 5px;
border: none;
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>
<label for="poundsInput">Pounds:</label>
<input type="text" id="poundsInput" />
<button onclick="convertPoundsToKilograms()">Convert to
Kilograms</button>
<p id="resultPoundsToKg"></p>
</div>
<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 */
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;
}
.input {
width: 100%;
padding: 10px;
border: 1px solid #333; /* Slightly lighter border color */
border-radius: 5px;
font-size: 16px;
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;
"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
"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.
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.
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.
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 charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<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=="
/>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>

<header class="main-header">
<div class="ui container">
<h1>To-Do List App</h1>
</div>
</header>

<div class="ui container">

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



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



<ul id="tasks-list" class="ui segments"></ul>


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


<div id="remove-modal" class="ui tiny modal">
<div class="header">Delete Your Task</div>
<div class="ui fluid input">
<p>Are you sure you want to delete your task?</p>
</div>
</div>
<div class="ui cancel red button">No</div>
<div id="remove-button" class="ui positive right labeled icon button">
Yes
</div>
</div>
</div>


<div id="clear-all-tasks-modal" class="ui tiny modal">
<div class="header">Clear All Tasks</div>
<p>Are you sure you want to clear all tasks?</p>
</div>
</div>
<div
id="remove-button"
onclick="clearAllTasks()"
class="ui positive right labeled icon button"
>
Yes
</div>
</div>
</div>


<div id="clear-completed-tasks-modal" class="ui tiny modal">
<div class="header">Clear Completed Tasks</div>
<p>Are you sure you want to clear completed tasks?</p>
</div>
</div>
<div
id="remove-button"
onclick="clearAllTasks()"
class="ui positive right labeled icon button"
>
Yes
</div>
</div>
</div>

</div>

<script>
src="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.js
integrity="sha512-
lOrm9FgT1LKOJRUXF3tp6QaMorJftUjowOWiDcG5GFZ/q7ukof19V0HKx/GWzXCdt9zYju
3/KhBNdCLzK8b90Q=="
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-
bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ
0C2ejDxltZVFg=="
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"
integrity="sha512-
dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL1
5Sv2al5A0LVyDCmtUw=="
></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);
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">

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

<a href="javascript:void(0);" class="forgot-password-link">Forgot Password?
Signup</a>
</form>
</div>


<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 {
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;
}
/* 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">×</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;
color: #fff;
border: none;
cursor: pointer;
font-size: 16px;
border-radius: 8px;
}
button:hover {
}
</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 {
text-align: center;
margin: 0;
padding: 20px;
}
#location {
font-size: 18px;
margin-top: 20px;
background-color:#0a4e70;
padding: 10px;
border-radius: 8px;
color: white;
}
button {
padding: 10px 20px;
color: #fff;
border: none;
cursor: pointer;
font-size: 16px;
border-radius: 8px;
}
button:hover {
background-color:#010b10;
}
#map {
margin-top: 20px;
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() {
localStorage.setItem('locationHistory', JSON.stringify(locationHistory));
window.location.href = 'location_history.html';
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Location History</title>
<style>
body {
text-align: center;
margin: 0;
padding: 20px;
}
h2 {
color: #f6f6f6;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 10px 0;
background-color: #70b8dc;
padding: 10px;
border-radius: 8px;
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 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.

Ccs332-App Development Final PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ccs332-App Development Final PDF

Uploaded by

Copyright:

Available Formats

PSNA COLLEGE OF ENGINEERING AND TECHNOLOGY KOTHANDARAMAN

NAGAR, DINDIGUL – 624622 TAMILNADU.

RECORD NOTE BOOK

Certify that this is the bonafide record of work done by Mr./Ms.

Staff-in-charge Head of the Department

Submitted for the university practical Examination on 20

Internal Examiner External Examiner

3. Calculate BMI Button:

4. Display Area for BMI:

5. JavaScript Function calculateBMI():

10. Closing Tags:

11. Debugging and Testing:

Step 1: Create a New Cordova Project

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

// Insert data into cells of the new row

// Clear input fields

// Get the parent row of the clicked button

// Get the cells within the row

// Prompt the user to enter updated values

// Update the cell contents with the new values

// Get the parent row of the clicked button

// Clear input fields

7.Build the App:

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

/* Full-width input fields */

/* Add a background color when the inputs get focus */

/* Set a style for all buttons */

/* Extra styles for the cancel button */

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

/* Add padding to container elements */

/* The Modal (background) */

/* Style the horizontal ruler */

<h2>Modal Signup Form</h2>

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

<label for="psw-repeat"><b>Repeat Password</b></label>

<p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms

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

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

Step 2: Create a New Cordova Project

Step 3: Add Android Platform

Step 4: Install Plugins

Step 5: Build the App

Step 6: Create the User Interface

Step 7: Access the Geolocation in JavaScript

Step 8: Test Your App

Step 10: Build and Distribute

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

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

// Display location information

function initMap(latitude, longitude) {

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

// Add a marker at the user's location

Web view Mobile view

You might also like