Calculator App using HTML, CSS and Javascript
Design comparison
Solution retrospective
*Note: To change themes you have to click on the numbers, not on the toggle.
I created this Calculator App using HTML, CSS and Javascript. Basically there are three themes given in the challenge 1.Classic Calculator theme 2.Light theme 3.Dark-purple theme
Hiii I am vicky, I'm an aspiring Frontend developer. Currently I'm learning Javascript. While making this project, for the first time I used CSS-Grid.I learnt how Grids in CSS works. For me the Real challenge was to create the toggle that's responsible for the swapping of themes. After a little bit of research on the internet and Youtube Found this video from E-CODEC.Finally I was able to make the toggle and complete the challenge. I will really appreciate if someone reviews my code and give me some suggestion or point out any mistakes.
Community feedback
- @Finney06Posted over 1 year ago
Hello there π. Good job on completing the challenge !
Here are some suggestions regarding your code that may be of interest to you.
HTML π·οΈ:
To clear the Accessibility report:
- To fix the error "Form elements must have labels" for the
<input>
element, you need to add a<label>
element that describes the purpose of the input field. The<label>
element should be associated with the<input>
element using the "for" attribute on the<label>
that matches the "id" attribute on the<input>
.
Here's an example of how to fix the error:
<label for="display">Display Name:</label> <input type="text" name="display" id="display">
In the example above, the
<label>
element describes the purpose of the input field with the text "Display Name." The "for" attribute on the<label>
matches the "id" attribute on the<input>
. This association between the<label>
and<input>
elements helps screen readers and other assistive technologies to properly identify and describe the input field to users.-
Wrap the page's whole main content in the
<main>
tag. -
Always avoid skipping heading levels; Starting with
<h1>
and working your way down the heading levels (<h2>
,<h3>
, etc.) helps ensure that your document has a clear and consistent hierarchy. -
Use HTML5 semantic elements such as
<header>
,<nav>
,<main>
,<aside>
, and<footer>
to define these sections. -
Use ARIA landmarks such as
<header role="banner">
and<footer role="contentinfo">
to provide additional information about the purpose of each section to assistive technologies.
Here is a web accessibility evaluation toolπ to check your webpage for any remaining errors or warnings related to landmarks.
I hope you find it helpful!π Above all, the solution you submitted is π. πHappy coding!
Marked as helpful1 - To fix the error "Form elements must have labels" for the
Please log in to post a comment
Log in with GitHubJoin 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