https://github.com/medsagou/expenses-chart-component
https://github.com/medsagou/expenses-chart-component
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/medsagou/expenses-chart-component
- Owner: medsagou
- Created: 2022-08-03T16:11:28.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-08-03T16:16:53.000Z (about 3 years ago)
- Last Synced: 2025-01-03T19:26:58.822Z (9 months ago)
- Language: CSS
- Size: 118 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Expenses chart component solution
This is a solution to the [Expenses chart component challenge ](https://www.frontendmentor.io/challenges/expenses-chart-component-e7yJBUdjwt).
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### The challenge
Users should be able to:
- View the bar chart and hover over the individual bars to see the correct amounts for each day
- See the current day’s bar highlighted in a different colour to the other bars
- View the optimal layout for the content depending on their device’s screen size
- See hover states for all interactive elements on the page
- **Bonus**: Use the JSON data file provided to dynamically size the bars on the chart
### Screenshot
### Links
- Solution URL: [https://github.com/medsagou/expenses-chart-component.git](https://github.com/medsagou/expenses-chart-component.git)
- Live Site URL: [https://medsagou.github.io/expenses-chart-component/](https://medsagou.github.io/expenses-chart-component/)
## My process
no process just keep going when you get stack.
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- [React](https://reactjs.org/) - JS library
- [Next.js](https://nextjs.org/) - React framework
- [Styled Components](https://styled-components.com/) - For styles
- [Modern css reset](https://piccalil.li/blog/a-modern-css-reset/) - piccalil
### What I learned
```html
- mon
- tue
- wed
- thu
- fri
- sat
- sun
```
```css
@media (hover: hover){
.col-1::after,
.col-2::after,
.col-3::after,
.col-4::after,
.col-5::after,
.col-6::after,
.col-7::after{
content: attr(title);
position: absolute;
display: none;
background-color: var(--neutral-700);
color: rgb(255, 255, 255);
width: max-content;
font-family: var(--ff-primary);
font-weight: 700;
border-radius: .2rem;
font-size: .7rem;
padding: .4em .5em;
top: -1rem;
left: 50%;
transform: translate(-50%,-50%);
}
.col-1:hover::after,
.col-2:hover::after,
.col-3:hover::after,
.col-4:hover::after,
.col-5:hover::after,
.col-6:hover::after,
.col-7:hover::after {
display: block;
z-index: 1;
}
}
```
```js
// just the last 7 days
function lastSevenDays(arr){
objAppend={'day':'***', 'amount':0};
if (arr.length > 7) {
const M=arr.length-7;
for(let i=0 ; i < M ; i++) {
arr.shift();
}
}else if (arr.length < 7) {
const M=7-arr.length;
for(let i=0 ; i < M ; i++) {
arr.push(objAppend)
}
}
return arr;
}
// claculate the height of each column
function heightCalc(amount, maxAmount,colHeight){
return (amount*colHeight)/maxAmount
}
//get amounts
function getAmounts(data){
const amounts=[];
for(let i=0; i