Contrast buttons

Question

Good afternoon,

I’m with this code it uses the same button to give the contrast and back to the pattern but I need that when you click on the black ball it turns dark and when you click on the white ball back to the standard color, I tried to separate the code but it ends up giving conflict, someone can help me?

(function () {
var Contrast = {
    storage: 'contrastState',
    cssClass: 'contrast',
    currentState: null,
    check: checkContrast,
    getState: getContrastState,
    setState: setContrastState,
    toogle: toogleContrast,
    updateView: updateViewContrast
};

window.toggleContrast = function () { Contrast.toogle(); };

Contrast.check();

function checkContrast() {
    this.updateView();
}

function getContrastState() {
    return localStorage.getItem(this.storage) === 'true';
}

function setContrastState(state) {
    localStorage.setItem(this.storage, '' + state);
    this.currentState = state;
    this.updateView();
}

function updateViewContrast() {
    var body = document.body;

    if (this.currentState === null)
        this.currentState = this.getState();

    if (this.currentState)
        body.classList.add(this.cssClass);
    else
        body.classList.remove(this.cssClass);
}

function toogleContrast() {
    this.setState(!this.currentState);
}

})();

Answer 1

I made this very simple example that sometimes can help you. The code can be optimized, but I put as simple as possible, until pq my knowledge tb is not very advanced in JS.

But basically when you click on btnGreen or btnRed you’re gonna make a classList.add/.remove in the element you want to change the color.

To better understand see the code.

let btn = document.querySelector('.fa-adjust');
let btnGreen = document.querySelector('.fa-arrow-alt-circle-right.green');
let btnRed = document.querySelector('.fa-arrow-alt-circle-right.red');

btnGreen.addEventListener('click', verde);
btnRed.addEventListener('click', red);

function verde() {
    btn.classList.remove('red');
    btn.classList.add('green');
}
function red() {
    btn.classList.remove('green');
    btn.classList.add('red');
}

body {
    font-size: 50px;
}
.red {
    color: red;
}
.green {
    color: green;
} 

<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />


<i class="fas fa-adjust red"></i>
<i class="fas fa-arrow-alt-circle-right green"></i>
<i class="fas fa-arrow-alt-circle-right red"></i>