JSFiddle - React, Tailwind, and code Playground

by Zatcepin

HTML

<!-- Include the library in the page -->
<script src="https://unpkg.com/[email protected]"></script>

<!-- App -->
<div id="app">
  <h1>Crypto mood of the day. By Santiment API</h1>
  <div>
    <div id="result" class="loading">Loading...     </div>
  </div>
</div>

CSS

body {
  font-family: sans-serif;
  margin: 0;
  background: #f0f0f0;
}

#app {
  padding: 24px;
  max-width: 400px;
  margin: auto;
}

h1 {
  text-align: center;
  font-weight: normal;
  font-size: 18px;
}

article {
  background: white;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 2px;
}

.loading {
  text-align: center;
  color: #777;
}

.title {
  text-transform: uppercase;
}

.author {
  color: #777;
}

JavaScript

const client = new Apollo.lib.ApolloClient({
  networkInterface: Apollo.lib.createNetworkInterface({
    uri: 'https://api.santiment.net/graphql',
    transportBatching: true,
  }),
  connectToDevTools: true,
})

const QUERY = Apollo.gql`
 query historyPrice($from: DateTime!) {
  historyPrice(
    ticker: "TOTAL_MARKET",
    from: $from,
    interval: "5m"
  ) {
    marketcap
    volume
  }
}
`

const getEmojiByChanges = (change) => {
	if (change >= 10) {
    return "🤑"
  } else if (change >= 5 && change < 10) {
  	return "😁"
  } else if (change >= 0 && change < 5) {
		return "😀"
  } else if (change < 0 && change >= -5) {
  	return "🤔"
  } else if (change >= -10 && change < -5) {
    return "😰"
  } else if (change < -10 && change >= -30) {
    return "😱"
  } else return "🤯"
}

const getYesterdayDate = () => {
  const yesterday = new Date(Date.now() - 86400000)
  yesterday.setHours(0,0,0,0)
  return yesterday.toISOString()
}

client.query({ query: QUERY, variables: {
  from: getYesterdayDate()
}}).then(result => {
  const history = result.data.historyPrice
  const now = history[history.length - 1]
  const prev = history[0]
  const cap24h = (now.marketcap - prev.marketcap) / prev.marketcap * 100
  const volume24h = (now.volume - prev.volume) / prev.volume * 100
  resultEl = document.querySelector('#result')
	resultEl.innerHTML = `Total Marketcap 24h: ${getEmojiByChanges(cap24h)} ${cap24h.toFixed(2)}% </br>  Volume 24h: ${getEmojiByChanges(volume24h)} ${volume24h.toFixed(2)}%` 
})