Take Up This Challenge:

  1. Our E-commerce supports 10 Brands: [Brand-1, Brand-2, Brand-3, ...rest ]
  2. Each Brand has 10 Categories: [Category-1, Category-2, Category-3, ...rest ]
  3. Each Category has 10 sections: [Section-1, Section-2, Section-3, ...rest]
  4. Each Section has 4 Products or more: [Product-1, Product-2, Product-3, Product-4]
  5. Each Product has 10 types: [type-1, type-2, type-3, ..rest]
  6. And each year - for 10 years - we will add this amount of items again: [Year-2019, Year-2020, Year-2021, ..rest]

So our E-commerce has ( 10 ^ 4 ) x 4 types of products (= 40,000), up to (= 400,000) after 10 years!

Your task will be to show this 40,000 types on our limited homepage:

  • the homepage should NOT become too messy
  • only stable and well defined libraries are allowed
  • user can interact and navigate easily
  • User Experience Design rules should be followed

And please do not forget about:

  • page responsiveness
  • cross-web-browsers compatibilities
  • code refactoring / updating / maintenance, should NOT frustrate us

Okay. Assuming flexible repetition of two to five (= 2,3,4,5), instead of 10;

It can be solved / done by the following steps.

این چالش رو حل کنید:

  1. فروشگاه اینترنتی داریم که 10 تا برند را پشتیبانی می کند : [Brand-1, Brand-2, Brand-3, ...rest ]
  2. هر برند 10 دسته بندی دارد: [Category-1, Category-2, Category-3, ...rest ]
  3. هر دسته بندی 10 بخش دارد: [Section-1, Section-2, Section-3, ...rest]
  4. هر بخش 4 محصول و یا بیشتر دارد: [Product-1, Product-2, Product-3, Product-4]
  5. هر محصول 10 نوع مختلف دارد: [type-1, type-2, type-3, ..rest]
  6. و هر سال - برای 10 سال - ما این حجم محصول را دوباره اضافه می کنیم: [Year-2019, Year-2020, Year-2021, ..rest]

بنابراین فروشگاه ما 10 به توان 4 ضرب در 4 تا نوع محصول دارد (000و40) و بعد از 10 سال تا مقدار (000و400) هم می رسد

وظیفه شما این است که این 000و40 نوع محصول را در صفحه اصلی ماه نشان دهید:

  • صفحه اصلی نباید شلوغ و بهم ریخته شود
  • فقط کتابخانه های پایدار مجاز به استفاده هستند
  • کاربر باید بتواند به راحتی از آن استفاده کند
  • قواعد بهبود تجربه ی کاربری باید دنبال شود

و لطفا این موارد را فراموش نکنید:

  • صفحه باید واکنشگرا باشد
  • در تمام مرورگرها به درستی کار کند
  • آبدیت و نگاهداری کد ها نباید ما را اذیت کند

باشد. برای انعطاف پذیری فرض می کنیم ورودی هایمان بین 2 تا 5 هستند بجای 10 ثابت;

این چالش با انجام این مراحل می تواند حل شود.

First dealing with Brands ( n ^ 1 ) x 1:
  • using carousel-z

اول برند ها رو حل کنیم ( عدد بتوان 1 ) ضرب در 1:
  • با استفاده carousel-z

Code

const keys = Object.keys;
const brands = keys( eCommerce );
const first =
<CarouselZ titles={ brands } >
{
    brands.map(( brand ) => { return <h1>{ brand }</h1> })
}
</CarouselZ>;
render( first, document.getElementById( "step-1" ));

Second dealing with Categories ( n ^ 2 ) x 1:
  • using carousel-z
  • then nesting carousel-y

دوم دسته بندی ها ( عدد بتوان 2 ) ضرب در 1:
  • با استفاده carousel-z
  • بعد داخل کردن carousel-y

code

const second =
<CarouselZ titles={ brands } >
{
    brands.map(( brand ) => {
        const categories = keys( eCommerce[ brand ] );
        return <CarouselY titles={ categories } >
        {
            categories.map(( category ) => { return <h1>{ category }</h1> })
        }
        </CarouselY>
    })
}
</CarouselZ>;
render( second, document.getElementById( "step-2" ));

Third Sections ( n ^ 3 ) x 1:
  • using carousel-z
  • nesting carousel-y
  • nesting carousel-x

  • arrow: true
  • form: "compact-arrow"
  • position: "center"

