This is a solution to the Calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- See the size of the elements adjust based on their device's screen size
- Perform mathmatical operations like addition, subtraction, multiplication, and division
- Adjust the color theme based on their preference
- Bonus: Have their initial theme preference checked using
prefers-color-scheme
and have any additional changes saved in the browser
- Live Site URL: https://harrisonpeace.com/responsive-calculator-app-using-vanilla-javascript-flexbox-css-grid/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
This project was a great refresher on using CSS selectors and variables as well as flexbox and CSS grid.
Using the same name for color themes in both the JavaScript and HTML I was able to make the event listener very compact and without any if statements.
themeControlsContainer.addEventListener('click', (e) => {
root.style.cssText = colorSchemes[e.target.id];
localStorage.setItem('theme', `${e.target.id}`);
}
Using document.documentElement.style.cssText = "INSERT CSS STYLES"
to select the root element and update its CSS made updating the color scheme intuitive and easy to execute.
- Box Shadow Generator - Made it alto easier to get the box shadow looking close to the design
- Website - Harrison Peace
- Frontend Mentor - @HarrisonPeace