The Astronomy Quiz - Project Portfolio 2 - JavaScript

The Astronomy Quiz is a small quiz that allows players to test their knowledge of Astronomy. The quiz consists of 3 different levels for the player to choose from, giving more points for harder difficulties. The quiz has 8 questions for each category and if they manage to answer the question correctly, they will receive points based on the difficulty plus additional points for answering the question as fast as they can. The Astronomy Quiz is a brilliant way to not only test your knowledge but also to learn, as the answer will be shown to the player if they either don't answer in time or answer incorrectly.

You can view the live site here - The Astronomy Quiz

Contents

• Objective
• User Experience UX
  • Design Prototype
  • Site Structure
  • Design Choices
  • Typography
  • Colour Scheme
• Features
  • Home
  • Navigation
  • Difficulty
  • Question
  • Results
  • Rules
  • Hiscore
  • Contact
  • Timer
  • Score
  • Audio
  • Planet Bar
• Future Features
  • Global Hiscores
  • Fact Of The Week
  • Monthly Polls
  • Sound Settings Update
  • Submit Your Own Question
• Technologies Used
• Testing
• Deployment
• Credits
  • Content
  • Media
  • Code
• Acknowledgments
• Personal Development

Objective

In my second project, I intend to create a challenging, interactive and fun quiz game for player to test their knowledge on Astronomy. The main objective is to demonstrate competency in HTML, CSS and JavaScript alongside showcasing attention to detail and the importance of thorough testing.

Back to top

User Experience (UX)

Design Prototype

The very first design prototype was created using Balsamiq. I only designed the very bare minimum using this program so that I could have a basic idea of what I wanted to achieve without having to worry about the colour theme, font style, button styles, icons and much more. When I had the basic fundamentals I then moved to Figma to further develop my idea.

The main design prototype for The Astronomy Quiz was produced in Figma. There are design prototypes for Desktop and Mobile. The reason that the design prototype looks very similar to the finished product is because I've learnt that being able to visually see your design before you spend the time implementing it is a very efficient method when it comes to creating something in software development. Being able to use a tool like Figma to "drag and drop" elements will save a large amount of time as opposed to trying to design through CSS, therefore before I implemented something, I made sure to design it on Figma first.

Back to top

Site Structure

The Astronomy Quiz is a one-page website which has been designed to look like an application. When a player visits the website, they are instantly greeted on the Home Page and asked to enter a username. The quiz is very linear and clear so that the player is never left confused on how to play or what to do. The quiz also has a hamburger menu which the player can select to navigate to additional pages such as Home, Rules, Hiscores and Contact. When the player has finished the quiz, they will be presented with a score and then the option to play again which, if clicked, will take the player back to the Home Page.

Back to top

Design Choices

• Typography

  The fonts chosen were 'Poppins' for the headings and for the body text however different font-weights and font-sizes were used to give further clarity. They fall back to sans-serif respectively if the Poppins font can't be loaded.

  • 'Poppins' was chosen for the primarily to give the player an initial welcoming feel. The font-style is very modern and clean and gives a professional and inviting feeling to the website.

• Colour Scheme

  The colour scheme eventually chosen is one based on primarily dark navy, light blue and an off white with the additional soft pink in the background image. This colour scheme gives off a very outer-space like feel and all colours compliment each other.
  
  

Back to top

Features

The Astronomy Quiz website is set up to be very easy to use and visually appealing for the player. It was designed with player-experience in mind. The player should feel like they are doing an Astronomy Quiz just by the visual theme and feel encouraged to keep playing to try and beat their current hiscore.

Existing Features

• Home Section

  • This is the first part of the quiz the player will see when visiting and is designed to allow the player to immediately get started with playing the quiz.
  • In the middle of the website the player will see the quiz application complimented by a beautiful space background.
  • Within the quiz application, the player will be greeted and then asked to submit a name and then click next to be directed to select a difficulty.
  • If the player inputs a name that doesn't meet validation, the player will be given feedback on how to fill the name input correctly.
    
    

Back to top

• Navigation Bar

  • Located at the top of the quiz application and provides the player the ability to navigate back to the home page, enter the menu and turn the game sounds on or off. Whilst the player is currently playing the quiz, the hamburger icon will disappear and will be replaced with additional features such as "Current Question Number", "Time Left" and "Score" to give the player more information and provide a better player experience.
  • An additional GitHub icon will be visible on the contact page for players to see the repository in a new window.
    
    

Back to top

