-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
67 lines (51 loc) · 1.84 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
const graphContainer = document.querySelector(".spending-graph");
// fetching data from json file
async function fetchGraphData() {
const response = await fetch("./data.json");
const jsonData = response.json();
return jsonData;
}
// displaying data received from json file to DOM
async function loadGraphData() {
const data = await fetchGraphData();
data.map((element) => {
const graphDiv = createGraphBar(element.day, element.amount);
graphContainer.appendChild(graphDiv);
});
}
// displaying data on loading window
window.addEventListener("DOMContentLoaded", loadGraphData());
// create graph chart and controlling its functioning
const createGraphBar = (day, amount) => {
const graphDiv = document.createElement("div");
graphDiv.classList.add("spending-graph--week", "flex", "flex-col");
graphDiv.innerHTML = `<div class="spending-graph--week__amt">$${amount}</div>
<div class="spending-graph--week__bar"></div>
<p class="spending-graph--week__day">${day}</p>`;
// selectors
const graphBarDiv = graphDiv.querySelector(".spending-graph--week__bar");
const graphAmt = graphDiv.querySelector(".spending-graph--week__amt");
// managing height of the graph bar
graphBarDiv.style.height = `${amount * 3}px`;
// changing the color of the graph bar with highest amount.
if (amount > 50) {
graphBarDiv.style.backgroundColor = "hsl(186, 34%, 60%)";
}
// mouse events invoked.
mouseOver(graphAmt, graphBarDiv);
mouseOut(graphAmt, graphBarDiv);
return graphDiv;
};
// mouse events declared.
function mouseOver(amount, bar) {
bar.addEventListener("mouseover", () => {
amount.style.opacity = 1;
bar.style.opacity = 0.7;
});
}
function mouseOut(amount, bar) {
bar.addEventListener("mouseout", () => {
amount.style.opacity = 0;
bar.style.opacity = 1;
});
}