Math This Property - Real Estate Calculator

Introduction

This real estate app allows landlords, investors, and prospective buyers to workout the financial returns a property will deliver for them. Users can see gross and net returns as well as ROI (Return On Investment) as well as factor in all of the deductions. The project will start out basic and i will add more features and expand it as time goes by. I have added a request a feature function on the page to allow for user guided feedback.

1. User Experience (UX)

• 1.1 Target audience
• 1.2 Visitor goals
• 1.3 Business goals
• 1.4 User stories
• 1.5 Design choices
• 1.6 Wire frames

2. Features

• 2.1 The Navbar
• 2.2 User Inputs
• 2.3 Action Buttons
• 2.4 Financial Breakdown
• 2.5 Footer
• 2.6 Features Left To Implement

3. Technologies/Languages Used

• 3.1 VSCode
• 3.2 HTML5
• 3.3 CSS
• 3.4 JavaScript
• 3.5 Bootstrap
• 3.6 Google Fonts
• 3.7 Icons8
• 3.8 Balsamiq
• 3.9 Still to add animations
• 3.10 Favicon.io
• 3.11 Canva

4. Testing

• 4.1 See testing.md document

5. Deployment

• 5.1 Deployment
• 5.2 Cloning
• 5.3 Cloning Desktop

6. Credits

• 6.1 Media
• 6.2 Code
• 6.3 Acknowledgements

7. Contact

• 7.1 LinkedIn
• 7.2 Email
• 7.3 Skype

8. Disclaimer

• 8.1 Disclaimer on project

---

1.User Experience (UX)

1.1 Target Audience

• This website is aimed at anyone who either owns, or is considering buying an investment property and wants to understand the kind of financial returns that property may deliver.

1.2 Visitor goals

• I want to be able to use the site to enter some details and then see at a glance the type of financial returns a property i own, or am thinking of buying, will return.

1.3 Business goals

• As the site owner there are no business or monetary goals, this is just a free user friendly tool that lets users workout the returns a property will produce for them.

1.4 User Stories

• As a visitor to the company website i expect/want/need

1.5 Design choices

• Below are the design choices i chose for the site.

FONTS

• The font i have chosen for this project is Didact Gothic. Didact Gothic is a sans-serif font designed to present each letter in the form most often used in elementary classrooms. This makes it suitable for literacy efforts.

ICONS

• I decided i would use Icons8 icons for the project. Icons8 has a wide range of colorful and animated icons that are free to use.

• I also used a small number of Font Awesome icons on the site

COLOURS

• Below you will see the colour palette i used for the project.

• Originally when i was designing the site logo i came across this design on Canva

• I did not like the red or the name so I adjusted the colour scheme and the name and ended up with the final logo below:

1.6 Wire Frames

• The wireframes for the project can be seen below. There is a wireframe for desktop, tablet and mobile.

DESKTOP

TABLET

MOBILE

---

2. Features

2.1 The Navbar

• The Navbar is a standard bootstrap Navbar. It holds the company logo in the top left hand corner and menu items which are links. On mobile devices the logo and the site name will always stay visible. On mobile devices the Navbar will collapse to a standard hamburger navbar.

DESKTOP

MOBILE

MOBILE

2.2 User Inputs

