Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

50Projects-HTML-CSS-JavaScript : E-commerce website#48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
tajulafreen merged 4 commits intomainfromE-commerce_Website
Dec 22, 2024
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletionsREADME.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -499,16 +499,25 @@ In order to run this project you need:
<li>
<details>
<summary>Pomodoro Timer</summary>
<p>The Productivity Timer (Pomodoro Timer) is a simple yet effective timer application based on the Pomodoro technique. It helps users stay productive by alternating between focus intervals (e.g., 5 minutes) and short breaks (e.g., 2 minutes). The app provides visual cues through animations and sound alerts to signal transitions between focus and break periods.

</p>
<p>The Productivity Timer (Pomodoro Timer) is a simple yet effective timer application based on the Pomodoro technique. It helps users stay productive by alternating between focus intervals (e.g., 5 minutes) and short breaks (e.g., 2 minutes). The app provides visual cues through animations and sound alerts to signal transitions between focus and break periods.</p>
<ul>
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/PomodoroTimer/">Live Demo</a></li>
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/PomodoroTimer">Source</a></li>
</ul>
</details>
</li>

<li>
<details>
<summary>E-Commerce Website</summary>
<p>This is a simple e-commerce product page built using **HTML**, **CSS**, and **JavaScript**. It displays a list of products fetched from a public API and allows users to add products to their cart. The page features a cart modal where users can view the products they have added, including quantity and total price.</p>
<ul>
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/E-CommerceWebsite/">Live Demo</a></li>
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/E-CommerceWebsite">Source</a></li>
</ul>
</details>
</li>

</ol>

<p align="right">(<a href="#readme-top">back to top</a>)</p>
Expand Down
33 changes: 33 additions & 0 deletionsSource-Code/E-CommerceWebsite/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce Product Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="navbar">
<h2>E-Commerce Store</h2>
<button id="cart-btn">View Cart</button>
</div>
</header>

<div class="container">
<h1>Products</h1>
<div id="products-container" class="products-container"></div>
</div>

<!-- Cart Modal -->
<div id="cart-modal" class="cart-modal">
<div class="cart-content">
<h2>Your Cart</h2>
<ul id="cart-items"></ul>
<button id="close-cart">Close</button>
</div>
</div>

<script src="script.js"></script>
</body>
</html>
93 changes: 93 additions & 0 deletionsSource-Code/E-CommerceWebsite/script.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
/* eslint-disable no-unused-vars */
// Fake API URL (you can replace this with a real API if needed)
const apiUrl = 'https://fakestoreapi.com/products';

// Elements
const productsContainer = document.getElementById('products-container');
const cartBtn = document.getElementById('cart-btn');
const cartModal = document.getElementById('cart-modal');
const closeCartBtn = document.getElementById('close-cart');
const cartItemsList = document.getElementById('cart-items');

// Cart array to store added products
const cart = [];

// Display fetched products
const displayProducts = (products) => {
productsContainer.innerHTML = ''; // Clear previous products

products.forEach((product) => {
const productElement = document.createElement('div');
productElement.classList.add('product');
productElement.innerHTML = `
<img src="${product.image}" alt="${product.title}">
<h3 class="title">${product.title}</h3>
<p class="price">$${product.price}</p>
<button onclick="addToCart(${product.id}, '${product.title}', '${product.image}', ${product.price})">Add to Cart</button>
`;
productsContainer.appendChild(productElement);
});
};

// Fetch products from API
async function fetchProducts() {
try {
const response = await fetch(apiUrl);
const products = await response.json();
displayProducts(products);
} catch (error) {
console.error('Error fetching products:', error);
}
}

// Add product to cart
const addToCart = (id, title, image, price) => {
const existingProductIndex = cart.findIndex((item) => item.id === id);

if (existingProductIndex === -1) {
cart.push({
id,
title,
image,
price,
quantity: 1,
});
} else {
cart[existingProductIndex].quantity += 1;
}

console.log(cart); // You can replace this with a cart UI or alert
alert(`${title} added to cart!`);
};

// Close cart modal
closeCartBtn.addEventListener('click', () => {
cartModal.style.display = 'none';
});

// Display cart contents
const displayCart = () => {
cartItemsList.innerHTML = ''; // Clear previous cart items

cart.forEach((item) => {
const cartItem = document.createElement('li');
cartItem.innerHTML = `
<span>${item.title} (x${item.quantity})</span>
<span>$${item.price * item.quantity}</span>
`;
cartItemsList.appendChild(cartItem);
});
};

// Open cart modal
cartBtn.addEventListener('click', () => {
if (cart.length === 0) {
alert('Your cart is empty.');
} else {
displayCart();
cartModal.style.display = 'flex';
}
});

// Initialize
fetchProducts();
144 changes: 144 additions & 0 deletionsSource-Code/E-CommerceWebsite/style.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}

header {
background-color: #333;
color: #fff;
padding: 10px 20px;
text-align: center;
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}

#cart-btn {
background-color: #28a745;
color: white;
border: none;
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
border-radius: 5px;
}

#cart-btn:hover {
background-color: #218838;
}

.container {
margin: 50px auto;
padding: 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 1000px;
}

h1 {
margin-bottom: 30px;
}

.products-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}

.product {
border: 1px solid #ddd;
border-radius: 10px;
padding: 10px;
text-align: center;
background-color: #fff;
}

.product img {
max-width: 100%;
height: 300px;
border-radius: 10px;
}

.product .title {
font-size: 1.1rem;
font-weight: bold;
margin: 10px 0;
height: 60px;
overflow: hidden;
}

.product .price {
font-size: 1rem;
color: #333;
margin: 10px 0;
}

.product button {
background-color: #007bff;
color: white;
border: none;
padding: 10px;
font-size: 1rem;
cursor: pointer;
border-radius: 5px;
width: 100%;
}

.product button:hover {
background-color: #0056b3;
}

/* Cart Modal Styles */
.cart-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}

.cart-content {
background-color: white;
padding: 20px;
border-radius: 10px;
max-width: 500px;
width: 100%;
text-align: left;
}

#cart-items {
list-style-type: none;
padding: 0;
}

#cart-items li {
display: flex;
justify-content: space-between;
padding: 5px 0;
}

#close-cart {
margin-top: 20px;
background-color: #dc3545;
color: white;
border: none;
padding: 10px;
font-size: 1rem;
cursor: pointer;
border-radius: 5px;
}

#close-cart:hover {
background-color: #c82333;
}
[8]ページ先頭
©2009-2025 Movatter.jp