Trading Dashboard — ScriptVerse Project
Trading Dashboard — ScriptVerse Project: free step-by-step lesson with examples, common mistakes, and interview tips — part of JavaScript Tutorial on Toolliyo Academy.
On this page
JavaScript Tutorial · Lesson 98 of 100
Trading Dashboard
Basics ✓ → Objects & data ✓ → Async & DOM ✓ → Advanced ✓ → Tools ✓ → Projects
Professional · 6 — Build projects · ~10 min · JS Projects
What is this?
Show fake stock prices that update on an interval — color green/red on change, sortable table.
Why should you care?
Practices high-frequency UI updates and formatting numbers.
See it live — copy this example
Paste into an HTML file or the browser console (F12). Use Run below when the live editor is available.
<!DOCTYPE html>
<html><body>
<table><tbody id="ticks"></tbody></table>
<script>
const ticks = [{ sym:"TCS", price:3500, prev:3500 },{ sym:"INFY", price:1450, prev:1450 }];
function render() {
document.getElementById("ticks").innerHTML = ticks.map(t => {
const up = t.price >= t.prev;
return `<tr style="color:${up?"green":"red"}"><td>${t.sym}</td><td>${t.price.toFixed(2)}</td></tr>`;
}).join("");
}
setInterval(() => {
ticks.forEach(t => { t.prev = t.price; t.price += (Math.random()-0.5)*20; });
render();
}, 500);
render();
</script></body></html>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- Update prices and re-render row cells.
- Use toFixed for display.
Practice next
- Table with symbols and prices.
- Update prices on interval.
- Color row green/red on change.
- Sort table by price descending after each tick.
- Add volume column with random integers.
Remember
Live price table Interval or WebSocket Performance awareness
ScriptVerse trading desk
Prototype desk UI shows color flash on price change before WebSocket feed integration.
Outcome: High-frequency UI update practice with performance awareness.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
