I was creating a library project, every book is a object with properties title, author, pages, and read-status stored in a array.
There’s a add-book button which opens a modal and asks the user the title, author, pages of the book they want to add and there’s a check-box for read-status.
A checked checkbox returns a true value to the book-object and an unchecked checkbox returns false.
So on to the screen, in the interface the read-status is a toggle switch. Which the user can toggle to update his read-status of the book, so I want to change the backgorund color of that switch according to the user. The bgColor is blue or red according to true and false values of read-status respectively. And the user should also able to change the read status to true or false in book-object stored in the library by toggling the switch from the screen.

My book looks something like this in the html(this is created with DOM):

  <div class="single-books">
                    <div id="title" class="card">
                        <p class="keys" id="title-key">
                            Title:
                        </p>
                        <p class="values" id="title-value">
                            Men are from mars, women are from venus
                        </p>
                    </div>
                    <div id="author" class="card">
                        <p class="keys" id="author-key">
                            Author:
                        </p>
                        <p class="values" id="author-value">
                            John Gray
                        </p>
                    </div>
                    <div id="pages" class="card">
                        <p class="keys" id="pages-key">
                            Pages:
                        </p>
                        <p class="values" id="pages-value">
                            286
                        </p>
                    </div>
                    <div id="read-status" class="card">
                        <p>Read status</p>
                        <div class="toggle-switch">
                            <div>No</div>
                            <label class="switch">
                                <input type="checkbox" id="change-read-status">
                                <span class="slider"></span>
                            </label>
                            <div>Yes</div>
                        </div>
                    </div>
                </div> 

css for slider:

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e20505;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.switch input:checked + .slider {  
  background-color: #2196f3;    /* bgColor when check-box is checked */
}

library array will look like this:

library = [
  { title: "book1", author: "author1", pages: 100, read: true },
  { title: "book2", author: "author2", pages: 100, read: false },
];

I tried, getting the checkbo value from user if checkbox.checked === true and tried change the backGrounColor of the switch, and I am not able to understand how it can be done.

Saw other question but not able to solve this, it’s probably easy but my small brain can’t understand.