Submission for Module 6 of the University of Birmingham Skills Bootcamp in Front-End Web Development & UX.
This assignment took a starter code package in commit 8a1f771 and developed it to meet the defined acceptance criteria.
The production website is deployed here.
This has been developed to meet the following Acceptance Criteria:
- GIVEN I am taking a code quiz
- WHEN I click the start button
- THEN a timer starts and I am presented with a question
- WHEN I answer a question
- THEN I am presented with another question
- WHEN I answer a question incorrectly
- THEN time is subtracted from the clock
- WHEN all questions are answered or the timer reaches 0
- THEN the game is over
- WHEN the game is over
- THEN I can save my initials and score
- Re-visited the use of default versus named exports and fixed an error where I was using a default export and importing using named syntax
- Practiced using the .classList.remove() method that had learned on a Net Ninja course previously
- Learned how to store and retrieve data with localStorage
- Learned how to sort an array of objects
- Learned that the forEach method also has an index argument / parameter that holds the index within the input array of the current element
- Learned about moving variables into and out of global scope to make them available across different function in my program to achieve the desired behaviour
- Learned about using .matches() to see if an element matches a CSS selector, which I used to only target buttons within the choices div. I also learned this is called event delegation.
- Learned how to create audio elements offscreen and how to play them in response to an event
- Solved: Import Error
- How TO - JavaScript Countdown Timer
- MDN: classList
- MDN: localStorage
- Sort an array of objects
- MDN: forEach
- Stack Overflow: Get loop counter/index using for…of syntax in JavaScript
- How to fade out an element in pure JavaScript
- MDN: matches
- Net Ninja: Modern JavaScript course (Udemy)
- MDN: HTMLAudioElement
| Item | Evidence |
|---|---|
| Satisfies all of the above acceptance criteria. | The built application satisfies the acceptance criteria and comments are included in the code for the acceptance criteria and respective handling functions. |
| Item | Evidence |
|---|---|
| Application deployed at live URL. | Live application deployed at: https://stefan4d.github.io/code-quiz/ |
| Application loads with no errors. | No visual defects No console errors |
| Application GitHub URL submitted. | URL submitted |
| GitHub repository that contains application code. | This repository contains all code. |
| Item | Evidence |
|---|---|
| Application user experience is intuitive and easy to navigate. | Application uses standard web page elements and hides/displays elements of the UI depending on the current context of the game. |
| Application user interface style is clean and polished. | Application user interface matches the original starter code. |
| Application resembles the mock-up functionality provided in the Challenge instructions. | Application resembles the mock-up. |
| Item | Evidence |
|---|---|
| Repository has a unique name. | Unique name used |
| Repository follows best practices for file structure and naming conventions. | Standard file naming conventions used |
| Repository follows best practices for class/id naming conventions, indentation, quality comments, etc. | All multi-word variables used camelCase Indentation within code follows best practice Comments have been included within the files to describe behaviour and/or intent of the code. |
| Repository contains multiple descriptive commit messages. | Multiple commits included demonstrating incremental build of final submission. Each has a clear description of changes made. |
| Repository contains quality README file with description, screenshot, and link to deployed application. | This README document. |
Released under the MIT license. Full details in LICENSE.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent