Constructed as part of Code Institute's Milestone 2 Project: Interactive Front-End Development module
It's my pleasure to convey and hopefully extend a cordial welcome to you all into my second project, which means a lot personally as it is based on the wonderfully expressive language of communication into British Sign Language (BSL) and how the pandemic has significantly impacted on the deaf community, whereby it has provided inspiration into this game project. It is with recognition yet also grateful thanks of the time & commitment to immerse yourself into the development of this website in which you will learn how to use fingerspelling at the basic level and utilise the resources available.
Active link to the BSL Fingerspelling Game
- Overview
- User Experience Design (UXD)
- Technologies Utilised
- Project Bugs and Solutions
- Testing
- Deployment
- Credits
As I approached the second milestone project, which derives on the learning experience of exploring through the fundamentals of JavaScript and the Interactive Front-End Development modules (that focuses on jQuery, Application Programming Interfaces (abbreviated as API) and utilising an email JS service), attention has now progressively transitioned from a static site to one that will become interactive whereby it allows visitors to actively engage with data. It also completes what's known as the 'trinity of web development' that forms the basis of front-end development which concerns itself with components such as HTML, CSS and the additional insight into JavaScript plus any of its associations.
The core focal point of this project will consist of constructing an interactive front-end website that will provide the value of enabling users a sense of engagement by targeting those who have a love for either language, communication or a sense of community that are looking for a different way to socialise or alternatively make a positive difference to inspire many deaf and hearing impaired individuals. It also enables users to interact with the data as presented in order to achieve their personal goal by responding to their actions actively.
The sole purpose into this website is one that originated through coincidence via a discussion with a tutor who had expressed an interest in a subject that relates to oneself personally and was requesting some resources into it. This lead to an identifiable moment of inspiration into a conceptual idea towards the project in constructing an interactive front-end website which is a reflection of the module learnt.
This had been established to represent a window of opportunity into the development of a memory matching game that has an objective of it being educational to the users, specifically aiming to raise awareness of deafness as a whole by introducing British Sign Language (abbreviated as BSL). This in my view was an excellent idea to utilise the functionality & capability of the JavaScript language that would enable users either with a vested interest or as a new interest into a hobby to practise and improve on their BSL fingerspelling skills.
The approach into the construction serves as a purpose of demonstrating the knowledge and skills obtained within the programming language of JavaScript and/or jQuery, by way of providing new/returning visitors the key to an open door as an introduction, (that is akin to the Code Institute's 5 day coding challenge), into the community of the deaf society and how they communicate to one another.
The value in this would be based on the hope to create an impact that influences a positive contribution to this community, especially and yet significantly more so under the current times of the pandemic. The objective of it is that it encourages potential users to use the social qualities of being considerate and thoughtful in the manner of being helpful by engaging to communicate with them to break through the social barriers or assisting them in their difficulties.
Also research was undertaken to establish if such a game exists which will form the basis of this project and it was with luck that one has been developed through a resourceful website.
To summarise the website project's goals:
- To demonstrate the implementation of acquiring a new knowledge & skill in JavaScript whilst supplementing the experience of HTML & CSS to the design & development of the project.
- To provide an interactive educational game to target interested users with the objective of achieving in acquiring the knowledge and in addition the ability to fingerspell or action in motion the alphabet in BSL as a foundation.
- To construct a game that elicits a positive user experience in a way that it encourages new/returning visitors to continue the learning experience in an engaging way that is resourceful to them.
-
As a user, I want to be able to understand with ease into the sole purpose and comprehend the rationale as to why the website has been built and developed, so I can see if it is relevant or of interest to me.
-
As a user, I want to be assured that the website overall and its content can be viewed clearly on a range of devices to enable an opportunity to be flexible in my learning.
-
As a user, I expect to be given instructions as guidance into the rules which is easily understood as to how the game is to be played and the learning outcome of it to experience the benefit of utilising it.
-
As a user, I want to comfortably be allowed to commence the game when I am prepared and it is suitably convenient to proceed, so I can perform this to the best of my ability.
-
As a user, when presented, I expect to see a clear image depicting an alphabet in BSL in sequence to form a word and have the ability to replicate the sign so that I can be competently confident when applying it in the real world to achieve a personal goal.
-
As a user, I want to be provided with a resourceful section consisting of content as a guiding reference point, that would easily be referred to, assist me when there is a moment of doubt and potentially demonstrate it by motion in reality.
-
As a user, when I am confident in the knowledge, I want to be able to enter my answer so that the experience feels like I am participating in the game.
-
As a user, I want the game to determine whether my answer was correct or incorrect and that there is clear feedback that is complimentary and encouraging in a positive manner at any stage in the game.
-
As a user, I expect to have the opportunity to re-enter my answer when the previous suggestion is incorrect to help me acknowledge where I need to make improvement in my learning or memory matching abilities.
-
As a user, I would like to visually view my score in the current game to gain confidence in the ability to learn so that I can assess my competency levels.
-
As a user, I expect the game to provide a notification when the time is up so that I can acknowledge when my learning or memory matching opportunity has ceased.
-
As a user, I expect the game to offer the option to restart, subsequent to the current play mode that has finished allowing me to continue my learning and make progress.
-
As a user, I would like to access any further resources that would supplement or advance my learning, should I wish to dedicate a commitment in making a difference within a community.
-
As a user, I expect to be able to access contact details into the owner of the website, should I wish to reach out by raising queries, commend the game by providing feedback.
-
As a user, I would like to explore other projects that the developer has constructed to assess their range of technical skills and level of competency so that I can establish if it is of interest to me.
- As a user who uses a screen reader technology, I want this to access most elements and controls, especially describing the depicted images without giving away the answer.
The features which I envisage to incorporate into the project are as follows:
- An introduction that delves into BSL and the purpose of the website
- Instructions into the game that clearly defines into the usage of how it is to be played
- A play button to activate the game
-
Various high quality images that depicts a sign of an alphabetic letter for clarity
-
The ability to flash each image to form a sequence into a word (refer to website to experience it)
- A BSL Fingerspelling game that aims to be interactively engaging
- A contact form that actually sends an email to the developer directly to their email address and a modal that assures the user/visitor that their message has been submitted
These items are above are determined in the below table: (scale is judged whereby 0 is insignificant and 5 represents as very important)
| Item | Description | Importance | Viability | Score |
|---|---|---|---|---|
| 1. | Introduction to BSL & purpose | 4 | 5 | 9 |
| 2. | Interactive & engaging BSL game | 5 | 4 | 9 |
| 3. | Defining the instructions | 4 | 5 | 9 |
| 4. | Obtaining high quality images | 5 | 5 | 10 |
| 5. | Flash the sign letter as images | 5 | 3 | 8 |
| 6. | Construct a play button | 4 | 5 | 9 |
| 7. | Construct speed level | 3 | 4 | 7 |
| 8. | Construct a countdown timer | 4 | 5 | 9 |
| 9. | Create a timer per word | 5 | 3 | 9 |
| 10. | Approve/encourage when typed word | 5 | 4 | 9 |
| 11. | Construct a replay button | 5 | 3 | 8 |
| 12. | Construct game score | 3 | 4 | 7 |
| 13. | Construct concluding game message | 4 | 4 | 8 |
-
The option where users can select their appropriate speed level of how slow/fast the images flashes through a modal
-
A countdown timer that gives users some breathing space prior to commencing the game
-
A timer that is based on each word which a user is given as opposed to the overall time allocated to complete the game for ease of use
-
An interactive message that determines when the word is incorrect when typed in and notifies the user by way of a positive/encouraging response yet apply complimentary praise when correct
-
A replay button that allows users to review the alphabetic letters as images that has been displayed
-
A small area that calculates the score per word which builds up to the total score
-
An overview message into the progress of their learning and to provide positive encouragement
Retrospectively, it was immediately yet concretely identified in the duration of the planning stage that by comparison to the previous milestone project and with some guidance that I had to consider the aim of keeping this to a minimalistic design overall, including content to accommodate and focus the attention on the sole major development into the interactive yet functional game. The rationale into this perspective is that the languages used within this website is an unfamiliar territory to me on approach to this milestone project, therefore this journey will be a steep learning curve overall in equal measure with the learning experience of the module.
Thus the structure into the JavaScript game project aims to be simple in that it has basic content yet will consider a linear narrative approach which is enough I feel to create a function yet resourceful method of learning a new skill. The advantage to this is that it reduces the need for the website to be majorly responsive across the range of devices, with the exception of the playing game area.
In order to provide a good user experience for new/returning visitors, I feel it would be of great benefit to take into consideration of constructing various webpages, again, that would enable content to be broken up into sections appropriately for simplicity. Also, intuitively it feels that by doing it this way, content can be spread out and gives better flow of information in a logical manner, as opposed to developing one page consisting of various sections to optimise the website a bit more.
For this particular project, functionality and interactivity becomes a bit more prominent therefore I acknowledged the principle within the duration of the design process, whereby I had to consider in keeping the concept of the JavaScript game as simple and effective as possible. This reflects the aforementioned as above in the structure being basic for the very reason in accommodating the new knowledge and skills to utilise the programming languages into the complex world JavaScript and its associative languages or technologies such as the lightweight version of jQuery.
Given that Interaction Design (IXD) is concerned with 5 parts that ensures the site is: visible, learnable, predictable, that clear and intuitive feedback is provided and consistent throughout, more emphasis and consideration can be placed upon these when constructing an interactive JavaScript Fingerspelling game.
- Visible:- that the site conveys clarity in all aspect of IXD, especially with the images of the signs
- Learnable:- the content provides a learning experience through supplementary information and resources
- Predictable:- the behaviour of the game offers users functional features as part of an interactive game
- Clear and intuitive feedback:- the message of these are clear and offer a positive experience
- Consistent:- the site gives the impression that it is consistent in design & functionality
Another aspect of my approach into the Interaction Design within the website is the adaption of choice to appropriately include modals and these apply to when users: click on the 'Introduction' button that allows them to access more information into the subject and purpose of the development, decide when they want to find out how to play the memory matching game, the interactive positive/encouraging messages, the overall score at the conclusion of the game.
To add further UX to the design of interaction for new/returning visitors, some darker subtle colours will be applied to buttons and icons to create a positive appeal and within the footer, an expanding effect will be applied when hovered over the social media/contact icons.
The structure of the information architecture will be such that it is to consist of 4 webpages in total which again, retains the simplicity into the website and as aforementioned to allow the focal point be on the development of the JavaScript game.
It will be structured in the form of a simple yet basic hierarchy whereby at the top level will be 'Home', and the remainders will be at a level that is horizontally in equal measure such as 'BSL Fingerspelling game', 'Resources' and 'Contact'. Within the next section will illustrate this thought process.
Below represents how the website will be structured on the basis of the information architecture in the form of a sitemap along with details for each of the webpages within the project and illustrates the logical thought process into different sections:
- Home :- this will include an image of a logo depicting a sign for each letter of BSL, various buttons whereby two of these is to produce a modal and the remaining two a link to a webpage respectively. Lastly, a footer will be included with icons that links to GitHub, LinkedIn and to 'Contact' webpage.
- BSL Game :- it is to consist of the same image as 'Home', a div area (originally I had considered using the canvas element as the area where the active game is to be played, however after consulting with the Slack community, my mentor and IFD Lead, it was recommended that I steer away from utilising this) in which the game will be undertaken, that will contain four modals; firstly to select the game level, a countdown timer, an interactive positive/encouraging message and finally a concluding modal for the overall score & to restart the game.
- Resources :- I plan to provide new/returning visitors with a range of resourceful information to supplement their learning or interest with links to various websites.
- Contact :- Again, quite simply this will be a contact form that will reset when submitted and the message will be sent to my professional email address via EmailJS.
Taking into consideration of the above Structure plane, the navigation and interface design can commence in the form of building the Skeleton of the website through wireframes as provided below:
As part of the planning processes, I was quite satisfied in utilising the software Balsamiq to form a blueprint for my JavaScript game website which has considered devices such as mobile, tablet and desktop, that can be access as below for each of the webpages:
Given that the focus is on constructing a game, I thought it was appropriate to research and select bold colours that illuminates vibrancy within the palette to convey a psychological element of fun and playfulness to reflect the project.
Source: Coolors
The choice of these generated colours attracted me for its boldness, especially the tone of blue, green and orange which I felt would initially work and complemented towards the idea which having alternated these within my wireframes, I was satisfied with my final decision. The focal colours that will be used on the website is primarily the fluorescent green and teal whereby #BDBF09 will be used within the main content and #2292A4 will be applied to the footer which are both separate elements.
For the buttons, I thought it was appropriate to use the orange (#D96C06) as a background colour with a tone of white (#F5EFED) for the font, which instinctively I had realised accessibility needed to be considered for the colour choice thus this was sensibly checked through Accessible Colors and it was advised that as long as the text was in bold weight, this was deemed as acceptable.
Separately, in relation to the modals, I was conscious of not overpowering the background colour by utilising the orange (#D96C06) as it may be perceived as a warning alert message, therefore I took the sensible decision to have a white (#F5EFED) background, then utilise the orange (#D96C06) for the border with a teal (#2292A4) as the font colour. I had intended in wanting to apply the fluorescent green (#BDBF09) as the font colour, to give an element of positivity in various messages, however, much to my disappointment Accessible Colours deemed this as a fail therefore a blend of black (#0F0A0A) was an appropriate alternative which I decided to choose in place of my preference.
Bearing in mind that this is a memory matching game, I wanted a creative font for all my headings and this would come in the form of a calligraphic style entitled as 'Akaya Telivigala' which is a trending yet contemporary typography and I had decided that this would be complemented by 'ABeeZee' which is friendly yet one that supports the process of learning and both these fonts felt appropriate in comparison to what Google Fonts were on offer.
These are going to be provided by Font Awesome which would be used where appropriate yet in moderation such as to activate the game and social media links.
In order to fully engage with the development of JavaScript, I have decided to keep the number of imagery to a minimum by simply including a logo to complement the subject of the game and also incorporate a series of images within the BSL Fingerspelling Game.
Balsamiq :- the software has been utilised whereby it is related to the creation of wireframes as part of the preparational work into the duration of the design process through the website portfolio.
GitHub :- this is a collaborative tool which consists of a community of developers and has been used to store the coding of the project subsequent from being pushed via Git.
GitPod :- an online Integrated Development Environment (IDE) editor utilised to create files and code the website.
Git :- a form of versioning control by way of utilising the terminal within Gitpod to commit to Git, then subsequently push to GitHub.
JavaScript :- the core part of this language was utilised to develop the memory matching game and also a brief bit of HTML coding has been applied to link with Bootstrap's navbar being responsive, which relates to the functionality of the hamburger menu component applicable in mobile view.
jQuery :- a brief bit of HTML coding has been applied to link with Bootstrap's navbar being responsive, which relates to the functionality of the hamburger menu component applicable in mobile view.
Popper :- a brief bit of HTML coding has been applied to link with Bootstrap's navbar being responsive, which relates to the functionality of the hamburger menu component applicable in mobile view.
EmailJS :- this is a client-side technology that helps to send emails.
Bootstrap v5 :- this is a CSS framework which is used to assist with making the design responsive whilst being complimentary with the styling of the website, for two modals specifically introduction & instructions and a contact form.
Google Fonts :- these were used to import the typography of the website into the stylesheet file and is utilised on all webpages.
Font Awesome :- a sparse amount of icons was added for the purpose of aesthetic appeal and UX design.
CSS3 :- this is the current standard that is used to style HTML content of the website.
HTML5 :- this is the current standard that is used for the markup of the website.
gimp :- this is the GNU image manipulation program that was used to crop the BSL images to size.
paint.net :- was used to produce images of resized screenshots into the website for the readme.md.
Google Chrome Developer tools :- the feature within the browser was used to test both the code and the responsiveness of the website.
Mozilla Firefox Developer tools :- the feature within the browser was used to test both the code and the responsiveness of the website.
ezGIF :- this was used to create an animated gif file which in turn was converted to a favicon.
favicon :- the website was used to create a favicon using the animated gif derived from ezGIF.
As standard with any development into a website, the first step subsequent to the construction is to check using a variety of technical testing tools which are split into subsections:
The basic methodology for checking into any form of errors commences by utilising the W3C Markup Validation Service within all my HTML webpages and the most of the result was mainly into the misuse of aria-label, see below for illustration:
The next tool is to utilise the W3C CSS Validation Service which reported no error found.
However this did flag up various warnings and these related to the AutoPrefixer that had been applied to style.css file (N.B. not all warnings were able to be filled within this screenshot).
A website by the name of Am I Responsive was utilised to give an indication of a range of devices which are responsive to cater for their design.
-
As a user, I want to be able to understand with ease into the sole purpose and comprehend the rationale as to why the website has been built and developed so I can see if it is relevant or of interest to me.
- Client expectation of user stories met: PASSED. This has been provided through the introduction modal via the homepage
-
As a user, I want to be assured that the website overall and its content can be viewed clearly on a range of devices to enable an opportunity to be flexible in my learning.
- Client expectation of user stories met: PASSED. The overall website and its content have been manually tested by the developer on a range of devices from mobile, laptop and desktop PC. Also utilising the website amiresponsive has further supported this.
-
As a user, I expect to be given instructions as guidance into the rules which is easily understood as to how the game is to be played and the learning outcome of it to experience the benefit of utilising it.
- Client expectation of user stories met: PASSED. There is a modal as accessed through the homepage entitled as 'Instructions' which has provided a sense of emphasis in ensuring that clarity is conveyed to all users.
-
As a user, I want to comfortably be allowed to commence the game when I am prepared and it is suitably convenient to proceed so I can perform this to the best of my ability.
- Client expectation of user stories met: PARTLY PASSED. It was with intention that a countdown timer be included to allow the time and space to initiate the game, but this has not been possible, however the ability still remains to providers users the convenience of activating when pressed 'Play Game'.
-
As a user, when presented, I expect to see a clear image depicting an alphabet in BSL in sequence to form a word and have the ability to replicate the sign so that I can be competently confident when applying it in the real world to achieve a personal goal.
- Client expectation of user stories met: PASSED. All series of images are depicted as clear and have been catered for every device ensuring that for mobile the clarity into the sign places a greater emphasis ahead of a desktop PC whereby the space allows for an enlarged size.
-
As a user, I want to be provided with a resourceful section consisting of content as a guiding reference point, that would easily be referred to, assist me when there is a moment of doubt and potentially demonstrate it by motion in reality.
- Client expectation of user stories met: PASSED. A resourceful section is positioned below where the main game is being played so as to provide a reference point to guide the users towards giving an answer.
-
As a user, when I am confident in the knowledge, I want to be able to enter my answer so that the experience feels like I am participating in the game.
- Client expectation of user stories met: PASSED. There exists a user input element which offers the opportunity for an answer to be provided,
-
As a user, I want the game to determine whether my answer was correct or incorrect and that there is clear feedback that is complimentary and encouraging in a positive manner at any stage in the game.
- Client expectation of user stories met: FAILED. The game does not provide the facility to determine by means of validating various answers so unfortunately has not been possible due to the complexity of JavaScript.
-
As a user, I expect to have the opportunity to re-enter my answer when the previous suggestion is incorrect to help me acknowledge where I need to make improvement in my learning or memory matching abilities.
- Client expectation of user stories met: FAILED. The game does not provide the facility to allow the user to re-enter the answer in an attempt to try again so unfortunately has not been possible due to the complexity of JavaScript.
-
As a user, I would like to visually view my score in the current game to gain confidence in the ability to learn so that I can assess my competency levels.
- Client expectation of user stories met: FAILED. The game does not provide the facility to allow the user to visually view their score in the current game so unfortunately has not been possible due to the complexity of JavaScript.
- As a user, I expect the game to provide a notification when the time is up so that I can acknowledge when my learning or memory matching opportunity has ceased.
- Client expectation of user stories met: FAILED. The game does not provide the facility to provide a notification when the time is up so unfortunately has not been possible due to the complexity of JavaScript.
- As a user, I expect the game to offer the option to restart, subsequent to the current play mode that has finished to allow me to continue my learning and make progress.
- Client expectation of user stories met: PARTLY PASSED. The game does not provide the facility to provide the offer the option to retry another word, yet the potential has not been realised due to the complexity of JavaScript
- As a user, I would like to access any further resources that would supplement or advance my learning, should I wish to dedicate a commitment in making a difference within a community.
- Client expectation of user stories met: PASSED. Further resources are provided within the website that enables education to be supplemented or advance the user's learning.
- As a user, I expect to be able to access contact details into the owner of the website, should I wish to reach out by raising queries, commend the game by providing feedback.
- Client expectation of user stories met: PASSED. Contact details such as the developer's GitHub, LinkedIn and an opportunity to send a message directly to their email account is offered.
- As a user, I would like to explore other projects that the developer has constructed to assess their range of technical skills and level of competency so that I can establish if it is of interest to me.
- Client expectation of user stories met: PASSED. This can be accessed via GitHub or LinkedIn.
-
Tested that the hyperlinked logo on each internal webpage leads users to the homepage.
-
Tested each navigational link items such as Home, BSL Game, Resources and Contact in a logical order & thoroughly on every webpage to ensure it is functioning correctly i.e. that it is not broken; and directing to the right webpage. Also when visiting a particular webpage, that the contrast colour within the navigational link signifies the existing webpage that the user is browsing through for good UX.
-
Tested the hamburger menu icon to ensure that the toggler functions and that each navigational link is positioned exactly like the wireframe design.
-
Tested the responsiveness of the website portfolio to ensure it reflects the design of the wireframe by utilising Google Chrome's Dev Tools to establish if the structure is rendered correctly from devices at mobile view in 320px scaling up to desktop PC view at a maximum of 1920px.
-
Tested that once the 'Click to start!' icon has been selected, this generates a modal to be displayed prior to activating and commencing the game.
-
Tested whereby the 'Play Game' button has been pressed, a series of images will be displayed to form a word.
-
Tested that on the last of the series of images being displayed, a user input appears below that allows an answer to be entered.
-
Tested the 'Try again' button that allows users to attempt another word being pulled at random.
-
Tested all fields within the Contact webpage whereby once clicked into the input area, it highlights the specific data entry field to engage the user's attention what section is currently being filled in.
-
Tested the Submit button within the Contact webpage whereby all fields remained blank with no inputs to result in an error message conveying 'Please fill out this field' to validate all fields have been inputted prior to submission.
-
Tested that once the 'Submit my message' button has been clicked that the form resets and a validation message appears to inform the user into either the success or failure in sending an email directly from the project website.
-
Tested icons related to Social Media whereby upon hovering each of the icons, it expands to give a sense of engagement to lure the new/returning visitor into viewing my GitHub profile & projects, my LinkedIn account if they wish to connect with me via a new and secure way of opening a new tab and also the email icon if they wish to contact me.
-
Executed the CSS coding via Autoprefixer whereby my original stylesheet is copied and the Autoprefixer's code is pasted into style.css to ensure cross browser compatibility in the styling of the website.
-
Tested by utilising Google's Mobile-Friendly Test into the responsiveness of the website to ensure that as mobile phones are prominent in our daily lives each webpage is rendered correctly to fit within these devices. The following webpages have been tested:-
- Tested the performance of the website via Google's Lighthouse for mobile devices and the report suggested it was excellent as illustrated below:
Mobile
Desktop
- Utilised the website Online-Spellcheck to ensure that spelling and grammar of the readme.md is correct.
This project has been deployed on GitHub Pages with the following process:
- All code was written on Gitpod, an online IDE.
- The code was then pushed to GitHub where it is stored in my Repository.
- Under the settings section of the GitHub repository, scroll down to GitHub Pages section.
- Under 'Source' drop-down, the 'Master branch' was selected.
- Once selected, this publishes the project to GitHub Pages and displays the site's url.
- There is no difference between the deployed version and the development version.
- The code can be run locally through clone or download.
- You can do this by opening the repository, clicking on the green 'Code' button and selecting either 'clone or download'.
- The Clone option provides a url, which you can use on your desktop IDE.
- The Download ZIP option provides a link to download a ZIP file which can be unzipped on your local machine.
Some of the code was developed by the use of Bootstrap's library throughout the project for the purpose of ensuring the responsiveness of the website such as the components such as the Navbar and Forms. https://getbootstrap.com/docs/5.0/components/navbar/#nav https://getbootstrap.com/docs/5.0/components/modal/#live-demo
Some aspects of the code required the use into the resources of W3Schools to allow the developer to gain a greater understanding as to how the code is constructed in CSS, especially in JavaScript such as: https://www.w3schools.com/howto/howto_css_modals.asp https://www.w3schools.com/js/tryit.asp?filename=tryjs_addeventlistener_displaydate https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_visibility
Also Stack Overflow has at times provided resources for some CSS & JavaScript codes such as:
https://stackoverflow.com/questions/5703552/how-can-i-center-text-horizontally-and-vertically-inside-a-div-block https://stackoverflow.com/questions/4550505/getting-a-random-value-from-a-javascript-array https://stackoverflow.com/questions/49836397/how-do-you-add-remove-hidden-in-p-hidden-with-javascript https://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop/3583740#3583740
A snippet of code has been extracted and improvised from codepen such as:
https://codepen.io/bootstrapped/pen/yJqbPa
Context for the introduction into BSL was extracted from the British Sign website to ensure accurate representation and consistency of information.
The image logo to represent BSL had been obtained specifically via this webpage Essex Local Offer.
Also incorporated are a series of images which have been derived to be obtained from, with grateful thanks to the Royal National Institute for Deaf People (RNID).
- I cannot even begin to express my wholehearted gratitude to the Slack Community at the Code Institute for their fabulous yet inspirational support in what has been a significantly challenging few months for me personally in the duration of the development of this website, and I am forever grateful & in their debt. There has been too many people to name but I wish to express my thanks to the tutors Igor, Jo, Scott, Sheryl, Fatima and a couple of others who have helped guide me to solutions and also to my mentor Marcel Mulders to guide me through my second, most challenging milestone project.