{"id":19329094,"url":"https://github.com/theslladev/playground-web","last_synced_at":"2026-04-09T20:37:45.451Z","repository":{"id":44156543,"uuid":"313841764","full_name":"ThesllaDev/Playground-Web","owner":"ThesllaDev","description":"Projetos simples desenvolvidos junto aos estudos dos fundamentos de front-end, utilizando HTML, CSS e JavaScript de forma pura/vanilla, sem frameworks ou bibliotecas. Aborda tópicos como manipulação do DOM, Web APIs, eventos, drag and drop, arrays, objetos, funções, SVG, canvas, estrutura de repetições, formulários, entre outros.","archived":false,"fork":false,"pushed_at":"2023-09-26T17:07:45.000Z","size":76233,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-24T06:44:52.842Z","etag":null,"topics":["canvas","css","dom-manipulation","html","javascript","js","open-source","opensource","playground","sass","study-project","vanilla","web-api"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ThesllaDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-11-18T06:20:46.000Z","updated_at":"2024-09-02T16:23:05.000Z","dependencies_parsed_at":"2022-09-03T23:41:01.207Z","dependency_job_id":"faa85230-bf63-4f8a-96f5-670e04edd6d8","html_url":"https://github.com/ThesllaDev/Playground-Web","commit_stats":null,"previous_names":["theslladev/playground-web"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ThesllaDev/Playground-Web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThesllaDev%2FPlayground-Web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThesllaDev%2FPlayground-Web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThesllaDev%2FPlayground-Web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThesllaDev%2FPlayground-Web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ThesllaDev","download_url":"https://codeload.github.com/ThesllaDev/Playground-Web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThesllaDev%2FPlayground-Web/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265236742,"owners_count":23732493,"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":["canvas","css","dom-manipulation","html","javascript","js","open-source","opensource","playground","sass","study-project","vanilla","web-api"],"created_at":"2024-11-10T02:26:38.044Z","updated_at":"2026-04-09T20:37:40.413Z","avatar_url":"https://github.com/ThesllaDev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e Playground HTML | CSS | JavaScript \u003c/h1\u003e\n\u003cp align=\"center\"\u003e Repositório de vários projetos simples feitos para praticar, estudar e usar como referências.\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n\u003ch3\u003eAlgumas das tecnologias utilizadas no processo\u003c/h3\u003e\n  \n[![Open Source Love svg1](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/) ![](https://img.shields.io/static/v1?label=licence\u0026message=mit\u0026color=green\u0026style=for-the-badge) ![](https://img.shields.io/static/v1?label=Made%20with\u0026message=HTML5\u0026color=E34F26\u0026style=for-the-badge\u0026logo=html5) ![](https://img.shields.io/static/v1?label=Made%20with\u0026message=CSS3\u0026color=1572B6\u0026style=for-the-badge\u0026logo=css3) ![](https://img.shields.io/static/v1?label=Made%20with\u0026message=JavaScript\u0026color=F7DF1E\u0026style=for-the-badge\u0026logo=javascript) ![](https://img.shields.io/static/v1?label=Made%20with\u0026message=Markdown\u0026color=000\u0026style=for-the-badge\u0026logo=markdown) ![](https://img.shields.io/static/v1?label=made%20with\u0026message=sass\u0026color=CC6699\u0026style=for-the-badge\u0026logo=sass)\n\n\u003c/div\u003e\n\n---\n\n#### 📚 Conteúdos e referências que usei para aprender  \n\n[W3schools](https://www.w3schools.com) -\n[MDN Web Docs](https://developer.mozilla.org/pt-BR) - [Livro Lógica de Programação](https://www.casadocodigo.com.br/products/livro-programacao) - [ImersãoDev](https://imersao.dev/) - [Microsoft - Web Dev for Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)\n\n---\n\nÍndice:\n\n- [Calculadora de IMC \u003ca name=\"calculadora-de-imc\"\u003e\u003c/a\u003e](#calculadora-de-imc-)\n- [Certificard \u003ca name=\"certificard\"\u003e\u003c/a\u003e](#certificard-)\n- [Conversor de Ano-Luz \u003ca name=\"conversor-de-ano-luz\"\u003e\u003c/a\u003e](#conversor-de-ano-luz-)\n- [Evolua o Pokémon \u003ca name=\"evolua-o-pokemon\"\u003e\u003c/a\u003e](#evolua-o-pokémon-)\n- [Jogo de Adivinhação \u003ca name=\"jogo-de-adivinhacao\"\u003e\u003c/a\u003e](#jogo-de-adivinhação-)\n- [Jogo de Super Trunfo com Personagens da Marvel \u003ca name=\"jogo-super-trunfo\"\u003e\u003c/a\u003e](#jogo-de-super-trunfo-com-personagens-da-marvel-)\n- [Jogo de Tiro ao Alvo \u003ca name=\"jogo-de-tiro-ao-alvo\"\u003e\u003c/a\u003e](#jogo-de-tiro-ao-alvo-)\n- [Lista de Filmes \u003ca name=\"lista-de-filmes\"\u003e\u003c/a\u003e](#lista-de-filmes-)\n- [Relógio Canvas \u003ca name=\"relogio-canvas\"\u003e\u003c/a\u003e](#relógio-canvas-)\n- [Rolagem de dados \u003ca name=\"rolagem-de-dados\"\u003e\u003c/a\u003e](#rolagem-de-dados-)\n- [Tabela de Classificação da NBA \u003ca name=\"tabela-de-classificação\"\u003e\u003c/a\u003e](#tabela-de-classificação-da-nba-)\n- [Terrarium \u003ca name=\"terrarium\"\u003e\u003c/a\u003e](#terrarium-)\n- [Typing Game \u003ca name=\"typing-game\"\u003e\u003c/a\u003e](#typing-game-)\n  - [👷 Autor](#-autor)\n  - [📝 Licença](#-licença)\n\nVeja também meu [CODEPEN](https://codepen.io/theslladev/pens/) com vários outros projetos\n\n---\n\n## Calculadora de IMC \u003ca name=\"calculadora-de-imc\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ThesllaDev/Simple-Projects/blob/main/Calculadora-de-IMC/README-CALCULADORA-DE-IMC.md\" \u003e![](./Calculadora-de-IMC/assets/img/banner-calculadora-de-imc.gif)\u003c/a\u003e\n\n**\u003ca href=\"https://codepen.io/theslladev/full/yLVGBex\" target=\"_blank\"\u003eVeja o funcionando \u003c/a\u003e |\n[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Calculadora-de-IMC) |\n[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/blob/main/Calculadora-de-IMC/README-CALCULADORA-DE-IMC.md)**\n\n---\n\n## Certificard \u003ca name=\"certificard\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ThesllaDev/Simple-Projects/blob/main/Certificard/README-CERTIFICARD.md\" \u003e![](./Certificard/assets/img/banner-certificard.gif)\u003c/a\u003e\n\n**\u003ca href=\"https://codepen.io/theslladev/full/MWJoMGd\" target=\"_blank\"\u003eVeja o funcionando \u003c/a\u003e |\n[Código](https://github.com/ThesllaDev/Simple-Projects/blob/main/Certificard) |\n[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/blob/main/Certificard/README-CERTIFICARD.md)**\n\n---\n\n## Conversor de Ano-Luz \u003ca name=\"conversor-de-ano-luz\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ThesllaDev/Simple-Projects/tree/main/Conversor-da-Velocidade-da-Luz/README-CONVERSOR-DE-ANOS-LUZ.md\" \u003e![](./Conversor-da-Velocidade-da-Luz/assets/img/banner-conversor-de-anos-luz.gif)\u003c/a\u003e\n\n**\u003ca href=\"https://codepen.io/theslladev/full/XWpbrNo\" target=\"_blank\"\u003eVeja o funcionando \u003c/a\u003e | \n[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Conversor-da-Velocidade-da-Luz) | \n[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/tree/main/Conversor-da-Velocidade-da-Luz/README-CONVERSOR-DE-ANOS-LUZ.md)**\n\n---\n\n## Evolua o Pokémon \u003ca name=\"evolua-o-pokemon\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ThesllaDev/Simple-Projects/tree/main/Evolua-o-Pokemon/README-EVOLUA-O-POKEMON.md\" \u003e![](./Evolua-o-Pokemon/img/banner-evolua-o-pokemon.gif)\u003c/a\u003e\n\n**\u003ca href=\"https://codepen.io/theslladev/full/JjEYLNY\" target=\"_blank\"\u003eVeja o funcionando \u003c/a\u003e | \n[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Evolua-o-Pokemon) | \n[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/tree/main/Evolua-o-Pokemon/README-EVOLUA-O-POKEMON.md)**\n\n---\n\n## Jogo de Adivinhação \u003ca name=\"jogo-de-adivinhacao\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ThesllaDev/Simple-Projects/tree/main/Jogo-de-Advinhacao/README-JOGO-DE-ADVINHACAO.md\" \u003e![](./Jogo-de-Advinhacao/assets/img/banner-jogo-de-adivinhacao.gif)\u003c/a\u003e\n\n**\u003ca href=\"https://codepen.io/theslladev/full/qBRbEwY\" target=\"_blank\"\u003eVeja o funcionando \u003c/a\u003e | \n[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Jogo-de-Advinhacao) | \n[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/tree/main/Jogo-de-Advinhacao/README-JOGO-DE-ADVINHACAO.md)**\n\n---\n\n## Jogo de Super Trunfo com Personagens da Marvel \u003ca name=\"jogo-super-trunfo\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ThesllaDev/Simple-Projects/blob/main/Jogo-Super-Trunfo-Marvel/README-JOGO-SUPER-TRUNFO-MARVEL.md\" \u003e![](./Jogo-Super-Trunfo-Marvel/assets/img/banner-jogo-super-trunfo-marvel.gif)\u003c/a\u003e\n\n**\u003ca href=\"https://codepen.io/theslladev/full/ExZZQaB\" target=\"_blank\"\u003eVeja o funcionando \u003c/a\u003e | \n[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Jogo-Super-Trunfo-Marvel) | \n[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/blob/main/Jogo-Super-Trunfo-Marvel/README-JOGO-SUPER-TRUNFO-MARVEL.md)**\n\n---\n\n## Jogo de Tiro ao Alvo \u003ca name=\"jogo-de-tiro-ao-alvo\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ThesllaDev/Simple-Projects/tree/main/Jogo-de-Tiro-ao-Alvo/README-JOGO-DE-TIRO-AO-ALVO.md\" \u003e![](./Jogo-de-Tiro-ao-Alvo/assets/img/banner-jogo-de-tiro-ao-alvo.gif)\u003c/a\u003e\n\n**\u003ca href=\"https://codepen.io/theslladev/full/BapBvbw\" target=\"_blank\"\u003eVeja o funcionando \u003c/a\u003e | \n[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Jogo-de-Tiro-ao-Alvo) | \n[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/tree/main/Jogo-de-Tiro-ao-Alvo/README-JOGO-DE-TIRO-AO-ALVO.md)**\n\n---\n\n## Lista de Filmes \u003ca name=\"lista-de-filmes\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ThesllaDev/Simple-Projects/tree/main/Lista-de-Filmes/README-LISTA-DE-FILMES.md\" \u003e![](./Lista-de-Filmes/assets/img/banner-lista-de-filmes.gif)\u003c/a\u003e\n\n**\u003ca href=\"https://codepen.io/theslladev/full/eYgZKXy\" target=\"_blank\"\u003eVeja o funcionando \u003c/a\u003e | \n[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Lista-de-Filmes) | \n[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/tree/main/Lista-de-Filmes/README-LISTA-DE-FILMES.md)**\n\n---\n\n## Relógio Canvas \u003ca name=\"relogio-canvas\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ThesllaDev/Simple-Projects/blob/main/Relogio-Canvas/README-RELOGIO-CANVAS.md\" \u003e![](./Relogio-Canvas/assets/img/banner-relogio-canvas.gif)\u003c/a\u003e\n\n**\u003ca href=\"https://codepen.io/theslladev/full/RwoqpyW\" target=\"_blank\"\u003eVeja o funcionando \u003c/a\u003e | \n[Código](https://github.com/ThesllaDev/Simple-Projects/blob/main/Relogio-Canvas) | \n[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/blob/main/Relogio-Canvas/README-RELOGIO-CANVAS.md)**\n\n---\n\n## Rolagem de dados \u003ca name=\"rolagem-de-dados\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ThesllaDev/Simple-Projects/blob/main/Rolagem-de-Dados/README-ROLAGEM-DE-DADOS.md\" \u003e![](./Rolagem-de-Dados/assets/img/banner-rolagem-de-dados.gif)\u003c/a\u003e\n\n**\u003ca href=\"https://codepen.io/theslladev/full/NWbZabZ\" target=\"_blank\"\u003eVeja o funcionando \u003c/a\u003e | \n[Código](https://github.com/ThesllaDev/Simple-Projects/blob/main/Rolagem-de-Dados) | \n[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/blob/main/Rolagem-de-Dados/README-ROLAGEM-DE-DADOS.md)**\n\n---\n\n## Tabela de Classificação da NBA \u003ca name=\"tabela-de-classificação\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ThesllaDev/Simple-Projects/tree/main/Tabela-de-Classificacao/README-TABELA-DE-CLASSIFICACAO.md\" \u003e![](./Tabela-de-Classificacao/assets/img/banner-tabela-de-classificacao.gif)\u003c/a\u003e\n\n**\u003ca href=\"https://codepen.io/theslladev/full/XWpjYxp\" target=\"_blank\"\u003eVeja o funcionando \u003c/a\u003e | \n[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Tabela-de-Classificacao) | \n[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/tree/main/Tabela-de-Classificacao/README-TABELA-DE-CLASSIFICACAO.md)**\n\n---\n\n## Terrarium \u003ca name=\"terrarium\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ThesllaDev/Simple-Projects/blob/main/Terrarium/README-TERRARIUM.md\" \u003e![](./Terrarium/assets/img/banner-terrarium.gif)\u003c/a\u003e\n\n**\u003ca href=\"https://codepen.io/theslladev/full/yLMoZmd\" target=\"_blank\"\u003eVeja o funcionando \u003c/a\u003e | \n[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Terrarium) | \n[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/blob/main/Terrarium/README-TERRARIUM.md)**\n\n---\n\n## Typing Game \u003ca name=\"typing-game\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/ThesllaDev/Simple-Projects/blob/main/Typing-Game/README-TYPING-GAME.md\" \u003e![](./Typing-Game/assets/img/banner-typing-game.gif)\u003c/a\u003e\n\n**\u003ca href=\"https://codepen.io/theslladev/full/oNZJMzj\" target=\"_blank\"\u003eVeja o funcionando \u003c/a\u003e | \n[Código](https://github.com/ThesllaDev/Simple-Projects/tree/main/Typing-Game) | \n[Mais detalhes](https://github.com/ThesllaDev/Simple-Projects/blob/main/Typing-Game/README-TYPING-GAME.md)**\n\n---\n\n### 👷 Autor\n\n\u003ca href=\"https://github.com/ThesllaDev\"\u003e\n \u003cimg style=\"border-radius:50%;\" src=\"https://avatars2.githubusercontent.com/u/61105850?v=4\" width=\"100px;\" alt=\"Imagem de perfil\"/\u003e\n \u003cbr /\u003e\n \u003csub\u003e\u003cb\u003eThalles Augusto\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\n\n\nFeito com ❤️ por Thalles Augusto 👋🏽 Entre em contato! \u003cbr/\u003e\n [![Linkedin Badge](https://img.shields.io/badge/-Thalles-blue?style=flat-square\u0026logo=Linkedin\u0026logoColor=white\u0026link=https://www.linkedin.com/in/thalles-augusto/)](https://www.linkedin.com/in/thalles-augusto/) \n[![Gmail Badge](https://img.shields.io/badge/-ThesllaDev@gmail.com-c14438?style=flat-square\u0026logo=Gmail\u0026logoColor=white\u0026link=mailto:ThesllaDev@gmail.com)](mailto:ThesllaDev@gmail.com)\n\n---\n\n### 📝 Licença\n\nEste projeto está licenciado nos termos da licença [MIT](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheslladev%2Fplayground-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheslladev%2Fplayground-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheslladev%2Fplayground-web/lists"}