Description
            
                - At a high level, my component's  make function takes in an object as input and builds a sortable product collection,integrated  with an image slideshow functionality for each product in the collection, based on the input object's values
- The makeSortableCollection has a pubic function, setImgDimensions to set image dimensions maybe based on your type of product.(This could be done via css but we need a public function and it specifies image tweaking to a specific collection
- Our makeSortableCollection function's parameter object(paramObject) take in the following properties (paramObjects's (Key:  Data Type) Syntax 
                    
                        -   productCollection:  Array of Objects    Array of Object's (Key:  Data Type) Syntax    
                            [
                            {
                            productId:  Integer,
                            productName:  String,
                            brand:  String
                            stock:  Integer,
                            wholesalePrice:  Integer
                            retailPrice:  Integer
                            Rating:  Decimal or Double
                            images:  Object    Object's (Key:  Data Type) Syntax 
                            {
                            color1:  String,  ,
                            color2:  String,  ,
                            ....
                            }
                            },
                            ...
                            ]
                        
-   title:  String   
-   sortPhrase:  String
-   locale:  String
-   currrency:  String
-   NumColums:  Integer      
-   HrzMarginSum:  Integer   
-   sortPropertyAliases::  Object   Object's (Key:  Data Type) Syntax 
                            {
                            propertyName1 :  Array of Strings  Array Syntax["Desired Name","Ascending or Descending"] 
                            propertyName2:  Array of Strings   Array Syntax["Desired Name","Ascending or Descending"] 
                            .....
                            }
-   newProductPropColl::  Array of Objects   Array of Object's (Key:  Data Type) Syntax      
                            [
                            {
                            prodPropName:  String,
                            funcParameters:  Array of Strings             
                            prodFunction:  function(paramsArray)     
                            },
                            ...
                            ]
 
 Demo
            Click 
here to open the first demo which entails:-
            
                - 4 columns for each collection
- Money formated by U.S. Currency, dollars
- Additional Properties(profitMargin and maxProfit) added. profitMargin added to sort list as well
- Image dimensions tweaked via public method
 
            Click 
here to open the second demo which entails:-
            
                - 3 columns for first collection and 5 for second
- Money formated by  British Currency, pounds
- No additional product properties
- No image dimensions tweaked
- Stock(Quantity) Sorted from high to low
Zip File
            
                - Click here to download  tutorial zip file
Code Snippets  
            
                - 
                    Click here to view the snippet code that helped me change, number of reviews and rating into graphical star representation.Cloudflare CDN  is needed.So basically,
                    the function takes a rating between 0 and 5 inclusive as a double, and the number of reviews as an integer. The rating is converted to an integer. Then the function creates the returning div,
                    ,creates a span tag, appends some text to the span, transforms the ratings to stars using a for-loop to five(color changing effect id added to a created starusing the Cloudflare CDN, for first(number of ratings inputed, converted to an integer). Then the stars are appended to the span The number of reviews in brackets, appended  to the span, then the span to the returning div.
                
                - 
                    Click here to view the snippet code that helped me transform average image object with (colors as keys and image URL as values) into graphical  representation. The returning div is created, an image tag is created and its source is set to 
                    the first image value  in the image object, then appended to the returning div. Circles are created as a span tag, according to the number of images in the object, and the image object  keys extracted to color the circles.A new property(URL) is added to each circle(span). An onclick listener is set for each circle, to change the image URL to the span's image property, ands some css is added on 
                    to visually differentiate the circle clicked.The colored circles are appended to a new div, then appended to the returning div
                
                - 
                    Click here to view the snippet code that helped me sort a list of objects depending on the given sort property and sort order. Here, an array of objects, sort property(number of string), and sort order("ascending" or "descending"). Javascript's sort algorithm is different
                    for strings and numbers.The sort property is what is compared in the sort function. The return value of Javascript's sort function determine the order of the sort. So we test for the date type of array values and return the appropriate values. Now depending on the sort other, switching the sign of the return value, switches the sort order within the array, so it is switched if the sort order is not ascending. There function then returns the sorted array of objects
                
Inspiration/Troubleshooting
            
                - Earlier when I was thinking about what component to build. I thought of "Fashionnova's" product collections. Fashionnova is an e-commerce fashion store
- Click here to open a  link that exhibits the best of best's sortable product collection. Credit to Fashionnova
- Some star overflow links that helped me
                    
                        - Click here for link that helped me learn cosole.log gets updated to the latest object, if your logging the same tweaked object, for optimization, and led me to use console.table instead
- Click here for link that helped me select elements based on the CSS selectors, under a particular DOM Element
- Click here for link that helped me realize I can't edit change css via javascript for an element which hasn't been created. It wasn't so direct