Design comparison
Solution retrospective
There are a lot of things that didn't go as I wanted in this one. In CSS, I still need to improve my media queries. In javascript, I still have a lot to learn. If you take a look at my work, you can see that I had to deviate from the main design. If a master goes through this, and he can help me to improve in javascript, it would be great. P.S.: I don't put comments, I apologize for that, I'll make sure the next one will be better commented.
Community feedback
- @ChamuMutezvaPosted over 2 years ago
Hi seruaJ
HTML
- it is important to use semantic elements where ever possible. Elements such as
mainhave a clear meaning that does improves the accessibility of your project. Here is an extract from MDN on themainelement The <main> HTML element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. - To continue from above , the keyboard digits are not accessible from a keyboard because you have used divs instead of buttons. Click events are associated with elements such as a button, a div is not suitable for this. Try navigating with a keyboard to get a better view of what i am saying. I would also suggest that the class and the id's for the numbers should at least tally with the value. Eg
<div id="div1" class="div1" aria-valuetext="7">7</div>and<div id="div7" class="div7" aria-valuetext="6">6</div>- for the first one since the value is 7 then i would have the class and the id asdiv7and the latter one with value 6 would have an id and class asdiv6. It will be easy for reference and debugging
CSS
- The classes for the keyboard items, i would have a class which is the same for all items that have similar declarations and avoid , i see there is 18 classes where 14 of the listed classes have the same declarations - that could have been one class
JS
- the calculator is not working
- the use of
varis being restricted these days - you need to look intoconstandlet - to add styles with JavaScript, i would recommend to change the class instead of setting the properties. Your css should have the styles that you need to add and the js is there to add and remove the classes as required. That means instead of the 10 or so lines in your js for adding the styles, you will add one like `document.getElementById("body").classList.add(newclass-here)
I would strongly encourage you to start with a small challenge , that will help you to focus on one item at a time and build your confidence. Look at other challenges that are below this level
0 - it is important to use semantic elements where ever possible. Elements such as
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord