eknoor547/Assignment-5
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Latest changes implemented

Browse source
This commit is contained in:
Eknoor Singh 2025-01-10 10:28:26 +05:30
parent e6c13e8ef5
commit 4443cab2a9
7 changed files with 50 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" href="./src/assets/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Assignment-5</title>

10
src/App.jsx
View file

@ -70,9 +70,15 @@ const App = () => {
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 ">
{filteredProducts?.map((product) => (
{filteredProducts && filteredProducts?.length > 0 ? (
filteredProducts?.map((product) => (
<ProductCard key={product?.id} product={product} />
))}
))
) : (
<p className="flex justify-center items-baseline w-max">
No products available as per the requirement
</p>
)}
</div>
</div>
</div>

BIN
src/assets/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
src/assets/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 82 KiB

25
src/components/Navbar/index.jsx
View file

@ -1,8 +1,12 @@
import { useContext, useState } from "react";
import { CartContext } from "../cartContext";
import Cart from "../cartProducts";
import logo from "../../assets/logo.png";
const Navbar = () => {
const reloadPage = () => {
window.location.reload(false);
};
const { cartItems } = useContext(CartContext);
const [showModal, setShowModal] = useState(false);
@ -13,17 +17,26 @@ const Navbar = () => {
return (
<div>
<nav className="flex justify-between items-center max-w-6xl mx-auto">
<h1 className="text-2xl font-bold tracking-widest cursor-pointer">
Assignment-5
</h1>
<div className="relative flex items-center h-12 w-48 left-8">
<img src={logo} alt="hello" />
</div>
<ul className="flex space-x-6 text-lg">
<li className="hover:text-gray-300 transition duration-300 cursor-pointer">
<li
className="hover:text-gray-300 transition duration-300 cursor-pointer"
onClick={reloadPage}
>
Home
</li>
<li className="hover:text-gray-300 transition duration-300 cursor-pointer">
<li
className="hover:text-gray-300 transition duration-300 cursor-pointer"
onClick={reloadPage}
>
Products
</li>
<li className="hover:text-gray-300 transition duration-300 cursor-pointer">
<li
className="hover:text-gray-300 transition duration-300 cursor-pointer"
onClick={reloadPage}
>
Checkout
</li>
<li>

9
src/components/ProductCards/index.jsx
View file

@ -6,8 +6,11 @@ import { starIcon } from "../../assets/SvgIcons/svgIcons";
const ProductCard = ({ product }) => {
const { addToCart } = useContext(CartContext);
const textColorClass =
product?.rating?.count > 300 ? "text-green-500" : "text-red-500";
return (
<div className="max-w-xs rounded-lg border border-gray-200 bg-white shadow-md transform transition duration-500 hover:scale-105">
<div className="max-w-xs rounded-lg border border-gray-200 bg-white shadow-md transform transition duration-700 hover:scale-105">
<img
src={product?.image}
alt={product?.title}
@ -32,6 +35,10 @@ const ProductCard = ({ product }) => {
<p className="mt-0.5">{starIcon}</p>
</span>{" "}
</p>
<p className="mt-2 text-sm text-gray-900">
Only <b className={`${textColorClass}`}>{product?.rating?.count}</b>{" "}
pieces left
</p>
<button
onClick={() => addToCart(product)}
className="flex px-4 py-2 items-center bg-gray-800 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700 mt-4"

18
src/components/cartProducts/index.jsx
View file

@ -36,9 +36,6 @@ export default function Cart({ showModal, toggle }) {
<div className="flex items-center justify-center w-full">
{cartItems?.length > 0 ? (
<div className="flex flex-col justify-between items-center">
{checkout && (
<p className="mt-4 text-green-500 font-bold">{checkout}</p>
)}
</div>
) : (
<h1 className="text-lg font-bold">Your cart is empty</h1>
@ -49,14 +46,14 @@ export default function Cart({ showModal, toggle }) {
</h1>
<div className="flex flex-col absolute right-5 top-0 gap-y-20">
<div className="ml-5 top-5">
<div className="ml-5">
<button className="px-4 py-2 text-xl mt-4" onClick={toggle}>
{crossIcon}
</button>
</div>
<div className="mr-6">
<button
className="px-4 py-2 bg-gray-500 text-white text-xs font-bold rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-700 "
className="-mt-10 px-4 py-2 bg-gray-500 text-white text-xs font-bold rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-700 "
onClick={() => {
clearCart();
}}
@ -65,6 +62,17 @@ export default function Cart({ showModal, toggle }) {
</button>
</div>
</div>
<div className="flex items-center justify-center w-full">
{cartItems?.length > 0 ? (
<div className="flex flex-col justify-between items-center">
{checkout && (
<p className="mt-4 text-green-500 font-bold">{checkout}</p>
)}
</div>
) : (
<h1 className="text-lg font-bold">Your cart is empty</h1>
)}
</div>
<div className="flex flex-col items-start gap-4 w-full mt-8">
{cartItems?.map((item) => (
<div