Using 2 different body background colors

What would be the best way of doing 2 different background colors?


When it’s first viewed it’s one color,

After you click on circle, if I wanted to give it a different color how would I do that?

Handling user interaction on a web page is usually delegated to JavaScript.

In this case you have to listen for a click event on the desired element and then perform your manipulation.

In pseudocode it could be something like:

myButton.addEventListener('click', changeBackground);

function changeBackground(event) {
  // do what you want

This way you open up to a lot of different possibilities, like toggling on each click, perform more complex manipulation…etc…etc…

Hope this helps :+1:

All I do is this?

Add this line in: = "green";

(function iife() {
  "use strict";

  function show(el) {

  function hide(el) {

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const thewrap = cover.parentNode.querySelector(".container"); = "green";
  const cover = document.querySelector(".jacketa");
  cover.addEventListener("click", coverClickHandler);

If your goal is to have the document body green; than yes that should work.

However by my experience is much more flexible adding/removing classes than manipulating the element style.
But that’s up to you and your needs :slight_smile:

Can you show me what you mean?

How would your suggestion be written?

By keeping your style in classes you can simply instruct JS to manipulate the element classes, instead of having to write manually every time what stile you want to add / remove.

Like in this quick example I fiddled:

I just have found with my experience that this approach is more easily maintainable in the long run.
Personal preference tho :+1: