Skip to content

Instantly share code, notes, and snippets.

View infantiablue's full-sized avatar
🎯
Focusing

Truong Phan infantiablue

🎯
Focusing
17 followers · 28 following
View GitHub Profile
@infantiablue
infantiablue / set-interval-effect.js
Last active April 28, 2021 13:23
useEffect(() => {
fetchData().then((chartData) => {
initChart(chartData);
setLatestPrice(parseFloat(chartData.price[chartData.price.length - 1]).toFixed(2));
});
const timerID = setInterval(() => {
fetchData().then((chartData) => {
updateChart(chartData);
setLatestPrice(parseFloat(chartData.price[chartData.price.length - 1]).toFixed(2));
});
@infantiablue
infantiablue / update-chart.js
Last active April 28, 2021 10:09
const updateChart = (data) => {
let trace_price = {
x: [data.index.map((t) => new Date(t))],
y: [data.price],
};
let trace_volumes = {
x: [data.index.map((t) => new Date(t))],
y: [data.volumes],
};
@infantiablue
infantiablue / App-p1.jsx
Created April 28, 2021 09:23
import React, { useState, useEffect } from "react";
import callAPI from "./utils";
function App() {
const [latestPrice, setLatestPrice] = useState(0);
useEffect(() => {
fetchData().then((chartData) => {
initChart(chartData);
setLatestPrice(parseFloat(chartData.price[chartData.price.length - 1]).toFixed(2));
@infantiablue
infantiablue / use-effect.js
Created April 28, 2021 09:18
const [latestPrice, setLatestPrice] = useState(0);
useEffect(() => {
fetchData().then((chartData) => {
initChart(chartData);
setLatestPrice(parseFloat(chartData.price[chartData.price.length - 1]).toFixed(2));
});
}, []);
@infantiablue
infantiablue / fetch-data.js
Created April 28, 2021 09:10
const fetchData = async () => {
let data = { index: [], price: [], volumes: [] };
let result = await callAPI("https://api.coingecko.com/api/v3/coins/ethereum/market_chart?vs_currency=usd&days=1&interval=1m");
for (const item of result.prices) {
data.index.push(item[0]);
data.price.push(item[1]);
}
for (const item of result.total_volumes) data.volumes.push(item[1]);
return data;
};
@infantiablue
infantiablue / init-chart.js
Last active April 28, 2021 08:37
const initChart = (data) => {
let trace_price = {
name: "Price ($)",
x: data.index.map((t) => new Date(t)),
y: data.price,
xaxis: "x",
yaxis: "y1",
type: "scatter",
mode: "lines+markers",
marker: { color: "blue", size: 3 },
@infantiablue
infantiablue / utils.js
Last active April 28, 2021 06:15
Fetch API Wrapper
const callAPI = async (url) => {
let response = await fetch(url, {
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
});
if (!response.ok) {
const message = `An error has occured: ${response.status}`;
throw new Error(message);
@infantiablue
infantiablue / trading-chart-index.html
Last active April 28, 2021 09:05
index file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Realtime Chart</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
@infantiablue
infantiablue / hnews-initializing-variables.js
Created January 17, 2021 08:09
Hnews Initializing Variables
created() {
if (!("topic" in localStorage)) localStorage.topic = "top";
this.loadStories(localStorage.topic);
if (!("theme" in localStorage)) localStorage.theme = "dark";
},
mounted() {
this.toggleDarkMode(localStorage.theme);
this.$refs[`topic-${localStorage.topic}`].classList.add("text-green-500");
},
@infantiablue
infantiablue / hnews-darkmode-toggle.js
Created January 17, 2021 08:06
Hnews Toggle Darkmode
toggleDarkMode(theme, evt) {
let htmlElm = document.querySelector("html");
const setLight = () => {
htmlElm.classList.remove("dark");
localStorage.theme = "light";
this.$refs.toggleDark.textContent = "☀️";
};
const setDark = () => {
htmlElm.classList.add("dark");
localStorage.theme = "dark";