• Menu Section

  • I implemented a menu that the player can access at all times by pressing the 3 white lines in the top right. When pressed, these 3 white lines will disappear, a cross will be shown and then the menu will appear.
  • The player will have access to 4 navigation buttons Home, Rules, Hiscores and Contact.
  • If the player opens the menu during answering quiz questions, the game will not pause. This should promote fair play for all players.
    
    

Back to top

• Difficulty Section

  • After the player has entered their name and clicked the next button on the home page, they will then be directed to this page where they can select a difficulty.
  • The name that the player entered on the home page will be saved as a variable and used throughout the quiz to display personal messages.
  • The quiz has 3 difficulty levels to choose from. Selecting easy will give 10 points per correct answers, medium will give 20 points per correct answer and hard will give 40 points per correct answer.
    
    

Back to top

• Question Section

  • This is the core of the game. The player is asked to answer 8 questions that are Astronomy related and the difficulty of the questions will be determined by what difficulty the player selects in the difficulty section
  • I decided to do 8 questions as there are 8 planets in our solar system. It's a small niche addition that hopefully the player may spot.
  • Each question is randomly displayed from a list of pre-determined questions created from questions.js.
  • If the player answers a correct answer, a "correct sound" noise will play, the correct answer will highlight green, the planet icon will light up, the time will pause and the player will receive points determined by difficulty for answering the question plus additional points equal to the time left. The next question icon will then become clickable after 0.5 seconds.
  • If the players answers incorrectly, an "incorrect sound" noise will play, the correct answer will highlight green, the players selected answer will highlight red and the player will not score points. The next question icon will then become clickable after 0.5 seconds.
  • If the players fails to answer within 30 seconds, the correct answer will highlight green, the incorrect answers will highlight red and the player will not score points. The next question icon will then become clickable after 0.5 seconds.
    
    

Back to top

• Results Section

  • When the player finishes the quiz, they will then presented with a results page which will display the players score and then give them the option to play again if they wish to.
  • The players name that was entered prior to the quiz starting will be used to display a personal message at the end along with giving the player further information in the personal message such as difficulty level, correct questions answered and the final score.
    
    

Back to top

• Rules Section

  • Created to give the player a further understanding of the game and can be accessed via the menu.
  • As well as having informative text, additional icons have been added to further aid the player in understanding.
    
    

Back to top

• Hiscore Section

  • Shows the player the current top 3 hiscores.
  • All scores are saved in local storage so players can only compete with anyone who attempts the quiz on the same machine.
  • The player has the ability to clear the hiscores and start fresh if they wish to do so.
    
    

Back to top

• Contact Section

  • Allows the player to submit any feedback, questions or concerns they may have.
  • Created with Email.JS and allows for emails to be sent directly to a new email address created for this project.
  • Additional functionality added to provide the player some visual feedback if their message fails to send.
  • Confirmation "Sent Message" screen to give the player confidence that their message has been successfully sent.
  • A GitHub icon will be visible on this page for players to see the repository in a new window
    
    

Back to top

• Timer

  • Implemented to add a further dynamic to the quiz.
  • Works in tandem with the score system. Remaining time is added to the score.
  • Time will visibly turn red when the time left is 10 seconds or less.
  • The player will have 30 seconds to answer any question regardless of difficulty level.
  • Time will reset back to 30 seconds upon loading the next question.
    
    

Back to top

• Score

  • Enhances player experience and increases re-playability as players might wish to try beat their current score.
  • The points awarded is determined by the current level selected + time left remaining. Adding the remaining time to the score adds yet another dynamic to the game, encouraging the player to answer fast.
  • The score system has been thoroughly tested and there are no known bugs which the player can exploit to manipulate their score.
    
    

Back to top

• Current Question Indicator

  • Provides the player with a clear indication as to which question number they are currently on.
    
    

Back to top

• Audio

  • Gives the player additional information and feedback when navigating the quiz.
  • Correct sound audio played only when an answer is answered correctly.
  • Incorrect sound audio played only when an answer is answered incorrectly.
  • Button Click sound audio played only when the player clicks on a button.
  • Can be toggled off and on by clicking the sound icon in the top left.
    
    

• Planet Bar

  • Located at the bottom of the quiz, the planet tracker will initially start with all the planets greyed out. If the player answers a question correctly, the planet will then have colour.
  • If the player answers incorrectly or fails to answer within time, the planet will remain greyed out.
  • A small visual addition to encourage the player to answer all questions correctly to see all the planets light up.
    
    

Back to top

• Future Features

