Created
September 13, 2023 16:27
-
-
Save guiseek/78b40b2ee7275d83337cbf9cbeecbbd1 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <link rel="icon" type="image/svg+xml" href="/vite.svg" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Vite + TS</title> | |
| </head> | |
| <body> | |
| <figure id="figure"> | |
| <figcaption> | |
| Percentage of world population by continent | |
| </figcaption> | |
| <div id="buttons"></div> | |
| <svg width="100" height="100" id="chart"> | |
| <circle r="25" cx="50" cy="50" id="pie"/> | |
| </svg> | |
| </figure> | |
| <script type="module" src="/src/main.ts"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const continents: Record<string, number> = { | |
| asia: 1425893465, | |
| america: 336997624, | |
| oceania: 25921089, | |
| africa: 213401323, | |
| europe: 145102755, | |
| }; | |
| const total = Object.values(continents).reduce((p, c) => p + c, 0); | |
| for (const property in continents) { | |
| const button = document.createElement("button"); | |
| button.innerText = property; | |
| button.dataset.name = property; | |
| buttons.append(button); | |
| } | |
| buttons.onclick = (e) => { | |
| if (e.target != e.currentTarget) { | |
| setActive(e.target as HTMLElement); | |
| e.stopPropagation(); | |
| } | |
| }; | |
| const setPie = (name: string) => { | |
| const n = continents[name]; | |
| const percent = (n / total) * 100; | |
| pie.style.strokeDasharray = percent + " " + total; | |
| }; | |
| const setActive = <T extends HTMLElement>(el: T) => { | |
| for (const button of buttons.children) { | |
| button.classList.remove("active"); | |
| } | |
| el.classList.add("active"); | |
| setPie(el.dataset.name!); | |
| }; | |
| setPie("asia"); | |
| const [button] = buttons.children; | |
| setActive(button as HTMLButtonElement); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $primaryColor: #0074d9; | |
| circle { | |
| fill: #ddd; | |
| stroke: $primaryColor; | |
| stroke-width: 50; | |
| stroke-dasharray: 0 158; | |
| transition: stroke-dasharray .3s ease; | |
| } | |
| svg { | |
| margin: 0 auto; | |
| transform: rotate(-90deg); | |
| background: #ddd; | |
| border-radius: 50%; | |
| display: block; | |
| } | |
| #buttons { | |
| margin-bottom: 30px; | |
| } | |
| button { | |
| text-transform: capitalize; | |
| font-size: 13px; | |
| cursor: pointer; | |
| -webkit-appearance: none; | |
| border: none; | |
| margin-right: 5px; | |
| background-color: transparent; | |
| padding: 5px 10px; | |
| outline: none; | |
| border-radius: 2px; | |
| transition: background-color .1s ease, color .2s ease; | |
| &:last-of-type { | |
| margin-right: 0; | |
| } | |
| &.active { | |
| font-weight: 400; | |
| background-color: $primaryColor; | |
| color: white; | |
| } | |
| } | |
| figcaption { | |
| margin-bottom: 20px; | |
| font-size: 22px; | |
| font-weight: bold; | |
| text-align: center; | |
| } | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| body, html { | |
| height: 100%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment