You can find the deployed website HERE
The webapp is designed as an interactive project that gives the user the ability to build a crypto-currency portfolio that is stored on their own computer without having to share their data with 3rd parties.
- Use crypto-currency APIs to display relevant data to the user.
- Offer the user the ability to build their portfolio on our platform.
- Offer the user an interactive way of learning more about blockchain and testing their knowledge.
- Offer a way for the user to communicate with the owner.
- Find price and performance related information for the main crypto-currencies by market valuation.
- Ability to customize a list of currencies and store the data on my device.
- Ability to view the current valuation of assets and portfolio.
- Learn blockchain related information and test my knowledge.
New Users:
- As a new user, I want to see recent data on major crypto-currencies by market capitalization.
- As a new user, I want to add personal crypto-currency assets.
- As a new user, I want to see the asset valuation.
- As a new user, I want to see the total portfolio valuation.
- As a new user, I want to learn new information relating to the blockchain.
- As a new user, I want to learn more about the knowledge quiz.
Regular Users:
- As a regular user, I want to store my portfolio data.
- As a regular user, I want the option to change the current webapp color theme.
- As a regular user, I want the ability to edit previous portfolio entries.
- As a regular user, I want to test the previously acquired knowledge.
Site Owner:
- As a site owner, I want the knowledge quiz to be versatile and easy to update.
- As a site owner, I want to provide the user a way to get in contact.
- As a site owner, I want to showcase my social media.
I have opted for minimalist design focused on user interactivity. The user has the ability to switch between Light and Dark modes with the help of the suggestive switch that is always accessible on the Navbar. The webapp was designed with a mobile-first approach using BootStrap grid for elements to re-arrange based on screen size. The Navbar was also built using BootStrap and collapses on small devices remaining fixed on top of the screen for easy access to the color theme switcher and links.
| Midnight Blue | Red Orange | Ebony | Misty Blue |
|---|---|---|---|
| #00478F | #FF5D00 | #2A231F | #D8E1E7 |
Font Scheme is comprised of the fonts from the Ubuntu Family for titles, Oxygen Family for information of focus and Fira Sans for general text. These fonts were chosen using Google Fonts as they compliment each other.
- Responsive webapp for all devices.
- Navigation bar that adapts to device size.
- Landing Page displaying current information on major crypto-currencies using calls to an external API (CoinGeko API).
- Interactive display of secondary information on major crypto-currencies.
- Personalized Portfolio Page displaying user assets data by calling external API(CoinGeko API).
- Portfolio interactivity (ability to add and remove assets by user).
- Portfolio persistance by storing data on the user's machine.
- Interactive quiz with information from the crypto-space.
- Modal with extra information on the quiz design and interaction.
- Modal with built in e-mail function using external API (EmailJS).
- Interactive color theme switch.
- Customized 404 Error Page.
- Favicon icons.
(Expand) Landing Page Wireframes.
(Expand) Quiz Page Wireframes.
(Expand) Portfolio Page Wireframes.
(Expand) Email Modal Wireframes.
The Landing Page features a grid displaying major crypto-currencies and their current prices. Currencies are organized by market capitalization in descending order. Each currency is displayed in it's own badge that the user can interact with by mouse hover (or tap on touch devices), to access 24-hour high and low prices. All the data displayed is generated dynamically through JavaScript and the CoinGeko API.
All coin badges are dynamically generated with JavaScript and the moment them being displayed are instant confirmation that the information they are viewing is up to date and the API is up and running.
User stories solved by this feature:
- 1 - As a new user, I want to see recent data on major crypto-currencies by market capitalization.
(Expand) Landing Page on different device widths.
The Quiz Page displays a quiz with crypto-currency related questions. Each question is accompanied by a different picture and the pictures featured are hidden on small devices to maintain focus on the quiz.
The info icon at the top of the quiz triggers the Info Modal when clicked, displaying more information on interacting with the game.
At the bottom of the quiz area, a stopwatch is displayed which is triggered when the user clicks the Start Button and stops when End Screen is displayed. On the opposite side, score is kept based on the correct or wrong answers the user selected.
The user is able to choose multiple answers before going to the next question. Feedback to the user is provided in the form of the buttons changing colors and and extra message being displayed when selecting the correct answer which provides additional information related to the question.
The choices in the design were made for first time users to maintain engagement with the information in the quiz. The implementation of a stopwatch instead of a countdown timer and by giving the user the ability to keep trying until they select the right answer before moving to the next question, provides the first time user with the chance to learn something new on initial interactions with the game.
For the returning user the order in which the questions are being displayed is randomized on each game play. The stopwatch and the score keeping provides the ability to test previously acquired knowledge and a challenge to beat previous score and completion time. Score is kept not only by rewarding points for right answer selections but by deducting points for wrong answers. Coupled with the stopwatch feature it adds a variable layer of difficulty and replay value to the game.
The quiz is built to be versatile and easy to update. By loading the questions from a separate file the site owner is able to easily change or update game. The quiz is able to adapt to variable number of answer choices as the HTML is dynamically generated through JavaScript.
User stories solved by this feature:
- 5 - As a new user, I want to learn new information relating to the blockchain.
- 6 - As a new user, I want to learn more about the knowledge quiz.
- 10 - As a regular user, I want to test the previously acquired knowledge.
- 11 - As a site owner, I want the knowledge quiz to be versatile and easy to update.
(Expand) Quiz Features.
The Portfolio Page displays all the user's assets in the form of a table. The user is able to add different currencies by inputting either the name, symbol or by selecting it from a searchable drop-down list; along with the quantity for each asset. Before the asset is added to the portfolio, user input is checked against the list of all coins received from the API. Once it is validated the asset is displayed with the current market price and with a calculation of how much the user's holdings are valued at. Valuations are made both individually per asset and as a total. Users are able to remove assets from their portfolio by interacting with the rubbish bin adjacent to it.
This page makes heavy use of the CoinGeko API. When the user inputs a cryptocurrency name, symbol or just manually selects it from the searchable dropdown list, a check is made against the list fetched from the API and if a match is found then the asset ID is stored in LocalStorage as a key and the asset amount input is stored as the value. This allows the user to keep their portfolio data on their own computer. Due to the large number of cryptocurrencies (over 9000!!!) different endpoints need to be called for the input list and the market list which displays much more detailed information on each cryptocurrency. The keys and values from LocalStorage are converted to JSON format and based on the IDs a custom link is generated when calling the API market list endpoint and only the coins selected by the user are being fetched. Information is then dynamically displayed in the form of a table and asset value is calculated on each API call based on the key value provided by the user and stored in LocalStorage.
To update de asset list the user only has to input the same coin with different value. To remove an asset completely the user can click the rubbish bin at the end of the asset's row.
User stories solved by this feature:
- 2 - As a new user, I want to add personal crypto-currency assets.
- 3 - As a new user, I want to see the asset valuation.
- 4 - As a new user, I want to see the total portfolio valuation.
- 7 - As a regular user, I want to store my portfolio data.
- 9 - As a regular user, I want the ability to edit previous portfolio entries.
(Expand) Portfolio showcase.
The Navbar is responsive to the size of the user's device and houses the Light/Dark Theme Switch. By using the browsers Session Storage the selected theme is kept between pages for the duration of the browsing session. The theme toggler provides an extra layer of user interaction with instant feedback in the form of the background, font and shadow color change.
User stories solved by this feature:
- 8 - As a regular user, I want the option to change the current webapp color theme.
(Expand) Navbar
The Email Modal makes use of the EmailJS API to give the user the ability to send emails to the site owner directly from the webapp. Validation of the input fields is done on the front-end side with javascript and will prevent the form to be submitted with empty fields or an invalid email address syntax. Once the fields have been validated and form submitted the user receives confirmation in the form of an alert.
User stories solved by this feature:
- 12 - As a site owner, I want to provide the user a way to get in contact.
(Expand) Email Modal
In the footer, the user can find links the owner social medial.
User stories solved by this feature:
- 13 - As a site owner, I want to showcase my social media.
(Expand) Footer
The 404 Error Page is displayed in case of broken or absent links. It provides the user with the ability to go back to one of the webapp pages and maintains user engagement.
(expand) 404 Error Page
- HTML5
- CSS3
- JavaScript
- Bootstrap v3.4.1 Components for the navbar, email modal and grid system were taken from the Bootstrap library.
- JQuery 3.6.0 Was used for dom manipulation.
- Github For storing my repository.
- Github Desktop For managing synchronizations between local and cloud-stored repositories.
- Git For version control.
- VSCode IDE for writing code.
- Font Awesome Provided the icons for social media links.
- Google Fonts Ubuntu, Oxygen and Fira Sans font families were used as default fonts for the web application.
- Optimizilla To optimize images for web applications.
- Favicon.io For creating the favicon.
- Canva.com Color scheme generator.
- Namecheap.com For creating the logo.
- EmailJs API Is used to enable email exchange from the webapp.
- CoinGeko API Is used to fetch cryptocurrency information.
- AmIResponsive For the multi-device mockup.
- Markdown ToC Used to generate the table of contents for Readme.md
HTML validation was carried out with W3 Validator.
(expand) Home Page HTML Validation found 0 errors:
(expand) Quiz Page HTML Validation found 0 errors, 2 warnings:
(expand) Portfolio Page HTML Validation found 0 errors, 2 warnings:
(expand) 404 Page HTML Validation found 0 errors:
CSS validation was carried out with W3 Jigsaw.
(expand) css.style Jigsaw Validation found 0 errors:
Accessibility Evaluation was carried out with WAVE Web Accessibility Evaluation Tool.
(expand) Home Page WAVE Validation found 0 errors, 2 alerts:
(expand) Quiz Page WAVE Validation found 0 errors, 3 alerts:
(expand) Portfolio Page WAVE Validation found 0 errors, 3 alerts:
(expand) 404 Page WAVE Validation found 0 errors, 2 alerts:
(expand) Home Page Lighthouse Test:
(expand) Quiz Page Lighthouse Test:
(expand) Portfolio Page Lighthouse Test:
(expand) 404 Page Lighthouse Test:
JavaScript Code Tests were carried out with JShint.
JSHint warnings are due to the use of shorthand for IF statements and the use of JQuery where JSHint interprets "$" as an unknown variable.
(expand) email.js JSHint found 0 errors:
(expand) home.js JSHint found 0 errors 1 warning:
(expand) quiz.js JSHint found 0 errors 1 warning:
(expand) quiz_data.js JSHint found 0 errors:
(expand) portfolio.js JSHint found 0 errors, 3 warnings:
- Samsung Galaxy S8,
- Samsung Tab A 9.7-inch tablet,
- 17-inch 1080p Laptop (Google Chrome, Mozilla Firefox, Opera, Microsoft Edge browsers),
- 24-inch 1080p Display (Google Chrome, Mozilla Firefox, Opera, Microsoft Edge browsers),
- 32-inch 2040p Display (Google Chrome, Mozilla Firefox, Opera, Microsoft Edge browsers).
Application performs as intended on all devices.
GitHub does not allow videos hosted in the local repository to be played on the repository page. Although when viewing on GitHub these videos appear fine, they might not be available in this format if this project is forked. Please refer to the Local Links if needed.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Coin Badges on Landing Page | Load Landing Page. Hover over individual badges. | View current price for each currency. View 24 hour price highs and lows. | Works as expected |
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Portfolio Page | Click the "Portfolio" Link in navbar. Click on Asset Input Field. Input symbol, name or select from list the asset. Click on "Enter amount" Input Field. Enter amount. Click "Add" button. | See the asset added to the table. | Works as expected |
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Asset table on Portfolio Page | Assets added as described in User Story 2 are stored in Local Storage. Refresh Page, view table containing assets. | View current price and valuation for each asset added. | Works as expected |
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Current Portfolio Value section at the top of Portfolio Page | Refresh Page. View total portfolio valuation. | See the total valuation of all assets. | Works as expected. |
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Quiz Page | Click the Quiz Link on the navigation bar. Click the start button on the quiz. Play the game. | Find information related to the blockchain. | Works as expected |
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Quiz info button in the quiz title | Click on the information button. | See modal with information about the quiz. | Works as expected |
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Add asset section on portfolio page | Click on portfolio link in navigation bar. Add asset as described in User Story 2. Close page / browser. Open page again. | To see added assets persist through different browsing session. See added data stored in Local Storage | Works as expected |
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Theme Switch in the Navbar | Click the theme switch in the Navbar | Page color scheme to change | Works as expected |
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Portfolio Page input fields and trash bin icons | To change the Holding amount of an existing asset, select the same asset in the dropdown menu and input new amount. To remove asset from table click the trash bin icon in the asset's table row. | Updated amount to show in table when updating. Asset to be removed when clicking trash bin. | Works as expected |
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| End screen on quiz game | Click on try again button at the end of the quiz | The quiz game starts over and offers the chance to gain a better score and better completion time | Works as expected |
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| quiz_data.js script housing all the questions and answers for the quiz | Open project repository. Locate quiz_data.js in assets/js/. Open quiz_data.js and replace questions and answers. The quiz data is displayed dynamically thus making it easy for variable number of answers to be displayed for one question and not being hard coded in HTML to a specific number. | View new questions being displayed in the quiz. | Works as expected |
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Email modal that uses EmailJS API | Click on "Get in touch" Link in the Navbar. Fill in the input fields. Click Send | Validation when the API sends the message to the site owners inbox. | Works as expected |
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Social media links in the page footer | Click on the social media icons in the page footer | Social media pages to open in new tab. | Works as expected |
-
Bug: Event listener does not trigger on the dynamically generated answer buttons.
-
Fix: Apply the event listener to the button container and add selector for the clicks only on the buttons in the container. Credit to StackOverflow
-
Bug: Multiple clicks on the same answer result function checkAnswer() being triggered multiple times resulting in erroneous score count and multiple displays of validation message for correct answers.
(Expand) Multiple clicks being registered on the same answer:
multiple_clicks_bug_preview.mp4
-
Fix: Each answer button is added an extra class when being generated and event listener for clicks on answers is targeting the class instead of the button element. When checkAnswer() function is triggered for the first time for each answer removes the class from the button preventing the event listener from registering extra clicks.
-
Bug: Unable to add assets to the portfolio that contain a space in their name.
-
Fix: Store assets in localStorage by ID instead of NAME and call API based on IDs instead of their names.
-
Bug: Method to generate random number to select an image from assets to display with each quiz question includes "0" while images names start from 1. Whenever 0 would be generated no image would be displayed and console would display the error:
GET http://127.0.0.1:5501/assets/img/quiz_img/quiz_0_min.jpg 404 (Not Found)
- Fix: Add 1 to all random numbers generated.
The website is hosted and deployed from Github. The steps taken for deployment were:
- Logged into my Github account,
- Selected the Repository,
- Go to Settings,tab on the horizontal menu,
- Go to Pages tab on the vertical sub-menu,
- Selected the Main Branch from the drop-down menu under Source,
- Selected the /(root) folder where my index.html was located,
- Clicked Save,
- Once the page was refreshed I was presented with the link to the live website as seen in the image below:
Steps to follow for cloning this repository:
- Log into your Github account,
- Select the Repository,
- Click on the drop-down menu title Code on the top right of the repository file tree,
- Copy the HTTPS address,
- In your Git Bash Terminal type "git clone" then paste the address.
Alternatively you can download the repository as ZIP or use Github Desktop to ge the repository on you local machine
Using the EmailJS API:
- Create an account/login on EmailJS Website.
- Go to Email Services and add an e-mail service of your choice.
- Got to Email Templates and create one.
- On the integration tab find User ID and Access Token.
- Update script with ID and token.
- Extra documentation on the API can be found Here.
Using the CoinGeko API:
- CoinGeko offers a free plan for the API that does not require signing up for it.
- Going on the documentation page provides information for each endpoint.
- Expand endpoint of interest and click "Try it out", fill in parameters that match your query and click "Execute".
- Use the generated URL to make the call to the API.
- Along with the URL a response body preview and headers are also available to view in the description.
(Expand) CoinGeko API Test
(Expand) CoinGeko API response
I have followed dozens of projects and video tutorials trying to find the solutions that would fit this project. Some influenced my approach on how to build this site and others were specific to a particular issue I encountered. Any code that was borrowed has been modified and adapted to fit my particular needs.
JavaScript/Jquery code:
- Expression to validate if the input is in the form of an e-mail address from StackOverflow.
- To be able to find a building approach for the quiz I watched videos from Brian Design, Florin Pop, Web Dev Simplified. The latter has been the most influential as it was the closest to what I was aiming for.
- The stopwatch feature in the quiz was built based on Crypters Infotech 6-part tutorial.
- For using localStorage/sessionStorage which I used for the portfolio and the theme switch I followed dcode, LogRocket.
- Approach in iterating localStorage from StackOverFlow.
- The approach in building the cryptocurrency portfolio from Creepto and there are definite traces of his code in repo.
- Closest() method to target the entire row for removal in the portfolio I found on Codepedia.
- Syntax for generating dynamic elements with custom CSS from StackOverFlow.
- Method for randomizing questions from Web Dev Simplified.
HTML/CSS
- Using CSS Variables Fireship.
- CSS style for the Theme Switch checkbox was taken from Online Tutorials.
- For the Quiz Info Modal I watched Florin Pop.
- CSS for the custom buttons was inspired from CSS Scan.
- The pop-up in the e-mail form for invalid entries was taken from W3 Schools in combination with PreTagTeam for positioning it on each input.
Media
- Quiz questions/ answers and layout from CoinTelegraph.
- Quiz images from Pexels.
- 404 Page background image from Stockvault.
- Special thanks to my mentor Mo Shami for his suggestions and guidance.
- My family for their encouragement and support.
- Special thanks to Neil from Student Care for helping me through a tough time and everyone else in the Student Care Team that touched bases making sure I am on track.
- The Code Institute team for all the effort and energy they put into creating and curating the content for this programme.
This project is for educational use only and was created as a Milestone Project for the Code Institute Module of Interactive Frontend Development
Developed by Cristian Buca