├── README.md ├── desafios ├── desafio1 │ ├── desafio.md │ └── solucoes │ │ ├── instrucoes.md │ │ ├── javascript-lucas0019 │ │ ├── Readme.md │ │ ├── images │ │ │ ├── dracula.svg │ │ │ ├── home.png │ │ │ ├── page-pontuacoes.png │ │ │ ├── page-questions.png │ │ │ └── page-resgistro.png │ │ ├── index.html │ │ └── src │ │ │ ├── javascript │ │ │ ├── end.js │ │ │ ├── game.js │ │ │ └── highscores.js │ │ │ ├── json │ │ │ └── questions.json │ │ │ ├── pages │ │ │ ├── end.html │ │ │ ├── game.html │ │ │ └── highscores.html │ │ │ └── styles │ │ │ ├── app.css │ │ │ ├── game.css │ │ │ └── highscores.css │ │ └── react-native-filipeleonelbatista │ │ ├── .expo-shared │ │ └── assets.json │ │ ├── .expo │ │ ├── packager-info.json │ │ └── settings.json │ │ ├── App.tsx │ │ ├── app.json │ │ ├── assets │ │ ├── Questions.ts │ │ ├── Rectangle.png │ │ ├── favicon.png │ │ ├── header.png │ │ ├── header@2x.png │ │ ├── header@3x.png │ │ ├── icon - Copia.png │ │ ├── icon.png │ │ ├── logo.png │ │ ├── logo@2x.png │ │ ├── logo@3x.png │ │ ├── pageHeader.png │ │ ├── pageHeader@2x.png │ │ ├── pageHeader@3x.png │ │ └── splash.png │ │ ├── babel.config.js │ │ ├── package.json │ │ ├── src │ │ ├── @types │ │ │ └── index.d.ts │ │ ├── pages │ │ │ ├── PointsPage.tsx │ │ │ ├── QuestionPage.tsx │ │ │ └── StartPage.tsx │ │ └── routes.tsx │ │ ├── tsconfig.json │ │ └── yarn.lock ├── desafio2 │ ├── desafio.md │ └── solucoes │ │ ├── instrucoes.md │ │ ├── javascript-filipeleonelbatista │ │ └── index.html │ │ └── javascript-lucas0019 │ │ └── desafio-xadrez.js ├── desafio3 │ ├── desafio.md │ └── solucoes │ │ ├── instrucoes.md │ │ ├── javascript-lucas0019 │ │ ├── img │ │ │ ├── lobo1.jpg │ │ │ ├── lobo2.jpg │ │ │ ├── lobo3.jpg │ │ │ ├── lobo4.jpg │ │ │ ├── lobo5.jpg │ │ │ └── lobo6.jpg │ │ ├── index.html │ │ └── style.css │ │ ├── js-igorbrands │ │ ├── assets │ │ │ ├── vg1.jpg │ │ │ ├── vg2.jpg │ │ │ ├── vg3.jpg │ │ │ ├── vg4.jpg │ │ │ ├── vg5.jpg │ │ │ └── vg6.jpg │ │ ├── index.html │ │ └── style.css │ │ ├── react-js-filipeleonelbatista │ │ ├── .env │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── Unfinished_Business.mp3 │ │ │ ├── favicon.ico │ │ │ └── index.html │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.tsx │ │ │ ├── index.tsx │ │ │ ├── react-app-env.d.ts │ │ │ └── services │ │ │ │ └── api.ts │ │ ├── tsconfig.json │ │ └── yarn.lock │ │ └── react-lorenalgm │ │ └── web │ │ ├── .gitignore │ │ ├── package.json │ │ ├── public │ │ └── index.html │ │ ├── src │ │ ├── assets │ │ │ ├── horizontal1.png │ │ │ ├── horizontal2.png │ │ │ ├── horizontal3.png │ │ │ ├── horizontal4.png │ │ │ ├── logo.png │ │ │ ├── vertical1.png │ │ │ ├── vertical2.png │ │ │ ├── vertical3.png │ │ │ └── vertical4.png │ │ ├── index.css │ │ ├── index.js │ │ ├── pages │ │ │ └── Home │ │ │ │ ├── index.js │ │ │ │ └── styles.css │ │ ├── routes.js │ │ └── setupTests.js │ │ └── yarn.lock └── desafio4 │ ├── desafio.md │ ├── react-js-filipeleonelbatista │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── react-app-env.d.ts │ ├── tsconfig.json │ └── yarn.lock │ └── solucoes │ ├── instrucoes.md │ └── javascript-igorbrands │ ├── README.MD │ ├── calcprint.png │ ├── calculator.js │ ├── index.html │ └── styles.css └── dicas.md /README.md: -------------------------------------------------------------------------------- 1 |
2 |

3 | 4 | Logo 5 | 6 | 7 |

DevChallenge Hacktoberfest

8 | 9 |

10 | 4 desafios lançados para desenvolvimento durante o hacktoberfest! 11 |
12 |
13 | DevChallenge 14 |

15 | 16 | ## Índice 17 | 18 | - [Índice](#índice) 19 | - [Sobre o hacktoberfest](#sobre-o-hacktoberfest) 20 | - [Sobre os desafios](#sobre-os-desafios) 21 | - [Como participar](#como-participar) 22 | - [Dicas](#dicas) 23 | - [Comunidade](#comunidade) 24 | 25 | ## Sobre o hacktoberfest 26 | O Hacktoberfest é uma celebração do software de código aberto que dura um mês, onde desenvolvedores têm a oportunidade de retribuir os projetos que gostam e outros que acabaram de descobrir, além de praticar seus conhecimentos e fazer networking com as comunidades. 27 | 28 | Além de contribuir para o crescimento do open source e fazer contribuições positivas para a comunidade, você também pode ganhar uma camisa do hacktoberfest ou plantar uma árvore como recompensa. Para isso, você deve estar inscrito no evento do [hacktoberfest](https://hacktoberfest.digitalocean.com/) e fazer 4 pull requests válidas no mês de outubro. Os repositórios devem ser públicos e estarem com o tópico do evento. 29 | 30 | ## Sobre os desafios: 31 | Visando a atuação de mais desenvolvedores na comunidade open source e participação no evento do Hacktoberfest, o [DevChallenge](https://www.devchallenge.com.br/) lançou 4 desafios que devem ser resolvidos até sexta-feira (30/10/2020)! 32 | 33 | 34 | ### Desafio 1 35 | [Sobre o desafio](./desafios/desafio1/desafio.md)
36 | [Resoluções do desafio](./desafios/desafio1/solucoes)
37 | 38 | ### Desafio 2 39 | [Sobre o desafio](./desafios/desafio2/desafio.md)
40 | [Resoluções do desafio](./desafios/desafio2/solucoes)
41 | 42 | ### Desafio 3 43 | [Sobre o desafio](./desafios/desafio3/desafio.md)
44 | [Resoluções do desafio](./desafios/desafio3/solucoes)
45 | 46 | ### Desafio 4 47 | [Sobre o desafio](./desafios/desafio4/desafio.md)
48 | [Resoluções do desafio](./desafios/desafio4/solucoes)
49 | 50 | ## Como participar 51 | 1 - Faça um fork deste repositório
52 | 2 - Leia os requisitos do desafio e desenvolva com a tecnologia de sua preferência
53 | 3 - Tente realizar os requisitos bônus para praticar ainda mais suas habilidades :)
54 | 4 - Envie cada resolução de desafio como uma pull request neste repositório
55 | Ps: Dentro da pasta "solucoes", crie uma pasta com a tecnologia utilizada e seu user. Exemplo: "react-lorenagm"
56 | 5 - Aguarde a revisão e aprovação da sua PR! 57 |
58 |
59 | Sinta-se à vontade também para adicionar mais dicas no arquivo "dicas.md" e ajudar cada vez mais desenvolvedores o/ 60 | 61 | ## Dicas 62 | Está com alguma dúvida sobre como contribuir? Consulte nossas [dicas](./dicas.md) 63 | - [Como fazer um fork do repositório?](./dicas.md) 64 | - [Como fazer um pull request?](./dicas.md) 65 | 66 | ## Comunidade 67 | Nosso objetivo é ajudar cada vez mais na evolução de desenvolvedores! Por isso, temos uma comunidade exclusiva do DevChallenge no Discord. Caso tenha alguma dúvida sobre os desafios, fique à vontade para pedir ajuda na comunidade!
68 | Bora? https://discord.gg/yvYXhGj
69 |
70 | Site: https://www.devchallenge.com.br/
71 | 72 | 73 | 75 | 76 | 78 | 79 |
74 | Discord LinkedinTwitter 77 | Instagram
80 | 81 | -------------------------------------------------------------------------------- /desafios/desafio1/desafio.md: -------------------------------------------------------------------------------- 1 |
2 |

3 | 4 |

Desafio 1

5 | 6 |

7 | DevChallenge Hacktoberfest 8 |

9 | 10 | ## Índice 11 | 12 | - [Índice](#índice) 13 | - [Desafio](#desafio) 14 | - [Extras](#extras) 15 | - [Dicas](#dicas) 16 | - [Exemplos](#exemplos) 17 | - [Comunidade](#comunidade) 18 | 19 | ## Desafio 20 | 21 | ### Aplicação 22 | Você irá criar um QUIZ! 23 | 24 | ### Objetivo: 25 | Teste seus conhecimentos respondendo perguntas em um quiz 26 | 27 | ### Requisitos: 28 | - O usuário poderá iniciar o quiz clicando em um botão 29 | - O usuário poderá ver uma questão e até 5 possíveis respostas 30 | - Após escolher a resposta o usuário será direcionado para a próxima pergunta 31 | - Ao finalizar, o usuário poderá ver a quantidade de questões corretas e erradas 32 | 33 | ### Extras 34 | - Ao final, exiba o tempo que o usuário levou para resolver o quiz 35 | - Opção para compartilhar o resultado nas redes sociais 36 | - Mais opções de quiz com temas diferentes para os usuários escolherem qual querem fazer 37 | 38 | ## Dicas 39 | - [O que é um quiz?](https://pt.wikipedia.org/wiki/Quiz) 40 | 41 | ## Exemplos 42 | - [Quizur](https://pt.quizur.com/) 43 | - [Google forms](http://forms.google.com/) 44 | 45 | ## Comunidade 46 | Caso tenha alguma dúvida sobre os desafios, fique à vontade para pedir ajuda na comunidade! https://discord.gg/yvYXhGj
47 |
48 | Site: https://www.devchallenge.com.br/
49 | 50 | 51 | 53 | 54 | 56 | 57 |
52 | Discord LinkedinTwitter 55 | Instagram
58 | 59 | -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/instrucoes.md: -------------------------------------------------------------------------------- 1 | ## Instruções 2 | 1 - Crie uma pasta com a tecnologia utilizada e seu user.
3 | Exemplo: "react-lorenagm"
4 | 5 | 2 - Adicione sua resolução do desafio dentro da pasta -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/javascript-lucas0019/Readme.md: -------------------------------------------------------------------------------- 1 | # Quiz App with HTML/CSS/Javascript 2 | 3 | ## Atualização: 31 de outubro de 2019 - 12:09 4 | ## Criação: 25 de outubro de 2019 5 | ## Prática : @douglasabnovato 6 | 7 | ![Udemy](/images/logo-udemy.png) 8 | ![Git](/images/logo-git.png) 9 | ![GitHub](/images/logo-github.png) 10 | ![HTML/CSS/JS](/images/logo-html-css-js.jpeg) 11 | ![TRIVIA](/images/logo-trivia.jpg) 12 | ![VSCode](/images/logo-VSCode.png) 13 | 14 | ### Section 1 - Project 15 | 1. Introduction and Resources. 16 | 2. Create and Style the home page . 17 | a. Extensions: Live Server 5.6.1 : in `index.html`, click in the `Open with Live Server`, então `http://127.0.0.1:5500/index.html`.
18 | b. CSS-tricks: `rem` for global sizing and `rem` for local sizing. 19 | 3. Create and style the game page. 20 | 4. Display hard coded questions and answers. 21 | 5. Display feedback for Correct / Incorrect Answers. 22 | 6. Create Head's up display (HUD). 23 | 7. Create a progress bar. 24 | 8. Create and style The End page. 25 | 9. Save High Scores in Local Storage. 26 | 10. Load and Display High Scores from Local Storage. 27 | 11. Fetch API to Load Questions from `Local Json file`. 28 | 12. Fetch API to Load Questions from `Open Trivia DB API`:
29 | - `https://opentdb.com/` 30 | - `https://opentdb.com/api.php?amount=10&category=18&difficulty=easy&type=multiple` 31 | 13. Create a Spinning Loader. 32 | 14. Closing 33 | 34 | #### Description 35 | 36 | You're going to learn how to build a Quiz application without the assistance of libraries or frameworks. 37 | 38 | - Save high scores in Local Storage 39 | - Create a progress bar 40 | - Create a spinning loader icon 41 | - Dynamically generate HTML in JavaScript 42 | - Fetch trivia questions from Open Trivia DB API 43 | 44 | ##### What you’ll learn ? 45 | 46 | ES6 JavaScript features like arrow functions, the spread operator, const and let, and template literal string, how to use the Fetch API to load trivia questions from an API, how to store high scores in Local Storage, how to use Flexbox, Animations, and REM units in CSS, how to create a progress bar from scratch, how to create a spinning loader icon from scratch. 47 | 48 | ##### Final Result 49 | - tela 1/6 50 | ![tela-1](/images/tela-1.jpg) 51 | - tela 2/6 52 | ![tela-2](/images/tela-2.jpg) 53 | - tela 3/6 54 | ![tela-3](/images/tela-3.jpg) 55 | - tela 4/6 56 | ![tela-4](/images/tela-4.jpg) 57 | - tela 5/6 58 | ![tela-5](/images/tela-5.jpg) 59 | - tela 6/6 60 | ![tela-6](/images/tela-6.jpg) 61 | 62 | 63 | :. Do curso `Build a Quiz App with HTML CSS Javascript da Udemy`.
64 | Por James Quick - `https://www.udemy.com/course/build-a-quiz-app-with-html-css-and-javascript/learn/lecture/13703646#overview` -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/javascript-lucas0019/images/dracula.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 10 | 11 | 20 | 30 | 41 | 42 | 45 | 47 | 50 | 52 | 53 | 55 | 57 | 59 | 60 | 64 | 67 | 68 | 71 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 84 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 98 | 100 | 103 | 104 | 106 | 108 | 109 | 110 | 112 | 114 | 115 | 117 | 118 | 123 | 126 | 127 | 128 | 131 | 133 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/javascript-lucas0019/images/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio1/solucoes/javascript-lucas0019/images/home.png -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/javascript-lucas0019/images/page-pontuacoes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio1/solucoes/javascript-lucas0019/images/page-pontuacoes.png -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/javascript-lucas0019/images/page-questions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio1/solucoes/javascript-lucas0019/images/page-questions.png -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/javascript-lucas0019/images/page-resgistro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio1/solucoes/javascript-lucas0019/images/page-resgistro.png -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/javascript-lucas0019/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Quiz Script 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Quiz Script

