Codevember 6 :: Vue Bitcoin Ticker 2.0

codevember-6-vue-bitcoin-ticker-2-0.markdown

Codevember 6 :: Vue Bitcoin Ticker 2.0

Updated bitcoin ticker

A Pen by magnificode on CodePen.

License.

index.html

<script src="https://use.typekit.net/tou5pbt.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

<div class="btc-badge">
    <div class="card">
        <p>Current Bitcoin price</p>
        <h1>${{ btcUSD }}</h1>
        <p>Past 24 hours</p>
        <p :class="upDown">{{ percentChange }}%</p>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
            <path d="M50 30L30 40 10 10v80h80V50L70 60"/>
        </svg>
    </div>
</div>

script.js

const app = new Vue({
    el: '.btc-badge',
    data: {
        btcUSD: '0.00',
        percentChange: '0',
        upDown: 'up',
    },
    mounted() {
        this.getInfo();

        setInterval(()=> {
            this.getInfo();
        }, 1000*60);
    },
    methods: {
        getPercentChange(newPrice, open) {
            this.percentChange = parseFloat(((newPrice - open) / open) * 100).toFixed(4)
            if (newPrice > open) {
                this.upDown = 'up'
            } else {
                this.upDown = 'down'
            }
        },
        getInfo() {
          axios.get('https://min-api.cryptocompare.com/data/pricemultifull?fsyms=BTC,ETH&tsyms=USD&e=Coinbase')
            .then(response => {
              const open = response.data.RAW.BTC.USD.OPEN24HOUR
              const newPrice = response.data.RAW.BTC.USD.PRICE
              console.log(open);
              this.getPercentChange(newPrice, open);
              this.btcUSD = newPrice
          });
        }
    },
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

style.scss

body,html {
    height: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    background-image: linear-gradient(to right, #ece9e6, #ccc);
    font-smoothing: antialiased;
    align-items: center;
    color: #fafafa;
    display: flex;
    font-family: "macha";
    height: 100%;
    justify-content: center;
}

.card {
    align-items: center;
    background-image: linear-gradient(to top right, #141e30, #243b55);
    border-radius: .4em;
    box-shadow: 0 0 66px rgba(#000, 0.3);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    padding: 1em;
    position: relative;
    width: 250px;
    height: 300px;
    z-index: 0;
    
    &:after {
        mix-blend-mode: overlay;
        border: 1px solid #eee;
        border-radius: .4em;
        content: '';
        height: calc(100% - 2em);
        left: 0;
        margin: 1em;
        position: absolute;
        top: 0;
        width: calc(100% - 2em);
        z-index: 1;
    }
}

h1 {
    letter-spacing: 0.05em;
    margin: .25em 0;
}

p {
    margin: 0;
}

.up {
    color: #42ffa8;
}

.down {
    color: #ff0740;

    &:after {
        transform: rotate(180deg);
    }

    & + svg {
        transform: rotate(0deg);
    }
}

.up,
.down {
    align-items: center;
    display: flex;
    &:after{
        border-style: solid;
        border-width: 0 5px 5px 5px;
        border-color: transparent transparent currentColor transparent;
        content: "";
        height: 0;
        margin-left: .5em;
        margin-top: .1em;
        width: 0;
    }
}

svg {
    bottom: -50%;
    fill: #999;
    left: -20%;
    mix-blend-mode: overlay;
    position: absolute;
    transform: scaleX(-1);
    width: 150%;
    z-index: -1;
}