assets/js/gallery.js
//this manipulates the DOM and fill the gallery with GIF's
this manipulates the DOM and fill the gallery with GIF's
this manipulates the DOM and fill the gallery with GIF ' s
function renderGallery() {
        $("#galleryPics").empty()
        let divContainer = $("<div>");
        divContainer.addClass("uk-grid-medium uk-child-width-expand@s uk-text-center");
        divContainer.attr("uk-grid", "");
        let main = $("#galleryPics");
        main.append(divContainer);
        const gifsArray = JSON.parse(localStorage.getItem("gifs"));
        let count = -1;
        let currentDivContainer = divContainer;
        for(let i=0; i < gifsArray.length; i++){
            count++;
            let img = $("<img>");
            img.attr("src", gifsArray[i]);
            img.addClass("gifs");
            let divCard = $("<div>");
            let divHolder = $("<div>");
            divCard.addClass("uk-card uk-card-default uk-card-body");
            divHolder.append(img);
            divCard.append(divHolder);
            let trashIcon = $("<span></span>");
            trashIcon.attr("uk-icon","trash");
            trashIcon.addClass("trashIcon");
            trashIcon.addClass("uk-position-bottom-right");
            divCard.append(trashIcon);
            if(count === 3){
                let newDivContainer = $("<div>");
                newDivContainer.addClass("uk-grid-medium uk-child-width-expand@s uk-text-center");
                newDivContainer.attr("uk-grid", "");
                let main = $("#galleryPics");
                main.append(newDivContainer);
                currentDivContainer = newDivContainer;
                count = 0;
            }
            currentDivContainer.append(divCard);
        };
    }
function renderGallery ( ) { $ ( "#galleryPics" ) . empty ( ) let divContainer = $ ( "<div>" ) ; divContainer . addClass ( "uk-grid-medium uk-child-width-expand@s uk-text-center" ) ; divContainer . attr ( "uk-grid" , "" ) ; let main = $ ( "#galleryPics" ) ; main . append ( divContainer ) ; const gifsArray = JSON . parse ( localStorage . getItem ( "gifs" ) ) ; let count = - 1 ; let currentDivContainer = divContainer ; for ( let i = 0 ; i < gifsArray . length ; i ++ ) { count ++ ; let img = $ ( "<img>" ) ; img . attr ( "src" , gifsArray [ i ] ) ; img . addClass ( "gifs" ) ; let divCard = $ ( "<div>" ) ; let divHolder = $ ( "<div>" ) ; divCard . addClass ( "uk-card uk-card-default uk-card-body" ) ; divHolder . append ( img ) ; divCard . append ( divHolder ) ; let trashIcon = $ ( "<span></span>" ) ; trashIcon . attr ( "uk-icon" , "trash" ) ; trashIcon . addClass ( "trashIcon" ) ; trashIcon . addClass ( "uk-position-bottom-right" ) ; divCard . append ( trashIcon ) ; if ( count === 3 ) { let newDivContainer = $ ( "<div>" ) ; newDivContainer . addClass ( "uk-grid-medium uk-child-width-expand@s uk-text-center" ) ; newDivContainer . attr ( "uk-grid" , "" ) ; let main = $ ( "#galleryPics" ) ; main . append ( newDivContainer ) ; currentDivContainer = newDivContainer ; count = 0 ; } currentDivContainer . append ( divCard ) ; } ; }
this manipulates the DOM and fill the gallery with GIF's
this manipulates the DOM and fill the gallery with GIF ' s
//this empties the main tag of all elements //this creates the first div container that holds the gifs //this adds ui kit classes to create a row of items //this adds the attribute uk-grid to the div element //this selects the main tag by id //this appends the new div element to the main tag //this assigns gifsArray an array of gifs urls that are currently in local storage //this initializes a count to keep track of current gifs being added to a div container  //this initializes a tracker of the current div container being filled with gifs //this for loop loops through the gifArray //this adds one to count //this creates a new img tag //this adds a src attribute to the new img tag //this adds the class gifs to the img tag which styles the size //this creates a new div to hold the div holder //this creates a new div to hold the img //this adds a class to the div card //this appends the img to the div holder //this appends the div holder to the div card //this creates a span element to hold a trash icon //this adds an attribute to the new span element that is UI kits trash icon //this adds a class to the new span element to add a click handler selector //this adds a class to the new span element to position the icon on the div card //this appends the trash icon to the div card //this adds the logic if 3 gifs are in the current div container make a new one and fill it with remaining gifs //this creates a new div element  //this adds the class to the new div element //this sets the attribute of uk-grid to the new div element //this selects main tag by id //this appends the new div container to the main tag //this changes the state of the current div container to be filled //this resets the count to 0 //this appends the div card to current div container