سوم بخش ها ( عدد بتوان 3 ) ضرب در 1:
  • با استقاده carousel-z
  • داخل کردن carousel-y
  • داخل کردن carousel-x

Code

const third =
<CarouselZ titles={ brands } >
{
    brands.map(( brand ) => {
        const categories = keys( eCommerce[ brand ] );
        return <CarouselY titles={ categories }>
        {
            categories.map(( category ) => {
                const sectoins = keys( eCommerce[ brand ][ category ] );
                return <CarouselX titles={ sectoins } animation={ false }>
                {
                    sectoins.map(( section ) => { return >h1>{ section }>/h1> })
                }
                </CarouselX>
            })
        }
        </CarouselY>
    })
}
</CarouselZ>;
render( third, document.getElementById( "step-3" ));

Forth Products ( n ^ 3 ) x 4:
  • using carousel-z
  • nesting carousel-y
  • nesting carousel-x
  • nesting slick-x

چهارم محصول ها ( عدد بتوان 3 ) ضرب در 4:
  • با استفاده carousel-z
  • داخل کردن carousel-y
  • داخل کردن carousel-x
  • داخل کردن slick-x

Code

const fourth =
<CarouselZ titles={ brands } >
{
    brands.map(( brand ) => {
        const categories = keys( eCommerce[ brand ] );
        return <CarouselY titles={ categories }>
        {
            categories.map(( category ) => {
                const sectoins = keys( eCommerce[ brand ][ category ] );
                return <CarouselX titles={ sectoins } animation={ false }>
                {
                    sectoins.map(( section ) => {
                        const products = keys( eCommerce[ brand ][ category ][ section ] );
                        return <SlickX >
                        {
                            products.map(( product ) => { return <h1>{ product }</h1> })
                        }
                        </SlickX>
                    })
                }
                </CarouselX>
            })
        }
        </CarouselY>
    })
}
</CarouselZ>; 
render( fourth, document.getElementById( "step-4" ));

Finally Types ( n ^ 4 ) x 4:
  • using carousel-z
  • nesting carousel-y
  • nesting carousel-x
  • nesting slick-x
  • nesting carousel-z again. ( Could be carousel-y or carousel-x)

