Skip to content

Commit 0f5a838

Browse files
author
[dabinderudhan]
committed
initial commit
0 parents  commit 0f5a838

File tree

18 files changed

+402
-0
lines changed

18 files changed

+402
-0
lines changed

‎.gitignore

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Avoid accidental upload of the Sketch and Figma design files
2+
#####################################################
3+
## Please do not remove lines 5 and 6 - thanks! 🙂 ##
4+
#####################################################
5+
*.sketch
6+
*.fig
7+
8+
# Avoid accidental XD upload if you convert the design file
9+
###############################################
10+
## Please do not remove line 12 - thanks! 🙂 ##
11+
###############################################
12+
*.xd
13+
14+
# Avoid your project being littered with annoying .DS_Store files!
15+
.DS_Store
16+
.prettierignore
17+
design
18+
node_modules
19+
package-lock.json
20+
README-FM.md
21+
style-guide.md

‎README.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Frontend Mentor - Expenses chart component solution
2+
3+
This is a solution to the [Expenses chart component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/expenses-chart-component-e7yJBUdjwt). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
4+
5+
## Table of contents
6+
7+
- [Overview](#overview)
8+
- [The challenge](#the-challenge)
9+
- [Screenshot](#screenshot)
10+
- [Links](#links)
11+
- [My process](#my-process)
12+
- [Built with](#built-with)
13+
- [Author](#author)
14+
- [Acknowledgments](#acknowledgments)
15+
16+
## Overview
17+
18+
### The challenge
19+
20+
Users should be able to:
21+
22+
- View the bar chart and hover over the individual bars to see the correct amounts for each day
23+
- See the current day’s bar highlighted in a different colour to the other bars
24+
- View the optimal layout for the content depending on their device’s screen size
25+
- See hover states for all interactive elements on the page
26+
- **Bonus**: Use the JSON data file provided to dynamically size the bars on the chart
27+
28+
### Screenshot
29+
30+
![Screenshot](./screenshot.png)
31+
32+
### Links
33+
34+
- Solution URL: [Github URL](https://github.com/dabinderudhan/Expenses-Chart)
35+
- Live Site URL: [Live URL](https://dabinderudhan.github.io/Expenses-Chart/)
36+
37+
## My process
38+
39+
### Built with
40+
41+
- Semantic HTML5 markup
42+
- CSS custom properties
43+
- Flexbox
44+
- Mobile-first workflow
45+
- SASS
46+
- JavaScript
47+
- Async/Await
48+
49+
## Author
50+
51+
- Website - [Github profile](https://github.com/dabinderudhan)
52+
- Frontend Mentor - [@dabinderudhan](https://www.frontendmentor.io/profile/dabinderudhan)
53+
- Twitter - [@dabinderudhan](https://twitter.com/dabinderudhan)

‎data.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
[
2+
{
3+
"day": "mon",
4+
"amount": 17.45
5+
},
6+
{
7+
"day": "tue",
8+
"amount": 34.91
9+
},
10+
{
11+
"day": "wed",
12+
"amount": 52.36
13+
},
14+
{
15+
"day": "thu",
16+
"amount": 31.07
17+
},
18+
{
19+
"day": "fri",
20+
"amount": 23.39
21+
},
22+
{
23+
"day": "sat",
24+
"amount": 43.28
25+
},
26+
{
27+
"day": "sun",
28+
"amount": 25.48
29+
}
30+
]

‎dist/css/main.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<!-- displays site properly based on user's device -->
7+
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Alata&family=Josefin+Sans:wght@300&display=swap"
12+
rel="stylesheet"
13+
/>
14+
15+
<link
16+
rel="icon"
17+
type="image/png"
18+
sizes="32x32"
19+
href="./images/favicon-32x32.png"
20+
/>
21+
22+
<link rel="stylesheet" href="./dist/css/main.css" />
23+
24+
<title>Frontend Mentor | Expenses chart component</title>
25+
26+
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
27+
<style></style>
28+
</head>
29+
<body class="flex flex-col">
30+
<div class="container flex flex-col">
31+
<header class="header flex">
32+
<div class="header-balance">
33+
<p class="header-balance_text">My balance</p>
34+
<h1 class="header-balance_amount">$921.48</h1>
35+
</div>
36+
<img class="header-logo" src="./src/images/logo.svg" alt="logo" />
37+
</header>
38+
<main class="spending flex flex-col">
39+
<h1 class="spending-heading">Spending - Last 7 days</h1>
40+
<section class="spending-graph flex"></section>
41+
<div class="spending-underline"></div>
42+
<section class="spending-total flex">
43+
<div class="spending-total--curr flex flex-col">
44+
<p>Total this month</p>
45+
<h1 class="spending-total--curr__amt">$478.33</h1>
46+
</div>
47+
<div class="spending-total--prev flex flex-col">
48+
<h3 class="spending-total--prev__amt">+2.4%</h3>
49+
<p>from last month</p>
50+
</div>
51+
</section>
52+
</main>
53+
</div>
54+
<footer class="attribution">
55+
Challenge by
56+
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
57+
>Frontend Mentor</a
58+
>. Coded by <a href="#">Dabinder Udhan</a>.
59+
</footer>
60+
<script src="./src/js/index.js"></script>
61+
</body>
62+
</html>

‎package.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "expenses-chart-component-main",
3+
"version": "1.0.0",
4+
"description": "Expenses-chart-component",
5+
"main": "index.js",
6+
"scripts": {
7+
"sass": "node-sass --output-style compressed -o dist/css src/sass -w",
8+
"server": "live-server",
9+
"start": "npm-run-all --parallel server sass"
10+
},
11+
"author": "Dabinder Udhan",
12+
"license": "ISC",
13+
"bugs": {
14+
"url": "https://github.com/dabinderudhan/Expenses-Chart-Component/issues"
15+
},
16+
"homepage": "https://github.com/dabinderudhan/Expenses-Chart-Component#readme",
17+
"dependencies": {
18+
"live-server": "^1.2.2",
19+
"node-sass": "^7.0.1",
20+
"npm-run-all": "^4.1.5"
21+
}
22+
}

‎screenshot.png

35.3 KB
Loading

‎src/images/favicon-32x32.png

1.04 KB
Loading

‎src/images/logo.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/js/index.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
const graphContainer = document.querySelector(".spending-graph");
2+
3+
async function fetchGraphData() {
4+
const response = await fetch("/data.json");
5+
const jsonData = response.json();
6+
return jsonData;
7+
}
8+
9+
async function loadGraphData() {
10+
const data = await fetchGraphData();
11+
12+
data.map((element) => {
13+
const graphDiv = graphBar(element.day, element.amount);
14+
15+
graphContainer.appendChild(graphDiv);
16+
});
17+
}
18+
19+
window.addEventListener("DOMContentLoaded", loadGraphData);
20+
21+
const graphBar = (day, amount) => {
22+
const graphDiv = document.createElement("div");
23+
24+
graphDiv.classList.add("spending-graph--week", "flex", "flex-col");
25+
26+
graphDiv.innerHTML = `<div class="spending-graph--week__amt">$${amount}</div>
27+
<div class="spending-graph--week__bar"></div>
28+
<p class="spending-graph--week__day">${day}</p>`;
29+
30+
const graphBar = graphDiv.querySelector(".spending-graph--week__bar");
31+
const graphAmt = graphDiv.querySelector(".spending-graph--week__amt");
32+
33+
graphBar.style.height = `${amount * 3}px`;
34+
35+
if (amount > 50) {
36+
graphBar.style.backgroundColor = "hsl(186, 34%, 60%)";
37+
}
38+
39+
graphBar.addEventListener("mouseover", () => {
40+
graphAmt.style.opacity = 1;
41+
graphBar.style.opacity = 0.7;
42+
});
43+
44+
graphBar.addEventListener("mouseout", () => {
45+
graphAmt.style.opacity = 0;
46+
graphBar.style.opacity = 1;
47+
});
48+
49+
return graphDiv;
50+
};

0 commit comments

Comments
 (0)