FACULTY OF COMMERCE
DEPARTMENT OF INFORMATION AND COMMUNICATION TECHNOLOGY
PROGRAMME OF STUDY : Bachelor of Science in Information Technology
COURSE NAME : Mobile Application Development
COURSE CODE : BSMAD31
YEAR OF STUDY : 3/1
SUBMITTED BY : Precious Katchire
SUBMITTED TO : Pemphero Jovan
DUE DATE : 11/10/2025
ASSIGNMENT 1
Question 1 Answers:
Code Part 1:
<!DOCTYPE html>
<html lang =”en”>
<head>
<meta charset = “ UTF-8”>
<meta name = “viewport” content = “width = device-width, initial-scale=1.0”>
<title>Simple E-commerce App</title>
<link rel = “stylesheet” href = “[Link]”>
</header>
<body>
<header>
<h1>My E-commerce Store</h1>
<div class = “cart-icon” id = “cart-icon”> <span id = “cart-
count”>0</span></div>
</header>
<main>
<div id = “product-list” class =”product-grid”> </div>
<div id = “product-details” class “product detail hidden”> </div>
</main>
<script src = “script,js”> </script>
</body>
</html>
Part 2:
body {
Font-family: sans-serif;
Margin: 0;
Padding: 0;
Background-color: #f4f4f4;
}
header {
Background-color: #333;
Color: white;
Padding: 1 rem;
Display: flex;
Justify-content: space-between;
Align-items:center;
}
Cart-icon {
Font-size: 1.5 rem;
Cursor: pointer;
}
Product-grid{
Display: grid;
Grid-template-columns: reap(auto-fit, minmax (250 px, 1 fr));
Gap: 1 rem;
Padding: 1 rem
}
Product-card{
Background-color: white;
Border: 1 px solid #ddd;
Padding: 1 rem;
Text-align: center
Cursor: pointer
}
Product-card img{
Max-width: 100%;
Height: auto;
Margin-bottom: 0.5 rem
}
Product-detail {
Background-color: white;
Border: 1 px solid #ddd;
Padding: 2 rem;
Margin: 1 rem;
}
Const product = [
{id:1, nane: ‘Laptop’, price: 5 100 000, description: ‘Powerful laptop for work
and gaming’.},
{id:2, name: ‘Mouse’, price: 50 000, description: ‘Ergonomic mouse’, for
comfortable use’.},
{id:3, name: ‘Keyboard’, price: 150 000, description: ‘Mechanical keyboard with
customizable backlighting’.},
];
Let cart=[];
Const productListDiv=[Link](‘product-list’);
Const productListDiv=[Link](‘product-detail’);
Const cartCountSpan=[Link](‘cart-count’);
Function render Product () {
[Link]=’ ‘;
[Link](product => {
Const product Card =[Link] (‘div’),
[Link](‘product-card’);
[Link] HTML = ‘
<h3>${[Link]</h3>
<p>$${[Link] Fixed (2)}</p>
<button onclick =”show ProductDetails(${[Link]})”>
View Details </buttom>
<button onclick =”add ToCart(${[Link]})”> Add to Cart</button>
;
[Link](product Cart);
});
}
Function showProduct Detail (productId){
Const product = [Link](p => [Link] === product Id);
If (product){
[Link] (‘hidden’);
[Link](‘hidden’);
[Link] = ‘
<h2>${[Link]}</h2>
<p>Price: $$ [Link] Fixed (2)}</p>
<p>${[Link]}</p>
<button onclick=”addToCart(${[Link]})”>Add to Cart</button>
<button onclick=”hideProductDetail()”>Back to Products</button>
‘;
}
}
Function hide ProductDetail() {
[Link] (‘hidden’);
[Link] (‘hidden’)
}
Function addToCart(product Id){
Const productToAdd = [Link] (p=> [Link] === product Id);
If(productToAdd){
Const existingItem=[Link] ([Link] === product Id);
If (existing Item) {
[Link]++;
}else{
[Link]({...productToAdd, quantity:1});
}updateCartCount ();
[Link](‘Cart:’, cart); // simulate background update
}
}
Function update Cart Count() {
Const totalItems = [Link]((sum, item) => sum + [Link], 0);
[Link] = totalItems;
}
// Initial render
renderProducts();
updateCart Count();
// simulate background cart update (e.g., if a user adds an item from another tab)
setInterval (() => {
// In a real app, it fetches data from server
[Link](‘simulating background cart update check ...’);
}, 5000) //check every 6 seconds;
Description:
1(a). At the first part is an HTML that gives the basic page structure. HTML in this case
will include the following: header file, icon, part for product display, links e.g., href, style
as well as Java Script content.
Second part is comprising of CSS for beauty and to make it presentable.
The third part is Java Script which is used for database as all details will be needed to be
available in the store.
(b). Navigation process can be done through the following ways:
User Interaction: it involves clicking on them.
Event Handling: detects the interaction and triggering.
Data Passage: extracts relevant data for the selected product like unique ID which
can be essential for fetching and displaying the correct information.
Navigation call: for transtion
Screen Transtion: moves users from one screen to another within an application or
video.
For this navigation process to be possible there are components responsible for that and
these are:
Android Jetpack Navigation
React Navigation
Router.
(c). A breadcrumb is used to describe the path a person took to arrive at the product page.
It shows all of the different web.
(d). A background service (in Android) or a server-side component would run in the
background to update the shopping cart even if the user closes the application’s UI, to
maintain session data or perform operations like persistent cart saving and abandon cart
recovery.
2. Simple diagram showing the relationship and interaction flow among the components
in the previous page
E-commerce Website Diagram
Manage Customer’s
Information
Monitor Sales and
Stores
Manage Product
Information
Manage Payments
and Deliveries
Seller buyer
3.
Sources:
YouTube Web Dev Simplified
[Link]
[Link]
[Link]
AI Overview
