{"id":19543250,"url":"https://github.com/codewithalamin/expenses-chart-component","last_synced_at":"2026-03-19T10:22:40.224Z","repository":{"id":159455637,"uuid":"634600879","full_name":"CodeWithAlamin/Expenses-chart-component","owner":"CodeWithAlamin","description":"Expenses chart component is a responsive and visually appealing component built using HTML, CSS, and JavaScript. This project is part of the Frontend Mentor challenges.","archived":false,"fork":false,"pushed_at":"2024-10-30T12:16:27.000Z","size":474,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-26T05:33:20.826Z","etag":null,"topics":["codewithalamin","frontendmentor-challenge"],"latest_commit_sha":null,"homepage":"https://expenses-chart-component-alamin.netlify.app/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodeWithAlamin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-30T16:51:38.000Z","updated_at":"2024-10-30T12:16:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"29f7fb8c-6323-44ca-8d75-ca0d0d79f77f","html_url":"https://github.com/CodeWithAlamin/Expenses-chart-component","commit_stats":null,"previous_names":["codewithalamin/expenses-chart-component"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CodeWithAlamin/Expenses-chart-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FExpenses-chart-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FExpenses-chart-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FExpenses-chart-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FExpenses-chart-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeWithAlamin","download_url":"https://codeload.github.com/CodeWithAlamin/Expenses-chart-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FExpenses-chart-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29974745,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T16:18:32.386Z","status":"ssl_error","status_checked_at":"2026-03-01T16:18:04.258Z","response_time":124,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codewithalamin","frontendmentor-challenge"],"created_at":"2024-11-11T03:18:07.026Z","updated_at":"2026-03-01T16:32:50.500Z","avatar_url":"https://github.com/CodeWithAlamin.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eExpenses chart component\u003c/h1\u003e\n\u003cdiv align=\"center\"\u003e\n\nChallenge from [Frontend Mentor](https://www.frontendmentor.io/profile/CodeWithAlamin)\n\n\u003c/div\u003e\n\n\u003ch2 align=\"center\"\u003e\n\n[🚀Live Site](https://expenses-chart-component-alamin.netlify.app/)\n|\n[💡Frontend Mentor](https://www.frontendmentor.io/solutions/expenses-chart-component-w-demo-data-vjfqzjFPRS)\n\n\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\nThis is a JavaScript project that displays a chart of daily expenses for a week. It fetches data from JSON files and dynamically updates the chart based on the data. In addition to the original dataset, two more sample data files have been added for demonstration purposes.\n\u003c/p\u003e\n\n\u003ca align=\"center\" href=\"https://expenses-chart-component-alamin.netlify.app/\"\u003e\n\n![Screenshot](./screenshots/expenses-chart-component-screenshot-compared-CodeWithAlamin.png)\n\n\u003c/a\u003e\n\n## The challenge\n\nUsers should be able to:\n\n- View the bar chart and hover over the individual bars to see the correct amounts for each day\n- See the current day’s bar highlighted in a different colour to the other bars\n- View the optimal layout for the content depending on their device’s screen size\n- See hover states for all interactive elements on the page\n- **Bonus**: Use the JSON data file provided to dynamically size the bars on the chart\n- **Bonus**: Added two more sample data\n- **Bonus:** Dark mode toggle\n\n## Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- JavaScript\n- Mobile-first workflow\n- NPM\n- [Webpack - a module bundler](https://webpack.js.org/)\n\n## What I learned\n\nIn building this project, I had the opportunity to learn and practice several key concepts in JavaScript. One of the most important concepts that I learned is working with JSON data. I was able to fetch data from external sources in the JSON format, parse the data into a format that is easily readable by JavaScript, and manipulate it to render it on the page.\n\nI also learned how to use JavaScript to perform various calculations and manipulations on data. For example, I was able to find the maximum value in a data set, calculate percentages, and manipulate CSS styles based on the data.\n\nOverall, building this project has greatly improved my understanding of JavaScript and has given me practical experience in building real-world applications using JavaScript.\n\n## Installation\n\n- Clone this repo:\n\n```sh\ngit clone https://github.com/CodeWithAlamin/Expenses-chart-component.git\n```\n\n- Install dependencies:\n\n```sh\nnpm install\n```\n\n- Build command:\n\n```sh\nnpm run build\n```\n\n- Live server:\n\n```sh\nnpm start\n```\n\n## Author\n\n\u003cb\u003e👤 Alamin\u003c/b\u003e\n\n- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)\n- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)\n- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)\n- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)\n\nFeel free to contact me with any questions or feedback!\n\n## Show your support\n\nGive a ⭐️ if you liked this project!\n\n## Acknowledgments\n\nSpecial thanks to Frontend Mentor for providing such an amazing platform to practice and improve my frontend skills. The challenges and projects available on the website were both fun and challenging, and helped me learn a lot in a short amount of time.\n\n## License\n\nThis project is licensed under the [MIT](https://github.com/CodeWithAlamin/Expenses-chart-component/blob/main/LICENSE.md) license, which means you can use, modify, and distribute the code as you wish. If you have any questions or feedback, feel free to reach out. Thank you for considering my code!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithalamin%2Fexpenses-chart-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithalamin%2Fexpenses-chart-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithalamin%2Fexpenses-chart-component/lists"}