• Global Hiscores

  • Instead of hiscores saving locally, having the hiscores save globally would be much engaging for the player as they would be able to compete with others around the world to test their knowledge.

• Fact Of The Week

  • Having a page dedicated to displaying interesting Astronomy facts weekly would increase the the chances of people returning to the website/quiz application to see the new fact.

• Monthly Polls

  • Having a poll section where the player can submit their vote on a poll and then see results from others around the world would be a good way of seeing peoples different views and opinions on astronomy related topics. For example, "Which is your favourite planet?".

• Sound Settings Update

  • I believe it would be much more intuitive to save the players sound settings so that when the player refreshes the page, they don't have to keep turning the sound off every time if they don't wish to hear sound.

• Submit Your Own Questions

  • Having a section where a player could submit their own question to be displayed within the quiz would increase user interaction and entice the player to keep returning to see if their question has been successfully added. Each question submitted would have to be factually validated before implementing it.

Back to top

Technologies Used

• HTML5 - Provides the content and structure for the website.
• CSS3 - Provides the styling for the website.
• JavaScript - Provides the functionality of the website.
• Figma - Used to create the design prototype.
• a11y - Used to test the contrast and accessibility.
• Favicon - Used to create the favicon.
• Compressor - Used to compress the images.
• VSCode - Used to create and edit the website.
• GitHub - Used to host and deploy the website.
• GitBash - Terminal used to push changes to the GitHub repository.
• EmailJS - Used to implement a working email system.
• removebg - Used to remove background images.
• Mobile Simulator - Used to test the quiz whilst on a mobile device
• Google Chrome DevTools - Used to test responsiveness and debug
• Responsive Design Checker - Used to test responsiveness

Back to top

Testing

• Code Validation

  • The Astronomy Quiz has been thoroughly tested. All the code has been validated via the W3C HTML Validator, the W3C CSS Validator and the JSHint Validator. 3 HTML errors, 1 HTML warning, and 4 CSS warnings were found when tested on HTML Validation and W3C CSS Validator but were fixed immediately and documented below.
    
    

• HTML Validation Image

  

• CSS Validation Image

  

• JS Validation Image

  • As for JavaScript, I have multiple JavaScript files which provide the functionality for specific features within the quiz. I decided to do this to provide better readability for anyone who wishes to read the code behind this project. When I put each individual file through JSHint Validator, I noticed a few warnings that were showing such as unused variables and undefined variables however I realised that is because I have not exported and imported variables and functions. I did look into this and found some very good documentation on it at JavaScript.Info but after speaking with my mentor, he said that it was not mandatory as the course has not yet covered it. To further solidify that I did not have any unused variables or undefined variables, I decided to create a file called combined.js which has all the JavaScript code for the quiz and put that one file through the JSHint Validator
    
    

  

• Undefined Variable - emailjs

  • I tried multiple times to fix this but because I was using EmailJS for my contact form, I was unable to declare these variables or change them.
    
    

• Warning 1

  • Expected an assignment or function call and instead saw an expression. This warning is caused by line 10 in audio.js. I have spoken to my mentor about this warning, and he has said that this is absolutely fine.
    
    

• Warning 2

  • Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. This warning is caused by the for loops I have which loop through a class and then add a click event listener which will toggle the hide class on and off. This allows me to have more concise HTML as I only need to reference one class instead of having multiple different ID's for each different game section but for the same element. I have spoken to my mentor about this warning, and he has said that this is also fine and will cause no problems.
    
    

• Lighthouse Testing

  • Furthermore the website has been through the Chrome Dev Tools and Microsoft Edge Dev Tools Lighthouse Testing which tests the website for the following:
    • Performance - How the page performs whilst loading.
    • Accessibility - Is the site accessible for all players and how can it be improved.
    • Best Practices - Site conforms to industry best practices.
    • SEO - Search Engine Optimisation. Is the site optimised for search engine result rankings.
      
      

• Edge Desktop Lighthouse Result

  

• Edge Mobile Lighthouse Result

  

• Chrome Desktop Lighthouse Result

  

• Chrome Mobile Lighthouse Result

  

• Accessibility Testing

  • I also put the website through a11y to further test the contrast and found no issues.
    
    

  

• Responsiveness Testing

  • The responsive design tests were carried out manually with Google Chrome DevTools and Responsive Design Checker.
    
    

  

