Skip to content

Commit 2f4628f

Browse files
paulatalimpaulatalim
committed
melhora da organizacao do codigo e dos metadados
1 parent 22b7fdc commit 2f4628f

File tree

3 files changed

+52
-165
lines changed

3 files changed

+52
-165
lines changed

‎css/style.css‎

Lines changed: 0 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -614,59 +614,6 @@ body {
614614
width: 5% !important;
615615
}
616616

617-
/* .plataforma-slide {
618-
display: flex;
619-
flex-direction: row;
620-
align-items: center;
621-
justify-content: space-around;
622-
flex-wrap: wrap;
623-
}
624-
625-
.plataforma-area-card {
626-
padding: 20px;
627-
height: 400px;
628-
}
629-
630-
.plataforma-card {
631-
width: 100%;
632-
height: 100%;
633-
}
634-
635-
.plataforma-card-conteudo {
636-
background-size: cover;
637-
background-repeat: no-repeat;
638-
background-position-x: center;
639-
background-position-y: center;
640-
641-
height: 100%;
642-
width: 100%;
643-
644-
padding: 0;
645-
border: none;
646-
border-radius: 20px;
647-
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.342);
648-
}
649-
650-
.plataforma-card-titulo {
651-
background: rgb(0,0,0);
652-
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 100%);
653-
654-
margin: 0;
655-
padding: 0 25px;
656-
border-radius: 20px;
657-
height: 100%;
658-
659-
display: flex;
660-
align-items: center;
661-
}
662-
663-
#plataforma-titulo {
664-
position: relative;
665-
top: 30%;
666-
color: white;
667-
font-size: 20pt;
668-
} */
669-
670617
/*** PUBLISHER ***/
671618
.publisher {
672619
background: linear-gradient(0deg, rgba(124,0,247,1) 0%, rgba(139,0,204,1) 100%);
@@ -769,68 +716,6 @@ body {
769716
width: 5% !important;
770717
}
771718

772-
/* .publisher .carousel, .publisher .carousel .carousel-item {
773-
height: 95vh;
774-
}
775-
776-
.publisher-slide {
777-
border: none;
778-
height: 90vh;
779-
padding: 20px 10px;
780-
}
781-
782-
.publisher-card {
783-
background-color: #000;
784-
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.342);
785-
margin: 0;
786-
padding: 0;
787-
border: none;
788-
border-radius: 20px;
789-
height: 100%;
790-
width: 100%;
791-
}
792-
793-
.publisher-card-banner {
794-
background-repeat: no-repeat;
795-
background-size: cover;
796-
background-position: center;
797-
margin: 0;
798-
padding: 0;
799-
border: none;
800-
border-radius: 20px;
801-
height: 35%;
802-
}
803-
804-
.publisher-card-banner-filtro {
805-
background: rgb(0,0,0);
806-
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 80%, rgba(0,0,0,1) 100%);
807-
height: 100%;
808-
margin: 0;
809-
border: none;
810-
border-radius: 20px;
811-
812-
display:flex;
813-
flex-direction: column;
814-
justify-content: end;
815-
padding: 20px;
816-
color: #fff;
817-
}
818-
819-
.publisher-card-banner-filtro h2 {
820-
font-size: 20pt;
821-
}
822-
823-
.publisher-card-conteudo {
824-
background-color: #000;
825-
color: #fff;
826-
border-radius: 20px;
827-
padding: 20px;
828-
}
829-
830-
#publisher-card-conteudo-topicos {
831-
padding-left: 20px;
832-
} */
833-
834719
/*** SOBRE ***/
835720
.sobre {
836721
padding-top: 10%;

‎index.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<meta name="author" content="Paula Talim">
99
<meta name="description" content="Games store, um site de games desenvolvido com a API rawn.io">
10-
<meta name="keywords" content="trabalho, diw, games, Paula Talim">
11-
10+
<meta name="keywords" content="trabalho academico, diw, games, Paula Talim, site, html, css, js, api">
11+
<meta name="theme-color" content="#8300ff">
12+
1213
<script src="https://kit.fontawesome.com/e847ef4a17.js" crossorigin="anonymous"></script>
13-
<script src="./js/jquery-3.6.1.min.js"></script>
1414
<script src="./js/sketch_homepage.js"></script>
1515

1616
<link rel="stylesheet"
@@ -24,7 +24,6 @@
2424
</head>
2525

2626
<body>
27-
<!-- <a href="./test/index.html">teste</a> -->
2827
<header class="header">
2928
<nav class="navbar navbar-expand-lg navbar-dark">
3029
<a class="navbar-brand" href="#">

‎js/sketch_homepage.js‎

Lines changed: 49 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -361,57 +361,66 @@ function exibir_plataformas (data) {
361361
return data;
362362
}
363363

364+
function requisicao_plataformas(){
365+
fetch ('https://api.rawg.io/api/platforms?key=0ae278d26fd24463b3d3c454be18cb17')
366+
.then(res => res.json ())
367+
.then(data => exibir_plataformas(data));
368+
}
369+
364370
/*************
365371
* PUBLISHER *
366372
*************/
367373

368-
function exibir_publisher () {
369-
fetch ('https://api.rawg.io/api/publishers?key=0ae278d26fd24463b3d3c454be18cb17')
370-
.then(res => res.json ())
371-
.then(data => {
372-
let str = '';
373-
let index = 0;
374+
function exibir_publisher (data) {
375+
let str = '';
376+
let index = 0;
374377

375-
//Inclusao de novo slide no corrousel
376-
for (let i = 0; i < Math.ceil(data.results.length/4); i++){
377-
str += `<div class="carousel-item`
378+
//Inclusao de novo slide no corrousel
379+
for (let i = 0; i < Math.ceil(data.results.length/4); i++){
380+
str += `<div class="carousel-item`
378381

379-
if (i == 0) {
380-
str += ` active`
381-
}
382-
383-
str += `"><div class="publisher-slide">`
382+
if (i == 0) {
383+
str += ` active`
384+
}
385+
386+
str += `"><div class="publisher-slide">`
384387

385-
for (let j = 0; j < 4; j++) {
386-
let jogo = data.results[index];
388+
for (let j = 0; j < 4; j++) {
389+
let jogo = data.results[index];
387390

388-
if (index < data.results.length) {
389-
let background = `background-image: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 100%), url(${jogo.image_background});`;
391+
if (index < data.results.length) {
392+
let background = `background-image: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 100%), url(${jogo.image_background});`;
390393

391-
str += `<div class="col-12 col-sm-6 col-md-6 col-lg-3 publisher-area-card">
392-
<div class="publisher-card">
393-
<div class="publisher-card-banner" style="${background}">
394-
<h2 id="publisher-card-title">${jogo.name}</h2>
395-
</div>
396-
397-
<div class="publisher-card-conteudo">
398-
<h5>Jogos:</h5>
399-
<ul id="publisher-card-conteudo-topicos">`
400-
401-
for (let k = 0; k < jogo.games.length && k < 3; k++) {
402-
str+=`<li>${jogo.games[k].name}</li>`
403-
}
404-
405-
str += `</ul></div></div></div>`
406-
}
407-
index++;
408-
}
394+
str += `<div class="col-12 col-sm-6 col-md-6 col-lg-3 publisher-area-card">
395+
<div class="publisher-card">
396+
<div class="publisher-card-banner" style="${background}">
397+
<h2 id="publisher-card-title">${jogo.name}</h2>
398+
</div>
399+
400+
<div class="publisher-card-conteudo">
401+
<h5>Jogos:</h5>
402+
<ul id="publisher-card-conteudo-topicos">`
409403

410-
str += `</div></div>`
404+
for (let k = 0; k < jogo.games.length && k < 3; k++) {
405+
str+=`<li>${jogo.games[k].name}</li>`
406+
}
407+
408+
str += `</ul></div></div></div>`
411409
}
410+
index++;
411+
}
412+
413+
str += `</div></div>`
414+
}
412415

413-
document.querySelector('.publisher-area-slide').innerHTML = str;
414-
});
416+
document.querySelector('.publisher-area-slide').innerHTML = str;
417+
return data;
418+
}
419+
420+
function requisicao_publisher () {
421+
fetch ('https://api.rawg.io/api/publishers?key=0ae278d26fd24463b3d3c454be18cb17')
422+
.then(res => res.json ())
423+
.then(data => exibir_publisher(data));
415424
}
416425

417426
/***************
@@ -437,12 +446,6 @@ function requisicao_games_jogos(filtroBusca){
437446

438447
}
439448

440-
function requisicao_plataformas(){
441-
fetch ('https://api.rawg.io/api/platforms?key=0ae278d26fd24463b3d3c454be18cb17')
442-
.then(res => res.json ())
443-
.then(data => exibir_plataformas(data));
444-
}
445-
446449
function requisicao_games_jogo_pesquisa (origem) {
447450
let barra_de_busca = document.getElementById("campo_buscar").value;
448451

@@ -518,7 +521,7 @@ onload = () => {
518521
requisicao_games_destaques();
519522
requisicao_games_jogos('');
520523
requisicao_plataformas();
521-
exibir_publisher();
524+
requisicao_publisher();
522525

523526
function limpar_pesquisa () {
524527
document.getElementById('jogos-btn-limpar-pesquisa').style.display = "none";

0 commit comments

Comments
 (0)