Project 26: Cryptocurrency Ticker
Vue Engineer
Component Task
Objective
Review day: combine reactivity and lifecycle cleanup — days 3 and 9 — to poll data safely, undoing the timer when the component goes away.
You're building a live price ticker.
Task: create a price ref, start a setInterval updating it in onMounted, and clear it in onUnmounted.
Component.vue
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const price = ref(0);
let timer;
onMounted(() => {
timer = setInterval(() => {
price.value = Math.random() * 1000;
}, 1000);
});
onUnmounted(() => {
clearInterval(timer);
});
</script>
<template>
<p>BTC: ${{ price.toFixed(2) }}</p>
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result