• Real World Testing

  • Although checking the responsiveness via Google Chrome DevTools and Responsive Design Checker, I quickly noticed that these tests, whilst still vital and good, don't actually give me 100% accurate results as they don't show mobile keyboards and how that effects the website. After running into a bug (explained here), I downloaded a Google Chrome Extension called Mobile Simulator which can simulate mobile devices which will show the keyboard and the effect it has on the website.
    
    

  

• Future Responsive Updates

  • Whilst every effort has been made to account for any and all devices, due to the nature of the quiz application, some devices may be too small to fully support the quiz. The devices that will be unable to support the quiz at the moment will be older devices, devices with very small screens and smart watches. Future updates would consider the "business benefit" of making these devices compatible given the time and resources it could potentially consume.
    
    

• Compressing Images

  • All images have been compressed with Compressor and I managed to save a total of 736 KB.
    
    

  

• Manual Testing

  • In addition to the other tests, I have conducted a manual check list for myself to carry out to make sure that everything is working as intended.

  • Manual Tests Conducted

    • Home/Landing Section
      • Verify that clicking on the home icon reloads the website to the home page
      • Verify that clicking the sound icon will toggle the audio
      • Verify that clicking the hamburger icon will open the menu
      • Verify that clicking the next button without a valid name will prompt the player and not go to the difficulty page
      • Verify that clicking the next button with a valid name will go to the difficulty page
      • Verify that hovering over the tooltip will show the player some helpful information on how to enter a correct name
    • Menu/Navigation Section
      • Verify that clicking the hamburger icon will open the menu and the hamburger icon will become a cross icon
      • Verify that clicking the cross icon will close the menu and the cross icon become a hamburger icon
      • Verify that clicking the home button within the menu will reload the website to the home page
      • Verify that clicking the rules button within the menu will load the rules page
      • Verify that clicking the hiscores button within menu will load the hiscores page
      • Verify that clicking the contact button within the menu will load the contact page
      • Verify that clicking any of the aforementioned menu buttons will hide the menu and show the correct page
    • Difficulty Section
      • Verify that clicking the easy button will load the easy questions in a random order
      • Verify that clicking the medium button will load the medium questions in a random order
      • Verify that clicking the hard button will load the hard questions in a random order
      • Verify that the players name is displayed within the "Great stuff" message
    • Question Section
      • Verify that the question and the answers are displayed correctly
      • Verify that the hamburger icon will disappear
      • Verify that the score icon will show and will accurately increase score
      • Verify that the timer will show and will count down from 30 seconds to 0 seconds
      • Verify that the timer will turn red when the time left is 10 seconds or less
      • Verify that the timer will reset back to 30 seconds when the next question is loaded
      • Verify that the players selected answer is highlighted correctly (green = correct / red = incorrect)
      • Verify that if the player selects a correct answer the "correct" audio sound will play
      • Verify that if the player selects an incorrect answer the "incorrect" audio sound will play
      • Verify that if the player doesn't select an answer and runs out of time, the correct answer is shown and the player doesn't score points
      • Verify that the next question icon is greyed out and not clickable whilst the question is unanswered and there is time remaining
      • Verify that the next question icon returns to colour and is clickable if the question is answered and if there is no time remaining
      • Verify that the next question icon correctly loads the next question if there are questions remaining
      • Verify that the next question icon correctly loads the results page if there are no more questions remaining
      • Verify that the planet icons turn to colour if the player answers a question correctly and remain greyed out if they get it wrong or don't answer
      • Verify that the answer buttons become not clickable when the question has been answered or the time has run out
      • Verify that the answer buttons become clickable when the next question is loaded
      • Verify that the current question icon correctly shows the player what question number they are on
    • Results Section
      • Verify that the players name is displayed in the "you managed" message
      • Verify that the correct amount of answers is displayed in the "you managed" message
      • Verify that the correct difficulty level is displayed in the "you managed" message
      • Verify that the players score is displayed correctly
      • Verify that the "Play Again" button will reload the website and go to the home page when clicked
    • Rules Section
      • Verify that the rules page is displayed correctly
      • Verify that any icons used within the rules page are not clickable
    • Hiscores Section
      • Verify that the hiscores list gets updated when a player has completed the quiz and has refreshed the website
      • Verify that the "Clear Hiscores" button reloads the website and then clears the hiscores list so that it is empty
    • Contact Section
      • Verify that the name input gives the player feedback if the name input doesn't validate
      • Verify that the email input gives the player feedback if the email input doesn't validate
      • Verify that the message input gives the player feedback if the message input doesn't validate
      • Verify that the "Sent Message" page is displayed if the contact form has been filled in correctly and the message as been successfully sent
      • Verify that hovering over the tooltip next to name input will show the player some helpful information on how to enter a correct name
      • Verify that hovering over the tooltip next to email input will show the player some helpful information on how to enter a correct email
      • Verify that hovering over the tooltip next to message input will show the player some helpful information on how to enter a correct message
      • Verify that clicking the GitHub icon opens the repo in a new window
      • Verify that emails sent don't get sent multiple times
        
        

