Commit 8df9143

committed

create crypto-dashboard project

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

1 parent 294be6b commit 8df9143Copy full SHA for 8df9143

File tree

+108

-0

lines changed

+108

-0

lines changed

Lines changed: 13 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,13 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html>`
	`3`	`+ <head>`
	`4`	`+ <title>Crypto Dashboard</title>`
	`5`	`+ <link rel="stylesheet" href="styles.css" />`
	`6`	`+ </head>`
	`7`	`+ <body>`
	`8`	`+ <h1 class="heading">Crypto Dashboard</h1>`
	`9`	`+ <div id="card-container" class="card-container"></div>`
	`10`	`+`
	`11`	`+ <script src="index.js"></script>`
	`12`	`+ </body>`
	`13`	`+</html>`

Lines changed: 34 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,34 @@`
	`1`	`+let cardContainer = document.getElementById("card-container");`
	`2`	`+`
	`3`	`+const fetchData = ()=>{`
	`4`	`+ fetch(`
	`5`	`+ "https://api.coingecko.com/api/v3/coins/markets?vs_currency=inr&order=market_cap_desc&per_page=100&page=1&sparkline=false"`
	`6`	`+ )`
	`7`	`+ .then((res) => res.json())`
	`8`	`+ .then((res) => {`
	`9`	`+ data = res;`
	`10`	`+ console.log(res);`
	`11`	`+`
	`12`	`+ for (let i = 0; i < data.length; i++) {`
	`13`	+ cardContainer.innerHTML += `<div class="card">
	`14`	`+ <div class="image">`
	`15`	`+ <img class="img" src=${data[i].image} />`
	`16`	`+ </div>`
	`17`	`+`
	`18`	`+ <div class="details">`
	`19`	`+ <div class="row">`
	`20`	`+ <span class="name">${data[i].name}</span>`
	`21`	`+ <span class="price">${data[i].current_price}</span>`
	`22`	`+ </div>`
	`23`	`+`
	`24`	`+ <div class="row">`
	`25`	`+ <span class="symbol">${data[i].symbol}</span>`
	`26`	`+ <span class="percent">${data[i].market_cap_change_percentage_24h}%</span>`
	`27`	`+ </div>`
	`28`	`+ </div>`
	`29`	+ </div>`;
	`30`	`+ }`
	`31`	`+ });`
	`32`	`+}`
	`33`	`+`
	`34`	`+fetchData();`

Lines changed: 61 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,61 @@`
	`1`	`+.heading {`
	`2`	`+ text-align: center;`
	`3`	`+}`
	`4`	`+`
	`5`	`+.card-container {`
	`6`	`+ display: flex;`
	`7`	`+ flex-direction: column;`
	`8`	`+ justify-content: center;`
	`9`	`+ align-items: center;`
	`10`	`+}`
	`11`	`+`
	`12`	`+.card {`
	`13`	`+ width: 400px;`
	`14`	`+ height: 100px;`
	`15`	`+ background-color: white;`
	`16`	`+ border-radius: 10px;`
	`17`	`+ box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);`
	`18`	`+ display: grid;`
	`19`	`+ grid-template-rows: 1fr;`
	`20`	`+ grid-template-columns: 0.3fr 1fr;`
	`21`	`+ padding: 10px;`
	`22`	`+ cursor: pointer;`
	`23`	`+ margin-bottom: 10px;`
	`24`	`+}`
	`25`	`+`
	`26`	`+.image {`
	`27`	`+ display: flex;`
	`28`	`+ justify-content: center;`
	`29`	`+ align-items: center;`
	`30`	`+}`
	`31`	`+`
	`32`	`+.img {`
	`33`	`+ width: 70px;`
	`34`	`+ height: 70px;`
	`35`	`+}`
	`36`	`+`
	`37`	`+.details {`
	`38`	`+ display: flex;`
	`39`	`+ flex-direction: column;`
	`40`	`+ justify-content: space-between;`
	`41`	`+}`
	`42`	`+`
	`43`	`+.row {`
	`44`	`+ display: flex;`
	`45`	`+ justify-content: space-between;`
	`46`	`+}`
	`47`	`+`
	`48`	`+.name,`
	`49`	`+.price {`
	`50`	`+ font-size: 22px;`
	`51`	`+ font-weight: bold;`
	`52`	`+}`
	`53`	`+`
	`54`	`+.symbol,`
	`55`	`+.percent {`
	`56`	`+ font-size: 20px;`
	`57`	`+}`
	`58`	`+`
	`59`	`+.percent {`
	`60`	`+ color: red;`
	`61`	`+}`

Comments

(0)