{"id":22500006,"url":"https://github.com/ramonsouzaaa/relogiojs","last_synced_at":"2026-05-08T14:40:07.379Z","repository":{"id":169414989,"uuid":"546981775","full_name":"RamonSouzaaa/relogiojs","owner":"RamonSouzaaa","description":"Relógio JS","archived":false,"fork":false,"pushed_at":"2023-01-22T17:48:11.000Z","size":36,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T22:31:45.275Z","etag":null,"topics":["css3","html5","javascript","vercel"],"latest_commit_sha":null,"homepage":"https://relogiojs-rose.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RamonSouzaaa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-07T00:46:00.000Z","updated_at":"2023-01-22T17:47:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"8c958d3d-fb2c-433d-a328-e418a62b75e8","html_url":"https://github.com/RamonSouzaaa/relogiojs","commit_stats":null,"previous_names":["ramonsouzaaa/relogiojs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RamonSouzaaa/relogiojs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RamonSouzaaa%2Frelogiojs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RamonSouzaaa%2Frelogiojs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RamonSouzaaa%2Frelogiojs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RamonSouzaaa%2Frelogiojs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RamonSouzaaa","download_url":"https://codeload.github.com/RamonSouzaaa/relogiojs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RamonSouzaaa%2Frelogiojs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264868557,"owners_count":23676091,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","html5","javascript","vercel"],"created_at":"2024-12-06T22:17:51.413Z","updated_at":"2026-05-08T14:40:02.346Z","avatar_url":"https://github.com/RamonSouzaaa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Relógio 🕓\n\nOlá tudo bem?\n\nNeste projeto fui desafiado por mim mesmo, como seria criar um relógio digital e analógico\nutilizando HTML, CSS, e JavaScript?\n\n[Link do projeto](https://relogiojs-rose.vercel.app/)\n\n![Projeto](https://github.com/RamonSouzaaa/relogiojs/blob/master/projeto.PNG)\n\n# Relógio Analógico\n\nPrimeira etapa foi pensar como funcionária a rotação dos ponteiros, pesquisando um pouco e \ncom mais alguns conhecimento agregados encontrei\na solução utilizando `transform-origin: bottom` e `transform: rotate()`. Após entender como\nessas duas propriedades funcionam foi hora de pensar qual o valor em graus equivalente a cada \ncasa do relógio, com isso primeiro pensei qual o espaço entre um grau e outro quando passado para \na próxima casa quando iniciado no grau 0.\n\n#\n\nUtilizando essa formúla abaixo consegui entender que o ponteiro dos segundos e minutos deveriam obter um salto de `6 deg`\nentre as casas, dessa forma inicia-se `0 deg` e segue `6 deg, 12 deg, 18 deg..` até `360 deg` quanto volta para `0 deg` novamente.\n`let saltoGrauMinutoSegundo = (360/60)`\nDiferente dos segundos utilizei `12` equivalente a quantidade de horas do relógio para descobrir o valor em graus que deve ser realizado entre uma casa de hora e outra, \nsendo assim obtive o valor `30 deg`.\n```\nlet saltoGrauHora = (360/12)\n```\nDepois de obter os saltos entre minutos segundos e horas e os valores em graus faltou criar os contadores para cada item,\npara que dessa forma pudesse incrementar os minutos, segundos e horas automáticamente atravez do `setInterval`.\n```\nfunction getGrausSegundoMinuto(valor){\n   return (360 * valor) / 60\n}\n\nfunction getGrausHora(valor) {\n    if(valor \u003e 12){\n        valor = 12 - (24 - valor)\n    }\n\n    return (360 * valor) / 12\n}\nlet data = new Date()\nlet contadorGrausSegundo = getGrausSegundoMinuto(data.getSeconds())\nlet contadorGrausMinuto = getGrausSegundoMinuto(data.getMinutes())\nlet contadorGrausHora = getGrausHora(data.getHours())\n```\nAgora com todas as informações necessárias para criar o relógio foi apenas criar o controle de visualização atualizando as\ninformações dos ponteiros de segundo em segundo.\n```\nsetInterval(() =\u003e {\n..\n..\n}, 1000)\n```\nPara cada ponteiro (Hora, Minuto e Segundo) foi manipulado atualizando o valor de rotação alterando a propriedade transform do elemento\n```\ndocument.querySelector('.ponteiroSegundo').style.transform = `rotate(${contadorGrausSegundo}deg)`\ndocument.querySelector('.ponteiroMinuto').style.transform = `rotate(${contadorGrausSegundo}deg)`\ndocument.querySelector('.ponteiroHora').style.transform = `rotate(${contadorGrausSegundo}deg)`\n```\nE por fim para todos os ponteiros foi feito a validação quando obtive o valor em graus `360` o valor dos contadores de graus seria `0` para \nque pudesse realizar a rotação novamente no sentido horário.\n```\nif(contadorGrausSegundo === 360){\n    contadorGrausSegundo = 0\n}\n\nif(contadorGrausMinuto === 360){\n    contadorGrausMinuto = 0\n}\n\nif(contadorGrausHora === 360){\n    contadorGrausHora = 0\n}\n\n```\n# Relógio Digital\n\nDiferente do relógio análógico foi muito mais tranquilo de pensar na lógica para o relógio digital, foi iniciado\ntrês contadores de hora, minuto e segundo obtendo o valores de hora atual do servidor e incluídos no `setInterval` \ne cada interação o valores de hora, minuto e segundo são obtidos.\n```\nlet data = new Date()\nlet contadorSegundo = data.getSeconds()\nlet contadorMinuto = data.getMinutes()\nlet contadorHora = data.getHours()\n```\n\nPor fim os valores dos contadores são atualizados nos elementos do relógio digital\n```\ndocument.querySelector('.marcadorSegundo').innerHTML = formatDuasCasas(contadorSegundo)\ndocument.querySelector('.marcadorMinuto').innerHTML = formatDuasCasas(contadorMinuto)\ndocument.querySelector('.marcadorHora').innerHTML = formatDuasCasas(contadorHora)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Framonsouzaaa%2Frelogiojs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Framonsouzaaa%2Frelogiojs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Framonsouzaaa%2Frelogiojs/lists"}