• Browser Compatibility

  • The website has had manual and responsive tests conducted on the below browsers with additional Lighthouse testing on Google Chrome and Microsoft Edge and I was presented with no issues.
    • Google Chrome
    • Microsoft Edge
    • Safari
      
      

• Bugs Fixed

  Size Error Flicker

  • After testing the quiz via website tools, I decided to test it on my iPhone 7 Plus and had no errors whatsoever. I then sent it to my friend who has a Huawei P30 Pro and he was presented with the below issue.
    
    
  Size Error Flicker GIF (EPILEPSY WARNING)

  

  
  
  • After spending many hours trying to debug this issue on my own and then with Code Institute Tutor Rebecca, it was my brother Jack Ralph that quickly noticed that the problem wasn't as complicated as I once thought. The error was showing because I had a media query that displayed an error message if the players screen width and height wasn't large enough to support the quiz. As soon as I removed that media query, the bug was fixed, however I've noticed in programming that you fix one bug it can then generate multiple other bugs or problems. In my case, I now didn't have anything detecting if the device was too small to support the quiz. So I was stuck with a problem, I needed to remove the media query to allow keyboards so players can enter information and I needed the quiz to be fully responsive across all devices. After many hours of theorising and coming up with multiple solutions, I decided that having the quiz in landscape mode whilst on a mobile device was not practical for the player experience and decided to implement JavaScript that would detect if the player is on a mobile device and is also in landscape mode. If those two conditions are true, display an error message to the player, if those two conditions aren't true, then do not display the error message. Whilst not the most absolutely ideal solution, it was the best solution given the time constraints.
    
    

  

  

  

  Console Error

  • A console error appeared when inspecting the website with Google Chrome DevTools and stated "Failed to load resource: the server responded with a status of 404 () /favicon.ico:1. Because I had encountered this error on my Portfolio Project 1, I knew that this was simply due to the website not having a favicon.
    
    

  

  • After implementing the favicon, the console error had disappeared.
    
    

  

  HTML Validation

  • After putting the website through HTML Validation, I was presented with the following errors below:
    
    

  

  

  

  

  • The above warning and errors were very simple to rectify as I only had to remove anything that had been duplicated or anything that was not allowed. After removing anything that was prompted, I was presented with no warnings and errors.
    
    

  

  CSS Validation

  • After putting the website through W3C CSS Validator, I was presented with the following warnings below:
    
    

  

  • The above warnings identified that where I had used -webkit-background-size, -moz-background-size and -o-background-size, these are vendor extensions. After removing them, those 3 warnings had been fixed. As for the first warning (line 11), this was caused by me using color: var(--clr-text); to apply the colour. After I had changed this to #faf9f6, the warning error had been fixed.
    
    

  

  Duplicate Emails Sent

  • After asking the kind Slack community to peer review my project, I checked my EmailJS inbox to see if I was receiving emails from others correctly, and I was which was brilliant. What I actually noticed was the same email from the same person but 4 times.
    
    

  

  • When I saw this, I thought it was too odd that this person had sent 4 separate emails that had the exact same message of "Tyggffffffffff", so I decided to look into it further. What was happening is because there is delay from the user clicking the send button to them seeing the sent message screen, if the user then clicks that button again whilst it is still visible and clickable, it will send that message as many times as that button has been clicked. What I did to prevent this from happening, I disabled the send button from being clicked again and provided the user some feedback letting them know that their message is currently sending (Line 26, 27 and 28).
    
    

  

  • If the email failed to send, then make the send button active again and reset the "Sending..." text back to "Submit" to give the user further feedback that they can attempt again. (Line 62, 63, 64, 72, 72, 73, 80, 81 and 82).

  

