Budget Tracker is a website there you can go to if you want to get hold on your economy. There you can insert numbers and the site will calculate the numbers for you!
Visit the deployed site: Budget Tracker
- Budget Tracker is a website there you can go to if you want to get hold on your economy
- As a user, i want to input my income and expenses so i can track my financial situation.
- As a user, i want to set budget goals for different categories so that i can plan my spending.
- As a user, i want to see a summary of my financial data in charts so that i can easily understand my financial situation.
- I wish to create a site that the users wish to come back to.
- Easily see and integrate with numbers.
- That you can continue to follow your budget and savings goals and keep track on them.
I have choose the color based on that fact that i want it to be an clean site
In my css file i have mostly used variables to declare color, and used these throughout the css file. Its useful to use the same color code if you wish to alter the color on the webpage.
- For the most i have used a linear-gradient(90deg, #007bff, #0056b3); As a background-color
- for the navbar i used : #1e3474;
- And for the text i choose color: white;
For this project i choose to use the font-family: 'Roboto', sans-serif;
Wireframes were created for mobile, tablet and laptops using balsamiq.
The website build with one page The website are responsive and have:
- A favicon in the browser tab.
The site Budget tracker. Begins with a navbar that only contain the name of the page.
Then a header with a welcome text 
After that a section with information about the page and how to get everything working and started
on the right side of the information you will see the form-section
There you can insert your amount and select if it is a income or expense and choose category and the date.
A part with a input that shows that you can set your savings goal.
Next it comes a new section with the name of Summary.
It shows the total income, expense, balance and saving goal and progress.
Budget goals, the budget goals apers in the budget goals overview and will show how much you have set a as a roof and how much you have to the limit.
PieChart and a BarChart.
The pie chart will show every expense in different color. The bar chart will show income and expense.
After that it comes a table with Detailed list of Income and Expenses
here you can see all transactions that been made and edit them or delete if you want.
Last on the page you have the Reset button and that do exactly that it resets the whole page .
After reset:
I have really tried to ensure that the website is as accessible as possible. I have achieve this by doing this:
- Using semantic HTML.
- Using a hover state on all buttons on the site to make it clear to the user if they are hovering over a button.
- Used the fonts because i think them are easily to read for people with dyslexia, and that include my self.
HTML,CSS,JavaScript
-
Balsamiq - Used to create wireframes.
-
Git - For version control.
-
Github - To save and store the files for the website.
-
GitPod - IDE used to create the site.
-
Google Fonts - To import the fonts used on the website.
-
Google Developer Tools - To troubleshoot and test features, solve issues with responsiveness and styling.
-
Favicon.io To create favicon.
-
W3C HTML Validator - To check HTML code.
-
W3C CSS Validator - To check CSS code.
-
JSHint JavaScript Validator - To check the JavaScript code.
-
Chart.js - A JavaScript library.
-
SweetAlert2 - A JavaScript library.
-
Bootstrap - A HTML & JavaScript library.
The site is deployed using GitHub Pages - Budget Tracker
To Deploy the site using GitHub Pages:
- Login (or signup) to Github.
- Go to the repository for this project, Johan-4P/Budget-Tracker
- Click the settings button.
- Select pages in the left hand navigation menu.
- From the source dropdown select main branch and press save.
- The site has now been deployed, please note that this process may take a few minutes before the site goes live.
To fork the repository:
- Log in (or sign up) to Github.
- Go to the repository for this project,Johan-4P/Budget-Tracker
- Click the Fork button in the top right corner.
To clone the repository:
- Log in (or sign up) to GitHub.
- Go to the repository for this project, Johan-4P/Budget-Tracker
- Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
- Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
- Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.
Please refer to TESTING.md file for all testing carried out.
Ive looked at this for some help with popups
-
W3Schools - Help with icons.
-
W3Schools - Help with popups.
-
Google Fonts Icons - Here did i find the icon.
-
Youtube-Kevin powell - He helped a lot.
-
Chart.js - Helped me to get the charts up and running.
The information on the page is written by me.
I would like to acknowledge the following people:
- Jubril Akolade - My Code Institute Mentor.
- The Code Institute Slack - My Tutor Kay_ci