Skip to content
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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Exercise 3, 4, and 5 completed exercises replaced with correct code #6

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Exercise 3, 4, and 5 completed exercises replaced with correct code #6

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9b94ed9
Exercise 3 completed exercises replaced with correct code
smckinney1 Jun 27, 2024
bce538a
Exercise 4 completed exercises replaced with correct code
smckinney1 Jun 28, 2024
4716b17
Exercise 5 completed exercises replaced with correct code (#8)
smckinney1 Jul 3, 2024
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
12 changes: 6 additions & 6 deletions completed-components/exercise-3-html/ProductBuyBoxVariantSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ const ProductBuyBoxVariantSelector = ({ Product }) => {
const [selectedSize, selectSize] = useState<string | null>(null);
return (
<div id="buybox-variant-selector" className="my-6">
<h2 className="text-sm mb-2">
<span className="font-bold inline-block mr-1">Color:</span>
<div className="text-sm mb-2 flex flex-row">
<h2 className="font-bold inline-block mr-1">Color:</h2>
<span className="inline-block">{selectedColor}</span>
</h2>
</div>
<div data-id="colorTile" role="radiogroup" className="flex gap-4">
{Product.colors.map((color, index) => (
<label key={`Product-${index}`}>
Expand Down Expand Up @@ -40,9 +40,9 @@ const ProductBuyBoxVariantSelector = ({ Product }) => {
</div>
<div className="flex flex-col">
<div className="mt-6 mb-2">
<h2 className="flex">
<p className="font-bold mb-0 text-sm">Size:</p>
</h2>
<div className="flex">
<h2 className="font-bold mb-0 text-sm">Size:</h2>
</div>
</div>
<div data-id="sizeTile" role="radiogroup" className="flex flex-wrap">
{Product && Product.sizes.length === 1 && (
Expand Down
25 changes: 13 additions & 12 deletions completed-components/exercise-3-html/ProductDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,11 @@ const ProductDetails = ({ product, onAddToCart }: ProductDetailsProps) => {
</h1>
<div className="flex flex-row mt-2" data-id="buyboxRating">
<div className="css-0">
<h2 className="sr-only">Reviews</h2>
<a href="#the-wall">
{hasReviews && (
<>
<span className="sr-only">{product.overallRating}</span>
<span className="hidden">{product.overallRating}</span>
<HStack>
<div>
<IconStarRating rating={1} />
Expand All @@ -69,22 +70,22 @@ const ProductDetails = ({ product, onAddToCart }: ProductDetailsProps) => {
<hr className="my-6" />
<div>
<div>
<h2 className="sr-only">Price:</h2>
<h2 className="sr-only">Price</h2>
<span data-id="pricing">
<span className="font-bold text-xl">{product.price}</span>
</span>
</div>
<button type="button">
<div className="button">
<div className="flex flex-row">
<IconTag />
<p>Lowest Price Guarantee</p>
</div>
</button>
</div>
</div>
<ProductBuyBoxVariantSelector Product={product} />
<div className="flex flex-row items-center">
<div className="flex flex-col">
<h2 className="font-bold text-sm">Quantity:</h2>
<h2 className="font-bold">Quantity</h2>
<div className="flex flex-row items-start mt-2 gap-1">
<button
className="rounded-sm border-[1px] border-color-[#ccc] border-solid flex w-[32px] h-[38px] bg-slate-300 items-center text-center"
Expand All @@ -98,11 +99,11 @@ const ProductDetails = ({ product, onAddToCart }: ProductDetailsProps) => {
<IconMinus />
</button>
<input
className="block w-[40px] h-[38px] rounded border-2 text-center"
className="block w-[40px] h-[38px] rounded border-2 text-center font-bold bg-white"
type="number"
inputMode="decimal"
pattern="[0-9]*(.[0-9]+)?"
aria-label="Quantity"
aria-label="Product count"
value={productCount}
onChange={(event) => setProductCount(parseInt(event.target.value))}
role="spinbutton"
Expand All @@ -128,14 +129,14 @@ const ProductDetails = ({ product, onAddToCart }: ProductDetailsProps) => {
</div>
</div>
<div className="flex flex-col mt-4 mr-4">
<button
className="bg-black text-white font-bold py-2 mt-2 border-[1px] rounded-[100px]"
<div
className="bg-black text-white font-bold py-2 mt-2 border-[1px] rounded-[100px] text-center"
onClick={() => onAddToCart(product)}>
Add to Cart
</button>
<button className="bg-white text-black font-bold py-2 mt-2 border-[1px] border-black rounded-[100px] hover:bg-black hover:text-white">
</div>
<div className="bg-white text-black font-bold py-2 mt-2 border-[1px] border-black rounded-[100px] hover:bg-black hover:text-white text-center">
Add to Wishlist
</button>
</div>
</div>
</div>
);
Expand Down
41 changes: 29 additions & 12 deletions completed-components/exercise-3-html/ProductHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,41 +18,57 @@ const Banner = ({ shouldAnimate = false }: BannerProps) => {
}
};
const incrementSlide = () => {
if (currentSlideNum <= slideCount) {
if (currentSlideNum < slideCount) {
changeSlideNum(currentSlideNum + 1);
} else {
changeSlideNum(1);
}
};

const setInert = (node, slideNumber) => {
// workaround for React not recognizing inert
// https://github.com/facebook/react/pull/24730
return (
node && (currentSlideNum === slideNumber ? node.removeAttribute('inert', '') : node.setAttribute('inert', ''))
);
};

useEffect(() => {
updateSlidePercentage(((currentSlideNum - 1) / 3) * 100);
}, [currentSlideNum]);

async function animate() {
incrementSlide();
}

useEffect(() => {
if (shouldAnimate) animate();
}, []);

if (shouldAnimate) {
setTimeout(() => {
animate();
}, 3000);
}
smckinney1 marked this conversation as resolved.
Show resolved Hide resolved

return (
<div className="bg-black max-w-full w-full flex" id="banner" role="region" aria-labelledby="carouselheading">
<div className="flex max-w-[1400px] mx-auto">
<div className="mx-auto md:max-w-[65%] lg:max-w-[70%] flex">
<p id="carouselheading" className="sr-only">
<p id="carouselheading" className="hidden">
Announcements
</p>
<IconButton colorScheme="black" onClick={decrementSlide} type="button" aria-label="Previous Slide">
<IconButton colorScheme="black" onClick={decrementSlide} type="button" aria-label="Previous slide">
<IconLeftArrow />
</IconButton>
<div className="overflow-hidden w-full">
<ul
role="list"
className={`grid list-none grid-cols-3 h-full items-center w-[300%] text-white
transition-transform duration-500 ease-out`}
style={{ transform: `translateX(-${slidePercentage}%` }}>
<li ref={(node) => setInert(node, 1)} className="flex items-center">
style={{ transform: `translateX(-${slidePercentage}%)` }}>
<li className="flex items-center" ref={(node) => setInert(node, 1)}>
<div className="text-center mx-auto">
<a className="chakra-link popup-link" tabIndex={currentSlideNum === 1 ? 0 : -1}>
<a tabIndex={currentSlideNum === 1 ? 0 : -1}>
<div className="text-white">
<p className="text-white">
Get It By 12/24 W/ Free Standard Shipping &nbsp;
Expand All @@ -62,7 +78,7 @@ const Banner = ({ shouldAnimate = false }: BannerProps) => {
</a>
</div>
</li>
<li ref={(node) => setInert(node, 2)} className="flex items-center text-white text-center">
<li className="flex items-center text-white text-center" ref={(node) => setInert(node, 2)}>
<div className="text-center mx-auto">
<a
className="text-white"
Expand All @@ -77,14 +93,14 @@ const Banner = ({ shouldAnimate = false }: BannerProps) => {
</a>
</div>
</li>
<li ref={(node) => setInert(node, 3)} className="flex items-center text-white text-center">
<li className="flex items-center text-white text-center" ref={(node) => setInert(node, 3)}>
<div className="text-center mx-auto">
<a
className="text-white"
href="/rc/winter-footwear-accessories"
tabIndex={currentSlideNum === 3 ? 0 : -1}>
<div className="text-white">
<p className="text-white">
<p>
Winter’s Warmest Boots, Beanies, Mittens &amp; More &nbsp;
<span>Shop Now</span>
</p>
Expand All @@ -107,12 +123,13 @@ const Logo = () => <div className="mx-auto font-bold text-black font-serif text-

type ProductHeaderProps = {
shoppingCartItems: any[];
shouldAnimate?: boolean;
};

const ProductHeader = ({ shoppingCartItems }: ProductHeaderProps) => {
const ProductHeader = ({ shoppingCartItems, shouldAnimate }: ProductHeaderProps) => {
return (
<>
<Banner />
<Banner shouldAnimate={shouldAnimate} />
<header className="flex flex-row items-center py-2 max-w-[1400px] mx-auto md:min-w-[65%] lg:min-w-[70%]">
<IconButton aria-label="Menu" type="button" colorScheme="white">
<IconHamburgerMenu />
Expand Down
12 changes: 6 additions & 6 deletions completed-components/exercise-3-html/ProductImageGallery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,24 +31,24 @@ const ProductImageGallery = ({ imageData, onFullscreenOpen, onFullscreenClose }:
className="grid gap-2 grid-cols-none grid-flow-row
grid-cols[repeat(2, minmax(0, 1fr))] m-4 cursor-pointer">
<div className="col-span-2 row-span-2 block">
<button onClick={() => setFullscreenImage(imageData.mainImage)}>
<div onClick={() => setFullscreenImage(imageData.mainImage)}>
<Image src={imageData.imagePath + imageData.mainImage.src} alt={imageData.mainImage.alt} />
</button>
</div>
</div>
{imageData.galleryImages.map((image, index) => (
<button className="block" key={`gallery-${index}`}>
<div className="block" key={`gallery-${index}`}>
<img src={imageData.imagePath + image.src} alt={image.alt || imageData.mainImage.alt} />
</button>
</div>
))}
</div>
{!!fullscreenImage && (
<div className="absolute top-0 left-0 right-0 bg-white">
<button
<div
aria-label="Close modal"
className="button cursor-pointer absolute right-4 top-4 font-bold font-serif text-xl"
onClick={() => closeFullscreen()}>
X
</button>
</div>
<img src={imageData.imagePath + fullscreenImage.src} alt={fullscreenImage.alt} />
</div>
)}
Expand Down
18 changes: 10 additions & 8 deletions completed-components/exercise-4-ARIA/ProductDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,11 @@ const ProductDetails = ({ product, onAddToCart }: ProductDetailsProps) => {
</h1>
<div className="flex flex-row mt-2" data-id="buyboxRating">
<div className="css-0">
<h2 className="sr-only">Reviews</h2>
<a href="#the-wall">
{hasReviews && (
<>
<span className="sr-only">{product.overallRating}</span>
<span className="hidden">{product.overallRating}</span>
<HStack>
<div>
<IconStarRating rating={1} />
Expand All @@ -69,21 +70,22 @@ const ProductDetails = ({ product, onAddToCart }: ProductDetailsProps) => {
<hr className="my-6" />
<div>
<div>
<h2 className="sr-only">Price</h2>
<span data-id="pricing">
<span className="font-bold text-xl">{product.price}</span>
</span>
</div>
<button type="button">
<div className="button">
<div className="flex flex-row">
<IconTag />
<p>Lowest Price Guarantee</p>
</div>
</button>
</div>
</div>
<ProductBuyBoxVariantSelector Product={product} />
<div className="flex flex-row items-center">
<div className="flex flex-col">
<h2 className="font-bold text-sm">Quantity:</h2>
<h2 className="font-bold">Quantity</h2>
<div className="flex flex-row items-start mt-2 gap-1">
<button
className="rounded-sm border-[1px] border-color-[#ccc] border-solid flex w-[32px] h-[38px] bg-slate-300 items-center text-center"
Expand All @@ -97,11 +99,11 @@ const ProductDetails = ({ product, onAddToCart }: ProductDetailsProps) => {
<IconMinus />
</button>
<input
className="block w-[40px] h-[38px] rounded border-2 text-center"
className="block w-[40px] h-[38px] rounded border-2 text-center font-bold bg-white"
type="number"
inputMode="decimal"
pattern="[0-9]*(.[0-9]+)?"
aria-label=""
aria-label="Product count"
value={productCount}
onChange={(event) => setProductCount(parseInt(event.target.value))}
role="spinbutton"
Expand All @@ -128,11 +130,11 @@ const ProductDetails = ({ product, onAddToCart }: ProductDetailsProps) => {
</div>
<div className="flex flex-col mt-4 mr-4">
<button
className="bg-black text-white font-bold py-2 mt-2 border-[1px] rounded-[100px]"
className="bg-black text-white font-bold py-2 mt-2 border-[1px] rounded-[100px] text-center"
onClick={() => onAddToCart(product)}>
Add to Cart
</button>
<button className="bg-white text-black font-bold py-2 mt-2 border-[1px] border-black rounded-[100px] hover:bg-black hover:text-white">
<button className="bg-white text-black font-bold py-2 mt-2 border-[1px] border-black rounded-[100px] hover:bg-black hover:text-white text-center">
Add to Wishlist
</button>
</div>
Expand Down
Loading