Scribd
Upload
21 views

SDC Program 01

This document outlines the development of a responsive web application for an online shopping cart using Node.js, React.js and Django. It includes code samples for registration, login, catalog and cart pages using HTML, CSS and JavaScript. Styles are demonstrated using flexbox and grid layouts.

Uploaded by

my stories
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
21 views

SDC Program 01

This document outlines the development of a responsive web application for an online shopping cart using Node.js, React.js and Django. It includes code samples for registration, login, catalog and cart pages using HTML, CSS and JavaScript. Styles are demonstrated using flexbox and grid layouts.

Uploaded by

my stories
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

SKILL DEVELOPMENT COURSE (NODE JS/ REACT JS/

DJANGO)

1. Build a responsive web application for shopping cart with


registration, login, catalog and cart pages using CSS3 features, flex
and grid.

Registration page : reg.html


<html >
<head>
<link rel="stylesheet" href="reg.css">
<title>Registration</title>
</head>
<body>
<div class="container">
<h1>Registration Page</h1>
<form>
<input type="text" placeholder="Username" required>
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<button type="submit">Register</button>
</form>
</div>
</body>
</html>

reg.css

/* Add styles specific to the registration page */


.container {
text-align: center;
}

form {
max-width: 300px;
margin: 0 auto;
}

input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
}

button {
width: 100%;
}

Login page : login.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="log.css">
<title>Login</title>
</head>
<body>
<div class="container">
<h1>Login Page</h1>
<form>
<input type="text" placeholder="Username" required>
<input type="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>

Log.css

/* Add styles specific to the login page */


.container {
text-align: center;
}

form {
max-width: 300px;
margin: 0 auto;
}

input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
}
button {
width: 100%;
}

Catalog page : catalog4.html

<html>
<html>
<head>
<!-- Include the same header as in home.html -->
</head>
<body bgcolor="yellow" align="center">
<div class="container">
<h2>Catalog Page</h2>

<div class="product">
<img src="product1.jpg" alt="Apple Watch Ultra 2">
<h3>Apple Watch Ultra 2</h3>
<p>Apple Watch Ultra 2 [GPS + Cellular 49mm] Smartwatch with
Rugged Titanium Case
& Blue Alpine Loop Large. Fitness Tracker, Precision GPS, Action
Button,
Extra-Long Battery Life, Bright Retina Display.</p>
<p>Price: $1080.56</p>
<button onclick="addToCart('Product 1', 1080.56)">Add to
Cart</button>
</div>

<div class="product">
<img src="product2.jpg" alt="JBL Cinema SB271">
<h3>JBL Cinema SB271</h3>
<p>JBL Cinema SB271, Dolby Digital Soundbar with Wireless
Subwoofer for
Extra Deep Bass, 2.1 Channel Home Theatre with Remote, HDMI
ARC,
Bluetooth & Optical Connectivity (220W)</p>
<p>Price: $156.24</p>
<button onclick="addToCart('Product 1', 156.24)">Add to
Cart</button>
</div>

<div class="product">
<img src="product3.jpg" alt="Apple iPhone 14 Pro Max">
<h3>Apple iPhone 14 Pro Max</h3>
<p>Apple iPhone 14 Pro Max (512 GB) - Grey</p>
<p>Price: $1670.72</p>
<button onclick="addToCart('Product 1', 1670.72)">Add to
Cart</button>
</div>

</div>

<script>
function addToCart(productName, price) {
var cartItem = { name: productName, price: price };
var cart = JSON.parse(localStorage.getItem('cart')) || [];
cart.push(cartItem);
localStorage.setItem('cart', JSON.stringify(cart));
alert('Product added to cart!');
}
</script>

</body>
</html>

Cart page :: cart4.html


<html>
<head>
</head>
<body bgcolor="yellow" align="center">

<div class="container">
<h2>Shopping Cart</h2>
<div id="cart-items">
<!-- Cart items will be displayed here -->
</div>
<div class="checkout">
<h3>Total: <span id="cart-total">0.00</span></h3>
<button>Checkout</button>
</div>
</div>

<script>
function displayCart() {
var cart = JSON.parse(localStorage.getItem('cart')) || [];
var cartItemsContainer = document.getElementById('cart-items');
var cartTotalElement = document.getElementById('cart-total');
var cartTotal = 0;
cartItemsContainer.innerHTML = ''; // Clear the previous cart
items

cart.forEach(function (item, index) {


cartTotal += item.price;
cartItemsContainer.innerHTML += `
<div class="cart-item">
<div class="product-details">
<h3>${item.name}</h3>
<p>Price: $${item.price.toFixed(2)}</p>
</div>
<button
onclick="removeFromCart(${index})">Remove</button>
</div>
`;
});

cartTotalElement.textContent = cartTotal.toFixed(2);
}

function removeFromCart(index) {
var cart = JSON.parse(localStorage.getItem('cart')) || [];
if (index >= 0 && index < cart.length) {
cart.splice(index, 1); // Remove the item from the cart array
localStorage.setItem('cart', JSON.stringify(cart));
displayCart(); // Update the cart display
}
}

// Call displayCart when the cart page loads


window.addEventListener('load', displayCart);
</script>

</body>
</html>

Home page :: home .html

<html >
<head>
<link rel="stylesheet" href="home.CSS">
<title>Home</title>
</head>
<body>
<div class="container">
<h1>Welcome to Our Shopping App</h1>

<div class="navigation">
<ul>
<li><a href="reg.html">Registration</a></li>
<li><a href="login.html">Login page</a></li>
<li><a href="catalog4.html">Catalog</a></li>
<li><a href="cart4.html">Cart</a></li>
</ul>
</div>
</div>
</body>
</html>

Home.css

/* Add styles specific to the home page */


.navigation {
margin-top: 20px;
}

.navigation ul {
list-style-type: none;
padding: 0;
}

.navigation li {
margin-bottom: 10px;
}

.navigation a {
display: block;
padding: 10px;
text-decoration: none;
background-color: #3498db;
color: white;
}

.navigation a:hover {
background-color: #2980b9;
}

Flex.css

h1 {
text-align: center;
margin-bottom: 20px;
}

.navigation {
display: flex;
flex-direction: column;
align-items: center;
}

.navigation ul {
list-style-type: none;
padding: 0;
}

.navigation li {
margin-bottom: 10px;
width: 100%;
}

.navigation a {
display: block;
padding: 10px;
text-align: center;
text-decoration: none;
background-color: #3498db;
color: white;
}

.navigation a:hover {
background-color: #2980b9;
}

Grid.css

/* Add flexbox and grid styles for the home page */


body {
margin: 0;
font-family: Arial, sans-serif;
}

.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
min-height: 100vh;
padding: 20px;
}

h1 {
text-align: center;
margin-bottom: 20px;
}

.navigation ul {
list-style-type: none;
padding: 0;
}

.navigation li {
margin-bottom: 10px;
width: 100%;
}

.navigation a {
display: block;
padding: 10px;
text-align: center;
text-decoration: none;
background-color: #3498db;
color: white;
}

.navigation a:hover {
background-color: #2980b9;
}

You might also like