{"id":729,"date":"2024-11-28T20:20:28","date_gmt":"2024-11-28T23:20:28","guid":{"rendered":"https:\/\/urutaudev.com.br\/?p=729"},"modified":"2024-11-28T20:28:44","modified_gmt":"2024-11-28T23:28:44","slug":"cripto-dashboard-em-javascript","status":"publish","type":"post","link":"https:\/\/urutaudev.com.br\/index.php\/2024\/11\/28\/cripto-dashboard-em-javascript\/","title":{"rendered":"Cripto Dashboard em Javascript"},"content":{"rendered":"

<\/h1>\n
\"Cripto
Cripto Dashboard em Javascript<\/figcaption><\/figure>\n

 <\/p>\n

 <\/p>\n

Introdu\u00e7\u00e3o<\/span><\/h2>\n

Neste tutorial, voc\u00ea aprender\u00e1 a criar um Cripto Dashboard utilizando apenas HTML, CSS e JavaScript, sem a necessidade de bibliotecas externas.<\/span><\/p>\n

Este guia pr\u00e1tico ensina como visualizar informa\u00e7\u00f5es sobre a cota\u00e7\u00e3o de criptomoedas de forma simples e eficiente. Utilizaremos a API do Mercado Bitcoin para consultar e exibir os dados no dashboard.<\/span><\/p>\n

 <\/p>\n

Cripto Dashboard em Javascript<\/span><\/h3>\n

 <\/p>\n

Primeiro passo voc\u00ea dever\u00e1 criar a estrutura da p\u00e1gina, para isso crie um arquivo html contendo\u00a0 o seguinte c\u00f3digo :<\/span><\/strong><\/span><\/p>\n

 <\/p>\n

\n
<html lang=\"pt-BR\"><\/code><\/div>\n
<head><\/code><\/div>\n
\u00a0 \u00a0 <meta charset=\"UTF-8\"><\/code><\/div>\n
\u00a0 \u00a0 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code><\/div>\n
\u00a0 \u00a0 <link rel=\"stylesheet\" href=\"style.css\"><\/code><\/div>\n
\u00a0 \u00a0 <title>Cripto DashBoard<\/title><\/code><\/div>\n
<\/head><\/code><\/div>\n
<body><\/code><\/div>\n
\u00a0 \u00a0 <script><\/code><\/div>\n
\u00a0 \u00a0 <\/script><\/code><\/div>\n
<\/body><\/code><\/div>\n
<\/html><\/code><\/div>\n<\/div>\n

 <\/p>\n

Logo ap\u00f3s crio a estrutura do conversor:<\/span><\/strong><\/span><\/p>\n

 <\/p>\n

\n
\u00a0<div class=\"container\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"header\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"title-container\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" x=\"0px\" y=\"0px\" stroke=\"currentColor\" fill=\"currentColor\"<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 width=\"1em\" height=\"1em\" viewBox=\"0 0 30 30\" alt=\"\u00cdcone de Criptomoeda\" ><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <path<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 d=\"M 15 3 C 8.373 3 3 8.373 3 15 C 3 21.627 8.373 27 15 27 C 21.627 27 27 21.627 27 15 C 27 8.373 21.627 3 15 3 z M 14 8 L 16 8 L 16 10.007812 C 17.86 10.050812 18.970703 10.984141 18.970703 12.494141 C 18.970703 13.554141 18.188109 14.476906 17.162109 14.628906 L 17.162109 14.753906 C 18.486109 14.850906 19.449219 15.849672 19.449219 17.138672 C 19.449219 18.888672 18.129 19.995047 16 19.998047 L 16 22 L 14 22 L 14 20 L 11.5 20 L 11.5 10 L 14 10 L 14 8 z M 13.59375 11.601562 L 13.59375 14.144531 L 15.166016 14.144531 C 16.296016 14.144531 16.912109 13.680953 16.912109 12.876953 C 16.912109 12.079953 16.337844 11.601563 15.339844 11.601562 L 13.59375 11.601562 z M 13.59375 15.558594 L 13.59375 18.398438 L 15.457031 18.398438 C 16.663031 18.398438 17.314453 17.892031 17.314453 16.957031 C 17.314453 16.042031 16.641203 15.558594 15.408203 15.558594 L 13.59375 15.558594 z\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/path><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/svg><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <h2><span>C<\/span>ripto <span>D<\/span>ashboard<\/h2><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"search-input\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"text\" id=\"filter-input\" placeholder=\"Selecione uma Cripto Moeda. ex: Bitcoin\" \/><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"select-dropdown\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <ul id=\"optionsList\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <li>Bitcoin<\/li><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <li>Ethereum<\/li><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <li>Ripple<\/li><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/ul><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button id=\"searchButton\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 512 512\" height=\"1em\"<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 width=\"1em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" alt=\"\u00cdcone de search\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <path<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 d=\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/path><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/svg><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/button><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"dashBoard\" id=\"dashBoard\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div id=\"loading\" style=\"display: none;\">Carregando...<\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"card\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"css-text-mask mask-one\">Bitcoin<\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <p>Ativo Selecionado<\/p><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"card\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"css-text-mask mask-two\">BTC<\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <p>Ticker<\/p><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"card\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"css-text-mask mask-three\">385M<\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <p>\u00daltima cotaca\u00e7\u00e3o em (R$)<\/p><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"card\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"css-text-mask mask-three\">Cripto<\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <p>Segmento <\/p><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"card\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"css-text-mask mask-four\">+0,82%<\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <p>Varia\u00e7\u00e3o em 24H<\/p><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"card\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"css-text-mask mask-one\">6,9B<\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <p>Capitaliza\u00e7\u00e3o de mercado<\/p><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 <div id=\"loadingModal\" class=\"modal\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"modal-content\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <div class=\"loader\"><\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <p>Carregando...<\/p><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 <script src=\"main.js\"><\/script><\/code><\/div>\n<\/div>\n

 <\/p>\n

No c\u00f3digo acima crio a interface do DashBoard Cripto.<\/span>
\nAdicionei um campo para entrada de um n\u00famero e um bot\u00e3o para executar a consulta a api de cota\u00e7\u00e3o da moeda e por fim adicionei uma \u00e1rea para exibir o resultado retornado pela api. <\/span><\/p>\n

 <\/p>\n

Depois adiciono o css respons\u00e1vel pela estiliza\u00e7\u00e3o da p\u00e1gina :<\/span><\/strong><\/span><\/p>\n

 <\/p>\n

\n
*,<\/code><\/div>\n
*:after,<\/code><\/div>\n
*:before {<\/code><\/div>\n
\u00a0 margin: 0;<\/code><\/div>\n
\u00a0 padding: 0;<\/code><\/div>\n
\u00a0 border: 0;<\/code><\/div>\n
\u00a0 font-size: 100%;<\/code><\/div>\n
\u00a0 vertical-align: baseline;<\/code><\/div>\n
\u00a0 text-decoration: none;<\/code><\/div>\n
}<\/code><\/div>\n
:root {<\/code><\/div>\n
\u00a0 --white: #ffffff;<\/code><\/div>\n
\u00a0 --dark: rgb(40, 44, 51);<\/code><\/div>\n
\u00a0 --green: rgb(166, 247, 80);<\/code><\/div>\n
\u00a0 --green2: rgb(142, 211, 69);<\/code><\/div>\n
\u00a0 --gray: rgb(85, 89, 95);<\/code><\/div>\n
\u00a0 --orange: rgb(255, 216, 98);<\/code><\/div>\n
\u00a0 --red: #f46663;<\/code><\/div>\n
\u00a0 --contorno: rgba(255, 255, 255, 0.7);<\/code><\/div>\n
}<\/code><\/div>\n
body {<\/code><\/div>\n
\u00a0 height: 100vh;<\/code><\/div>\n
\u00a0 width: 100vw;<\/code><\/div>\n
\u00a0 display: flex;<\/code><\/div>\n
\u00a0 align-items: center;<\/code><\/div>\n
\u00a0 justify-content: center;<\/code><\/div>\n
\u00a0 background-color: #121f32;<\/code><\/div>\n
\u00a0 color: var(--white);<\/code><\/div>\n
\u00a0 font-family: basic-sans, sans-serif !important;<\/code><\/div>\n
}<\/code><\/div>\n
.container {<\/code><\/div>\n
\u00a0 width: calc(100% - 2rem);<\/code><\/div>\n
\u00a0 padding: 1rem;<\/code><\/div>\n
\u00a0 display: flex;<\/code><\/div>\n
\u00a0 flex-direction: column;<\/code><\/div>\n
\u00a0 align-items: center;<\/code><\/div>\n
\u00a0 justify-content: center;<\/code><\/div>\n
}<\/code><\/div>\n
.header {<\/code><\/div>\n
\u00a0 width: calc(80% - 2rem);<\/code><\/div>\n
\u00a0 padding: 1rem;<\/code><\/div>\n
\u00a0 display: flex;<\/code><\/div>\n
\u00a0 flex-direction: row;<\/code><\/div>\n
\u00a0 align-items: center;<\/code><\/div>\n
\u00a0 justify-content: space-between;<\/code><\/div>\n
}<\/code><\/div>\n
.title-container {<\/code><\/div>\n
\u00a0 display: flex;<\/code><\/div>\n
\u00a0 flex-direction: row;<\/code><\/div>\n
\u00a0 align-items: end;<\/code><\/div>\n
\u00a0 gap: 0.5rem;<\/code><\/div>\n
}<\/code><\/div>\n
.title-container > svg {<\/code><\/div>\n
\u00a0 width: 5rem;<\/code><\/div>\n
\u00a0 height: 5rem;<\/code><\/div>\n
\u00a0 fill: var(--dark);<\/code><\/div>\n
\u00a0 stroke: var(--green);<\/code><\/div>\n
}<\/code><\/div>\n
.title-container h2 {<\/code><\/div>\n
\u00a0 font-size: 3rem;<\/code><\/div>\n
\u00a0 line-height: 4rem;<\/code><\/div>\n
\u00a0 font-weight: 700;<\/code><\/div>\n
\u00a0 font-style: normal;<\/code><\/div>\n
\u00a0 color: var(--white);<\/code><\/div>\n
}<\/code><\/div>\n
.title-container h2 > span {<\/code><\/div>\n
\u00a0 font-size: 3.8rem;<\/code><\/div>\n
\u00a0 line-height: 4rem;<\/code><\/div>\n
\u00a0 color: var(--green);<\/code><\/div>\n
}<\/code><\/div>\n
.search-input {<\/code><\/div>\n
\u00a0 min-width: 30%;<\/code><\/div>\n
\u00a0 display: flex;<\/code><\/div>\n
\u00a0 gap: 0.5rem;<\/code><\/div>\n
\u00a0 align-items: center;<\/code><\/div>\n
\u00a0 position: relative;<\/code><\/div>\n
\u00a0 padding: 0.5rem;<\/code><\/div>\n
\u00a0 background: var(--dark);<\/code><\/div>\n
\u00a0 border: 1px solid var(--gray);<\/code><\/div>\n
\u00a0 border-radius: 4px;<\/code><\/div>\n
}<\/code><\/div>\n
.search-input input {<\/code><\/div>\n
\u00a0 width: 100%;<\/code><\/div>\n
\u00a0 font-size: 1rem;<\/code><\/div>\n
\u00a0 color: var(--green);<\/code><\/div>\n
\u00a0 position: relative;<\/code><\/div>\n
\u00a0 outline: none;<\/code><\/div>\n
\u00a0 padding: 0.5rem 1rem;<\/code><\/div>\n
\u00a0 background: var(--dark);<\/code><\/div>\n
\u00a0 border: 1px solid transparent;<\/code><\/div>\n
}<\/code><\/div>\n
.search-input .select-dropdown {<\/code><\/div>\n
\u00a0 position: absolute;<\/code><\/div>\n
\u00a0 top: 50px;<\/code><\/div>\n
\u00a0 left: 0;<\/code><\/div>\n
\u00a0 background: var(--dark);<\/code><\/div>\n
\u00a0 border: 1px solid var(--gray);<\/code><\/div>\n
\u00a0 color: var(--green);<\/code><\/div>\n
\u00a0 width: 250px;<\/code><\/div>\n
\u00a0 z-index: 1;<\/code><\/div>\n
\u00a0 display: none;<\/code><\/div>\n
}<\/code><\/div>\n
.search-input .select-dropdown ul {<\/code><\/div>\n
\u00a0 list-style-type: none;<\/code><\/div>\n
\u00a0 padding: 0;<\/code><\/div>\n
\u00a0 margin: 0;<\/code><\/div>\n
}<\/code><\/div>\n
.search-input .select-dropdown li {<\/code><\/div>\n
\u00a0 padding: 0.5rem;<\/code><\/div>\n
\u00a0 cursor: pointer;<\/code><\/div>\n
}<\/code><\/div>\n
.search-input .select-dropdown li:hover {<\/code><\/div>\n
\u00a0 background-color: var(--green);<\/code><\/div>\n
\u00a0 color: var(--dark);<\/code><\/div>\n
}<\/code><\/div>\n
.search-input button {<\/code><\/div>\n
\u00a0 padding: 0.8rem;<\/code><\/div>\n
\u00a0 display: flex;<\/code><\/div>\n
\u00a0 align-items: center;<\/code><\/div>\n
\u00a0 justify-content: center;<\/code><\/div>\n
\u00a0 border-radius: 4px;<\/code><\/div>\n
\u00a0 text-decoration: none;<\/code><\/div>\n
\u00a0 background-color: var(--green);<\/code><\/div>\n
}<\/code><\/div>\n
.search-input button:hover {<\/code><\/div>\n
\u00a0 background-color: var(--green2);<\/code><\/div>\n
\u00a0 scale: 0.9;<\/code><\/div>\n
}<\/code><\/div>\n
.search-input button > svg {<\/code><\/div>\n
\u00a0 font-size: 1rem;<\/code><\/div>\n
\u00a0 fill: var(--gray);<\/code><\/div>\n
}<\/code><\/div>\n
.dashBoard {<\/code><\/div>\n
\u00a0 width: calc(80% - 2rem);<\/code><\/div>\n
\u00a0 padding: 1rem;<\/code><\/div>\n
\u00a0 display: grid;<\/code><\/div>\n
\u00a0 grid-template-columns: repeat(3, 1fr);<\/code><\/div>\n
\u00a0 gap: 1rem;<\/code><\/div>\n
}<\/code><\/div>\n
.card {<\/code><\/div>\n
\u00a0 display: flex;<\/code><\/div>\n
\u00a0 flex-direction: column;<\/code><\/div>\n
\u00a0 gap: 0.3rem;<\/code><\/div>\n
\u00a0 padding: 0.5rem;<\/code><\/div>\n
}<\/code><\/div>\n
.card p {<\/code><\/div>\n
\u00a0 font-size: 0.9rem;<\/code><\/div>\n
\u00a0 line-height: 1rem;<\/code><\/div>\n
\u00a0 font-weight: 600;<\/code><\/div>\n
\u00a0 letter-spacing: 0.0605rem;<\/code><\/div>\n
\u00a0 color: var(--orange);<\/code><\/div>\n
}<\/code><\/div>\n
.css-text-mask {<\/code><\/div>\n
\u00a0 text-align: left;<\/code><\/div>\n
\u00a0 font-family: basic-sans, sans-serif;<\/code><\/div>\n
\u00a0 font-size: 5rem;<\/code><\/div>\n
\u00a0 line-height: 5rem;<\/code><\/div>\n
\u00a0 font-weight: 800;<\/code><\/div>\n
\u00a0 background-position: 0px 0px;<\/code><\/div>\n
\u00a0 animation: animatedBackground 60s linear infinite normal;<\/code><\/div>\n
\u00a0 background-clip: text;<\/code><\/div>\n
\u00a0 -webkit-text-fill-color: #0000;<\/code><\/div>\n
\u00a0 background-size: 50%;<\/code><\/div>\n
\u00a0 -webkit-text-stroke-width: 1px;<\/code><\/div>\n
\u00a0 -webkit-text-stroke-color: #ffffff;<\/code><\/div>\n
}<\/code><\/div>\n
.css-text-mask {<\/code><\/div>\n
\u00a0 white-space: nowrap;<\/code><\/div>\n
\u00a0 overflow: hidden;<\/code><\/div>\n
\u00a0 text-overflow: ellipsis;<\/code><\/div>\n
}<\/code><\/div>\n
.mask-one {<\/code><\/div>\n
\u00a0 background-image: url(cripto-azul.jpg);<\/code><\/div>\n
}<\/code><\/div>\n
.mask-two {<\/code><\/div>\n
\u00a0 background-image: url(cripto-dourado.jpg);<\/code><\/div>\n
}<\/code><\/div>\n
.mask-three {<\/code><\/div>\n
\u00a0 background-image: url(cripto-verde.webp);<\/code><\/div>\n
\u00a0 text-transform: lowercase;<\/code><\/div>\n
}<\/code><\/div>\n
.mask-four {<\/code><\/div>\n
\u00a0 background-image: url(cripto-roxo.webp);<\/code><\/div>\n
}<\/code><\/div>\n
.modal {<\/code><\/div>\n
\u00a0 display: none;<\/code><\/div>\n
\u00a0 position: fixed;<\/code><\/div>\n
\u00a0 top: 0;<\/code><\/div>\n
\u00a0 left: 0;<\/code><\/div>\n
\u00a0 width: 100%;<\/code><\/div>\n
\u00a0 height: 100%;<\/code><\/div>\n
\u00a0 background-color: rgba(0, 0, 0, 0.5);<\/code><\/div>\n
\u00a0 justify-content: center;<\/code><\/div>\n
\u00a0 align-items: center;<\/code><\/div>\n
}<\/code><\/div>\n
.modal-content {<\/code><\/div>\n
\u00a0 padding: 1rem;<\/code><\/div>\n
\u00a0 display: flex;<\/code><\/div>\n
\u00a0 flex-direction: column;<\/code><\/div>\n
\u00a0 align-items: center;<\/code><\/div>\n
\u00a0 gap: 0.4rem;<\/code><\/div>\n
\u00a0 border: 2px solid var(--gray);<\/code><\/div>\n
\u00a0 border-radius: 4px;<\/code><\/div>\n
\u00a0 background: var(--dark);<\/code><\/div>\n
\u00a0 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);<\/code><\/div>\n
\u00a0 color: var(--green);<\/code><\/div>\n
\u00a0 font-size: 0.8rem;<\/code><\/div>\n
\u00a0 font-weight: 600;<\/code><\/div>\n
\u00a0 letter-spacing: 0.125rem;<\/code><\/div>\n
}<\/code><\/div>\n
.loader {<\/code><\/div>\n
\u00a0 border: 8px solid var(--gray);<\/code><\/div>\n
\u00a0 border-top: 8px solid var(--green);<\/code><\/div>\n
\u00a0 border-radius: 50%;<\/code><\/div>\n
\u00a0 width: 3rem;<\/code><\/div>\n
\u00a0 height: 3rem;<\/code><\/div>\n
\u00a0 animation: loader-spin 1s linear infinite;<\/code><\/div>\n
}<\/code><\/div>\n
@keyframes loader-spin {<\/code><\/div>\n
\u00a0 0% {<\/code><\/div>\n
\u00a0 \u00a0 transform: rotate(0deg);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 100% {<\/code><\/div>\n
\u00a0 \u00a0 transform: rotate(360deg);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
@keyframes animatedBackground {<\/code><\/div>\n
\u00a0 0% {<\/code><\/div>\n
\u00a0 \u00a0 background-position: 0 0;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 100% {<\/code><\/div>\n
\u00a0 \u00a0 background-position: 500px 0;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
@keyframes float {<\/code><\/div>\n
\u00a0 0% {<\/code><\/div>\n
\u00a0 \u00a0 transform: translateY(0);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 50% {<\/code><\/div>\n
\u00a0 \u00a0 transform: translateY(-10px); \/* Move para cima *\/<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 100% {<\/code><\/div>\n
\u00a0 \u00a0 transform: translateY(0);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
@media (max-width: 1800px) {<\/code><\/div>\n
\u00a0 .css-text-mask {<\/code><\/div>\n
\u00a0 \u00a0 font-size: 4.2rem;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
@media (max-width: 1020px) {<\/code><\/div>\n
\u00a0 .css-text-mask {<\/code><\/div>\n
\u00a0 \u00a0 font-size: 3rem;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
@media (max-width: 768px) {<\/code><\/div>\n
\u00a0 .css-text-mask {<\/code><\/div>\n
\u00a0 \u00a0 font-size: 1.2rem;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
@media (max-width: 480px) {<\/code><\/div>\n
\u00a0 .css-text-mask {<\/code><\/div>\n
\u00a0 \u00a0 font-size: 1rem;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n

 <\/p>\n

 <\/p>\n

Por ultimo adiciono o script\u00a0 que ir\u00e1 obter a cota\u00e7\u00e3o da moeda:<\/span><\/strong><\/span><\/p>\n

 <\/p>\n

\n
const input = document.getElementById(\"filter-input\");<\/code><\/div>\n
const dropdown = document.querySelector(\".select-dropdown\");<\/code><\/div>\n
const optionsList = document.getElementById(\"optionsList\");<\/code><\/div>\n
const searchButton = document.getElementById(\"searchButton\");<\/code><\/div>\n
const dashBoard = document.getElementById(\"dashBoard\");<\/code><\/div>\n
const loadingModal = document.getElementById(\"loadingModal\");<\/code><\/div>\n
let selectedCripto = null;<\/code><\/div>\n
const optionsCripto = [<\/code><\/div>\n
\u00a0 { label: \"Bitcoin\", value: \"BTC\" },<\/code><\/div>\n
\u00a0 { label: \"Ethereum\", value: \"ETH\" },<\/code><\/div>\n
\u00a0 { label: \"Litecoin\", value: \"LTC\" },<\/code><\/div>\n
\u00a0 { label: \"Ripple\", value: \"XRP\" },<\/code><\/div>\n
\u00a0 { label: \"Cardano\", value: \"ADA\" },<\/code><\/div>\n
];<\/code><\/div>\n
function filterOptions() {<\/code><\/div>\n
\u00a0 const filter = input.value.toLowerCase();<\/code><\/div>\n
\u00a0 const options = optionsList.getElementsByTagName(\"li\");<\/code><\/div>\n
\u00a0 let hasVisibleOption = false;<\/code><\/div>\n
\u00a0 Array.from(options).forEach((option) => {<\/code><\/div>\n
\u00a0 \u00a0 const optionText = option.textContent || option.innerText;<\/code><\/div>\n
\u00a0 \u00a0 if (optionText.toLowerCase().includes(filter)) {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 option.style.display = \"\";<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 hasVisibleOption = true;<\/code><\/div>\n
\u00a0 \u00a0 } else {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 option.style.display = \"none\";<\/code><\/div>\n
\u00a0 \u00a0 }<\/code><\/div>\n
\u00a0 });<\/code><\/div>\n
\u00a0 toggleDropdown(hasVisibleOption);<\/code><\/div>\n
}<\/code><\/div>\n
function selectOption(optionText, optionValue) {<\/code><\/div>\n
\u00a0 input.value = optionText;<\/code><\/div>\n
\u00a0 selectedCripto = optionValue;<\/code><\/div>\n
\u00a0 toggleDropdown(false);<\/code><\/div>\n
}<\/code><\/div>\n
function toggleDropdown(show) {<\/code><\/div>\n
\u00a0 dropdown.style.display = show ? \"block\" : \"none\";<\/code><\/div>\n
}<\/code><\/div>\n
\/\/ Eventos<\/code><\/div>\n
\/\/ Adiciona o evento global de clique para fechar o dropdown ao clicar fora<\/code><\/div>\n
document.addEventListener(\"click\", function (event) {<\/code><\/div>\n
\u00a0 if (!input.contains(event.target) && !dropdown.contains(event.target)) {<\/code><\/div>\n
\u00a0 \u00a0 toggleDropdown(false); \/\/ Fecha o dropdown<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
});<\/code><\/div>\n
\/\/ Adiciona evento para filtrar op\u00e7\u00f5es<\/code><\/div>\n
input.addEventListener(\"input\", filterOptions);<\/code><\/div>\n
\/\/ Exibe o dropdown ao focar no input<\/code><\/div>\n
input.addEventListener(\"focus\", () => toggleDropdown(true));<\/code><\/div>\n
\/\/ Adiciona evento de clique para cada op\u00e7\u00e3o da lista<\/code><\/div>\n
optionsList.addEventListener(\"click\", (event) => {<\/code><\/div>\n
\u00a0 if (event.target.tagName === \"LI\") {<\/code><\/div>\n
\u00a0 \u00a0 const optionText = event.target.textContent || event.target.innerText;<\/code><\/div>\n
\u00a0 \u00a0 const optionValue = event.target.dataset.value;<\/code><\/div>\n
\u00a0 \u00a0 selectOption(optionText, optionValue);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
});<\/code><\/div>\n
searchButton.addEventListener(\"click\", async () => {<\/code><\/div>\n
\u00a0 showLoading();<\/code><\/div>\n
\u00a0 if (selectedCripto) {<\/code><\/div>\n
\u00a0 \u00a0 const criptoInfo = await getCotacao(selectedCripto);<\/code><\/div>\n
\u00a0 \u00a0 updateCards(criptoInfo);<\/code><\/div>\n
\u00a0 } else {<\/code><\/div>\n
\u00a0 \u00a0 alert(\"Selecione uma criptomoeda antes de buscar a cota\u00e7\u00e3o.\");<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 hideLoading();<\/code><\/div>\n
});<\/code><\/div>\n
async function loadOptions() {<\/code><\/div>\n
\u00a0 try {<\/code><\/div>\n
\u00a0 \u00a0 const optionsHTML = optionsCripto<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .map((option) => `<li data-value=\"${option.value}\">${option.label}<\/li>`)<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 .join(\"\");<\/code><\/div>\n
\u00a0 \u00a0 optionsList.innerHTML = optionsHTML;<\/code><\/div>\n
\u00a0 } catch (error) {<\/code><\/div>\n
\u00a0 \u00a0 console.error(\"Erro ao carregar op\u00e7\u00f5es:\", error);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
loadOptions();<\/code><\/div>\n
async function fetchData(url) {<\/code><\/div>\n
\u00a0 const response = await fetch(url);<\/code><\/div>\n
\u00a0 if (!response.ok) {<\/code><\/div>\n
\u00a0 \u00a0 throw new Error(`Erro ao buscar dados: ${response.status}`);<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 return await response.json();<\/code><\/div>\n
}<\/code><\/div>\n
async function getCotacao(cripto) {<\/code><\/div>\n
\u00a0 try {<\/code><\/div>\n
\u00a0 \u00a0 const [criptoInfoData, criptoCotacaoData] = await Promise.all([<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 fetchData(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 `https:\/\/api.mercadobitcoin.net\/api\/v4\/symbols?symbols=${cripto}-BRL`<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ),<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 fetchData(<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 `https:\/\/api.mercadobitcoin.net\/api\/v4\/tickers?symbols=${cripto}-BRL`<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ),<\/code><\/div>\n
\u00a0 \u00a0 ]);<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Extra\u00e7\u00e3o e formata\u00e7\u00e3o dos dados<\/code><\/div>\n
\u00a0 \u00a0 const { \"base-currency\": symbol, description, type } = criptoInfoData;<\/code><\/div>\n
\u00a0 \u00a0 const { open, last, vol } = criptoCotacaoData[0];<\/code><\/div>\n
\u00a0 \u00a0 const variation =<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 ((parseFloat(last) - parseFloat(open)) \/ parseFloat(open)) * 100; \u00a0<\/code><\/div>\n
\u00a0 \u00a0 const criptoInfo = {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 symbol: symbol[0],<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 description: description[0],<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 type: type[0],<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 lastValue: last,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 variation: variation,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 volume: vol,<\/code><\/div>\n
\u00a0 \u00a0 };<\/code><\/div>\n
<\/code><\/div>\n
\u00a0 \u00a0 \/\/ Exibe o resultado no console<\/code><\/div>\n
\u00a0 \u00a0 console.log(\"Informa\u00e7\u00f5es da Criptomoeda:\", criptoInfo);<\/code><\/div>\n
\u00a0 \u00a0 return criptoInfo;<\/code><\/div>\n
\u00a0 } catch (error) {<\/code><\/div>\n
\u00a0 \u00a0 console.error(\"Erro ao buscar dados da criptomoeda:\", error);<\/code><\/div>\n
\u00a0 \u00a0 return null;<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
}<\/code><\/div>\n
const updateCards = (criptoInfo) => {<\/code><\/div>\n
\u00a0 const cardData = [<\/code><\/div>\n
\u00a0 \u00a0 {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 label: \"Ativo Selecionado\",<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 value: criptoInfo.description,<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 maskClass: \"mask-one\",<\/code><\/div>\n
\u00a0 \u00a0 },<\/code><\/div>\n
\u00a0 \u00a0 { label: \"Ticker\", value: criptoInfo.symbol, maskClass: \"mask-two\" },<\/code><\/div>\n
\u00a0 \u00a0 {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 label: \"\u00daltima cota\u00e7\u00e3o em (R$)\",<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 value: formatNumber(criptoInfo.lastValue),<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 maskClass: \"mask-three\",<\/code><\/div>\n
\u00a0 \u00a0 },<\/code><\/div>\n
\u00a0 \u00a0 { label: \"Segmento\", value: criptoInfo.type, maskClass: \"mask-three\" },<\/code><\/div>\n
\u00a0 \u00a0 {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 label: \"Varia\u00e7\u00e3o em 24H\",<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 value: formatPercent(criptoInfo.variation),<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 maskClass: \"mask-four\",<\/code><\/div>\n
\u00a0 \u00a0 },<\/code><\/div>\n
\u00a0 \u00a0 {<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 label: \"Volume Movimentado\",<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 value: formatNumber(criptoInfo.volume),<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 maskClass: \"mask-one\",<\/code><\/div>\n
\u00a0 \u00a0 },<\/code><\/div>\n
\u00a0 ];<\/code><\/div>\n
\u00a0 const dashBoardCards = cardData<\/code><\/div>\n
\u00a0 \u00a0 .map((data) => createCard(data.label, data.value, data.maskClass))<\/code><\/div>\n
\u00a0 \u00a0 .join(\"\");<\/code><\/div>\n
\u00a0 dashBoard.innerHTML = dashBoardCards;<\/code><\/div>\n
};<\/code><\/div>\n
const formatNumber = (number) => {<\/code><\/div>\n
\u00a0 number = Number(number);<\/code><\/div>\n
\u00a0 if (number >= 1e9) {<\/code><\/div>\n
\u00a0 \u00a0 return (number \/ 1e9).toFixed(0) + \"B\"; \/\/ Bilh\u00f5es<\/code><\/div>\n
\u00a0 } else if (number >= 1e6) {<\/code><\/div>\n
\u00a0 \u00a0 return (number \/ 1e6).toFixed(0) + \"M\"; \/\/ Milh\u00f5es<\/code><\/div>\n
\u00a0 } else if (number >= 1e3) {<\/code><\/div>\n
\u00a0 \u00a0 return (number \/ 1e3).toFixed(0) + \"K\"; \/\/ Milhar<\/code><\/div>\n
\u00a0 }<\/code><\/div>\n
\u00a0 return formatNumberPTBR(number);<\/code><\/div>\n
};<\/code><\/div>\n
const formatPercent = (number) => {<\/code><\/div>\n
\u00a0 return `${formatNumberPTBR(number)}%`;<\/code><\/div>\n
};<\/code><\/div>\n
const formatNumberPTBR = (number) => {<\/code><\/div>\n
\u00a0 const formatter = new Intl.NumberFormat(\"pt-BR\", {<\/code><\/div>\n
\u00a0 \u00a0 minimumFractionDigits: 2,<\/code><\/div>\n
\u00a0 \u00a0 maximumFractionDigits: 2,<\/code><\/div>\n
\u00a0 });<\/code><\/div>\n
\u00a0 return formatter.format(number);<\/code><\/div>\n
};<\/code><\/div>\n
const createCard = (label, value, maskClass) => {<\/code><\/div>\n
\u00a0 return `<\/code><\/div>\n
\u00a0 \u00a0 <div class=\"card\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"css-text-mask ${maskClass}\">${value}<\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <p>${label}<\/p><\/code><\/div>\n
\u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 `;<\/code><\/div>\n
};<\/code><\/div>\n
const showLoading = () => {<\/code><\/div>\n
\u00a0 loadingModal.style.display = \"flex\";<\/code><\/div>\n
};<\/code><\/div>\n
const hideLoading = () => {<\/code><\/div>\n
\u00a0 loadingModal.style.display = \"none\";<\/code><\/div>\n
};<\/code><\/div>\n<\/div>\n

 <\/p>\n

Voc\u00ea pode visualizar o componente no link abaixo:<\/span><\/strong><\/span><\/p>\n

DashBoard Cripto<\/a>\u00a0<\/span><\/strong><\/p>\n

 <\/p>\n

Deixo aqui um v\u00eddeo curto do processo de cria\u00e7\u00e3o do DashBoard:<\/span><\/strong><\/span><\/p>\n

 <\/p>\n

 <\/p>\n