Tada! Three Brands with nested Categories and Sections, etc.

  • As compact as possible
  • As stable as CSS3 is
  • Interactive Asynchronously (NOT blocking JS's single thread)

Disable JS in your browser and try it.

در نهایت نوع ها ( عدد بتوان 4 ) ضرب در 4:
  • با استفاده carousel-z
  • داخل کردن carousel-y
  • داخل کردن carousel-x
  • داخل کردن slick-x
  • داخل کردن carousel-z دوباره. ( می توانست carousel-y یا carousel-x) هم باشد

  • تا ممکن است فشرده هستند
  • به همان اندازه سی اس اس ۳ پایدار هستند
  • به صورت غیر همزمان کار می کند (جاواسکریپت که یک نخ دارد را مسدود نمی کند)

جاواسکرپت مرورگر خود را غیر فعال و آزمایش کنید.

Code

const fifth =
<CarouselZ titles={ brands } >
{
    brands.map(( brand ) => {
        const categories = keys( eCommerce[ brand ] );
        return <CarouselY titles={ categories }>
        {
            categories.map(( category ) => {
                const sectoins = keys( eCommerce[ brand ][ category ] );
                return <CarouselX titles={ sectoins } animation={ false }>
                {
                    sectoins.map(( section ) => {
                        const products = keys( eCommerce[ brand ][ category ][ section ] );
                        return <SlickX >
                        {
                            products.map(( product, index ) => {
                                const types = keys( eCommerce[ brand ][ category ][ section ][ product ] );
                                return index === 0
                                ? <CarouselX titles={ types } animation={ false }>
                                {
                                    types.map(( type ) => { return <h1>{ type }</h1> })
                                }
                                </CarouselX>
                                : <CarouselZ titles={ types } >
                                 {
                                    types.map(( type ) => { return <h1>{ type }</h1> })
                                }
                                </CarouselZ>
                            })
                        }
                        </SlickX>
                    })
                }
                </CarouselX>
            })
        }
        </CarouselY>
    })
}
</CarouselZ>;
render( fifth, document.getElementById( "step-5" ));

Okay. But what about each year. You just solved one-tenth of the Challenge.

We have 10 years. That was only for one year!

No problem. Just nest everything:
  • in another carousel-x component,
  • or use a step-switch component,
  • or use a progress-x component,
  • or in a tab-x or tab-y component, like so

باشد. اما درباره هر سال. شما فقط یک چهارم چالش را حل کردید.

ماه ۱۰ سال داریم. ان فقط برای یک سال بود!!

هیچ مشکلی نیست. فقط هر چیزی هست را قرار بده در:
  • یک carousel-x کامپوننت دیگز,
  • و یا یک step-switch کامپوننت,
  • و یا یک progress-x کامپوننت مانند همین:
  • و یا یک tab-x یا tab-yکامپوننت,

JSON: eCommerce

const eCommerce = {
    // first brand
    // using carousel-z
    "Brand-1": {
        // using carousel-y
        "Category-1:new": {
            // using carousel-x
            "Section-1": {
                // Products (= slick-x step-ponent) has no title
                product1: {
                    // we can use any of them again
                    "Type-1" : "",
                    "Type-2" : "",
                    "Type-3" : "",
                    "Type-4" : ""
                },
                product2: {
                    "Type-2" : "",
                    "Type-3" : "",
                    "Type-4" : ""
                },
                product3: {
                    "Type-1" : "",
                    "Type-2" : "",

                },
                product4: {
                    "Type-1" : "",
                    "Type-2" : "",
                    "Type-3" : "",
                    "Type-4" : ""
                },
            },
            "Section-2": {
                product1: {
                    "Type-1" : "",
                    "Type-2" : "",
                    "Type-3" : "",
                    "Type-4" : ""
                },
                product2: {
                
                },
                product3: {
                    "Type-1" : "",
                    "Type-2" : "",
                    "Type-3" : "",
                    "Type-4" : ""
                }
            },
            "Section-3": {
                product1: {},
                product2: {}
            }
        },
        "Category-2:2019": {
            "Section-1": {
                product1: {
                    "Type-1" : "",
                    "Type-2" : "",
                    "Type-3" : "",
                    "Type-4" : ""
                },
                product2: {
                    "Type-1" : "",
                    "Type-2" : "",
                    "Type-3" : "",
                    "Type-4" : ""
                },
                product3: {
                    "Type-1" : "",
                    "Type-2" : "",
                    "Type-3" : "",
                    "Type-4" : ""
                },
                product4: {
                    "Type-1" : "",
                    "Type-2" : "",
                    "Type-3" : "",
                    "Type-4" : ""
                }
            },
            "Section-2": {}
        }
    },

    // second brand
    "Brand-2": {
        "Category-1:used": {
            "Section-1": {},
            "Section-2": {},
            "Section-3": {},
            "Section-4": {}
        },
        "Category-2:new": {
            "Section-1": {},
            "Section-2": {},
            "Section-3": {},
            "Section-4": {}
        },
        "Category-3:used": {
            "Section-1": {},
            "Section-2": {},
            "Section-3": {},
            "Section-4": {}
        }
    },

    // third brand
    "Brand-3" : {
        "Category-1:new": {
            "Section-1": {},
            "Section-2": {}
        },
        "Category-2:10%": {
            "Section-1": {},
            "Section-2": {}
        },
        "Category-3:15%": {
            "Section-1": {},
            "Section-2": {},
            "Section-3": {},
            "Section-4": {}
        },
        "Category-4:20%": {
            "Section-1": {},
            "Section-2": {},
            "Section-3": {},
            "Section-4": {}
        }
    },
}

More Via Your Browser

بیشتر از طریق مرورگر

Create
ایجاد
Document
مستندات
Source Code
کد منبع
Examples
مثال ها
Pure CSS ...
سی اس اس خالص...

More Via Your Terminal

بیشتر از طریق ترمینال

    

  1. # Home Page Is:
    2. 

  2. curl -sL somareact.ir
    3. 

  3. 

  4. # Create Page
    5. 

  5. curl -sL somareact.ir/create/
    6. 

  6. 

  7. # Document Page
    8. 

  8. curl -sL somareact.ir/document/
    9. 

  9. 

  10. # Examples Page
    11. 

  11. curl -sL somareact.ir/example/
    12. 

  12.