├── README.md ├── .DS_Store ├── background.js ├── manifest.json ├── popUp.html ├── styles.css └── popup.js /README.md: -------------------------------------------------------------------------------- 1 | # btcapi -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wisdom161/btcapi/HEAD/.DS_Store -------------------------------------------------------------------------------- /background.js: -------------------------------------------------------------------------------- 1 | console.log('Hello, this is our code for our chrome extension!!') 2 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "name": "Bitcoin Price Index", 4 | "version": "1.0", 5 | "permissions": [ 6 | "activeTab" 7 | ], 8 | "background": { 9 | "scripts": ["background.js"], 10 | "persistent": false 11 | }, 12 | 13 | "content_scripts": [ 14 | { 15 | "matches": [""], 16 | "js": ["./background.js"], 17 | "html": ["./popUp.html"] 18 | } 19 | ], 20 | 21 | "browser_action": { 22 | "default_icon": { 23 | 24 | }, 25 | "default_title": "Bitcoin", 26 | "default_popup": "popUp.html" 27 | } 28 | 29 | } -------------------------------------------------------------------------------- /popUp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Bitcoin Price Index 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 |

17 |

Bitcoin Price Index

18 |

19 |

20 |

21 |

22 |

23 |

24 |

25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | *{box-sizing: border-box;} 2 | 3 | h1 { 4 | display: flex; 5 | /* padding: 0px 50px 50px 50px; */ 6 | max-width: 300px; 7 | color: blue; 8 | margin: 0 auto; 9 | } 10 | 11 | .info { 12 | display: flex; 13 | justify-content: space-between; 14 | } 15 | 16 | body { 17 | width: 300px; 18 | } 19 | 20 | #current { 21 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 22 | font-size: 2rem; 23 | color: #aaaaaa; 24 | padding: 10px; 25 | } 26 | 27 | #value { 28 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 29 | font-size: 1.5rem; 30 | padding: 10px; 31 | } 32 | 33 | #percent { 34 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 35 | font-size: 1.5rem; 36 | padding: 10px; 37 | } 38 | 39 | div { 40 | display: flex; 41 | align-items: flex-end; 42 | } -------------------------------------------------------------------------------- /popup.js: -------------------------------------------------------------------------------- 1 | 2 | fetch('https://api.coindesk.com/v1/bpi/historical/close.json') 3 | .then(response => response.json()) //turned the url data into js object 4 | .then((jsonData) => { 5 | const dayPrices = Object.keys(jsonData.bpi); 6 | let firstDay = Math.round(jsonData.bpi[dayPrices[dayPrices.length-2]] * 100) / 100; 7 | let currentDay = Math.round(jsonData.bpi[dayPrices[dayPrices.length-1]] * 100) / 100; 8 | 9 | function pChangeFunc(current, first) { 10 | let difference = first - current; 11 | let change = ((difference / first) * 100).toFixed(2) + '%' 12 | return `${change}`; 13 | } 14 | 15 | function vChangeFunc(current, first) { 16 | return Math.round((current - first) * 100) / 100; 17 | } 18 | 19 | const vchange = vChangeFunc(currentDay, firstDay); 20 | const pchange = pChangeFunc(firstDay, currentDay); 21 | 22 | const valueChange = document.createElement('div'); 23 | valueChange.innerHTML = `${vchange}`; 24 | valueChange.id = "valueChanged"; 25 | $('#value').append(valueChange); 26 | 27 | if (Math.sign(vchange)=== 1) { 28 | valueChange.style.color = 'green'; 29 | } else { 30 | valueChange.style.color = 'red'; 31 | } 32 | 33 | const percentChange = document.createElement('div') 34 | percentChange.innerHTML = `${pchange}` 35 | percentChange.id = "percentChanged" 36 | $('#percent').append(percentChange) 37 | 38 | if (Math.sign(pchange)=== 1) { 39 | percentChange.style.color = 'green'; 40 | } else { 41 | percentChange.style.color = 'red'; 42 | } 43 | 44 | }) 45 | 46 | fetch('https://api.coindesk.com/v1/bpi/currentprice.json') 47 | .then(response => response.json()) //turned the url data into js object 48 | .then((jsonData) => { 49 | const price = Math.round(jsonData.bpi["USD"].rate_float * 100) / 100; 50 | console.log(price); 51 | const currentPrice = document.createElement('div'); 52 | currentPrice.innerHTML = `${price}`; 53 | currentPrice.id = "currentPrice"; 54 | $('#current').append(currentPrice); 55 | }) 56 | 57 | 58 | --------------------------------------------------------------------------------