Time based mental maths game- numbers are between 10 and 20
gbaja / mentalmathsgame Goto Github PK
View Code? Open in Web Editor NEWSimple mental maths game
Home Page: https://gbaja.github.io/mentalmathsgame/
Simple mental maths game
Home Page: https://gbaja.github.io/mentalmathsgame/
Hey Fatimat, here is my code review. Don't feel like you need to make these changes but hopefully some of my comments are useful for your future projects.
There are lots of ids that could be classes. I think it's generally accepted to always use classes unless you have to use ids. As I understand it, ids have a greater 'specificity' than classes so if you are using the ids for Javascript and CSS sometimes it can get tricky when styling things as the id will always have precedence over other classes. I didn't properly understand specificity until quite late, this page is helpful for this: https://developer.mozilla.org/en/docs/Web/CSS/Specificity. This thread is good too, which suggests that you shouldn't use ids for css styling (unless you must): https://stackoverflow.com/questions/8279132/why-shouldnt-i-use-id-selectors-in-css.
In some places you have used tags without classes e.g. <h1>Mental Maths Quiz</h1>
although the different h
tags will display the fonts at different sizes it's best practice to add your own styling to them. I believe that different browsers sometimes display them differently so it's best to override the default with your own styles.
on line 25 you have onclick='window.location.reload()'
- It's best practice not to have inline JS functions in your html. Instead you could have something like this in your JS file:
var playAgainButton = document.getElementsByClassName("playAgain");
playAgainButton.addEventListener('click', refreshPage);
function refreshPage(){
window.location.reload();
};
(function () {
// logic here
})();
When the JS file is run the IIFE is invoked straight away so it doesn't affect the logic, however all the variables inside are scoped to the function instead of the window/document (so they are not global).
add a title to the at the top of the html doc. That way it will appear on the tab in your browser!
Its a matter of choice but it's generally accepted to put a space between the css attribute and curly bracket so .name {
rather than .name{
.
When the value is 0 in CSS you don't need the px. So bottom: 0;
instead of bottom: 0px;
This doesn't make much difference but it makes less code and a bit cleaner.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.