15 | Iniciar Jogo 16 | Placares 17 |
18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/javascript-lucas0019/src/javascript/end.js: -------------------------------------------------------------------------------- 1 | 2 | const username = document.getElementById("username"); 3 | const saveScoreBtn = document.getElementById("saveScoreBtn"); 4 | const finalScore = document.getElementById("finalScore"); 5 | const mostRecentScore = localStorage.getItem("mostRecentScore"); 6 | 7 | const highScores = JSON.parse(localStorage.getItem("highScores")) || []; 8 | 9 | const MAX_HIGH_SCORES = 5; 10 | 11 | finalScore.innerText = mostRecentScore; 12 | 13 | username.addEventListener("keyup", () => { 14 | saveScoreBtn.disabled = !username.value; 15 | }); 16 | 17 | saveHighScore = e => { 18 | console.log("clicked save button !"); 19 | e.preventDefault(); 20 | 21 | const score = { 22 | score: mostRecentScore, 23 | name: username.value 24 | }; 25 | 26 | highScores.push(score); 27 | highScores.sort((a, b) => b.score - a.score); 28 | highScores.splice(8); 29 | 30 | localStorage.setItem("highScores", JSON.stringify(highScores)); 31 | window.location.assign("../../"); 32 | 33 | } -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/javascript-lucas0019/src/javascript/game.js: -------------------------------------------------------------------------------- 1 | 2 | const question = document.getElementById("question"); 3 | const choices = Array.from(document.getElementsByClassName("choice-text")); 4 | const progressText = document.getElementById('progressText'); 5 | const scoreText = document.getElementById('score'); 6 | const progressBarFull = document.getElementById("progressBarFull"); 7 | const loader = document.getElementById("loader"); 8 | const game = document.getElementById("game"); 9 | 10 | let currentQuestion = {}; 11 | let acceptingAnswers = false; 12 | let score = 0; 13 | let questionCounter = 0; 14 | let availableQuestions = []; 15 | 16 | /* Local JSON file : questions.json */ 17 | let questions = []; 18 | 19 | /* Local TRIVIA : url */ 20 | fetch( 21 | // "https://opentdb.com/api.php?amount=10&category=18&difficulty=easy&type=multiple" 22 | "https://opentdb.com/api.php?amount=20&category=18&difficulty=medium&type=multiple" 23 | ) 24 | .then(res => { 25 | return res.json(); 26 | }) 27 | .then(loadedQuestions => { 28 | console.log(loadedQuestions.results); 29 | questions = loadedQuestions.results.map(loadedQuestion => { 30 | const formattedQuestion = { 31 | question: loadedQuestion.question 32 | }; 33 | 34 | const answerChoices = [...loadedQuestion.incorrect_answers]; 35 | formattedQuestion.answer = Math.floor(Math.random() * 3) + 1; 36 | answerChoices.splice( 37 | formattedQuestion.answer - 1, 38 | 0, 39 | loadedQuestion.correct_answer 40 | ); 41 | 42 | answerChoices.forEach((choice, index) => { 43 | formattedQuestion["choice" + (index + 1)] = choice; 44 | }) 45 | 46 | return formattedQuestion; 47 | }); 48 | 49 | startGame(); 50 | }) 51 | .catch(err => { 52 | console.error(err); 53 | }); 54 | 55 | /* constants */ 56 | const CORRECT_BONUS = 10; 57 | const MAX_QUESTIONS = 3; 58 | 59 | startGame = () => { 60 | questionCounter = 0; 61 | score = 0; 62 | availableQuestions = [...questions]; 63 | getNewQuestion(); 64 | game.classList.remove("hidden"); 65 | loader.classList.add("hidden"); 66 | }; 67 | 68 | getNewQuestion = () => { 69 | 70 | if(availableQuestions.length === 0 || questionCounter >= MAX_QUESTIONS){ 71 | localStorage.setItem("mostRecentScore", score); 72 | /*go to the end page*/ 73 | return window.location.assign("../pages/end.html"); 74 | } 75 | 76 | questionCounter++; 77 | progressText.innerHTML = `Question ${questionCounter}/${MAX_QUESTIONS}`; 78 | //update the progress bar 79 | progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`; 80 | 81 | 82 | const questionIndex = Math.floor(Math.random() * availableQuestions.length); 83 | currentQuestion = availableQuestions[questionIndex]; 84 | question.innerText = currentQuestion.question; 85 | 86 | choices.forEach(choice => { 87 | const number = choice.dataset["number"]; 88 | choice.innerText = currentQuestion["choice" + number]; 89 | }); 90 | 91 | availableQuestions.splice(questionIndex, 1); 92 | 93 | acceptingAnswers = true; 94 | 95 | }; 96 | 97 | choices.forEach(choice => { 98 | choice.addEventListener("click", e =>{ 99 | if(!acceptingAnswers) return ; 100 | 101 | acceptingAnswers = false; 102 | const selectedChoice = e.target; 103 | const selectAnswer = selectedChoice.dataset["number"]; 104 | 105 | const classToApply = selectAnswer == currentQuestion.answer ? 'correct' : 'incorrect'; 106 | 107 | if(classToApply === "correct"){ 108 | incrementScore(CORRECT_BONUS); 109 | } 110 | 111 | selectedChoice.parentElement.classList.add(classToApply); 112 | 113 | setTimeout( () => { 114 | selectedChoice.parentElement.classList.remove(classToApply); 115 | getNewQuestion(); 116 | }, 1000); 117 | }); 118 | }); 119 | 120 | incrementScore = num => { 121 | score += num; 122 | scoreText.innerHTML = score; 123 | } -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/javascript-lucas0019/src/javascript/highscores.js: -------------------------------------------------------------------------------- 1 | const highScoresList = document.getElementById("highScoresList"); 2 | const highScores = JSON.parse(localStorage.getItem("highScores")) || []; 3 | 4 | highScoresList.innerHTML = highScores 5 | .map(score => { 6 | return `
  • ${score.name} - ${score.score}
    • `; 7 | }) 8 | .join(""); -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/javascript-lucas0019/src/json/questions.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "question" : "Inside which HTML element do we put the Javascript ?", 4 | "choice1" : " 36 | 37 | 38 | -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/javascript-lucas0019/src/pages/game.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Quiz Script - Iniciar 8 | 9 | 10 | 11 | 12 | 13 |
    14 |
    15 | 50 |
    51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/javascript-lucas0019/src/pages/highscores.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pontuação 8 | 9 | 10 | 11 | 12 | 13 |
    14 |
    15 |

    Pontuações

    16 | 17 | Voltar a Tela inicial 18 |
    19 |
    20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/javascript-lucas0019/src/styles/app.css: -------------------------------------------------------------------------------- 1 | :root { 2 | background-color: #282a36; 3 | font-size: 62.5%; 4 | } 5 | 6 | * { 7 | box-sizing: border-box; 8 | font-family: Arial, Helvetica, sans-serif; 9 | margin: 0; 10 | padding: 0; 11 | color: #333; 12 | } 13 | 14 | h1, 15 | h2, 16 | h3, 17 | h4 { 18 | margin-bottom: 1rem; 19 | } 20 | 21 | h1 { 22 | font-size: 5.4rem; 23 | color: #bd93f9; 24 | margin-bottom: 5rem; 25 | } 26 | 27 | h1 > span { 28 | font-size: 2.4rem; 29 | font-weight: 500; 30 | } 31 | 32 | h2 { 33 | font-size: 4.2rem; 34 | margin-bottom: 4rem; 35 | font-weight: 700; 36 | } 37 | 38 | h3 { 39 | font-size: 2.8rem; 40 | font-weight: 500; 41 | } 42 | 43 | .img-dracula { 44 | width: 30rem; 45 | margin-bottom: 1.7rem; 46 | } 47 | 48 | /* Opções */ 49 | 50 | .container { 51 | width: 100vw; 52 | height: 100vh; 53 | display: flex; 54 | justify-content: center; 55 | align-items: center; 56 | max-width: 80rem; 57 | margin: 0 auto; 58 | padding: 2rem; 59 | } 60 | 61 | .container > * { 62 | width: 100%; 63 | } 64 | 65 | .flex-column { 66 | display: flex; 67 | flex-direction: column; 68 | } 69 | 70 | .flex-center { 71 | justify-content: center; 72 | align-items: center; 73 | } 74 | 75 | .justify-center { 76 | justify-content: center; 77 | } 78 | 79 | .text-center { 80 | text-align: center; 81 | } 82 | 83 | .hidden { 84 | display: none; 85 | } 86 | 87 | /*buttons*/ 88 | 89 | .btn { 90 | font-size: 1.8rem; 91 | padding: 2rem 0; 92 | width: 20rem; 93 | text-align: center; 94 | border: 0.2rem solid #bd93f9; 95 | border-radius: 2rem; 96 | margin-bottom: 1rem; 97 | text-decoration: none; 98 | color: #44475a; 99 | background-color: white; 100 | } 101 | 102 | .btn:hover { 103 | cursor: pointer; 104 | box-shadow: 0 0.4rem 1.4rem 0 rgb(189, 147, 249, 0.5); 105 | transform: translate(-0.1rem); 106 | transition: transform 150ms; 107 | } 108 | 109 | .btn[disabled]:hover { 110 | cursor: not-allowed; 111 | box-shadow: none; 112 | transform: none; 113 | } 114 | 115 | /* Forms */ 116 | 117 | form { 118 | width: 100%; 119 | display: flex; 120 | flex-direction: column; 121 | align-items: center; 122 | } 123 | 124 | input { 125 | margin-bottom: 1rem; 126 | width: 20rem; 127 | padding: 1.5rem; 128 | font-size: 1.8rem; 129 | border: none; 130 | box-shadow: 0 0.1rem 1.4rem 0 rgb(189, 147, 249, 0.5); 131 | } 132 | 133 | input::placeholder { 134 | color: #aaa; 135 | } 136 | -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/javascript-lucas0019/src/styles/game.css: -------------------------------------------------------------------------------- 1 | h2 { 2 | color: #f8f8f2; 3 | } 4 | 5 | .choice-container { 6 | display: flex; 7 | margin-bottom: 0.5rem; 8 | width: 100%; 9 | font-size: 1.8rem; 10 | border: 0.1rem solid rgb(189, 147, 249, 0.25); 11 | background-color: white; 12 | } 13 | 14 | .choice-container:hover { 15 | cursor: pointer; 16 | box-shadow: 0 0.4rem 1.4rem rgb(189, 147, 249, 0.5); 17 | transform: translate(-0.1rem); 18 | transition: transform 150ms; 19 | } 20 | 21 | .choice-prefix { 22 | padding: 1.5rem 2.5rem; 23 | background-color: #bd93f9; 24 | color: white; 25 | } 26 | 27 | .choice-text { 28 | padding: 1.5rem; 29 | width: 100%; 30 | } 31 | 32 | .correct { 33 | background-color: #50fa7b; 34 | } 35 | 36 | .incorrect { 37 | background-color: #ff5555; 38 | } 39 | 40 | /* HUD */ 41 | #hud { 42 | display: flex; 43 | justify-content: space-around; 44 | } 45 | 46 | .hud-prefix { 47 | text-align: center; 48 | font-size: 2rem; 49 | color: #f8f8f2; 50 | } 51 | 52 | .hud-main-text { 53 | text-align: center; 54 | } 55 | 56 | #progressBar { 57 | width: 20rem; 58 | height: 4rem; 59 | border: 0.3rem solid #bd93f9; 60 | margin-top: 1.5rem; 61 | } 62 | 63 | #progressBarFull { 64 | height: 3.4rem; 65 | background-color: #bd93f9; 66 | width: 0%; 67 | } 68 | 69 | /* loader */ 70 | #loader { 71 | border: 1.6rem solid white; 72 | border-radius: 50%; 73 | border-top: 1.6rem solid #bd93f9; 74 | width: 12rem; 75 | height: 12rem; 76 | animation: spin 2s linear infinite; 77 | } 78 | 79 | @keyframes spin { 80 | 0% { 81 | transform: rotate(0deg); 82 | } 83 | 100% { 84 | transform: rotate(360deg); 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/javascript-lucas0019/src/styles/highscores.css: -------------------------------------------------------------------------------- 1 | #highScoresList { 2 | list-style: none; 3 | padding-left: 0; 4 | margin-bottom: 4rem; 5 | } 6 | 7 | .high-score { 8 | font-size: 2.8rem; 9 | margin-bottom: 0.5rem; 10 | } 11 | 12 | .high-score:hover { 13 | transform: scale(1.025); 14 | } 15 | 16 | ul, 17 | .high-score { 18 | color: white; 19 | } 20 | -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/.expo/packager-info.json: -------------------------------------------------------------------------------- 1 | { 2 | "devToolsPort": 19002, 3 | "expoServerPort": null, 4 | "packagerPort": null, 5 | "packagerPid": null, 6 | "expoServerNgrokUrl": null, 7 | "packagerNgrokUrl": null, 8 | "ngrokPid": null, 9 | "webpackServerPort": null 10 | } 11 | -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/.expo/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "hostType": "lan", 3 | "lanType": "ip", 4 | "dev": true, 5 | "minify": false, 6 | "urlRandomness": null, 7 | "https": false 8 | } 9 | -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/App.tsx: -------------------------------------------------------------------------------- 1 | import { StatusBar } from 'expo-status-bar'; 2 | import React from 'react'; 3 | 4 | import { useFonts } from 'expo-font'; 5 | 6 | import { Nunito_600SemiBold, Nunito_700Bold, Nunito_800ExtraBold } from '@expo-google-fonts/nunito'; 7 | import Routes from './src/routes'; 8 | 9 | export default function App() { 10 | const [fontsLoaded] = useFonts({ 11 | Nunito_600SemiBold, 12 | Nunito_700Bold, 13 | Nunito_800ExtraBold 14 | }); 15 | 16 | if (!fontsLoaded) { 17 | return null; 18 | } 19 | 20 | return ( 21 | <> 22 | 23 | 24 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "Quiz App - Hacktoberfest", 4 | "slug": "react-native-filipeleonelbatista", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "splash": { 9 | "image": "./assets/splash.png", 10 | "resizeMode": "cover", 11 | "backgroundColor": "#ffffff" 12 | }, 13 | "updates": { 14 | "fallbackToCacheTimeout": 0 15 | }, 16 | "assetBundlePatterns": [ 17 | "**/*" 18 | ], 19 | "ios": { 20 | "supportsTablet": true, 21 | "bundleIdentifier": "com.filipeleonelbatista.quizapp", 22 | "buildNumber": "1.0.0", 23 | "supportsTablet": true 24 | }, 25 | "web": { 26 | "favicon": "./assets/favicon.png" 27 | }, 28 | "android": { 29 | "package": "com.filipeleonelbatista.quizapp", 30 | "versionCode": 1, 31 | "useNextNotificationsApi": true 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/Questions.ts: -------------------------------------------------------------------------------- 1 | const Questions = [ 2 | { 3 | question: "De quem é a famosa frase “Penso, logo existo”?", 4 | answers: [ 5 | "Platão", 6 | "Galileu Galilei", 7 | "Descartes", 8 | "Sócrates", 9 | "Francis Bacon", 10 | ], 11 | correctAnswerIndex: 2 12 | }, 13 | { 14 | question: "De onde é a invenção do chuveiro elétrico?", 15 | answers: [ 16 | "Brasil", 17 | "França", 18 | "Inglaterra", 19 | "Austrália", 20 | "Itália", 21 | ], 22 | correctAnswerIndex: 0 23 | }, 24 | { 25 | question: "Quais o menor e o maior país do mundo?", 26 | answers: [ 27 | "Nauru e China", 28 | "Mônaco e Canadá", 29 | "Malta e Estados Unidos", 30 | "São Marino e Índia", 31 | "Vaticano e Rússia", 32 | ], 33 | correctAnswerIndex: 4 34 | }, 35 | { 36 | question: "Qual o nome do presidente do Brasil que ficou conhecido como Jango?", 37 | answers: [ 38 | "Jânio Quadros", 39 | "Jacinto Anjos", 40 | "Getúlio Vargas", 41 | "João Goulart", 42 | "João Figueiredo", 43 | ], 44 | correctAnswerIndex: 3 45 | }, 46 | { 47 | question: "Qual o grupo em que todas as palavras foram escritas corretamente?", 48 | answers: [ 49 | "Asterístico, beneficiente, meteorologia, entertido", 50 | "Asterisco, beneficente, meteorologia, entretido", 51 | "Asterisco, beneficente, metereologia, entretido", 52 | "Asterístico, beneficiente, metereologia, entretido", 53 | "Asterisco, beneficiente, metereologia, entretido", 54 | ], 55 | correctAnswerIndex: 1 56 | }, 57 | { 58 | question: "Qual o livro mais vendido no mundo depois da Bíblia?", 59 | answers: [ 60 | "O Senhor dos Anéis", 61 | "Dom Quixote", 62 | "O Pequeno Príncipe", 63 | "Ela, a Feiticeira", 64 | "Um Conto de Duas Cidades", 65 | ], 66 | correctAnswerIndex: 0 67 | }, 68 | { 69 | question: "Quantas casas decimais tem o número pi?", 70 | answers: [ 71 | "Duas", 72 | "Centenas", 73 | "Infinitas", 74 | "Vinte", 75 | "Milhares", 76 | ], 77 | correctAnswerIndex: 2 78 | }, 79 | { 80 | question: "Até 2016, quantos elementos químicos a tabela periódica possui?", 81 | answers: [ 82 | "113", 83 | "109", 84 | "108", 85 | "118", 86 | "92", 87 | ], 88 | correctAnswerIndex: 3 89 | }, 90 | { 91 | question: "O que a palavra legend significa em português?", 92 | answers: [ 93 | "Legenda", 94 | "Conto", 95 | "História", 96 | "Lenda", 97 | "Legendário", 98 | ], 99 | correctAnswerIndex: 3 100 | }, 101 | { 102 | question: "Qual o número mínimo de jogadores numa partida de futebol?", 103 | answers: [ 104 | "8", 105 | "10", 106 | "9", 107 | "5", 108 | "7", 109 | ], 110 | correctAnswerIndex: 4 111 | }, 112 | ]; 113 | 114 | // Perguntas para a igreja 115 | 116 | const QuestionsBOM = [ 117 | { 118 | question: "Quem foi o companheiro missionário de Alma, o filho?", 119 | answers: [ 120 | "Amuleque", 121 | "Meleque", 122 | "Ananias", 123 | "Amós", 124 | "Pedro", 125 | ], 126 | correctAnswerIndex: 0 127 | }, 128 | { 129 | question: "Quem era o Pai de Mosias?", 130 | answers: [ 131 | "Néfi", 132 | "Alma", 133 | "Benjamin", 134 | "Obadias", 135 | "Mórmon", 136 | ], 137 | correctAnswerIndex: 2 138 | }, 139 | { 140 | question: "Que Livro vem logo após As Palavras de Mórmon?", 141 | answers: [ 142 | "Livro de Ômni", 143 | "Livro de Alma", 144 | "Livro de Jarom", 145 | "Livro de Mosias", 146 | "Livro de Isaías", 147 | ], 148 | correctAnswerIndex: 3 149 | }, 150 | { 151 | question: "Quem é o filho mais velho de Leí e Saria?", 152 | answers: [ 153 | "Néfi", 154 | "Jacó", 155 | "Lamã", 156 | "Sam", 157 | "Lemuel", 158 | ], 159 | correctAnswerIndex: 2 160 | }, 161 | { 162 | question: "Quem procurou roubar e matar Néfi e seus irmãos?", 163 | answers: [ 164 | "Zeezrom", 165 | "Lamôni", 166 | "Gade", 167 | "Enoque", 168 | "Labão", 169 | ], 170 | correctAnswerIndex: 4 171 | }, 172 | { 173 | question: "Onde está escrito: Aconselha-te com o Senhor em tudo que fizeres (...)?", 174 | answers: [ 175 | "Alma 37:37", 176 | "1 Néfi 37:37", 177 | "4 Néfi 37:37", 178 | "Mosias 37:38", 179 | "Mormon 3:4", 180 | ], 181 | correctAnswerIndex: 0 182 | }, 183 | { 184 | question: "Qual o foi o primeiro homem a introduzir artimanhas sacerdotais entre os nefitas?", 185 | answers: [ 186 | "Noé", 187 | "Noemí", 188 | "Neor", 189 | "Zeezrom", 190 | "Nabor", 191 | ], 192 | correctAnswerIndex: 2 193 | }, 194 | { 195 | question: "Qual o último Profeta escritor no Livro de Mórmon?", 196 | answers: [ 197 | "Mórmon", 198 | "Ômni", 199 | "Morôni", 200 | "Éter", 201 | "Alma", 202 | ], 203 | correctAnswerIndex: 2 204 | }, 205 | { 206 | question: "Onde está escrito: Eu irei e cumprirei as ordens do senhor", 207 | answers: [ 208 | "Alma 17:15", 209 | "2 Néfi 3:7", 210 | "4 Néfi 3:7", 211 | "1 Néfi 7:3", 212 | "1 Néfi 3:7", 213 | ], 214 | correctAnswerIndex: 4 215 | }, 216 | { 217 | question: "Quem foi o terceiro Juiz Supremo Nefita?", 218 | answers: [ 219 | "Mosias", 220 | "Paorã", 221 | "Belsazar", 222 | "Néfi", 223 | "Zedequias", 224 | ], 225 | correctAnswerIndex: 1 226 | } 227 | ] 228 | 229 | export default Questions; -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/Rectangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/Rectangle.png -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/favicon.png -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/header.png -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/header@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/header@2x.png -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/header@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/header@3x.png -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/icon - Copia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/icon - Copia.png -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/icon.png -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/logo.png -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/logo@2x.png -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/logo@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/logo@3x.png -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/pageHeader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/pageHeader.png -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/pageHeader@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/pageHeader@2x.png -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/pageHeader@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/pageHeader@3x.png -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio1/solucoes/react-native-filipeleonelbatista/assets/splash.png -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "web": "expo start --web", 8 | "eject": "expo eject" 9 | }, 10 | "dependencies": { 11 | "@expo-google-fonts/nunito": "^0.1.0", 12 | "@expo/vector-icons": "^10.0.0", 13 | "@react-native-community/masked-view": "0.1.10", 14 | "@react-navigation/native": "^5.8.0", 15 | "@react-navigation/stack": "^5.10.0", 16 | "expo": "~39.0.2", 17 | "expo-font": "~8.3.0", 18 | "expo-status-bar": "~1.0.2", 19 | "react": "16.13.1", 20 | "react-dom": "16.13.1", 21 | "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz", 22 | "react-native-gesture-handler": "~1.7.0", 23 | "react-native-reanimated": "~1.13.0", 24 | "react-native-safe-area-context": "3.1.4", 25 | "react-native-screens": "~2.10.1", 26 | "react-native-web": "~0.13.12" 27 | }, 28 | "devDependencies": { 29 | "@babel/core": "~7.9.0", 30 | "@types/react": "~16.9.35", 31 | "@types/react-dom": "~16.9.8", 32 | "@types/react-native": "~0.63.2", 33 | "typescript": "~3.9.5" 34 | }, 35 | "private": true 36 | } 37 | -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/src/@types/index.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.png'; -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/src/pages/PointsPage.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import { View, Text, StyleSheet, ImageBackground, Dimensions, Share } from 'react-native'; 3 | import { RectButton } from 'react-native-gesture-handler'; 4 | import { Feather } from '@expo/vector-icons'; 5 | import headerBackground from '../../assets/header.png' 6 | import { useNavigation, useRoute } from '@react-navigation/native'; 7 | 8 | interface PointsPageRouteParams { 9 | name: string; 10 | points: number; 11 | totalQuestions: number; 12 | } 13 | 14 | export default function PointsPage() { 15 | const route = useRoute(); 16 | const navigation = useNavigation(); 17 | 18 | const [status, setStatus] = useState(""); 19 | const [cor, setCor] = useState("#000"); 20 | 21 | const params = route.params as PointsPageRouteParams; 22 | 23 | useEffect(() => { 24 | if (params.points === 0) { 25 | setStatus("Ruim"); 26 | } else { 27 | 28 | const res = ((params.points * 100) / params.totalQuestions) 29 | 30 | if ((res > 0) && (res <= 30)) { 31 | setStatus("Ruim"); 32 | setCor("#F00"); 33 | } 34 | if ((res > 30) && (res <= 60)) { 35 | setStatus("Bom"); 36 | setCor("#5AB5F5"); 37 | } 38 | if (res > 60) { 39 | setStatus("Excelente"); 40 | setCor("#6FCF97"); 41 | } 42 | } 43 | 44 | }, []) 45 | 46 | 47 | const onShare = async () => { 48 | try { 49 | await Share.share({ 50 | message: `Minha pontuação foi de ${params.points}/${params.totalQuestions}\nno App Quiz - Hacktoberfest. \nSaiba mais em: https://github.com/filipeleonelbatista`, 51 | }); 52 | } catch (error) { 53 | alert(error.message); 54 | } 55 | }; 56 | 57 | return ( 58 | 59 | 63 | 64 | 65 | {params.name} 66 | 67 | 68 | Sua pontuação neste quiz é de 69 | 70 | 71 | 72 | 73 | 74 | {params.points}/{params.totalQuestions} 75 | {status} 76 | 77 | { 79 | navigation.navigate('StartPage'); 80 | }} style={[styles.button, {marginTop:16}]} 81 | > 82 | Jogar Novamente 83 | 84 | 85 | 86 | {"Não esqueça de compartilhar\ncom seus amigos\npara ver quem acerta mais!"} 87 | 88 | 89 | 90 | 91 | 92 | Compartilhar 93 | 94 | 95 | 96 | 97 | 98 | ) 99 | } 100 | 101 | const styles = StyleSheet.create({ 102 | container: { 103 | flex: 1, 104 | backgroundColor: '#FFF', 105 | }, 106 | headerImage: { 107 | width: Dimensions.get('window').width, 108 | height: Dimensions.get('window').height, 109 | flex: 1, 110 | paddingTop: 24, 111 | }, 112 | containerLogo: { 113 | alignItems: 'center', 114 | marginVertical: 48, 115 | }, 116 | logo: { 117 | width: 50, 118 | height: 65, 119 | }, 120 | title: { 121 | fontFamily: 'Nunito_800ExtraBold', 122 | fontSize: 32, 123 | color: '#fff', 124 | }, 125 | description: { 126 | fontFamily: 'Nunito_700Bold', 127 | fontSize: 18, 128 | color: '#fff', 129 | }, 130 | containerName: { 131 | alignItems: 'center', 132 | }, 133 | containerNameDescription: { 134 | fontFamily: 'Nunito_700Bold', 135 | fontSize: 18, 136 | color: '#fff', 137 | }, 138 | inputGroup: { 139 | marginTop: 16, 140 | width: '90%', 141 | padding: 16, 142 | backgroundColor: '#FFF', 143 | borderRadius: 8, 144 | elevation: 6, 145 | alignItems: 'center', 146 | }, 147 | points: { 148 | fontFamily: 'Nunito_700Bold', 149 | fontSize: 72, 150 | color: '#121214', 151 | marginLeft: 8, 152 | }, 153 | pointsText: { 154 | fontFamily: 'Nunito_700Bold', 155 | fontSize: 50, 156 | color: '#121214', 157 | marginLeft: 8, 158 | }, 159 | label: { 160 | fontFamily: 'Nunito_700Bold', 161 | fontSize: 18, 162 | color: '#121214', 163 | marginLeft: 8, 164 | }, 165 | input: { 166 | marginVertical: 12, 167 | padding: 12, 168 | borderWidth: 1, 169 | borderColor: '#CCC', 170 | borderRadius: 8, 171 | }, 172 | button: { 173 | marginVertical: 8, 174 | width: '90%', 175 | padding: 16, 176 | backgroundColor: '#5AB5F5', 177 | borderRadius: 8, 178 | elevation: 6, 179 | alignItems: 'center', 180 | }, 181 | buttonLabel: { 182 | fontFamily: 'Nunito_700Bold', 183 | fontSize: 18, 184 | color: '#fff', 185 | }, 186 | footer: { 187 | width: '100%', 188 | height: 30, 189 | marginTop: 32, 190 | justifyContent: 'center', 191 | alignItems: 'center', 192 | }, 193 | footerText: { 194 | fontFamily: 'Nunito_700Bold', 195 | fontSize: 18, 196 | color: '#5AB5F5', 197 | marginLeft: 8, 198 | }, 199 | 200 | }) -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/src/pages/QuestionPage.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import { View, Text, StyleSheet, Dimensions, ImageBackground } from 'react-native'; 3 | 4 | import headerBackground from '../../assets/pageHeader.png' 5 | import { useNavigation, useRoute } from '@react-navigation/native'; 6 | 7 | import questions from '../../assets/Questions' 8 | import { TouchableOpacity } from 'react-native-gesture-handler'; 9 | 10 | interface QuestionPageRouteParams { 11 | name: string; 12 | } 13 | 14 | export default function QuestionPage() { 15 | const route = useRoute(); 16 | const navigation = useNavigation(); 17 | 18 | const [index, setIndex] = useState(0); 19 | const [points, setPoints] = useState(0); 20 | const [sendResults, setSendResults] = useState(false); 21 | 22 | const params = route.params as QuestionPageRouteParams; 23 | 24 | useEffect(()=>{ 25 | if(sendResults){ 26 | const result = { 27 | name: params.name, 28 | points, 29 | totalQuestions: questions.length, 30 | }; 31 | navigation.navigate("PointsPage", result); 32 | } 33 | }, [sendResults]) 34 | 35 | function showResult() { 36 | setSendResults(true); 37 | } 38 | 39 | function loadNextQuestion() { 40 | if (index < (questions.length - 1)) { 41 | setIndex(index + 1); 42 | } 43 | if (index === (questions.length - 1)) { 44 | showResult(); 45 | } 46 | } 47 | 48 | function handleSaveResult(i: number) { 49 | if (questions[index].correctAnswerIndex == i) { 50 | setPoints(points + 1); 51 | } 52 | loadNextQuestion(); 53 | } 54 | 55 | return ( 56 | 57 | 61 | 62 | 63 | 64 | Pergunta {index + 1} de {questions.length} 65 | 66 | 67 | 68 | {questions[index].question} 69 | 70 | 71 | 72 | 73 | 74 | {questions[index].answers.map((answer, index) => { 75 | return ( 76 | { handleSaveResult(index) }} key={index} style={styles.button}> 77 | {answer} 78 | 79 | ); 80 | })} 81 | 82 | 83 | 84 | 85 | {points}/{questions.length} 86 | 87 | 88 | 89 | 90 | 91 | ) 92 | 93 | } 94 | 95 | const styles = StyleSheet.create({ 96 | container: { 97 | flex: 1, 98 | backgroundColor: '#FFF', 99 | }, 100 | headerImage: { 101 | width: Dimensions.get('window').width, 102 | height: Dimensions.get('window').height, 103 | flex: 1, 104 | paddingTop: 24, 105 | }, 106 | content: { 107 | flex: 1, 108 | paddingHorizontal: 16, 109 | }, 110 | header: { 111 | marginVertical: 16, 112 | }, 113 | headerTitle: { 114 | marginBottom: 16, 115 | }, 116 | headerTitleText: { 117 | fontFamily: 'Nunito_800ExtraBold', 118 | fontSize: 18, 119 | color: '#fff', 120 | }, 121 | headerQuestionContainer: { 122 | marginBottom: 24, 123 | }, 124 | headerQuestionText: { 125 | fontFamily: 'Nunito_800ExtraBold', 126 | fontSize: 24, 127 | color: '#fff', 128 | }, 129 | button: { 130 | margin: 8, 131 | padding: 16, 132 | backgroundColor: '#5AB5F5', 133 | borderRadius: 8, 134 | elevation: 6, 135 | alignItems: 'center', 136 | }, 137 | buttonLabel: { 138 | fontFamily: 'Nunito_700Bold', 139 | fontSize: 18, 140 | color: '#fff', 141 | }, 142 | footer: { 143 | width: '100%', 144 | height: 30, 145 | marginTop: 32, 146 | justifyContent: 'center', 147 | alignItems: 'center', 148 | }, 149 | footerText: { 150 | fontFamily: 'Nunito_700Bold', 151 | fontSize: 18, 152 | color: '#5AB5F5', 153 | marginLeft: 8, 154 | }, 155 | 156 | }) -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/src/pages/StartPage.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { View, Text, StyleSheet, ImageBackground, Linking, Dimensions } from 'react-native'; 3 | 4 | import { RectButton, TextInput, TouchableOpacity } from 'react-native-gesture-handler'; 5 | 6 | import headerBackground from '../../assets/header.png' 7 | import logo from '../../assets/logo.png' 8 | import { useNavigation } from '@react-navigation/native'; 9 | 10 | export default function StartPage() { 11 | const [name, setName] = useState(""); 12 | const navigation = useNavigation(); 13 | function handleValidationName(){ 14 | if(name != ""){ 15 | navigation.navigate("QuestionPage", {name}); 16 | }else{ 17 | alert("Por favor, preencha o nome!") 18 | } 19 | } 20 | return ( 21 | 22 | 26 | 27 | 31 | Quiz App 32 | 33 | Um app para o Hacktobberfest 34 | 35 | 36 | 37 | 38 | 39 | Digite seu nome para iniciarmos 40 | 41 | 42 | Seu Nome 43 | setName(text)} 47 | /> 48 | 51 | 52 | Iniciar 53 | 54 | 55 | 56 | 57 | 58 | { Linking.openURL("https://github.com/filipeleonelbatista") }} 60 | > 61 | Veja mais no repositório da aplicação 62 | 63 | 64 | 65 | 66 | ) 67 | } 68 | 69 | const styles = StyleSheet.create({ 70 | container: { 71 | flex: 1, 72 | backgroundColor: '#FFF', 73 | }, 74 | headerImage: { 75 | // width: '100%', 76 | // height: '100%', 77 | width: Dimensions.get('window').width, 78 | height: Dimensions.get('window').height, 79 | flex: 1, 80 | paddingTop: 24, 81 | }, 82 | containerLogo: { 83 | alignItems: 'center', 84 | marginVertical: 48, 85 | }, 86 | logo: { 87 | width: 50, 88 | height: 65, 89 | }, 90 | title: { 91 | fontFamily: 'Nunito_800ExtraBold', 92 | fontSize: 32, 93 | color: '#fff', 94 | }, 95 | description: { 96 | fontFamily: 'Nunito_700Bold', 97 | fontSize: 18, 98 | color: '#fff', 99 | }, 100 | containerName: { 101 | alignItems: 'center', 102 | }, 103 | containerNameDescription: { 104 | fontFamily: 'Nunito_700Bold', 105 | fontSize: 18, 106 | color: '#fff', 107 | }, 108 | inputGroup: { 109 | marginTop: 16, 110 | width: '90%', 111 | padding: 16, 112 | backgroundColor: '#FFF', 113 | borderRadius: 8, 114 | elevation: 6, 115 | }, 116 | label: { 117 | fontFamily: 'Nunito_700Bold', 118 | fontSize: 18, 119 | color: '#121214', 120 | marginLeft: 8, 121 | }, 122 | input: { 123 | marginVertical: 12, 124 | padding: 12, 125 | borderWidth: 1, 126 | borderColor: '#CCC', 127 | borderRadius: 8, 128 | }, 129 | startButton: { 130 | padding: 16, 131 | backgroundColor: '#5AB5F5', 132 | borderRadius: 8, 133 | elevation: 6, 134 | alignItems: 'center', 135 | }, 136 | startButtonLabel: { 137 | fontFamily: 'Nunito_700Bold', 138 | fontSize: 18, 139 | color: '#fff', 140 | }, 141 | footer: { 142 | width: '100%', 143 | height: 30, 144 | marginTop: 32, 145 | justifyContent: 'center', 146 | alignItems: 'center', 147 | }, 148 | footerText: { 149 | fontFamily: 'Nunito_700Bold', 150 | fontSize: 18, 151 | color: '#5AB5F5', 152 | marginLeft: 8, 153 | }, 154 | 155 | }) -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/src/routes.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { NavigationContainer } from '@react-navigation/native'; 4 | 5 | import { createStackNavigator } from '@react-navigation/stack'; 6 | import StartPage from './pages/StartPage'; 7 | import QuestionPage from './pages/QuestionPage'; 8 | import PointsPage from './pages/PointsPage'; 9 | 10 | const { Navigator, Screen } = createStackNavigator(); 11 | 12 | export default function Routes(){ 13 | return( 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ); 22 | } -------------------------------------------------------------------------------- /desafios/desafio1/solucoes/react-native-filipeleonelbatista/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "jsx": "react-native", 5 | "lib": ["dom", "esnext"], 6 | "moduleResolution": "node", 7 | "noEmit": true, 8 | "skipLibCheck": true, 9 | "resolveJsonModule": true, 10 | "strict": true 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /desafios/desafio2/desafio.md: -------------------------------------------------------------------------------- 1 |
    2 |

    3 | 4 |

    Desafio 2

    5 | 6 |

    7 | DevChallenge Hacktoberfest 8 |

    9 | 10 | ## Índice 11 | 12 | - [Índice](#índice) 13 | - [Desafio](#desafio) 14 | - [Extras](#extras) 15 | - [Dicas](#dicas) 16 | - [Exemplos](#exemplos) 17 | - [Comunidade](#comunidade) 18 | 19 | ## Desafio 20 | 21 | ### Aplicação 22 | Contando peças de xadrez 23 | 24 | ### Objetivo: 25 | - Teste sua logica de programação contabilizando as peças de um tabuleiro de xadrez 26 | 27 | ### Requisitos: 28 | - Para cada posição do tabuleiro, deve ser informado o código da peça que se encontra nessa posição. 29 | - O intervalo compreende -1 < x < 7, onde x representa o número da peça (ou ausência dela, no caso de 0) 30 | - Apenas inteiros positivos ou nulo podem ser usados como limites 31 | - O preenchimento do tabuleiro pode envolver uma leitura parcial dos valores (número por número), total (uma linha completa) ou definido no próprio código. 32 | - Contabilize a quantidade de cada tipo de peça existente 33 | - Retorne a quantidade de cada peças do tabuleiro de xadrez: 34 | 35 | - Peão: 4 peça(s) 36 | - Bispo: 0 peça(s) 37 | - Cavalo: 0 peça(s) 38 | - Torre: 2 peça(s) 39 | - Rainha: 0 peça(s) 40 | - Rei: 1 peça 41 | 42 | ### Extras 43 | - Para ser mais desafiador, desenvolva a solução acima sem usar estruturas condicionais ou de múltipla escolha (sem ifs, else e switch case). 44 | - Caso prefira, você também pode adicionar uma validação para que a quantidade de peças informadas não ultrapasse os limites máximos de cada peça definidos nas regras do xadrez. (Ex: Só pode ter 1 rei para cada participante do jogo) 45 | 46 | ## Dicas 47 | 48 | - O xadrez é um jogo de tabuleiro estratégico, disputado por dois jogadores e que consiste em um tabuleiro com um arranjo de 8 linhas e colunas, formando 64 posições diferentes como uma matriz [8 x 8]. 49 | 50 | - Existem 6 diferentes tipos de peças no xadrez e cada tipo possui uma quantidade (destacada por parênteses): 51 | 52 | - Peão (8 peças) 53 | - Bispo (2 peças) 54 | - Cavalo (2 peças) 55 | - Torre (2 peças) 56 | - Rainha (1 peça) 57 | - Rei (1 peça) 58 | 59 | - Um tabuleiro completo possui 32 peças. Cada tipo de peça receberá um código: 60 | - Vazio = 0 61 | - Peão = 1 62 | - Bispo = 2 63 | - Cavalo = 3 64 | - Torre = 4 65 | - Rainha = 5 66 | - Rei = 6 67 | 68 | - Poderá fazer uso do For Loop para resolução do problema 69 | 70 | 71 | - [Regras do xadrez](https://www.megajogos.com.br/xadrez-online/regras) 72 | - [Sobre o Xadrez](https://pt.wikipedia.org/wiki/Xadrez) 73 | 74 | ## Exemplos 75 | 76 | #### Entrada 77 | 78 | 0 0 0 0 0 0 0 0 79 | 0 0 0 0 0 0 0 0 80 | 0 0 0 0 0 0 0 0 81 | 0 0 0 1 1 0 0 0 82 | 0 0 0 1 1 0 0 0 83 | 0 0 0 0 0 0 0 0 84 | 4 0 0 0 0 0 0 4 85 | 0 0 0 0 0 6 0 0 86 | 87 | #### Saida 88 | 89 | - Peão: 4 peça(s) 90 | - Bispo: 0 peça(s) 91 | - Cavalo: 0 peça(s) 92 | - Torre: 2 peça(s) 93 | - Rainha: 0 peça(s) 94 | - Rei: 1 peça 95 | 96 | - A ideia é o usuario informar ou gerar randomicamente os numeros de entrada, para serem proccessados no código. 97 | - Sendo assim, se na sequência informada possuir um numero que representa a peça, deverá retornar sua quantidade no resultado de saída. 98 | 99 | ## Comunidade 100 | Caso tenha alguma dúvida sobre os desafios, fique à vontade para pedir ajuda na comunidade! https://discord.gg/yvYXhGj
    101 |
    102 | Site: https://www.devchallenge.com.br/
    103 | 104 | 105 | 107 | 108 | 110 | 111 |
    106 | Discord LinkedinTwitter 109 | Instagram
    112 | 113 | 114 | -------------------------------------------------------------------------------- /desafios/desafio2/solucoes/instrucoes.md: -------------------------------------------------------------------------------- 1 | ## Instruções 2 | 1 - Crie uma pasta com a tecnologia utilizada e seu user.
    3 | Exemplo: "react-lorenagm"
    4 | 5 | 2 - Adicione sua resolução do desafio dentro da pasta -------------------------------------------------------------------------------- /desafios/desafio2/solucoes/javascript-filipeleonelbatista/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Desafio 2 8 | 61 | 62 | 63 | 64 | 65 |
    66 |

    Entrada

    67 |

    68 | 0 0 0 0 0 0 0 0
    69 | 0 0 0 0 0 0 0 0
    70 | 0 0 0 0 0 0 0 0
    71 | 0 0 0 1 1 0 0 0
    72 | 0 0 0 1 1 0 0 0
    73 | 0 0 0 0 0 0 0 0
    74 | 4 0 0 0 0 0 0 4
    75 | 0 0 0 0 0 6 0 0
    76 |

    77 |
    78 |
    79 | 80 |
    81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /desafios/desafio2/solucoes/javascript-lucas0019/desafio-xadrez.js: -------------------------------------------------------------------------------- 1 | //A função abaixo irá receber um tabuleiro de Xadrez cujo números de casas é determinado pelo usuário, 2 | //onde, normalmente, conta com 64 casas (8 x 8). 3 | 4 | function matrizTabuleiro(col, lin) { 5 | // Variavel Matrix - Recebe os dados das Colunas e linhas 6 | let matriz = []; 7 | let i = 0; 8 | let j = 0; 9 | 10 | //Usando o For loops para enviar os numeros a matriz 11 | for (i = 0; i < lin; i++) { 12 | let linha = []; 13 | matriz.push(linha); 14 | 15 | //Aqui, a variável coluna irá gerar aleatoriamente números entre 0 e 6 16 | //Multiplicamos por 7 para que os resultados sejam arredondados para 0 - o menor 17 | //E 6 - o maior 18 | for (j = 0; j < col; j++) { 19 | let coluna = Math.floor(Math.random() * 7); 20 | matriz[i].push(coluna); 21 | } 22 | } 23 | 24 | console.log(matriz); 25 | 26 | let pecas = []; 27 | for (i = 0; i < 8; i++) { 28 | pecas.push(0); 29 | } 30 | 31 | for (i = 0; i < matriz.length; i++) { 32 | for (j = 0; j < matriz[i].length; j++) { 33 | pecas[matriz[i][j]]++; 34 | } 35 | } 36 | 37 | //com isso, criamos variaveis representando as possibilidades de pecas 38 | //Associadas a um determinado indice no array. Por conta do For Loop acima 39 | //cada variável já tem um valor armazenado, será utilizado abaixo 40 | vazio = pecas[0]; 41 | peao = pecas[1]; 42 | bispo = pecas[2]; 43 | cavalo = pecas[3]; 44 | torre = pecas[4]; 45 | rainha = pecas[5]; 46 | rei = pecas[6]; 47 | 48 | //Por fim, iremos retornar os valores das peças abaixo. 49 | 50 | console.log("Casas vazias: " + vazio); 51 | console.log("Peões: " + peao); 52 | console.log("Bispos: " + bispo); 53 | console.log("Cavalos: " + cavalo); 54 | console.log("Torres: " + torre); 55 | console.log("Rainhas: " + rainha); 56 | console.log("Reis: " + rei); 57 | } 58 | 59 | matrizTabuleiro(8, 8); 60 | -------------------------------------------------------------------------------- /desafios/desafio3/desafio.md: -------------------------------------------------------------------------------- 1 |
    2 |

    3 | 4 |

    Desafio 3

    5 | 6 |

    7 | DevChallenge Hacktoberfest 8 |

    9 | 10 | ## Índice 11 | 12 | - [Índice](#índice) 13 | - [Desafio](#desafio) 14 | - [Extras](#extras) 15 | - [Dicas](#dicas) 16 | - [Exemplos](#exemplos) 17 | - [Comunidade](#comunidade) 18 | 19 | ## Desafio 20 | 21 | ### Aplicação 22 | Galeria de artes 23 | 24 | ### Objetivo: 25 | Você praticará a utilização de grid/flexbox para construção de uma galeria de artes 26 | 27 | ### Requisitos: 28 | - O usuário poderá visualizar várias imagens de obras de artes 29 | - Sua página deverá ser responsiva 30 | 31 | ### Extras 32 | - Adicione um filtro ou busca por assuntos 33 | 34 | ## Dicas 35 | - Você pode utilizar alguma api para exibição das obras: 36 | - [Unsplash](https://unsplash.com/developers) 37 | - [Behance](https://www.behance.net/dev) 38 | - [Harvard Art Museums](https://github.com/harvardartmuseums/api-docs) 39 | - [Icons8](https://icons8.docs.apiary.io/#reference/0/meta) 40 | 41 | ## Exemplos 42 | - [Unsplash](https://unsplash.com/s/photos/art) 43 | - [Pexels](https://www.pexels.com/pt-br/procurar/art/) 44 | 45 | ## Comunidade 46 | Caso tenha alguma dúvida sobre os desafios, fique à vontade para pedir ajuda na comunidade! https://discord.gg/yvYXhGj
    47 |
    48 | Site: https://www.devchallenge.com.br/
    49 | 50 | 51 | 53 | 54 | 56 | 57 |
    52 | Discord LinkedinTwitter 55 | Instagram
    58 | 59 | -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/instrucoes.md: -------------------------------------------------------------------------------- 1 | ## Instruções 2 | 1 - Crie uma pasta com a tecnologia utilizada e seu user.
    3 | Exemplo: "react-lorenagm"
    4 | 5 | 2 - Adicione sua resolução do desafio dentro da pasta -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/javascript-lucas0019/img/lobo1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/javascript-lucas0019/img/lobo1.jpg -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/javascript-lucas0019/img/lobo2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/javascript-lucas0019/img/lobo2.jpg -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/javascript-lucas0019/img/lobo3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/javascript-lucas0019/img/lobo3.jpg -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/javascript-lucas0019/img/lobo4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/javascript-lucas0019/img/lobo4.jpg -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/javascript-lucas0019/img/lobo5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/javascript-lucas0019/img/lobo5.jpg -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/javascript-lucas0019/img/lobo6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/javascript-lucas0019/img/lobo6.jpg -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/javascript-lucas0019/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Galeria 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 | 25 |
    26 | 27 |
    28 |
    29 | 30 | 31 |
    32 | 33 |

    Lobo gris (Canis lupus)

    34 |
    35 |
    36 | 37 |

    Lobo-árabe (Canis lupus arabs)

    38 |
    39 |
    40 | 41 |

    Lobo-europeu (Canis lupus lupus)

    42 |
    43 | 44 | 45 |
    46 | 47 |

    Lobo-europeu (Canis lupus lupus)

    48 |
    49 |
    50 | 51 |

    Lobo-de-Baffin (Canis lupus manningi)

    52 |
    53 |
    54 | 55 | 56 |
    57 |
    58 | 59 |

    Lobo-árabe (Canis lupus arabs)

    60 |
    61 |
    62 |
    63 | 64 |
    65 |

    Não temos mais imagens para carregar :)

    66 |
    67 | 68 | 69 | -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/javascript-lucas0019/style.css: -------------------------------------------------------------------------------- 1 | body, 2 | ul, 3 | li, 4 | p { 5 | margin: 0px; 6 | padding: 0px; 7 | list-style: none; 8 | font-size: 1.2rem; 9 | font-family: Arial; 10 | font-style: bold; 11 | color: #faf6ed; 12 | } 13 | 14 | body { 15 | background: #faf6ed; 16 | color: #222; 17 | /* Suavizar a font */ 18 | -webkit-font-smoothing: antialiased; 19 | display: inline; 20 | } 21 | 22 | img { 23 | max-width: 100%; 24 | } 25 | 26 | nav { 27 | margin: 0 auto; 28 | align-items: center; 29 | justify-content: center; 30 | } 31 | 32 | ul.menu a { 33 | background: tomato; 34 | justify-content: center; 35 | align-items: center; 36 | } 37 | 38 | p.ajuste { 39 | text-decoration: none; 40 | color: #faf6ed; 41 | font-size: 40px; 42 | } 43 | 44 | .header { 45 | background: #1d1e20; 46 | display: flex; 47 | flex-wrap: wrap; 48 | justify-content: space-between; 49 | align-items: center; 50 | border-radius: 0 0 20px 20px; 51 | height: 200px; 52 | } 53 | 54 | .container { 55 | padding-top: 20px; 56 | padding-bottom: 40px; 57 | } 58 | 59 | .center-items { 60 | text-align: justify; 61 | margin: 0 auto; 62 | display: flex; 63 | float: left; 64 | } 65 | 66 | .logo { 67 | position: absolute; 68 | margin-top: 10px; 69 | display: flex; 70 | justify-content: center; 71 | align-items: center; 72 | } 73 | 74 | .grid-section { 75 | grid-column: 2 / 4; 76 | width: 100%; 77 | box-sizing: border-box; 78 | padding: 10px; 79 | display: grid; 80 | grid-template-columns: 50px 300px 1fr; 81 | grid-gap: 20px; 82 | margin-bottom: 4rem; 83 | } 84 | 85 | .image-radius { 86 | border-radius: 30px; 87 | } 88 | 89 | /* SECTION GRID 3 */ 90 | 91 | .grid3 { 92 | display: grid; 93 | grid-template-columns: repeat(2, 1fr); 94 | grid-gap: 20px; 95 | margin: 0 auto; 96 | max-width: 950px; 97 | padding: 10px; 98 | } 99 | 100 | .grid3-item:nth-child(1) { 101 | grid-row: 1 / 3; 102 | } 103 | 104 | .grid3-item { 105 | display: grid; 106 | } 107 | 108 | .grid3-item img { 109 | grid-column: 1; 110 | grid-row: 1/3; 111 | align-self: end; 112 | } 113 | 114 | .grid3-item p { 115 | background: rgba(0, 0, 0, 0.6); 116 | padding: 10px; 117 | color: white; 118 | grid-column: 1; 119 | grid-row: 2; 120 | align-self: end; 121 | } 122 | 123 | /* SECTION GRID 4 */ 124 | .grid4 { 125 | display: grid; 126 | grid-template-columns: 1fr; 127 | grid-gap: 20px; 128 | margin: 0 auto; 129 | max-width: 950px; 130 | padding: 10px; 131 | } 132 | 133 | /* Zoom na imagem */ 134 | 135 | .scale-image { 136 | overflow: hidden; 137 | background: rgba(0, 0, 0, 0.6); 138 | } 139 | .scale-image img { 140 | transition: all 0.2s; 141 | } 142 | .scale-image:hover img { 143 | transform: scale(1.2); 144 | } 145 | 146 | /* Responsive */ 147 | 148 | @media (max-width: 490px) { 149 | .grid3 { 150 | display: grid; 151 | grid-template-columns: 1fr; 152 | grid-gap: 20px; 153 | margin: 0 auto; 154 | max-width: 950px; 155 | padding: 10px; 156 | } 157 | 158 | .header { 159 | border-radius: 0 0 40px 40px; 160 | } 161 | } 162 | 163 | .noImages { 164 | color: #252525; 165 | padding-bottom: 6rem; 166 | } 167 | -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/js-igorbrands/assets/vg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/js-igorbrands/assets/vg1.jpg -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/js-igorbrands/assets/vg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/js-igorbrands/assets/vg2.jpg -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/js-igorbrands/assets/vg3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/js-igorbrands/assets/vg3.jpg -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/js-igorbrands/assets/vg4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/js-igorbrands/assets/vg4.jpg -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/js-igorbrands/assets/vg5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/js-igorbrands/assets/vg5.jpg -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/js-igorbrands/assets/vg6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/js-igorbrands/assets/vg6.jpg -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/js-igorbrands/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Galeria de Arte 8 | 9 | 10 |
    11 | 21 |
    22 | 23 |
    24 |
      25 |
    • Van Gogh
      • 26 |
    • Van Gogh
      • 27 |
    • Van Gogh
      • 28 |
    • Van Gogh
      • 29 |
    • Van Gogh
      • 30 |
    • Van Gogh
      • 31 |
    32 |
    33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/js-igorbrands/style.css: -------------------------------------------------------------------------------- 1 | body, 2 | p { 3 | display: flex; 4 | flex-wrap: wrap; 5 | justify-content: space-between; 6 | align-items: center; 7 | margin: 0px; 8 | padding: 0px; 9 | list-style: none; 10 | font-size: 1.2rem; 11 | font-family: Arial; 12 | font-style: bold; 13 | color: #faf6ed; 14 | } 15 | 16 | body { 17 | background: #222 ; 18 | color: #faf6ed; 19 | /* Suavizar a font */ 20 | -webkit-font-smoothing: antialiased; 21 | display: inline; 22 | } 23 | nav { 24 | display: flex; 25 | margin: 0 auto; 26 | align-items: center; 27 | justify-content: center; 28 | } 29 | 30 | ul { 31 | display: flex; 32 | flex-wrap: wrap; 33 | } 34 | 35 | li { 36 | height: 40vh; 37 | flex-grow: 1; 38 | margin: 10px; 39 | list-style: none; 40 | border: 4px solid darkslategray; 41 | } 42 | 43 | li:last-child { 44 | flex-grow: 10; 45 | } 46 | 47 | img { 48 | max-height: 100%; 49 | min-width: 100%; 50 | object-fit: cover; 51 | vertical-align: bottom; 52 | } 53 | 54 | @media (max-aspect-ratio: 1/1) { 55 | li { 56 | height: 30vh; 57 | } 58 | } 59 | 60 | @media (max-height: 480px) { 61 | li { 62 | height: 80vh; 63 | } 64 | } 65 | 66 | @media (max-aspect-ratio: 1/1) and (max-width: 480px) { 67 | ul { 68 | flex-direction: row; 69 | } 70 | 71 | li { 72 | height: auto; 73 | width: 100%; 74 | } 75 | img { 76 | width: 100%; 77 | max-height: 75vh; 78 | min-width: 0; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-js-filipeleonelbatista/.env: -------------------------------------------------------------------------------- 1 | REACT_APP_ACCESS_KEY=YpIqVdMRkoVIna8KAXi3LeCoa6Wo292FJR3emctJ0u4 2 | REACT_APP_SECRET_KEY=QXUMGTegGc43SKeHSjjq5TdwqY0XTJ3e1ei6wQ0s4yA -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-js-filipeleonelbatista/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-js-filipeleonelbatista/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-js-filipeleonelbatista/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-js-filipeleonelbatista", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "@types/jest": "^26.0.15", 10 | "@types/node": "^12.0.0", 11 | "@types/react": "^16.9.53", 12 | "@types/react-dom": "^16.9.8", 13 | "axios": "^0.21.0", 14 | "react": "^17.0.1", 15 | "react-dom": "^17.0.1", 16 | "react-icons": "^3.11.0", 17 | "react-scripts": "4.0.0", 18 | "typescript": "^4.0.3", 19 | "web-vitals": "^0.2.4" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test", 25 | "eject": "react-scripts eject" 26 | }, 27 | "eslintConfig": { 28 | "extends": [ 29 | "react-app", 30 | "react-app/jest" 31 | ] 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | ">0.2%", 36 | "not dead", 37 | "not op_mini all" 38 | ], 39 | "development": [ 40 | "last 1 chrome version", 41 | "last 1 firefox version", 42 | "last 1 safari version" 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-js-filipeleonelbatista/public/Unfinished_Business.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/react-js-filipeleonelbatista/public/Unfinished_Business.mp3 -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-js-filipeleonelbatista/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/react-js-filipeleonelbatista/public/favicon.ico -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-js-filipeleonelbatista/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Digital Museo 9 | 10 | 11 | 12 |
    13 | 14 | 15 | -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-js-filipeleonelbatista/src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html, body, #root { 8 | height: 100vh; 9 | } 10 | 11 | #root { 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | } 16 | 17 | .container{ 18 | width: 100%; 19 | height: 100%; 20 | max-width: 900px; 21 | display: flex; 22 | flex-direction: column; 23 | justify-content: space-between; 24 | } 25 | 26 | .container header{ 27 | display: flex; 28 | flex-direction: row; 29 | 30 | align-items: center; 31 | justify-content: space-between; 32 | margin: 1.6rem; 33 | } 34 | 35 | .container header button.nav-button{ 36 | width: 48px; 37 | height: 48px; 38 | background-color: #fff; 39 | border-radius: 50%; 40 | outline: none; 41 | border: none; 42 | display: flex; 43 | justify-content: center; 44 | align-items: center; 45 | transition: 0.3s; 46 | } 47 | 48 | .container header button.nav-button.active svg{ 49 | color: #000 !important; 50 | } 51 | 52 | .container header button.nav-button:hover{ 53 | background-color: #ccc; 54 | } 55 | 56 | .container header a.nav-button{ 57 | width: 48px; 58 | height: 48px; 59 | background-color: #fff; 60 | border-radius: 50%; 61 | text-decoration: none; 62 | outline: none; 63 | border: none; 64 | display: flex; 65 | justify-content: center; 66 | align-items: center; 67 | transition: 0.3s; 68 | } 69 | 70 | .container header a.nav-button.active svg{ 71 | color: #000 !important; 72 | } 73 | 74 | .container header a.nav-button:hover{ 75 | background-color: #ccc; 76 | } 77 | 78 | .container main{ 79 | display: flex; 80 | } 81 | 82 | .container main .content{ 83 | display: flex; 84 | flex-direction: row; 85 | align-items: center; 86 | margin: 1.6rem 0; 87 | } 88 | 89 | .container main button.arrow-button{ 90 | margin: 1.6rem; 91 | width: 48px; 92 | height: 48px; 93 | background-color: #ddd; 94 | border-radius: 50%; 95 | outline: none; 96 | border: none; 97 | display: flex; 98 | justify-content: center; 99 | align-items: center; 100 | transition: 0.3s; 101 | } 102 | 103 | .container main button.arrow-button:hover{ 104 | background-color: #ccc; 105 | } 106 | 107 | .container main .img-container{ 108 | width: 80%; 109 | height: auto; 110 | position: relative; 111 | } 112 | .container main .img-container .caption{ 113 | display: flex; 114 | flex-direction: column; 115 | justify-content: center; 116 | align-items: center; 117 | margin: 1.6rem; 118 | } 119 | 120 | .container main .img-container img{ 121 | width: 100%; 122 | height: 30rem; 123 | object-fit: cover; 124 | border-radius: 1rem; 125 | -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.75); 126 | -moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.75); 127 | box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.75); 128 | transition: 0.3s; 129 | } 130 | 131 | .container footer{ 132 | margin: 1.6rem; 133 | display: flex; 134 | flex-direction: column; 135 | align-items: center; 136 | justify-content: center; 137 | } -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-js-filipeleonelbatista/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | 3 | import { FaItunesNote, FaGithub, FaArrowRight, FaArrowLeft } from 'react-icons/fa'; 4 | 5 | import './App.css' 6 | import api from './services/api'; 7 | 8 | interface Image { 9 | urls: { 10 | regular: string; 11 | }; 12 | alt_description: string; 13 | description: string; 14 | width: number; 15 | height: number; 16 | 17 | } 18 | 19 | export default function App() { 20 | const access_key = process.env.REACT_APP_ACCESS_KEY; 21 | 22 | const [photos, setPhotos] = useState(); 23 | 24 | useEffect(() => { 25 | api.get(`topics/6sMVjTLSkeQ/photos/?client_id=${access_key}`).then(response => { 26 | setPhotos(response.data); 27 | }); 28 | }, []) 29 | 30 | const [index, setIndex] = useState(0); 31 | const [statusPlay, setStatusPlay] = useState(false); 32 | 33 | if (!photos) { 34 | return null; 35 | } 36 | 37 | function handlePreviosImage() { 38 | if (!photos) { 39 | return null; 40 | } 41 | if(index > 0){ 42 | setIndex(index -1); 43 | } 44 | if(index === 0){ 45 | setIndex((photos.length-1)); 46 | } 47 | } 48 | function handleNextImage() { 49 | if (!photos) { 50 | return null; 51 | } 52 | if(index < (photos.length-1)){ 53 | setIndex(index +1); 54 | } 55 | if(index === (photos.length-1)){ 56 | setIndex(0); 57 | } 58 | } 59 | function handleMusic(){ 60 | document.getElementById("music")?.classList.toggle("active"); 61 | var x = document.getElementById("audio") as HTMLAudioElement; 62 | if(statusPlay){ 63 | x.pause(); 64 | setStatusPlay(false); 65 | }else{ 66 | x.play(); 67 | setStatusPlay(true); 68 | } 69 | } 70 | return ( 71 |
    72 | 76 | 77 |
    78 |
    79 | 82 |

    Digital Museo

    83 | 84 | 85 | 86 |
    87 |
    88 |
    89 | 92 |
    93 | {photos[index].alt_description} 96 |
    97 |

    {photos[index].description === null ? "Unsplash image" : photos[index].description}

    98 |

    {photos[index].alt_description === null ? "Unsplash image" : photos[index].alt_description}

    99 |
    100 |
    101 | 104 |
    105 |
    106 |
    107 |

    Desenvolvido com 💜 por Filipe Batista

    108 |

    Imagens por Unsplash

    109 |
    110 |
    111 | 112 |
    113 | ); 114 | } -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-js-filipeleonelbatista/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById('root') 10 | ); -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-js-filipeleonelbatista/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-js-filipeleonelbatista/src/services/api.ts: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const api = axios.create({ 4 | baseURL: 'https://api.unsplash.com/', 5 | }); 6 | 7 | export default api; -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-js-filipeleonelbatista/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-lorenalgm/web/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-lorenalgm/web/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "react": "^17.0.1", 10 | "react-dom": "^17.0.1", 11 | "react-router-dom": "^5.2.0", 12 | "react-scripts": "4.0.0", 13 | "web-vitals": "^0.2.4" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-lorenalgm/web/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | Galeria 12 | 13 | 14 | 15 |
    16 | 17 | 18 | -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-lorenalgm/web/src/assets/horizontal1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/react-lorenalgm/web/src/assets/horizontal1.png -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-lorenalgm/web/src/assets/horizontal2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/react-lorenalgm/web/src/assets/horizontal2.png -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-lorenalgm/web/src/assets/horizontal3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/react-lorenalgm/web/src/assets/horizontal3.png -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-lorenalgm/web/src/assets/horizontal4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/react-lorenalgm/web/src/assets/horizontal4.png -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-lorenalgm/web/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/react-lorenalgm/web/src/assets/logo.png -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-lorenalgm/web/src/assets/vertical1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/react-lorenalgm/web/src/assets/vertical1.png -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-lorenalgm/web/src/assets/vertical2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/react-lorenalgm/web/src/assets/vertical2.png -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-lorenalgm/web/src/assets/vertical3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/react-lorenalgm/web/src/assets/vertical3.png -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-lorenalgm/web/src/assets/vertical4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio3/solucoes/react-lorenalgm/web/src/assets/vertical4.png -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-lorenalgm/web/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | text-decoration: none; 6 | } 7 | 8 | body{ 9 | scroll-behavior: smooth; 10 | background-color: black; 11 | } -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-lorenalgm/web/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Routes from './routes'; 4 | import './index.css'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | 13 | -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-lorenalgm/web/src/pages/Home/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import logo from '../../assets/logo.png'; 3 | import horizontal1 from '../../assets/horizontal1.png'; 4 | import horizontal2 from '../../assets/horizontal2.png'; 5 | import horizontal3 from '../../assets/horizontal3.png'; 6 | import horizontal4 from '../../assets/horizontal4.png'; 7 | import vertical1 from '../../assets/vertical1.png'; 8 | import vertical2 from '../../assets/vertical2.png'; 9 | import vertical3 from '../../assets/vertical3.png'; 10 | import vertical4 from '../../assets/vertical4.png'; 11 | import './styles.css'; 12 | 13 | function Home(){ 14 | return( 15 |
    16 |
    17 | Galeria 18 |
    19 | Obras 20 | Artistas 21 | Contato 22 |
    23 | Entrar 24 |
    25 |
    26 |
    27 |

    Crie.

    28 |

    Inspire.

    29 |

    Surpreenda.

    30 |
    31 |
    32 |
    33 |
    34 |
    35 | Galeria 36 | Galeria 37 | Galeria 38 | Galeria 39 | > 40 |
    41 |
    42 | Galeria 43 | Galeria 44 | Galeria 45 | Galeria 46 | > 47 |
    48 |
    49 | Galeria 50 | Galeria 51 | Galeria 52 | Galeria 53 | > 54 |
    55 |
    56 |
    57 | Galeria 58 | Galeria 59 | Galeria 60 | Galeria 61 |
    62 |
    63 |
    64 |
    65 |
    66 |

    Obras

    Da Semana

    67 |

    Conheça os destaques mais visualizados no momento

    68 |
    69 |
    70 |
    71 | Galeria 72 | Galeria 73 |
    74 |
    75 | 76 |
    77 |
    78 |
    79 | ) 80 | } 81 | 82 | export default Home; -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-lorenalgm/web/src/pages/Home/styles.css: -------------------------------------------------------------------------------- 1 | .App{ 2 | margin: 2em 4em; 3 | color: white; 4 | scroll-behavior: smooth; 5 | } 6 | 7 | a{ 8 | color: #525151; 9 | } 10 | 11 | .header{ 12 | display: flex; 13 | justify-content: space-between; 14 | align-items: center; 15 | flex-wrap: wrap; 16 | } 17 | 18 | .menu{ 19 | width: 20rem; 20 | max-width: 200px; 21 | display: flex; 22 | justify-content: space-between; 23 | font-size: 18px; 24 | } 25 | 26 | .menu a:hover{ 27 | color: white; 28 | } 29 | 30 | .button{ 31 | padding: 1rem 2.9rem; 32 | background-color: white; 33 | color: black; 34 | border-radius: 8px; 35 | font-size: 18px; 36 | font-weight: bold; 37 | transition: 0.2s; 38 | } 39 | 40 | .button:hover{ 41 | background-image: linear-gradient(0deg, rgb(249, 66, 6),rgb(250, 134, 22),rgb(251, 202, 37)); 42 | color: white; 43 | 44 | } 45 | 46 | .hero{ 47 | display: flex; 48 | align-items: center; 49 | padding: 4.2em 0; 50 | } 51 | 52 | .hero-title h1{ 53 | font-size: 110px; 54 | transition: 0.5s; 55 | } 56 | 57 | .hero-title h1:hover{ 58 | -webkit-background-clip: text; 59 | -webkit-text-fill-color: transparent; 60 | background-image: repeating-linear-gradient(0deg, hsla(127,4%,81%,0.05) 0px, hsla(127,4%,81%,0.05) 1px,transparent 1px, transparent 11px,hsla(127,4%,81%,0.05) 11px, hsla(127,4%,81%,0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(135deg, hsla(127,4%,81%,0.05) 0px, hsla(127,4%,81%,0.05) 1px,transparent 1px, transparent 11px,hsla(127,4%,81%,0.05) 11px, hsla(127,4%,81%,0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(0deg, hsla(127,4%,81%,0.05) 0px, hsla(127,4%,81%,0.05) 1px,transparent 1px, transparent 11px,hsla(127,4%,81%,0.05) 11px, hsla(127,4%,81%,0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(135deg, hsla(127,4%,81%,0.05) 0px, hsla(127,4%,81%,0.05) 1px,transparent 1px, transparent 11px,hsla(127,4%,81%,0.05) 11px, hsla(127,4%,81%,0.05) 12px,transparent 12px, transparent 32px),linear-gradient(90deg, rgb(223, 195, 5),rgb(221, 78, 0)); 61 | } 62 | 63 | .vertical-images{ 64 | display: grid; 65 | grid-template-columns: repeat(3, 100%); 66 | overflow: hidden; 67 | scroll-behavior: smooth; 68 | height: 36em; 69 | margin-bottom: 4rem; 70 | } 71 | 72 | .vertical-images div{ 73 | width: 100%; 74 | position: relative; 75 | display: grid; 76 | grid-template-columns: repeat(4, auto); 77 | } 78 | 79 | .vertical-images img{ 80 | margin-right: .4rem; 81 | } 82 | 83 | .vertical-images a{ 84 | display: flex; 85 | align-items: center; 86 | position: absolute; 87 | color: #fff; 88 | font-size: 3em; 89 | font-weight: bold; 90 | width: 50px; 91 | padding: 15px; 92 | background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); 93 | z-index: 1; 94 | right: 0; 95 | bottom: 0; 96 | top:0; 97 | } 98 | 99 | 100 | .horizontal-images{ 101 | overflow: hidden; 102 | display: flex; 103 | } 104 | 105 | .horizontal-images img{ 106 | margin-right: .4rem; 107 | } 108 | 109 | 110 | .highlight{ 111 | margin-top: 5rem; 112 | } 113 | 114 | .week-left{ 115 | background-color: #740000; 116 | width: 50%; 117 | height: 40rem; 118 | position: relative; 119 | } 120 | 121 | .week-content{ 122 | padding: 5rem 4rem; 123 | } 124 | 125 | .week-content h1{ 126 | font-size: 4rem; 127 | margin-bottom: 1rem; 128 | } 129 | 130 | .week-images{ 131 | position: absolute; 132 | z-index: 1; 133 | right: 0; 134 | top: 102.3rem; 135 | } 136 | 137 | .week-images img{ 138 | margin-right: 0.4rem; 139 | } -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-lorenalgm/web/src/routes.js: -------------------------------------------------------------------------------- 1 | import { Route, BrowserRouter, Switch } from 'react-router-dom'; 2 | import React from 'react'; 3 | import Home from './pages/Home'; 4 | 5 | function Routes(){ 6 | return( 7 | 8 | 9 | 10 | 11 | 12 | ) 13 | } 14 | 15 | export default Routes; 16 | 17 | -------------------------------------------------------------------------------- /desafios/desafio3/solucoes/react-lorenalgm/web/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /desafios/desafio4/desafio.md: -------------------------------------------------------------------------------- 1 |
    2 |

    3 | 4 |

    Desafio 4

    5 | 6 |

    7 | DevChallenge Hacktoberfest 8 |

    9 | 10 | ## Índice 11 | 12 | - [Índice](#índice) 13 | - [Desafio](#desafio) 14 | - [Extras](#extras) 15 | - [Dicas](#dicas) 16 | - [Exemplos](#exemplos) 17 | - [Comunidade](#comunidade) 18 | 19 | ## Desafio 20 | 21 | ### Aplicação 22 | Calculadora de contas 23 | 24 | ### Objetivo: 25 | Criar uma aplicação para informar valores das contas, adicionais e o valor final. 26 | 27 | ### Requisitos: 28 | - O usuário deverá informar o valor da conta 29 | - O usuário poderá informar o percentual de gorjeta 30 | - Exiba o valor parcial da conta 31 | - O usuário poderá selecionar com quantas pessoas deseja dividir a conta 32 | - Calcule e exiba o valor final para cada pessoa 33 | 34 | 35 | ### Extras 36 | Crie uma funcionalidade para que exiba o valor final por pessoa, mas que seja possível alterar, caso alguma pessoa pague um valor maior/menor.Ex: 37 | - Pessoa 1: R$50,00 38 | - Pessoa 2: R$50,00 39 | 40 | Porém a pessoa 1 irá pagar mais. Ao alterar o valor da pessoa 1, o valor restante será automaticamente atualizado na pessoa 2: 41 | - Pessoa 1: R$70,00 42 | - Pessoa 2: R$30,00 43 | 44 | 45 | ## Dicas 46 | - 47 | 48 | ## Exemplos 49 | - [Calculator.net](https://www.calculator.net/tip-calculator.html) 50 | - [Google](https://www.google.com/search?q=tip+calculator&oq=tip+calculator&aqs=chrome.0.0l8.2482j0j1&sourceid=chrome&ie=UTF-8) 51 | - [Calculatestuff](https://www.calculatestuff.com/miscellaneous/tip-calculator) 52 | 53 | tip 54 | 55 | 56 | ## Comunidade 57 | Caso tenha alguma dúvida sobre os desafios, fique à vontade para pedir ajuda na comunidade! https://discord.gg/yvYXhGj
    58 |
    59 | Site: https://www.devchallenge.com.br/
    60 | 61 | 62 | 64 | 65 | 67 | 68 |
    63 | Discord LinkedinTwitter 66 | Instagram
    69 | 70 | -------------------------------------------------------------------------------- /desafios/desafio4/react-js-filipeleonelbatista/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /desafios/desafio4/react-js-filipeleonelbatista/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | -------------------------------------------------------------------------------- /desafios/desafio4/react-js-filipeleonelbatista/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-js-filipeleonelbatista", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "@types/jest": "^26.0.15", 10 | "@types/node": "^12.0.0", 11 | "@types/react": "^16.9.53", 12 | "@types/react-dom": "^16.9.8", 13 | "react": "^17.0.1", 14 | "react-dom": "^17.0.1", 15 | "react-icons": "^3.11.0", 16 | "react-scripts": "4.0.0", 17 | "typescript": "^4.0.3", 18 | "web-vitals": "^0.2.4" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /desafios/desafio4/react-js-filipeleonelbatista/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio4/react-js-filipeleonelbatista/public/favicon.ico -------------------------------------------------------------------------------- /desafios/desafio4/react-js-filipeleonelbatista/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | React App 10 | 11 | 12 | 13 |
    14 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /desafios/desafio4/react-js-filipeleonelbatista/src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html, body, #root { 8 | height: 100vh; 9 | font-family: Quicksand, sans-serif; 10 | } 11 | 12 | #root { 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | } 17 | 18 | .container{ 19 | width: 100%; 20 | height: 100%; 21 | max-width: 400px; 22 | display: flex; 23 | flex-direction: column; 24 | justify-content: space-between; 25 | } 26 | 27 | body{ 28 | background: linear-gradient(180deg, #384152 0%, #222835 100%); 29 | } 30 | 31 | .container header{ 32 | padding: 1.6rem; 33 | display: flex; 34 | flex-direction: row; 35 | align-items: center; 36 | justify-content: space-between; 37 | } 38 | 39 | .container header h2{ 40 | color: #FFF; 41 | } 42 | 43 | .container header button.btn-share{ 44 | display: flex; 45 | align-items: center; 46 | justify-content: center; 47 | 48 | width: 48px; 49 | height: 48px; 50 | border: none; 51 | outline: none; 52 | color: #FFF; 53 | border-radius: 10px; 54 | background: #2E3645; 55 | box-shadow: 5px 5px 12px #1c2029, 56 | -5px -5px 12px #404c61; 57 | transition: 0.3s; 58 | } 59 | 60 | .container header button.btn-share:hover{ 61 | box-shadow: 7px 7px 14px #12161c, 62 | -7px -7px 14px #4a566e; 63 | transition: 0.3s; 64 | } 65 | 66 | .container header button.btn-share:active{ 67 | box-shadow: inset 5px 5px 12px #1c2029, 68 | inset -5px -5px 12px #404c61; 69 | transition: 0.3s; 70 | } 71 | 72 | .container main .input-group{ 73 | display: flex; 74 | flex-direction: column; 75 | align-items: center; 76 | margin: 0.8rem; 77 | } 78 | 79 | .container main .input-group label{ 80 | color: #FFF; 81 | margin: 0.8rem; 82 | } 83 | 84 | .container main .input-group .input-button-group{ 85 | width: 100%; 86 | display: flex; 87 | flex-direction: row; 88 | } 89 | 90 | /* Chrome, Safari, Edge, Opera */ 91 | .container main .input-group input::-webkit-outer-spin-button, 92 | .container main .input-group input::-webkit-inner-spin-button, 93 | .container main .input-group .input-button-group input::-webkit-outer-spin-button, 94 | .container main .input-group .input-button-group input::-webkit-inner-spin-button { 95 | -webkit-appearance: none; 96 | margin: 0; 97 | } 98 | 99 | /* Firefox */ 100 | .container main .input-group input[type=number], 101 | .container main .input-group .input-button-group input[type=number]{ 102 | -moz-appearance: textfield; 103 | } 104 | 105 | .container main .input-group input, 106 | .container main .input-group .input-button-group input{ 107 | 108 | width: 100%; 109 | height: 48px; 110 | 111 | margin: 0 0.4rem; 112 | 113 | border: none; 114 | outline: none; 115 | 116 | text-align: center; 117 | font-family: Quicksand, sans-serif; 118 | color: #FFF; 119 | 120 | border-radius: 10px; 121 | background: #2E3645; 122 | box-shadow: inset 7px 7px 8px #202530, 123 | inset -7px -7px 8px #3c475a;; 124 | transition: 0.3s; 125 | } 126 | 127 | .container main .input-group input:focus, 128 | .container main .input-group .input-button-group input:focus{ 129 | box-shadow: inset 7px 7px 14px #12161c, 130 | inset -7px -7px 14px #4a566e; 131 | } 132 | 133 | .container main .input-group .input-button-group button.btn-share{ 134 | display: flex; 135 | align-items: center; 136 | justify-content: center; 137 | 138 | width: 48px; 139 | height: 48px; 140 | 141 | text-align: center; 142 | font-family: Quicksand, sans-serif; 143 | font-size: large; 144 | color: #FFF; 145 | 146 | border: none; 147 | outline: none; 148 | color: #FFF; 149 | border-radius: 10px; 150 | background: #2E3645; 151 | box-shadow: 5px 5px 12px #1c2029, 152 | -5px -5px 12px #404c61; 153 | transition: 0.3s; 154 | } 155 | 156 | .container main .input-group .input-button-group button.btn-share:hover{ 157 | box-shadow: 7px 7px 14px #12161c, 158 | -7px -7px 14px #4a566e; 159 | transition: 0.3s; 160 | } 161 | 162 | .container main .input-group .input-button-group button.btn-share:active{ 163 | box-shadow: inset 5px 5px 12px #1c2029, 164 | inset -5px -5px 12px #404c61; 165 | transition: 0.3s; 166 | } 167 | 168 | .container main .result{ 169 | width: 100%; 170 | padding: 1.6rem; 171 | display: flex; 172 | flex-direction: column; 173 | align-items: center; 174 | color: #FFF; 175 | } 176 | 177 | 178 | .container footer .social{ 179 | display: flex; 180 | flex-direction: row; 181 | align-items: center; 182 | justify-content: center; 183 | 184 | margin: 0.8rem; 185 | } 186 | 187 | .container footer .social a{ 188 | display: flex; 189 | align-items: center; 190 | justify-content: center; 191 | 192 | text-decoration: none; 193 | 194 | margin: 0 0.4rem; 195 | 196 | width: 48px; 197 | height: 48px; 198 | 199 | text-align: center; 200 | font-family: Quicksand, sans-serif; 201 | font-size: large; 202 | color: #FFF; 203 | 204 | border: none; 205 | outline: none; 206 | color: #FFF; 207 | border-radius: 10px; 208 | background: #2E3645; 209 | box-shadow: 5px 5px 12px #1c2029, 210 | -5px -5px 12px #404c61; 211 | transition: 0.3s; 212 | } 213 | 214 | .container footer .social a:hover{ 215 | box-shadow: 7px 7px 14px #12161c, 216 | -7px -7px 14px #4a566e; 217 | transition: 0.3s; 218 | } 219 | 220 | .container footer .social a:active{ 221 | box-shadow: inset 5px 5px 12px #1c2029, 222 | inset -5px -5px 12px #404c61; 223 | transition: 0.3s; 224 | } 225 | 226 | .container footer .footer{ 227 | display: flex; 228 | flex-direction: column; 229 | justify-content: center; 230 | align-items: center; 231 | color: #fff; 232 | 233 | margin: 1.6rem; 234 | } 235 | 236 | .container footer .footer strong{ 237 | margin: 0.8rem 238 | } -------------------------------------------------------------------------------- /desafios/desafio4/react-js-filipeleonelbatista/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import { FaAdjust, 3 | FaShareAlt, 4 | FaInstagram, 5 | FaLinkedinIn, 6 | FaGithub, 7 | FaDiscord } from 'react-icons/fa'; 8 | import './App.css'; 9 | 10 | function App() { 11 | const [valor, setValor] = useState("0,00"); 12 | const [percentual, setPercentual] = useState(0); 13 | const [pessoas, setPessoas] = useState(1); 14 | 15 | const [valorTotal, setValorTotal] = useState("0,00"); 16 | const [gorjeta, setGorjeta] = useState("0,00"); 17 | 18 | 19 | useEffect(() => { 20 | 21 | let value = valor.replaceAll(".", ""); 22 | value = value.replace(",", "."); 23 | 24 | let result = parseFloat(value); 25 | 26 | let x = percentual === 0 ? 0 : ((result*percentual)/100) / pessoas 27 | let y = result/pessoas; 28 | console.log({result, x,y}) 29 | setValorTotal(y.toFixed(2).toString().replace('.',',')) 30 | setGorjeta(x.toFixed(2).toString().replace('.',',')) 31 | 32 | }, [valor, percentual, pessoas]); 33 | 34 | function handleKeyUp(e: React.FormEvent){ 35 | let value = e.currentTarget.value; 36 | value = value.replace(/\D/g, ""); 37 | value = value.replace(/(\d)(\d{2})$/, "$1,$2"); 38 | value = value.replace(/(?=(\d{3})+(\D))\B/g, "."); 39 | e.currentTarget.value = value; 40 | setValor(value); 41 | } 42 | function handleAddPercentual(){ 43 | if(percentual < 100){ 44 | setPercentual(percentual+1); 45 | } 46 | } 47 | function handleRemovePercentual(){ 48 | if(percentual >= 1){ 49 | setPercentual(percentual-1); 50 | } 51 | } 52 | 53 | function handleAddPessoas(){ 54 | setPessoas(pessoas+1); 55 | } 56 | function handleRemovePessoas(){ 57 | if(pessoas > 1){ 58 | setPessoas(pessoas-1); 59 | } 60 | } 61 | 62 | return ( 63 |
    64 |
    65 | 68 |

    Tip Calculator

    69 | 72 |
    73 |
    74 | 75 |
    76 | 77 | {setValor(e.target.value)} } 84 | /> 85 |
    86 | 87 |
    88 | 89 |
    90 | 93 | { ( parseInt(e.target.value) <= 100 && parseInt(e.target.value) >= 0) ? setPercentual(parseInt(e.target.value)) : setPercentual(0) } } 99 | /> 100 | 103 |
    104 |
    105 | 106 |
    107 | 108 |
    109 | 112 | { parseInt(e.target.value) > 0 ? setPessoas(parseInt(e.target.value)) : setPessoas(0) } } 118 | /> 119 | 122 |
    123 |
    124 | 125 |
    126 |
    127 | Valor Gorjeta: R$ {gorjeta} 128 |
    129 |
    130 | Valor: R$ {valorTotal} 131 |
    132 |
    133 | 134 |
    135 | 155 |
    156 | ); 157 | } 158 | 159 | export default App; 160 | -------------------------------------------------------------------------------- /desafios/desafio4/react-js-filipeleonelbatista/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById('root') 10 | ); -------------------------------------------------------------------------------- /desafios/desafio4/react-js-filipeleonelbatista/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /desafios/desafio4/react-js-filipeleonelbatista/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /desafios/desafio4/solucoes/instrucoes.md: -------------------------------------------------------------------------------- 1 | ## Instruções 2 | 1 - Crie uma pasta com a tecnologia utilizada e seu user.
    3 | Exemplo: "react-lorenagm"
    4 | 5 | 2 - Adicione sua resolução do desafio dentro da pasta -------------------------------------------------------------------------------- /desafios/desafio4/solucoes/javascript-igorbrands/README.MD: -------------------------------------------------------------------------------- 1 | # CALCULADORA DE CONTA DE BAR 2 | 3 | ![Calculadora de Bar](./calcprint.png) 4 | 5 | Desenvolvi minha solução com HTML, CSS E JS. 6 | 7 | Uma simples pagina com a calculadora, basta baixar os arquivos e executar no live server ou abrir o index.html. 8 | 9 | :sparkles:Happy Hacktoberfest 2020!!! 10 | -------------------------------------------------------------------------------- /desafios/desafio4/solucoes/javascript-igorbrands/calcprint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devchallenge-io/hacktoberfest/795f5be0a78dda382f8eeee30780883f804e949f/desafios/desafio4/solucoes/javascript-igorbrands/calcprint.png -------------------------------------------------------------------------------- /desafios/desafio4/solucoes/javascript-igorbrands/calculator.js: -------------------------------------------------------------------------------- 1 | const form = document.getElementById('calculator'); 2 | 3 | form.onsubmit = function(e) { 4 | e.preventDefault(); 5 | 6 | const howMuch = document.getElementById('bill'); 7 | const tipAmount = document.getElementById('percent'); 8 | const customerNum = document.getElementById('customer-num'); 9 | 10 | const totalBill = document.getElementById('total-bill'); 11 | const totalPercent = document.getElementById('total-percent'); 12 | const totalPerCustomer = document.getElementById('total-per-customer'); 13 | 14 | let cost = parseFloat(howMuch.value); 15 | let customers = parseInt(customerNum.value); 16 | 17 | let percent = 0; 18 | if(tipAmount.value !== '') { 19 | percent = parseInt(tipAmount.value) 20 | } 21 | 22 | let percentAmount = calculatePercentAmount(cost, percent) 23 | totalPercent.value = percentAmount; 24 | 25 | let totalValue = calculateTotalValue(cost, percentAmount) 26 | totalBill.value = totalValue; 27 | 28 | totalPerCustomer.value = calculatePerCustomer(totalValue, customers) 29 | 30 | return false; 31 | }; 32 | 33 | function calculatePercentAmount(cost, percent){ 34 | return Math.round((cost / 100) * percent ); 35 | } 36 | 37 | function calculateTotalValue(cost, percentAmount){ 38 | return Math.round(cost + percentAmount); 39 | } 40 | 41 | function calculatePerCustomer(totalValue, customers){ 42 | return (totalValue / customers); 43 | } -------------------------------------------------------------------------------- /desafios/desafio4/solucoes/javascript-igorbrands/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Calculadora de Bar 8 | 9 | 10 |
    11 |
    12 |

    Calculadora de Bar

    13 |
    14 |
    15 | 16 | 17 |
    18 |
    19 | 20 | 21 |
    22 |
    23 | 24 | 25 |
    26 |
    27 | 28 |
    29 |
    30 |
    31 |
    32 |

    Como fica a conta

    33 |
    34 |
    35 | 36 | 37 |
    38 |
    39 | 40 | 41 |
    42 |
    43 | 44 | 45 |
    46 |
    47 |
    48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /desafios/desafio4/solucoes/javascript-igorbrands/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | font-size: 16px; 4 | margin-top: 40px; 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | } 9 | input{ 10 | border-radius: 4px; 11 | } 12 | 13 | .container { 14 | margin: 0; 15 | width: 500px; 16 | } 17 | 18 | #bill-calculator{ 19 | padding: 20px; 20 | background-color: #22212C; 21 | box-shadow: 10px 10px 5px darkgrey; 22 | border-radius: 10px; 23 | margin-bottom: 40px; 24 | color: #fff; 25 | } 26 | 27 | #result-container{ 28 | border: 1px darkred dashed; 29 | background-color: #ffff7a; 30 | border-radius: 10px; 31 | padding: 20px; 32 | } 33 | 34 | h1 { 35 | text-align: center; 36 | padding: 10px; 37 | margin: 0 0 20px 0; 38 | } 39 | 40 | .field-container { 41 | display: flex; 42 | justify-content: space-between; 43 | width: 100%; 44 | margin: 0 0 10px 0; 45 | } 46 | 47 | .field-container label { 48 | padding: 10px; 49 | display: block; 50 | } 51 | .field-container input { 52 | border: 1px solid darkgray; 53 | padding: 10px; 54 | display: block; 55 | } 56 | .button-container{ 57 | text-align: center; 58 | } 59 | .button-container button{ 60 | padding: 10px; 61 | background-color: #9580ff; 62 | color: #fff; 63 | border-radius: 8px; 64 | text-decoration: none; 65 | border: none; 66 | font-size: 20px; 67 | transition: 0.2s; 68 | } 69 | button:hover { 70 | opacity: 0.8; 71 | cursor: pointer; 72 | } 73 | 74 | input:disabled{ 75 | background-color: #fff; 76 | } -------------------------------------------------------------------------------- /dicas.md: -------------------------------------------------------------------------------- 1 | 1 - Como fazer um fork do repositório? 2 | - Clique no botão "fork" no canto superior direito do seu navegador. Esta ação criará uma cópia deste repositório no seu github. 3 | - Após o processo finalizar, você poderá clonar seu repositório e resolver os desafios. 4 | 5 | 2 - Como fazer um pull request? 6 | - Abra o seu repositório pelo site do GitHub e clique na opção "pull request" 7 | - Irá abrir uma seção de "comparing changes", revise tudo e clique em "create pull request" 8 | - Adicione um título e uma descrição do seu desafio realizado 9 | - Clique em "create pull request" --------------------------------------------------------------------------------