Solution is done with the sole purpose of practising CSS thus html Semantics elements are not used.

Frontend Mentor - Calculator app solution

This is a solution to the Calculator app challenge on Frontend Mentor.

Links

• Live Site URL: https://calculator-zhiwei.netlify.app/

Screenshot

My process

Built with

• React
• SASS

What I learned

• Theming
• CSS GRID

Code Snippet: How I did theming

function getClass(str) {
    return `${str} ${theme === 1 ? "" : theme === 2 ? "theme2" : "theme3"}`
}

<div className={getClass("body")}></div>

.body.theme1 {
    background: $bodybg1;
}
.body.theme2 {
    background: $bodybg2;
}
.body.theme3 {
    background: $bodybg3;
}