Poke-tinder/matchs.html at master · yKriguer/Poke-tinder · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Matchs</title>
    <link rel="stylesheet" href="varcolor.css">
    <link rel="stylesheet" href="matchs.css">
</head>
<body>
    <div class="back">
        <a href="index.html">Voltar</a>
    </div>
    <h1 class="matchlist-h1">Match List</h1>
    <div id="namelist">


    </div>
</body>
<!--<script src="app.js"></script>-->
<script>
    let array = JSON.parse(localStorage.getItem('matchs')||'[]');
    let imagelist = document.getElementById('namelist')
    let list = array.reverse().map(function (element, index){
            return `<div class="matchs-content" id="${index}">
                 <img src="${element.imagem}">
                 <p>${element.nome}</p>
                 <button class="button-x"><svg fill="red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M376.6 427.5c11.31 13.58 9.484 33.75-4.094 45.06c-5.984 4.984-13.25 7.422-20.47 7.422c-9.172 0-18.27-3.922-24.59-11.52L192 305.1l-135.4 162.5c-6.328 7.594-15.42 11.52-24.59 11.52c-7.219 0-14.48-2.438-20.47-7.422c-13.58-11.31-15.41-31.48-4.094-45.06l142.9-171.5L7.422 84.5C-3.891 70.92-2.063 50.75 11.52 39.44c13.56-11.34 33.73-9.516 45.06 4.094L192 206l135.4-162.5c11.3-13.58 31.48-15.42 45.06-4.094c13.58 11.31 15.41 31.48 4.094 45.06l-142.9 171.5L376.6 427.5z"/></svg></button>
                 </div>`
        })

        imagelist.innerHTML = `${list.join('\n')}`

        let button = Array.from(document.getElementsByClassName('button-x'))
        console.log(button)

        button.forEach(element => {
            element.addEventListener('click', function (x){
                let container = this.parentNode
                localStorage.setItem('matchs', JSON.stringify(array.splice(container.id, 1)))
                container.remove()
            })
        });
</script>
</html>