Submitted 2 months ago

calc machine

Amir-Ghafarzadeh•90

@AMIRSTAR1382

A solution to the Calculator app challenge

Preview Code

Solution retrospective

What specific areas of your project would you like help with?

i need a help for compilate my challenge for change the color some help me and give me solution

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Giorgi Mirzashvili•180

@mersadze

Posted 2 months ago

To set themes properly, give <html> element in your document "data-theme" attribute and set it to light or dark as default, then in CSS after you've declared your root variables, create theme palettes like this:

[data-theme="default"] {
    --bg-main: hsl(222, 26%, 31%);
    --bg-toggle-keypad: hsl(223, 31%, 20%);
    --bg-screen: hsl(224, 36%, 15%);
  
    --key-bg-primary: hsl(225, 21%, 49%);
    --key-shadow-primary: hsl(224, 28%, 35%);
  
    --key-bg-accent: hsl(6, 63%, 50%);
    --key-shadow-accent: hsl(6, 70%, 34%);
  
    --key-bg-secondary: hsl(30, 25%, 89%);
    --key-shadow-secondary: hsl(28, 16%, 65%);
  
    --text-dark: hsl(221, 14%, 31%);
    --text-light: hsl(0, 0%, 100%);
}

Repeat for all three themes and then move onto script:

document.querySelector('.switch-3way').addEventListener('click', function () {
    let state = +this.getAttribute('data-state');
    state = state === 3 ? 1 : state + 1;
    this.setAttribute('data-state', state);
    document.documentElement.setAttribute("data-theme", themes[state]);
});

Below is basic HTML to achieve all this functionality:

<div class="switch-3way" data-state="1">
    <div class="slider-3way"></div>
</div>

You can incorporate your own logic now according to this. Hope it helps!

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