Custom Gallery Tutorial Part 3

 

 

 

 

#result{

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    grid-template-rows: auto;

    grid-gap: 25px;

    text-align: center;

    /* margin-top: 100px ; */

    padding: 10px;

    border-radius: 15px;

    /* border: 2px solid green; */

    height: 570px;

    overflow-y: auto;

    width: 90%;

    margin-top: 40px;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 0px;

    background-attachment: fixed;

    /* background-color: rgb(10, 10, 10); */

}

 

#result::-webkit-scrollbar {

    display: none;

}

 

#result img{

    width: 100%;

    height:380px;

    background-repeat: no-repeat;

    background-size: cover;

    cursor: pointer;

    background-position: center;

    border-radius: 5px;

    border: 2px solid rgb(248, 243, 243);

}

 

#result img:hover{

   opacity: 0.7;

   transition: all ease-in-out 100ms;

   /* background: black; */

   /* background-image: radial-gradient(red,green); */

}

 

Custom Gallery Tutorial Part 2

 HTML

<div id="result">

        

    </div>

 

    <script src="js/index.js"></script>

JAVASCRIPT:

var parentDiv = document.getElementById('result');

var form = document.getElementById('form')

var images = document.getElementsByTagName('img');

let getlatestImg ;

let windowWidth = window.innerWidth;

 

ShowImages();

form.addEventListener('submit', (e) => {

    e.preventDefault();

    var reader = new FileReader();

 

    var name = document.getElementById('image').files[0].name;

    console.log(name)

    var image = document.getElementById('image').files[0];

    console.log(image);

    reader.readAsDataURL(image);

    reader.addEventListener('load', () => {

        if (image && localStorage) {

            localStorage.setItem(name, reader.result)

            setTimeout(() => {

 

                alert('image stored in local storage');

            }, 1000)

            parentDiv.innerHTML = ''

            ShowImages();

        }

        else {

            alert('Image not stored')

            // console.log(error);

 

        }

    })

 

})

 

function ShowImages() {

    for (let i = 0; i < localStorage.length; i++) {

        let res = localStorage.getItem(localStorage.key(i));

        var image = new Image();

        image.src = res;

        parentDiv.childNodes

 

        parentDiv.appendChild(image);

    }