https://github.com/aatmaneoulmouden/expenses-chart-component

Expenses chart component | Frontend Challenge No. 15
https://github.com/aatmaneoulmouden/expenses-chart-component

frontend-mentor frontendmentor-challenge react-js reactjs tailwind-css tailwindcss

Last synced: 9 days ago
JSON representation

Expenses chart component | Frontend Challenge No. 15

• Host: GitHub
• URL: https://github.com/aatmaneoulmouden/expenses-chart-component
• Owner: aatmaneoulmouden
• Created: 2024-08-14T17:52:20.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-08-16T10:05:02.000Z (about 2 months ago)
• Last Synced: 2024-09-13T17:55:58.181Z (22 days ago)
• Topics: frontend-mentor, frontendmentor-challenge, react-js, reactjs, tailwind-css, tailwindcss
• Language: JavaScript
• Homepage: https://expenses-chart-component-umber.vercel.app
• Size: 104 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 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. 

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

- [Author](#author)

## Overview

### The challenge

Users can:

- 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

![](./public/screenshot.png)

### Links

- Live Site URL: [Preview the solution](https://expenses-chart-component-umber.vercel.app/)

## My process

### Built with

- Semantic HTML5 markup

- [React](https://reactjs.org/) - JS library

- [Tailwind CSS](https://tailwindcss.com/) - For styles

## Author

- Frontend Mentor - [@aatmaneoulmouden](https://www.frontendmentor.io/profile/aatmaneoulmouden)

- LinkedIn - [@aatmaneoulmouden](https://www.linkedin.com/in/aatmaneoulmouden/)