13 |
106 |
121 |
122 |
123 | 
110 | 
124 |
125 |
154 |
155 |
126 |
152 |
153 |
127 |
136 |
137 |
128 | 
129 |
130 |
135 | Plataforma:
Todos
138 |
151 |
139 |
140 |
141 |
150 | Gênero:
Todos
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | FreePlay
10 |
11 |
12 |
13 |
54 |
55 |
56 |
57 |
90 |
91 |
92 |
103 |
104 |
105 | 
106 | 
107 |
108 |
109 |
110 |
145 |
146 |
147 |
148 |
149 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const s = (el) => document.querySelector(el);
2 | const sa = (el) => document.querySelectorAll(el);
3 |
4 |
5 | // animatios
6 |
7 | let target = document.querySelectorAll('[data-anime]');
8 |
9 | window.addEventListener('scroll', () => {
10 | let windowTop = window.scrollY + ((window.innerHeight * 3) / 4);
11 |
12 | target.forEach(element => {
13 | if((windowTop) > element.offsetTop) {
14 | element.classList.add('animate');
15 | } else {
16 | element.classList.remove('animate');
17 | }
18 | });
19 | });
20 |
21 | // menu mobile
22 |
23 | let menuMobileIcon = s('.menu-mobile--icon');
24 | let menuMobile = s('.menu-mobile');
25 |
26 | menuMobileIcon.addEventListener('click', () => {
27 | if(menuMobile.classList.contains('closed')) {
28 | menuMobile.classList.remove('closed');
29 | menuMobile.classList.add('open');
30 | } else {
31 | menuMobile.classList.remove('open');
32 | menuMobile.classList.add('closed');
33 | }
34 | });
35 |
36 | // carousel
37 |
38 | let currentSlide = 0;
39 |
40 | function goNext() {
41 | currentSlide++;
42 | if(currentSlide > 2) {
43 | currentSlide = 0;
44 | }
45 |
46 | updateMargin();
47 | }
48 |
49 | function goBack() {
50 | currentSlide--;
51 | if(currentSlide < 2) {
52 | currentSlide = 0;
53 | }
54 |
55 | updateMargin();
56 | }
57 |
58 | function updateMargin() {
59 | let slideritemWidth = s('.carousel--item').clientWidth;
60 | let newMargin = (currentSlide * slideritemWidth);
61 | s('.carousel--item').style.marginLeft = `-${newMargin}px`
62 | }
63 |
64 | // games
65 | let plataform = '?platform=all';
66 | let category = '';
67 | let url = `https://free-to-play-games-database.p.rapidapi.com/api/games${plataform}${category}&sort-by=popularity`;
68 | console.log(url);
69 | let page = 0;
70 | let inputFilter = document.querySelector('.search-game');
71 |
72 | async function getGames() {
73 |
74 | let response = await fetch(url, {
75 | "method": "GET",
76 | "headers": {
77 | "x-rapidapi-host": "free-to-play-games-database.p.rapidapi.com",
78 | "x-rapidapi-key": "03fb1e4f2dmsh6bb237e14e40631p173a3ajsnf3d499c72407"
79 | }});
80 |
81 | return response.json();
82 | }
83 |
84 | async function addGamesIntoDom() {
85 |
86 | let json = await getGames();
87 |
88 | console.log(json)
89 |
90 | json.map((item) => {
91 | let gameCard = s('.modal .game-card').cloneNode(true);
92 |
93 | gameCard.querySelector('.game--image img').src = item.thumbnail;
94 | gameCard.querySelector('.game--title').innerHTML = `${item.title.substring(0,25)}`;
95 | gameCard.querySelector('.game--resume').innerHTML = `${item.short_description.substring(0,55)}...`;
96 | gameCard.querySelector('.tag--genre').innerHTML = item.genre;
97 | gameCard.querySelector('.tag--platform img').src = WhatThisPlataform(item.platform);
98 | gameCard.querySelector('.game-card--link').href = item.game_url;
99 |
100 | s('.game-area').append(gameCard);
101 | });
102 | }
103 |
104 | function WhatThisPlataform(platform) {
105 | if(platform == "PC (Windows)") {
106 | return '/assets/images/iconWindows.png';
107 | } else {
108 | return '/assets/images/iconBrowser.png';
109 | }
110 | }
111 |
112 | addGamesIntoDom();
113 |
114 | inputFilter.addEventListener('input', event => {
115 | let inputValue = event.target.value.toLowerCase();
116 | let games = document.querySelectorAll('.game-card');
117 | let warning = document.querySelector('.game--warning');
118 |
119 | games.forEach((game) => {
120 | let gameTitle = game.querySelector('.game--title').textContent.toLowerCase();
121 |
122 | if(gameTitle.includes(inputValue)) {
123 | game.style.display = 'flex';
124 | } else {
125 | game.style.display = 'none';
126 | }
127 |
128 | });
129 |
130 | });
131 |
132 | // filter
133 |
134 | let filterOptionsPlatform = s('.filter-options--platform');
135 | let filterOptionsGenre = s('.filter-options--genre')
136 |
137 | s('.filter-desc--platform').addEventListener('click', () => {
138 | if (filterOptionsPlatform.classList.contains('closed')) {
139 | filterOptionsPlatform.classList.remove('closed');
140 | } else {
141 | filterOptionsPlatform.classList.add('closed');
142 | }
143 |
144 | });
145 |
146 | s('.filter-desc--genre').addEventListener('click', () => {
147 | if (filterOptionsGenre.classList.contains('closed')) {
148 | filterOptionsGenre.classList.remove('closed');
149 | } else {
150 | filterOptionsGenre.classList.add('closed');
151 | }
152 |
153 | });
154 |
155 | sa('.filter--item--platform').forEach((option) => {
156 | option.addEventListener('click', (el) => {
157 | s('.filter--item--platform.selected').classList.remove('selected');
158 | option.classList.add('selected');
159 |
160 | let platformSelected = s('.filter--item--platform.selected').getAttribute('data-key');
161 | s('.currentSelected--platform').innerHTML = s('.filter--item--platform.selected').getAttribute('data-name');
162 |
163 | filterPlataform(platformSelected);
164 | filterOptionsPlatform.classList.add('closed');
165 | });
166 | });
167 |
168 | sa('.filter--item--genre').forEach((option) => {
169 | option.addEventListener('click', (el) => {
170 | s('.filter--item--genre.selected').classList.remove('selected');
171 | option.classList.add('selected');
172 |
173 | let genreSelected = s('.filter--item--genre.selected').getAttribute('data-key');
174 | s('.currentSelected--genre').innerHTML = genreSelected;
175 |
176 | filterGenre(genreSelected);
177 | filterOptionsGenre.classList.add('closed');
178 | });
179 | });
180 |
181 | function filterPlataform(platformSelected) {
182 |
183 | plataform = `?platform=${platformSelected}`;
184 |
185 | url = `https://free-to-play-games-database.p.rapidapi.com/api/games${plataform}${category}&sort-by=popularity`;
186 | s('.game-area').innerHTML = '';
187 | getGames();
188 | addGamesIntoDom();
189 | }
190 |
191 | function filterGenre(genreSelected) {
192 |
193 | if(genreSelected == 'todos') {
194 | category = '';
195 | } else {
196 | category = `&category=${genreSelected}`;
197 | }
198 |
199 |
200 | url = `https://free-to-play-games-database.p.rapidapi.com/api/games${plataform}${category}&sort-by=popularity`;
201 |
202 | getGames();
203 | s('.game-area').innerHTML = '';
204 | addGamesIntoDom();
205 | }
206 |
207 |
208 |
--------------------------------------------------------------------------------
14 |
15 |
40 |
41 |
42 |
48 |
52 |
53 |
16 |
31 |
39 |
17 | 
18 |
19 |
18 |
20 | 
21 |
22 |
30 |
21 |
49 | 
50 |
51 |
50 |
58 |
89 |
59 |
68 |
60 | 
61 |
62 |
63 |
61 |
64 |
67 | JOGOS GRATUITOS
65 |Melhores jogos gratuitos para jogar com seus amigos
66 |
69 |
78 |
70 | 
71 |
72 |
73 |
71 |
74 |
77 | DIVERSAS CATEGORIAS
75 |Reunimos diferentes categorias de jogos
76 |
79 |
88 |
80 | 
81 |
82 |
83 |
81 |
84 |
87 | POPULARES DO MOMENTO
85 |Encontre os jogos mais jogados do momento
86 |
93 | 
94 |
95 |
94 |
96 |
102 |
97 |
101 | O melhor lugar para encontrar jogos gratuitos!
98 |FreePlay é uma coleção de jogos gratuitos para que você não perca tempo escolhendo o que vai jogar. Esta coleção foi feita especialmente para você, assim você pode se divertir sem pagar um único centavo!
99 | Explorar Jogos 100 |
106 |
107 |