├── .gitattributes
├── design
    ├── active-states.jpg
    ├── mobile-design.jpg
    └── desktop-design.jpg
├── images
    ├── favicon-32x32.png
    ├── pattern-divider-desktop.svg
    ├── pattern-divider-mobile.svg
    └── icon-dice.svg
├── script.js
├── LICENSE
├── README.md
├── index.html
└── style.css


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/design/active-states.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/betoblid/gerador_de_conselhos/HEAD/design/active-states.jpg


--------------------------------------------------------------------------------
/design/mobile-design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/betoblid/gerador_de_conselhos/HEAD/design/mobile-design.jpg


--------------------------------------------------------------------------------
/images/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/betoblid/gerador_de_conselhos/HEAD/images/favicon-32x32.png


--------------------------------------------------------------------------------
/design/desktop-design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/betoblid/gerador_de_conselhos/HEAD/design/desktop-design.jpg


--------------------------------------------------------------------------------
/images/pattern-divider-desktop.svg:
--------------------------------------------------------------------------------
1 | <svg width="444" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#4F5D74" d="M0 8h196v1H0zM248 8h196v1H248z"/><g transform="translate(212)" fill="#CEE3E9"><rect width="6" height="16" rx="3"/><rect x="14" width="6" height="16" rx="3"/></g></g></svg>


--------------------------------------------------------------------------------
/images/pattern-divider-mobile.svg:
--------------------------------------------------------------------------------
1 | <svg width="295" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#4F5D74" d="M0 8h122v1H0zM173 8h122v1H173z"/><g transform="translate(138)" fill="#CEE3E9"><rect width="6" height="16" rx="3"/><rect x="14" width="6" height="16" rx="3"/></g></g></svg>


--------------------------------------------------------------------------------
/images/icon-dice.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M20 0H4a4.005 4.005 0 0 0-4 4v16a4.005 4.005 0 0 0 4 4h16a4.005 4.005 0 0 0 4-4V4a4.005 4.005 0 0 0-4-4ZM7.5 18a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0-9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm4.5 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm4.5 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0-9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z" fill="#202733"/></svg>


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | //pegando componentes do DOM
 2 | const conselho_id = document.getElementById("conselho_id")
 3 | const conselho_text = document.getElementById("conselho_text")
 4 | const btn_gerar = document.getElementById("btn_advance")
 5 | 
 6 | //pegando a API de concelhos
 7 | let url = "https://api.adviceslip.com/advice"
 8 | //usando uma async para quando for chamada usar o modelo hook conhecido no react e com delay de 2 segundos 
 9 | async function getconselho (){
10 |     //faturando a url da api
11 |     const res = await fetch(url);
12 |     //armazenando os resultados do faturamento da api como id e advice depois traduzindo com json para conversão
13 |     const {slip: { id, advice } } = await res.json();
14 |     //pegando os elementos id e advice e jogando no DOM
15 |     conselho_id.textContent = id;
16 |     conselho_text.textContent = advice;
17 | }
18 | 
19 | //chamando a function no botão do DOM ao clicar no botão chamará essa fuction
20 | btn_gerar.addEventListener("click", getconselho)


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 dev-herbert
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Gerador de Conselhos
 2 | 
 3 | 
 4 | 
 5 | <div align="justify">
 6 |   <h2>Aplicação web geradora de conselhos</h2>
 7 |   <p>os conselhos são gerados com base em uma <strong>API</strong> responsavel por gerar todos os concelhos</p>
 8 |   <h2>Visual da Apicação</h2>
 9 | </div>
10 | <div align="center">
11 |   <img src="design/mobile-design.jpg" alt="visual da aplicação mobile"/>
12 |   <p style="margin: 40px;">visual de mobile é responsivel para todos os dispositivos da nova gerção e compativel com todas as resoluções</p>
13 |   <img src="design/desktop-design.jpg" alt="visual da aplicação em desktop" />
14 |   <p style="margin: 40px;">Visual da aplicação em dispositivos desktops</p>
15 |   <img src="design/active-states.jpg" alt="botao cendo clicado" />
16 |   <p style="margin: 40px;">essa imagem e basicamente quando passamos o curso em sima do botão é ativado o pseudo elemento onde usado o shadow passando o efeito e tambem ao clicado e ativado uma cor mas clará mas dura pouco é apenas para confirma o click do usuario</p>
17 | </div>
18 | 
19 | # posso copyar o codigo
20 | 
21 | <p>Recomendo tentar primeiro antes de copiar só grecemos mentalmente quando tentamos fazer nossos proprios códigos. me segue para ver mais projetos legais</p>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta name="description" content="se você quer um conselho e não sabe onde procurar aqui temos muitos conselhos que você precisar de motivacional a emocionante">
 7 |   <meta name="robots" content="index">
 8 |   <!--projeto proposto por front end mentor para evolução-->
 9 |   <meta name="author" content="herbert">
