Document

39 | 40 | O Hacktoberfest é um festival virtual que ocorre durante todo o mês de Outubro, realizado pela DigitalOcean, appwrite and docker, para celebrar as contribuições e incentivar a participação na comunidade de código aberto. 41 | É a maneira mais fácil para começar no universo open-source e todos são bem-vindos para participar! 42 | 43 | [Clique aqui para se registrar](https://hacktoberfest.com/), faça 4 Pull Requests válidos até o final do mês e ganhe SWAG grátis! 44 | 45 | ### Como este repo funciona 46 | 47 | Este repositório é um playground baseado em desafios. Na [seção de issues](https://github.com/anasilveira9787/playing-with-Javascript/issues), você encontrará várias tarefas ou desafios que o convidam a interagir com o código existente. Escolha uma e peça para ser atribuído (assigned). Realize a tarefa usando suas habilidades de HTML, CSS e JavaScript, abra um Pull Request e voilà! 48 | 49 | Se você tiver alguma dúvida, use os comentários na issue para pedir ajuda à comunidade. 50 | 51 | Não complete mais de um desafio, deixe que outros devs participem. 52 | 53 | Você também pode contribuir sugerindo mais desafios através de issues ou respondendo perguntas na seção de comentários. 54 | 55 | 56 | ### Passo-a-Passo 57 | 58 | 1. Escolha uma issue para trabalhar 59 | 2. Faça um fork do projeto 60 | 3. Clone para sua máquina local 61 | `git clone https://github.com/[user-name]/playing-with-Javascript.git` 62 | 4. Vá para o diretório do projeto 63 | `cd playing-with-Javascript` 64 | 6. Crie uma nova branch e mude para ela 65 | `git checkout -b yourFeature` 66 | 5. Faça suas alterações usando sua IDE de preferência 67 | `code .` 68 | 6. Stage e comite suas mudanças 69 | `git add .` 70 | `git commit -m 'Add some amazing feature'` 71 | 7. Envie ao repositório remoto 72 | `git push -u origin yourFeature` 73 | 8. Abra um Pull Request e associe-o ao número escolhido, adicionando `Fix #[número da issue]` à descrição do PR 74 | 75 | 76 | 77 | 78 | --- 79 | 80 |

81 | 82 | **Feito com ❤️ por [Ana Silveira](https://www.linkedin.com/in/anaccord), entre em contato!** 83 | 84 | Não esqueça de dar uma estrela ao projeto! ⭐ 85 |

86 | 87 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

➡️ PT-BR

2 | 3 |

4 | 5 | 6 | 7 |

A HacktoberFest project to put your frontend skills to the test.

8 | 9 |

10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 |

19 | 20 | 21 | ### About 22 | 23 | This is a beginner-friendly repository for educational purposes that work as a playground for you to sharpen your skills with HTML, CSS and, especially, JavaScript, while interacting with the code of others. Let's celebrate open source by getting hands-on and learning collaboratively! 24 | 25 | ### Features 26 | * [x] Interactive 27 | * [x] Colaborative 28 | * [x] Fun 29 | 30 | 31 | ### Languages and tools you'll need 32 | 33 | ![Stacks](https://skillicons.dev/icons?i=html,css,js,git&perline=8&theme=light) 34 | 35 | 36 | ### What is HacktoberFest? 37 | 38 |

39 | 40 | Hacktoberfest is a virtual festival that takes place throughout October, hosted by DigitalOcean, appwrite and docker, to celebrate contributions and encourage participation in the open source community. 41 | It's the easiest way to get started in the open-source universe and everyone is welcome to participate! 42 | 43 | [Click here to register](https://hacktoberfest.com/), make 4 valid Pull Requests until the end of the month and earn free SWAG! 44 | 45 | ### How this repo works 46 | 47 | This repository is a challenge-based playground. In the [issues section](https://github.com/anasilveira9787/playing-with-Javascript/issues), you will find several tasks or challenges which invite you to interact with existing code. Choose one and ask to be assigned. Accomplish the assignment using your HTML, CSS and JavaScript skills, open a Pull Request and voila! 48 | 49 | If you have any questions, use the issue's comments to ask the community for help. 50 | 51 | Don't complete more than one challenge, leave it to other devs to participate. 52 | 53 | You can also contribute by suggesting other challenges through issues or answering questions on the commenting section. 54 | 55 | 56 | ### Step-by-step 57 | 58 | 1. Choose one issue to work on 59 | 2. Fork the project 60 | 3. Clone it to your local machine 61 | `git clone https://github.com/[user-name]/playing-with-Javascript.git` 62 | 4. Move to the project directory 63 | `cd playing-with-Javascript` 64 | 6. Create a feature branch and checkout to it 65 | `git checkout -b yourFeature` 66 | 5. Make your changes using your preferred IDE 67 | `code .` 68 | 6. Stage and commit your changes 69 | `git add .` 70 | `git commit -m 'Add some amazing feature'` 71 | 7. Push to remote 72 | `git push -u origin yourFeature` 73 | 8. Open a Pull Request and link it to the chosen issue by adding `Fix #[issue number]` to the PR description 74 | 75 | 76 | 77 | 78 | --- 79 | 80 |

81 | 82 | **Made with ❤️ by [Ana Silveira](https://www.linkedin.com/in/anaccord), get in touch!** 83 | 84 | Don't forget to give the project a star! ⭐ 85 |

86 | 87 | -------------------------------------------------------------------------------- /assets/github-header-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anasilveira9787/playing-with-Javascript/8d085b1257a715a0f1f1e9c4def9066536911760/assets/github-header-image.png -------------------------------------------------------------------------------- /audio/clock-ticking-natural-room-verb.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anasilveira9787/playing-with-Javascript/8d085b1257a715a0f1f1e9c4def9066536911760/audio/clock-ticking-natural-room-verb.mp3 -------------------------------------------------------------------------------- /audio/pause.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anasilveira9787/playing-with-Javascript/8d085b1257a715a0f1f1e9c4def9066536911760/audio/pause.mp3 -------------------------------------------------------------------------------- /audio/play.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anasilveira9787/playing-with-Javascript/8d085b1257a715a0f1f1e9c4def9066536911760/audio/play.mp3 -------------------------------------------------------------------------------- /audio/sadness-in-roads-to-nowhere.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anasilveira9787/playing-with-Javascript/8d085b1257a715a0f1f1e9c4def9066536911760/audio/sadness-in-roads-to-nowhere.mp3 -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 15 | 16 | 17 |

18 |

19 |

20 |

21 |

22 | 00 23 |

24 |

25 |

26 |

27 |

28 |

29 | 00 30 |

31 |

32 |

33 |

34 |

35 |

36 | 00 37 |

38 |

39 |

40 |

41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /keyhandlers.js: -------------------------------------------------------------------------------- 1 | const pressedKeys = { 2 | NotDefinedKey() {}, 3 | }; 4 | 5 | const shiftPressedKeys = { 6 | NotDefinedKey() {}, 7 | }; 8 | 9 | const ctrlPressedKeys = { 10 | NotDefinedKey() {}, 11 | }; 12 | 13 | /** 14 | * Define a execução de uma função ao pressionamento de uma "tecla" 15 | * @param {*} keyCode código da tecla pressionada (mesmo nome do event.code) 16 | * @param {*} func função a ser executada 17 | */ 18 | export function setKeyHandler(keyCode, func) { 19 | pressedKeys[keyCode] = func; 20 | } 21 | 22 | /** 23 | * Define a execução de uma função ao pressionamento de "Shift + tecla" 24 | * @param {*} keyCode código da tecla pressionada (mesmo nome do event.code) 25 | * @param {*} func função a ser executada 26 | */ 27 | export function setShiftKeyHandler(keyCode, func) { 28 | shiftPressedKeys[keyCode] = func; 29 | } 30 | 31 | /** 32 | * Define a execução de uma função ao pressionamento de "Ctrl + tecla" 33 | * @param {*} keyCode código da tecla pressionada (mesmo nome do event.code) 34 | * @param {*} func função a ser executada 35 | */ 36 | export function setCtrlKeyHandler(keyCode, func) { 37 | ctrlPressedKeys[keyCode] = func; 38 | } 39 | 40 | /** 41 | * Inicia o gerenciamento das teclas pressionadas 42 | */ 43 | export function startKeyHandler() { 44 | document.addEventListener('keydown', (event) => { 45 | const { code, shiftKey, ctrlKey } = event; 46 | const ctrlShift = shiftKey && ctrlKey; 47 | 48 | let callKeyFunction = {}; 49 | 50 | if (shiftKey) { 51 | callKeyFunction = 52 | code in shiftPressedKeys 53 | ? shiftPressedKeys[code] 54 | : shiftPressedKeys['NotDefinedKey']; 55 | } else if (ctrlKey) { 56 | callKeyFunction = 57 | code in ctrlPressedKeys 58 | ? ctrlPressedKeys[code] 59 | : ctrlPressedKeys['NotDefinedKey']; 60 | } else { 61 | callKeyFunction = 62 | code in pressedKeys 63 | ? pressedKeys[code] 64 | : pressedKeys['NotDefinedKey']; 65 | } 66 | 67 | // console.log( 68 | // `key code: ${code}, shift pressed: ${shiftKey}, ctrl pressed: ${ctrlKey}` 69 | // ) 70 | 71 | callKeyFunction(); 72 | }); 73 | } 74 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | import { functionTime } from './time.js'; 2 | import Sound from './sounds.js'; 3 | import { 4 | startKeyHandler, 5 | setKeyHandler, 6 | setShiftKeyHandler, 7 | } from './keyhandlers.js'; 8 | 9 | const clickCircle = document.querySelector('#circle'); 10 | const ballsTime = document.querySelector('#balls'); 11 | const textMinutes = document.querySelector('.textMinutes'); 12 | const sound = Sound(); 13 | 14 | clickCircle.addEventListener('click', function() { 15 | changeToTime(); 16 | changeColor(); 17 | playSong(); 18 | }); 19 | 20 | textMinutes.addEventListener('click', function() { 21 | changeToTime(); 22 | pauseSong(); 23 | }); 24 | 25 | function changeToTime() { 26 | ballsTime.classList.toggle('ballsActive'); 27 | clickCircle.classList.toggle('dblclick'); 28 | functionTime(); 29 | } 30 | 31 | function changeColor() { 32 | clickCircle.classList.toggle('clicked'); 33 | body.classList.toggle('body-change'); 34 | } 35 | 36 | function playSong() { 37 | sound.pressButtonPlay(); 38 | sound.bgAudioPlay(); 39 | } 40 | 41 | function pauseSong() { 42 | sound.pressButtonPause(); 43 | sound.bgAudioPause(); 44 | } 45 | 46 | setShiftKeyHandler('KeyT', changeToTime); 47 | setKeyHandler('Space', changeColor); 48 | 49 | startKeyHandler(); 50 | -------------------------------------------------------------------------------- /sounds.js: -------------------------------------------------------------------------------- 1 | export default function() { 2 | const buttonPlayAudio = new Audio("audio/play.mp3"); 3 | const buttonPauseAudio = new Audio("audio/pause.mp3"); 4 | const bgAudio = new Audio("audio/sadness-in-roads-to-nowhere.mp3"); 5 | const clockTicking = new Audio("audio/clock-ticking-natural-room-verb.mp3"); 6 | 7 | bgAudio.loop = true; 8 | clockTicking.loop = true; 9 | 10 | function pressButtonPlay() { 11 | buttonPlayAudio.play(); 12 | } 13 | 14 | function pressButtonPause() { 15 | buttonPauseAudio.play(); 16 | } 17 | 18 | function bgAudioPlay() { 19 | bgAudio.play(); 20 | clockTicking.play(); 21 | } 22 | 23 | function bgAudioPause() { 24 | bgAudio.pause(); 25 | clockTicking.pause(); 26 | } 27 | 28 | return { 29 | pressButtonPlay, 30 | pressButtonPause, 31 | bgAudioPlay, 32 | bgAudioPause 33 | } 34 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('./time.css'); 2 | 3 | html * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | height: 100vh; 14 | background-color: black; 15 | } 16 | 17 | div { 18 | content: ''; 19 | width: 100px; 20 | height: 100px; 21 | background-color: blueviolet; 22 | border-radius: 50%; 23 | } 24 | 25 | div.clicked { 26 | background-color: black; 27 | } 28 | 29 | .body-change { 30 | background-color: blueviolet; 31 | } 32 | 33 | #circle { 34 | cursor: pointer; 35 | } -------------------------------------------------------------------------------- /time.css: -------------------------------------------------------------------------------- 1 | section { 2 | display: none; 3 | align-items: center; 4 | justify-content: center; 5 | } 6 | 7 | .ballEmpty { 8 | position: relative; 9 | width: 100px; 10 | height: 100px; 11 | border-radius: 50%; 12 | background: linear-gradient(180deg, rgb(168, 87, 245) 0%, rgb(138, 43, 226) 50%, rgb(49, 2, 94) 100%); 13 | overflow: hidden; 14 | } 15 | 16 | .ballSeconds, 17 | .ballMinutes, 18 | .ballHours { 19 | width: 100%; 20 | z-index: 1; 21 | overflow: hidden; 22 | background: linear-gradient(0, rgb(49, 2, 94), #000000); 23 | } 24 | 25 | p { 26 | position: absolute; 27 | align-items: center; 28 | width: 100px; 29 | height: 100px; 30 | z-index: 5; 31 | display: flex; 32 | width: 100%; 33 | } 34 | 35 | span { 36 | margin: 0 auto !important; 37 | font-size:3rem; 38 | color: white; 39 | text-shadow: 2px 4px 3px rgba(0,0,0,0.3); 40 | font-family: 'Oswald', sans-serif; 41 | } 42 | 43 | .dblclick { 44 | display:none; 45 | } 46 | 47 | .ballsActive { 48 | display: flex; 49 | gap: 10px; 50 | } 51 | 52 | -------------------------------------------------------------------------------- /time.js: -------------------------------------------------------------------------------- 1 | export function functionTime() { 2 | const clickCircle = document.querySelector('#circle'); 3 | 4 | const ballSeconds = document.querySelector('.ballSeconds'); 5 | const ballMinutes = document.querySelector('.ballMinutes'); 6 | const ballHours = document.querySelector('.ballHours'); 7 | 8 | const textSeconds = document.querySelector('.textSeconds'); 9 | const textMinutes = document.querySelector('.textMinutes'); 10 | const textHours = document.querySelector('.textHours'); 11 | 12 | const dateNow = new Date(); 13 | let hours = dateNow.getHours(); 14 | let minutes = dateNow.getMinutes(); 15 | let seconds = dateNow.getSeconds(); 16 | 17 | function StylesByHours() { 18 | let heightBall = (100 / 24) * (24 - hours); 19 | ballHours.style.height = `${heightBall}%`; 20 | textHours.innerText = hours.toString().padStart(2, '0'); 21 | 22 | if (hours > 23) { 23 | hours = 0; 24 | StylesByHours(); 25 | } 26 | } 27 | 28 | function StylesByMinutes() { 29 | let heightBall = (100 / 60) * (60 - minutes); 30 | ballMinutes.style.height = `${heightBall}%`; 31 | textMinutes.innerText = minutes.toString().padStart(2, '0'); 32 | 33 | if (minutes >= 59 && seconds == 0) { 34 | minutes = 0; 35 | hours++; 36 | StylesByMinutes(); 37 | StylesByHours(); 38 | } 39 | } 40 | 41 | function StylesBySeconds() { 42 | setInterval(function () { 43 | let heightBall = (100 / 60) * (60 - seconds); 44 | ballSeconds.style.height = `${heightBall}%`; 45 | if (seconds > 59) { 46 | seconds = 0; 47 | minutes++; 48 | StylesByMinutes(); 49 | } 50 | textSeconds.innerText = seconds.toString().padStart(2, '0'); 51 | seconds++; 52 | }, 1000); 53 | } 54 | 55 | StylesBySeconds(); 56 | StylesByMinutes(); 57 | StylesByHours(); 58 | } 59 | --------------------------------------------------------------------------------