-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathplaysnes.html
157 lines (121 loc) · 6.12 KB
/
playsnes.html
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<html lang="br">
<head>
<title>Plame Games Online | Welcome</title>
<link rel='stylesheet' href='./css/main.css'>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width'>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name='author' content='Guillermo Benitez'>
<meta name='keywords' content='games, game online, snes emulator, snes online'>
<meta name='description' content='Model website to learn about HTML, CSS, Javascript and C++'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container">
<div id='logo'>
<img src='./img/logo.png'>
</div>
<nav>
<ul>
<li><a href='index.html'>Home</a></li>
<li class='current'><a href='play.html'>Jogar</a></li>
<li><a href='about.html'>Sobre</a></li>
</ul>
</nav>
</div>
</header>
<section id='boxes'>
<div class='container'>
<h2>Escolha que game você quer jogar.</h2>
<div class="container2">
<div class='search-box'>
<input type='text' class='search-txt' id='inputFiltro' placeholder='Digite o nome do jogo...'>
<a href="#" class="search-btn">
<i class="fas fa-search"></i>
</a>
</div>
</div>
<ul id='listaJogos'>
<div class='boxj'>
<li class="itemJogo">
<a href='playsnes-super-mario-world.html'>
<img src='./img/marioworld.png' href='#'>
<div class="containerInfoJogos">
<h3>Super Mario World</h3>
<div class="infoGame">
<h4>Ano: 1992</h4>
<h4>Avaliação: 4.7</h4>
<h4>Paltaforma: SNES</h4>
<h4>Genêro: Plataforma</h4>
</div>
<div class="infoGamePlayer">
<h4>Último acesso: 16/02/2019</h4>
<h4>Progresso: 75%</h4>
<h4>Troféus: 3</h4>
<h4>Ranking Geral: 345º</h4>
<h4>Pontuação: 2.720</h4>
</div>
</div>
</a>
</li>
</div>
<li class="itemJogo">
<a href='playsnes-donkey-kong-country-3.html'>
<div class='boxj'>
<img src='./img/donkeykong3.jpg' href='#'>
<div class="containerInfoJogos">
<h3>Donkey Kong Country 3: Dixie Kong's Double Trouble!</h3>
<div class="infoGame">
<h4>Ano: 1996</h4>
<h4>Avaliação: 4.9</h4>
<h4>Paltaforma: SNES</h4>
<h4>Genêro: Plataforma</h4>
</div>
<div class="infoGamePlayer">
<h4>Último acesso: 15/02/2019</h4>
<h4>Progresso: 56%</h4>
<h4>Troféus: 2</h4>
<h4>Ranking Geral: 534º</h4>
<h4>Pontuação: 561.208</h4>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</section>
<footer>
<p>Guillermo Benitez, Copyright © 2019.</p>
</footer>
<script>
//* Pegando o Filtro
let inputFiltro = document.getElementById("inputFiltro");
//* Listener do filtro
inputFiltro.addEventListener('keyup', filterJogos)
function filterJogos () {
//* Pegano Valor do Filtro
let valorFiltro = document.getElementById("inputFiltro").value.toUpperCase();
//*Pegando nome ul
let ul = document.getElementById("listaJogos")
//*Pegando items li
let li = ul.querySelectorAll('li.itemJogo')
//*Pegando Box
let boxj = ul.getElementsByClassName('boxj')
//*Loop pelo array li
for(let i = 0; i < li.length; i++){
let a = li[i].getElementsByTagName('h3')[0];
// Verificacao do filtro no li
if(a.innerHTML.toUpperCase().indexOf(valorFiltro) > -1){
li[i].style.display = '';
boxj[i].style.border = '2px solid #e8491d';
} else{
li[i].style.display = 'none';
boxj[i].style.border = 'none';
}
}
}
</script>
</body>
</html>