10 |   <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
11 |   <title>Gerador de Conselhos app</title>
12 |   <link rel="stylesheet" href="style.css">
13 | </head>
14 | <body>
15 |   <main>
16 |     <div class="container_advice">
17 |       <div class="card_advice">
18 |         <!--span usado para mostrar o número de concelhos-->
19 |         <h1>advice <span id="conselho_id">#117</span></h1>
20 |         <div id="conselho" class="box_conselho">
21 |           <!--tag que será usada para mostra os concelhos-->
22 |           <h2 id="conselho_text">"Aperte o Botão para gerar um conselho. se tiver em inglês por favor traduza pelo navegador"</h2>
23 |         </div>
24 |         <!--picture é um modelo de responsivo onde pode se trocar uma imagem com um tamanho da tela pre definido ex: quando a tela chegar em 500px a imagem que está na tag souce atributo srcset será trocada com a imagem da tag img e a imagem da souce será usada agora e a da tag img será recusada-->
25 |         <picture>
26 |           <source media="(max-width: 500px)" srcset="images/pattern-divider-mobile.svg">
27 |           <img src="images/pattern-divider-desktop.svg" alt="">
28 |         </picture>
29 |         <!--botão que chamará a function de conselhos-->
30 |         <button id="btn_advance"><img src="images/icon-dice.svg" alt=""></button>
31 |       </div>
32 |       <div class="author">
33 |         <p>&copy; - Desenvolvido por <a href="https://www.linkedin.com/in/herbert-souza-220268268/" target="_blank">Herbert Souza</a></p>
34 |       </div>
35 |     </div>
36 |   </main>
37 |   <script src="script.js"></script>
38 | </body>
39 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@800&display=swap');
 2 | :root{
 3 |     /*cor do background*/
 4 |     --Grayish-Blue: hsl(217, 19%, 38%);
 5 |     --Dark-Grayish-Blue: hsl(217, 19%, 24%);
 6 |     --Dark-Blue: hsl(218, 23%, 16%);
 7 |     /*cor da color*/
 8 |     --Light-Cyan: hsl(193, 38%, 86%);
 9 |     --Neon-Green: hsl(150, 100%, 66%);
10 | }
11 | *{
12 |     padding: 0;
13 |     margin: 0;
14 |     box-sizing: border-box;
15 |     font-family: 'Manrope', sans-serif;
16 | }
17 | .card_advice, .container_advice{
18 |     display: flex;
19 |     align-items: center;
20 |     justify-content: center;
21 |     flex-direction: column;
22 | }
23 | .container_advice{
24 |     min-height: 100vh;
25 |     background: var(--Dark-Blue);
26 |     width: 100%;
27 | }
28 | .card_advice{
29 |     background: var(--Dark-Grayish-Blue);
30 |     color: var(--Light-Cyan);
31 |     padding: 0px 0 60px 0;
32 |     position: relative;
33 |     border-radius: 10px;
34 |     width: 500px;
35 | }
36 | #btn_advance{
37 |     position: absolute;
38 |     bottom: -39px;
39 |     padding: 20px;
40 |     background: var(--Neon-Green);
41 |     border-radius: 50%;
42 |     border: none;
43 | }
44 | #btn_advance:active{
45 |     background: hsl(180, 100%, 86%);
46 | }
47 | /*colocando efeitos em toda parte escrita*/
48 | #btn_advance:hover{
49 |     filter: drop-shadow(0 0 0.75rem hsl(150, 100%, 66%));
50 |     transition: all 0.2s ease-out;
51 | }
52 | .box_conselho{
53 |     padding: 20px 40px;
54 |     text-align: center;
55 | }
56 | .card_advice h1{
57 |     font-size: 14px;
58 |     color: var(--Neon-Green);
59 |     text-transform: uppercase;
60 |     letter-spacing: 5px;
61 |     padding-top: 30px;
62 | }
63 | 
64 | /*essa class é utilizada para jogar a div bottom a 10px do final*/
65 | .author{
66 |     position: absolute;
67 |     bottom: 10px;
68 |     font: 900 12px Arial;
69 | }
70 | .author a{
71 |     text-decoration: none;
72 |     color: black;
73 | }
74 | .author a:hover{
75 |     color: rebeccapurple;
76 | }
77 | @media(max-width: 500px){
78 |     .card_advice{
79 |         width: 90%;
80 |     }
81 |     /*usando o margin auto para centralizar a imagem do srcer no centro*/
82 |     .card_advice img{
83 |         width: 80%;
84 |         display: flex;
85 |         margin: auto;
86 |     }
87 | }


--------------------------------------------------------------------------------