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"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <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"> <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Assignment-5</title> <title>Assignment-5</title>

12
src/App.jsx
View file

@ -70,9 +70,15 @@ const App = () => {
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 "> <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 ? (
<ProductCard key={product?.id} product={product} /> 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> </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 { useContext, useState } from "react";
import { CartContext } from "../cartContext"; import { CartContext } from "../cartContext";
import Cart from "../cartProducts"; import Cart from "../cartProducts";
import logo from "../../assets/logo.png";
const Navbar = () => { const Navbar = () => {
const reloadPage = () => {
window.location.reload(false);
};
const { cartItems } = useContext(CartContext); const { cartItems } = useContext(CartContext);
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
@ -13,17 +17,26 @@ const Navbar = () => {
return ( return (
<div> <div>
<nav className="flex justify-between items-center max-w-6xl mx-auto"> <nav className="flex justify-between items-center max-w-6xl mx-auto">
<h1 className="text-2xl font-bold tracking-widest cursor-pointer"> <div className="relative flex items-center h-12 w-48 left-8">
Assignment-5 <img src={logo} alt="hello" />
</h1> </div>
<ul className="flex space-x-6 text-lg"> <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 Home
</li> </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 Products
</li> </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 Checkout
</li> </li>
<li> <li>

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

@ -6,8 +6,11 @@ import { starIcon } from "../../assets/SvgIcons/svgIcons";
const ProductCard = ({ product }) => { const ProductCard = ({ product }) => {
const { addToCart } = useContext(CartContext); const { addToCart } = useContext(CartContext);
const textColorClass =
product?.rating?.count > 300 ? "text-green-500" : "text-red-500";
return ( 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 <img
src={product?.image} src={product?.image}
alt={product?.title} alt={product?.title}
@ -32,6 +35,10 @@ const ProductCard = ({ product }) => {
<p className="mt-0.5">{starIcon}</p> <p className="mt-0.5">{starIcon}</p>
</span>{" "} </span>{" "}
</p> </p>
<p className="mt-2 text-sm text-gray-900">
Only <b className={`${textColorClass}`}>{product?.rating?.count}</b>{" "}
pieces left
</p>
<button <button
onClick={() => addToCart(product)} 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" 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"> <div className="flex items-center justify-center w-full">
{cartItems?.length > 0 ? ( {cartItems?.length > 0 ? (
<div className="flex flex-col justify-between items-center"> <div className="flex flex-col justify-between items-center">
{checkout && (
<p className="mt-4 text-green-500 font-bold">{checkout}</p>
)}
</div> </div>
) : ( ) : (
<h1 className="text-lg font-bold">Your cart is empty</h1> <h1 className="text-lg font-bold">Your cart is empty</h1>
@ -49,14 +46,14 @@ export default function Cart({ showModal, toggle }) {
</h1> </h1>
<div className="flex flex-col absolute right-5 top-0 gap-y-20"> <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}> <button className="px-4 py-2 text-xl mt-4" onClick={toggle}>
{crossIcon} {crossIcon}
</button> </button>
</div> </div>
<div className="mr-6"> <div className="mr-6">
<button <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={() => { onClick={() => {
clearCart(); clearCart();
}} }}
@ -65,6 +62,17 @@ export default function Cart({ showModal, toggle }) {
</button> </button>
</div> </div>
</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"> <div className="flex flex-col items-start gap-4 w-full mt-8">
{cartItems?.map((item) => ( {cartItems?.map((item) => (
<div <div