• The user has several input fields to work with. The user input fields are coloured light yellow (#ffffe0 HEX) to differentiate them from the output fields which are disabled so the user can not adjust them.

2.3 Action Buttons

• There are 2 button types for the user to interact with. They are:

1. Calculate monthly costs
   
2. Calculate annual costs
   
3. Calculate all costs
   

• When the user presses one of these buttons the relevant calculations will be carried out and be displayed to the user.

• The 2nd type of button the user can interact with is the reset buttons. And they are:

1. Reset monthly costs
2. Reset annual costs
3. Reset all costs

• When the user presses one of these buttons the relevant fields will be reset to zero and displayed ot the user.

• Note: The user doesn't have to reset the entire calculator if they wish to change something after a breakdown has been given. If they wish to change something they can just adjust one single field and press the work it out button and the calculation will run again.

2.4 Financial Breakdown

• The results section will show the user at a glance the detailed returns the property will deliver. These input fields have been disabled so users are unable to alter or adjust the information that gets displayed after the calculation has been displayed.

2.5 Footer

• The footer contains the basic information on the site and the copyright.

2.6 Features Left To Implement

• As this projects is still under development i will be adding new features as i go
• I have added a request a feature message box so users can request features
• I am aiming to look at possibly adding a dark mode

---

3. Technologies/Languages Used

3.1 VSCode - Is the IDE i used for this project
3.2 HTML5 - Hypertext Markup Language - This is the markup language i used for this project.
3.3 CSS - Cascading Style Sheet - I used CSS to help alter and adjust the presentation of the website to create a pleasant user experience.
3.4 JavaScript - JavaScript was used to do the mathematics to give the user the full breakdown
3.5 Bootstrap - Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. Bootstrap 5 is the version i used for the development of this project.
3.6 Google fonts - Launched in 2010 Google Fonts is a library of 1,023 free licensed font families. I used the Google Font Didact Gothic for this project
3.7 Icons8 - Icons8 is an alternative to Font Awesome and offers a wide range of colour and animated icons for people to use.
3.8 Balsamiq- Balsamiq Wireframes is a rapid low-fidelity UI wireframing tool that reproduces the experience of sketching on a notepad or whiteboard.
3.9 Need to add animations at a later date
3.10 favicon.io - Favicon.io is the free favicon generator i used for the project
3.11 Canva - I used canva to design the logo for the site. They have a large number of templates that users can choose from and adjust to their own projects

---

4.Testing

• Testing information can be found in the testing.md file

---

5.Deployment

5.1 Deployment

To deploy the site on Github i undertook the following steps:

1. Navigated to my profile page on Github
2. Selected this project from the repositories
3. Clicked on settings
4. Scroll down to the Github pages section
5. Click where is says source and in the dropdown menu select master
6. Click on the next dropdown menu to the right select /(root)
7. Click save

You will then receive a confirmation saying the page has been published and also be provided with the link where people can view your site.

The link to view the live site can be found by clicking Here

5.2 Cloning

You can clone the projects repository to your local computer by following the steps below:

Cloning a repository using the command line

1. On github navigate to the project repository. The link can be found here: https://github.com/smcgdub/Math-This-Property
2. Click on the tab that says < >code
3. Above the files, click the button that says ↓code

4. From the menu select HTTPS
5. Click on the clipboard icon on the right hand side (Image below)

6. Open the terminal in your IDE
7. Change the current working directory to the location where you want the cloned directory.
8. In terminal type git clone and then paste the URL you copied earlier
9. Press Enter to create your local clone.

5.3 Cloning Desktop

You can also clone the project using Github Desktop. To do this you can do the following:

1. Download Github Desktop if you do not already have it installed. The link can be found here Github Desktop
2. Sign in to GitHub and GitHub Desktop before you start to clone.
3. On github navigate to the project repository. The link can be found here: https://github.com/smcgdub/Math-This-Property
4. Click on the tab that says code
5. Above the files, click the button that says ↓code

6. Click open with GitHub Desktop to clone and open the repository with GitHub Desktop.
7. Click Choose... and, using the Finder window, navigate to a local path where you want to clone the repository.
8. Click clone

---

6.Credits

6.1 Media

• All of the icons i used for the project were from Icons8. All credit for these icons goes to Icons8

6.2 Code

• All of the code in the project i have written myself

6.3 Acknowledgements

---

7.Contact

Feel free to contact me on any of the following channels:

• 7.1 LinkedIn
  
• 7.2 Email
  
• 7.3 Skype

---

8. Disclaimer

• 8.1 This website and all of its content is for educational purposes only. There is no monetization or revenue generated from this site.

---