Summary of the

KINNERO E-
commerce Website

The KINNERO E-commerce website is

designed to provide an easy and enjoyable
online shopping experience for customers
interested in a range of electronic and household
products. Its layout is attractive and works well
on various devices, including desktops, tablets,
and smartphones.

Key Features:
Product Display: The homepage features a
variety of products, such as the latest 4K TVs,
gaming laptops, kitchen appliances, and
smartphones. Each product includes an image, a
short description, and a price, helping customers
make informed choices.

Shopping Cart Functionality: Adding items to

the shopping cart is simple—just one click. The
cart updates in real-time to show the total cost
of selected items, making it easier for customers
to keep track of their purchases.

Checkout Process: The checkout process is

straightforward, allowing customers to review
their cart before completing their purchase. This
ensures they can confirm their selections.

Interactive JavaScript: The site uses JavaScript

to manage the shopping cart, giving users
instant feedback when they add or remove
items. This feature enhances the overall
shopping experience.
Backend Integration: A basic Python backend
powers the site, serving product information in
JSON format. This setup allows for easy
updates and scalability, making it simple to add
or change products in the catalog.

User Alerts: The website provides notifications

for actions like adding items to the cart or
checking out, improving communication with
users.
How to use?
1.Download VSCODE.
2.Add a file with .py and .html.
3.Make a new terminal and
write"python index.py".
4.Use a web browser and
type"localhost:8000" which will
display the output.
SIMILAR WEBSITES
Input/Output Requirement
HARDWARE REQUIREMENTS

❖Operating System: - Windows 10 or above

❖Processor: - Pentium (Any) or AMD Athlon
(3800+ - 4200 + Dual Core)
❖RAM: - 512 MB+
❖Hard Disk: -SATA 40GB Or Above
❖Motherboard: - 1.845 Or 915,995 For
Pentium or MSI K9MM-V VIA
K8M800+8237R Plus Chipset for AMD Athlon
Applications
Used:
1.Visual Studio Code
2.Chrome
3.Notepad
4.Python
PYTHON
CODE
import json
from http.server import
BaseHTTPRequestHandler, HTTPServer

class Product:
def _init_(self, name, description, price):
self.name = name
self.description = description
self.price = price

def to_dict(self):
 return {
"name": self.name,
"description": self.description,
"price": self.price
}

class
RequestHandler(BaseHTTPRequestHandler):
products = [
Product("SAMSUNG TV 4K (2024)", "55\"
QLED 4K QE1D Tizen OS Smart TV (2024)",
2070.00),
Product("Whirlpool Refrigerator", "Wider
standard or counter-depth refrigerator",
1500.00),
Product("CG Oven", "Oven capable of
baking anything better and healthier", 290.00),
 Product("Asus Gaming Laptop", "Intel Core
i9 14900HX, 16GB Ram, 1TB SSD", 3000.00),
Product("Table Chain Combo",
"Rubberwood Chair for modern elegant style",
400.00),
Product("Latest Smartphone", "High-
performance smartphone with stunning
display", 999.00),
Product("Energy Efficient Air Conditioner",
"Stay cool this summer", 750.00),
Product("Premium Coffee Machine",
"Barista-quality coffee at home", 450.00),
Product("Smart Watch", "Track your fitness
and stay connected", 199.00),
Product("Wireless Headphones", "High-
quality sound with comfort", 129.00),
]
 def do_GET(self):
if self.path == '/':
self.send_response(200)
self.send_header('Content-type',
'text/html')
self.end_headers()
with open('index.html', 'r') as file:
self.wfile.write(file.read().encode())
elif self.path == '/products':
self.send_response(200)
self.send_header('Content-type',
'application/json')
self.end_headers()
products_data = [product.to_dict() for
product in self.products]

self.wfile.write(json.dumps(products_data).enc
ode())
 else:
self.send_response(404)
self.end_headers()

def run(server_class=HTTPServer,
handler_class=RequestHandler, port=8000):
server_address = ('', port)
httpd = server_class(server_address,
handler_class)
print(f'Serving on port {port}...')
httpd.serve_forever()

if _name_ == "_main_":
run()
HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>KINNERO E-commerce</title>
<style>
body {
font-family: Arial, sans-serif;
 margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background: #007BFF;
color: #fff;
padding: 10px 20px;
text-align: center;
}
main {
padding: 20px;
}
.product {
background: #fff;
 border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
margin: 10px;
display: inline-block;
width: calc(25% - 40px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}
.product:hover {
transform: scale(1.05);
}
button {
background-color: #28a745;
color: white;
border: none;
 padding: 10px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}
button:hover {
background-color: #218838;
}
footer {
text-align: center;
padding: 20px;
background: #007BFF;
color: #fff;
position: relative;
bottom: 0;
width: 100%;
 }
</style>
</head>
<body>
<header>
<h1>Welcome to KINNERO</h1>
</header>

<main id="product-list">
<!-- Products will be dynamically inserted
here -->
</main>

<section id="cart">
<h2>Your Shopping Cart</h2>
<ul id="cartItems"></ul>
 <p id="totalPrice">Total: $0.00</p>
<button
onclick="checkout()">Checkout</button>
</section>

<footer>
<p>THANK YOU.</p>
</footer>

<script>
let cart = [];
let total = 0;

function addToCart(product) {
cart.push(product);
total += product.price;
 updateCartDisplay();
alert(Added to cart: ${product.name});
}

function updateCartDisplay() {
const cartItems =
document.getElementById('cartItems');
cartItems.innerHTML = '';
cart.forEach(item => {
const li =
document.createElement('li');
li.textContent = ${item.name} - $$
{item.price.toFixed(2)};
cartItems.appendChild(li);
});

document.getElementById('totalPrice').textCon
tent = Total: $${total.toFixed(2)};
 }

function checkout() {
if (cart.length === 0) {
alert('Your cart is empty!');
return;
}
alert('Thank you for your purchase!');
cart = [];
total = 0;
updateCartDisplay();
}

function loadProducts(products) {
const productList =
document.getElementById('product-list');
 products.forEach(product => {
const div =
document.createElement('div');
div.className = 'product';
div.innerHTML = `
<h3>${product.name}</h3>
<p>${product.description}</p>
<p>Price: $$
{product.price.toFixed(2)}</p>
<button onclick='addToCart($
{JSON.stringify(product)})'>Add to
Cart</button>
`;
productList.appendChild(div);
});
}
 fetch('/products')
.then(response => response.json())
.then(data => loadProducts(data))
.catch(error => console.error('Error
fetching products:', error));
</script>
</body>
</html>
output
Conclusion:

In summary, the KINNERO E-commerce website

offers a modern and functional platform for
online shopping. With its user-friendly design
and essential features, it effectively caters to
customers looking for quality products. The
combination of responsive design, interactive
elements, and a reliable backend makes
KINNERO a go-to destination for consumers.