Memorija - IP Lab

<!DOCTYPE html>
<html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css">
<style> img{
    width: 10em;
    height: 10em;
    object-fit: cover
}
</style>
 <script>
let animals = [
    'https://static.scientificamerican.com/blogs/cache/file/BB6F1FE0-4FDE-4E6E-A986664CE30602E4_source.jpg?w=590&h=800&2F8476C1-DF14-49BA-84FFE94218CC4933',
    'https://geo.img.pmdstatic.net/fit/http.3A.2F.2Fprd2-bone-image.2Es3-website-eu-west-1.2Eamazonaws.2Ecom.2FGEO.2Fvar.2Fgeo.2Fstorage.2Fimages.2Fmedia.2Fimages.2Fgirafe.2F2410391-1-fre-FR.2Fgirafe.2Ejpg/1120x630/background-color/ffffff/quality/90/cinq-choses-que-vous-ne-saviez-pas-sur-la-girafe.jpg',
    'https://images2.minutemediacdn.com/image/upload/c_crop,h_1193,w_2120,x_0,y_95/f_auto,q_auto,w_1100/v1554700180/shape/mentalfloss/539787-istock-164188559.jpg',
    'https://images.ctfassets.net/cnu0m8re1exe/6IZ6sdW6SOzXHOOiMtZJi5/319aa13fbd5c1cba2b9673c601d09a17/GrayMouse_300.jpg?w=650&h=433&fit=fill',
    'https://images.unsplash.com/photo-1526095179574-86e545346ae6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
    'https://scx1.b-cdn.net/csz/news/800/2019/mostnativebi.jpg',
    'https://nationalzoo.si.edu/sites/default/files/styles/1400_scale/public/animals/exhibit/africanlion-005.jpg?itok=6wA745g_',
    'https://www.washingtonpost.com/wp-apps/imrs.php?src=https://arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/2RSM54GNZMI6TDA4PSHOPBNYKU.jpg&w=767',
    'https://static.scientificamerican.com/blogs/cache/file/BB6F1FE0-4FDE-4E6E-A986664CE30602E4_source.jpg?w=590&h=800&2F8476C1-DF14-49BA-84FFE94218CC4933',
    'https://geo.img.pmdstatic.net/fit/http.3A.2F.2Fprd2-bone-image.2Es3-website-eu-west-1.2Eamazonaws.2Ecom.2FGEO.2Fvar.2Fgeo.2Fstorage.2Fimages.2Fmedia.2Fimages.2Fgirafe.2F2410391-1-fre-FR.2Fgirafe.2Ejpg/1120x630/background-color/ffffff/quality/90/cinq-choses-que-vous-ne-saviez-pas-sur-la-girafe.jpg',
    'https://images2.minutemediacdn.com/image/upload/c_crop,h_1193,w_2120,x_0,y_95/f_auto,q_auto,w_1100/v1554700180/shape/mentalfloss/539787-istock-164188559.jpg',
    'https://images.ctfassets.net/cnu0m8re1exe/6IZ6sdW6SOzXHOOiMtZJi5/319aa13fbd5c1cba2b9673c601d09a17/GrayMouse_300.jpg?w=650&h=433&fit=fill',
    'https://images.unsplash.com/photo-1526095179574-86e545346ae6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
    'https://scx1.b-cdn.net/csz/news/800/2019/mostnativebi.jpg',
    'https://nationalzoo.si.edu/sites/default/files/styles/1400_scale/public/animals/exhibit/africanlion-005.jpg?itok=6wA745g_',
    'https://www.washingtonpost.com/wp-apps/imrs.php?src=https://arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/2RSM54GNZMI6TDA4PSHOPBNYKU.jpg&w=767',
]
const openIMG = function(props){
    let id = props.target.parentNode.id -1
    console.log(this)
    open(id)
}
let jsimg = 'https://fslightbox.com/img/environments/javascript.png'
let openArr = []
function checkEnd(){
    let end = true
    let imgTags = document.getElementsByTagName('img')
    for(let index in imgTags){
        if(imgTags[index].src === jsimg){
            end = false
        }
    }

    if (end){
        alert('You won')
    }
}
function open(id){
    let imgTags = document.getElementsByTagName('img')

    openArr.push(id)
    if(openArr.length === 3){
        let elementId = openArr.shift()
        let eid = openArr.shift()

        if(imgTags[elementId].src !== imgTags[eid].src){
            imgTags[elementId].src = jsimg
            imgTags[eid].src = jsimg

        } else {
            imgTags[elementId].removeEventListener('click', openIMG)
            imgTags[eid].removeEventListener('click', openIMG)
        }
    }
    imgTags[id].src = animals[id]

    checkEnd()
}

function setImages(){
let imgTags = document.getElementsByTagName('img')
console.log(imgTags)
    for(let index in imgTags){
        console.log(imgTags[index])
            imgTags[index].addEventListener('click' , openIMG)
            imgTags[index].src= jsimg

    }
}

function reset(){
let imgTags = document.getElementsByTagName('img')

    for(let index in imgTags){
        imgTags[index].src = jsimg
    }

    openArr = []
}
setImages()
 </script>
 </head>
 <body>
 <h1>Meморија</h1>
 <div style="text-align:left; float:left">
 <table border="1">
 <tr>
 <td id="1"><img src=""/></td>
 <td id="2"><img src=""/></td>
 <td id="3"><img src=""/></td>
 <td id="4"><img src=""/></td>
 </tr>
 <tr>
 <td id="5"><img src=""/></td>
 <td id="6"><img src=""/></td>
 <td id="7"><img src=""/></td>
 <td id="8"><img src=""/></td>
</tr>
<tr>
<td id="9"><img src=""/></td>
<td id="10"><img src=""/></td>
<td id="11"><img src=""/></td>
<td id="12"><img src=""/></td>
</tr>
<tr>
<td id="13"><img src=""/></td>
<td id="14"><img src=""/></td>
<td id="15"><img src=""/></td>
<td id="16"><img src=""/></td>
</tr>
</table>
<input onclick="reset()" type="submit" value="RESET"/>
</div>
<br/>

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