• Bugs Unresolved

  navigator.userAgent/appVersion and platform

  • When inspecting the website with Google Chrome DevTools, the website is showing 1 issue which is the same issue I had on my Project Portfolio 1 so I'm familiar with it.
    
    

  

  • I've done some research and apparently this is a Google Chrome issue as per this source and has been reported here. Additionally, I have tested this website with Microsoft Edge and the issue doesn't show.

  'interest-cohort'

  • When inspecting the website with Google Chrome DevTools, the website is showing 1 warning when I refresh the deployed project.
    
    

  

  • Upon browsing the internet, I found this post on StackOverflow which explains that "GitHub hosted pages disable FLoC, which is Google's 3rd party cookie alternative. GitHub, Microsoft, doesn't seems to like it. There is also a link to an official GitHub blog about it here.

Back to top

Deployment

To deploy the project

The site was deployed to GitHub pages. The steps to deploy a site are as follows:

1. In the GitHub repository, navigate to the Settings tab.
2. Once in Settings, navigate to the Pages tab on the left-hand side.
3. Under Source, select the branch to master, then click save.
4. Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

To fork the repository on GitHub

A copy of the GitHub Repository can be made by forking the GitHub account. This copy can be viewed and changes can be made to the copy without affecting the original repository. Take the following steps to fork the repository;

1. Log in to GitHub and locate the repository.
2. On the right-hand side of the page inline with the repository name is a button called 'Fork', click on the button to create a copy of the original repository in your GitHub Account.

To create a local clone of this project

The method from cloning a project from GitHub is below:

1. Under the repository’s name, click on the code tab.
2. In the Clone with HTTPS section, click on the clipboard icon to copy the given URL.
3. In your IDE of choice, open Git Bash.
4. Change the current working directory to the location where you want the cloned directory to be made.
5. Type git clone, and then paste the URL copied from GitHub.
6. Press enter and the local clone will be created.

The live link to the Github repository can be found here - https://github.com/MikeR94/CI-Project-Portfolio-2

Back to top

Credits

Content

• The font came from Google Fonts
• The colour palette was displayed by Coolors
• The HTML icons came from Font Awesome
• The responsive preview image at the top of the README.md came from Techsini
• The favicon came from Favicon
• The questions and answers came from TriviaWell, IcebreakerIdeas, FreePubQuiz, eadt and QuizGlobal

Media

• The background image came from WallpapersMug
• The favicon image came from flaticon and then turned into a favicon by Favicon
• The icons for the planets came from VectorStock
• The icons for the hiscore ribbons came from iStock
• The photos were compressed using Compressor

Code

• The code for the hiscores was based off guidance and inspiration from a player name Minna N. I used DevTo to gain a good understanding of what is required to create a hiscores system using local storage and then implemented a version of my own for The Astronomy Quiz.
• For the contact form, I wanted to be able to actually receive emails and understand how that can be achieved. I stumbled upon a brilliant website called EmailJS that has some very clear and informative documentation which explains how you can embed a working email system on your website.
• When searching how I could implement audio through JavaScript, I found this StackOverflow post which explained some basic concepts on how to achieve it. After managing to implement audio on my quiz, I decided to refactor the code to make it more readable and also reusable.
• I feel like adding a timer on a quiz can make it more engaging for the player and provide a better player experience. After searching online for some information, I found this StackOverflow post which shows a basic example of a countdown timer. After understanding the fundamentals behind it, I decided to implement it but refactor it to suit my needs.

Back to top

Acknowledgments

The site was completed as a part of a Full Stack Software Developer Diploma at the Code Institute and is my Portfolio Project 2. I would like to thank my mentor Precious Ijege, my educator Luke Walters, and my brother Jack Ralph, the Slack community, and all at the Code Institute for their help and support.

Personal Development

Creating this project was incredibly fun, challenging and also very rewarding in terms of educating myself further. I encountered so many things that forced me out of my comfort zone, making me spend hours scratching my head and then eventually, after persisting and approaching problems at different angles, I was able to solve these problems. I've learnt that sometimes it helps to just take a step back, clear your mind and attack the problem from the very beginning. Sometimes when your deep within the zone and have written hundreds of lines of code and all of a sudden something breaks, don't get frustrated, these things happen. Retrace your steps and try to identify the point of failure. Failing to do that, take 5 minutes, get some fresh air, get the notepad out and start breaking everything down from the very beginning to the end.

When I first saw JavaScript, like anyone, I was overwhelmed but like everyone has been saying, persisting with it, trying different approaches and accepting that it is challenging helps so much and now when I see a large JavaScript file, I don't feel overwhelmed, I start to dissect everything into smaller pieces, so I can understand the bigger picture.

Everything I have learnt during this project will help me tremendously throughout my career, and I am very grateful for every head scratching bug that I have encountered and I'm yet to encounter.

Mike Ralph 2022.

Back to top