diff --git a/README.md b/README.md index 2f103ce..3ed6348 100644 --- a/README.md +++ b/README.md @@ -499,9 +499,7 @@ In order to run this project you need:
  • Pomodoro Timer -

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

    +

    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.

    • +
  • +
    +E-Commerce Website +

    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.

    + +
    +
    • +

    (back to top)

    diff --git a/Source-Code/E-CommerceWebsite/index.html b/Source-Code/E-CommerceWebsite/index.html new file mode 100644 index 0000000..2f8fbc7 --- /dev/null +++ b/Source-Code/E-CommerceWebsite/index.html @@ -0,0 +1,33 @@ + + + + + + E-Commerce Product Page + + + +
    +
    +

    E-Commerce Store

    + +
    +
    + +
    +

    Products

    +
    +
    + + +
    +
    +

    Your Cart

    + + +
    +
    + + + + diff --git a/Source-Code/E-CommerceWebsite/script.js b/Source-Code/E-CommerceWebsite/script.js new file mode 100644 index 0000000..7d34ddb --- /dev/null +++ b/Source-Code/E-CommerceWebsite/script.js @@ -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 = ` + ${product.title} +

    ${product.title}

    +

    $${product.price}

    + + `; + 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 = ` + ${item.title} (x${item.quantity}) + $${item.price * item.quantity} + `; + 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(); diff --git a/Source-Code/E-CommerceWebsite/style.css b/Source-Code/E-CommerceWebsite/style.css new file mode 100644 index 0000000..c7c8624 --- /dev/null +++ b/Source-Code/E-CommerceWebsite/style.css @@ -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; +}