Save and/or Apply Background Image on click – Blancer.com Tutorials and projects

This question is not how to add Background Images, it is how to have it save the setting once the option has been selected, so after the page is refreshed or page is changed it remembers the choice.

I have made it so my background changes on click, however it does not save the theme and actually apply change after leaving the page or refreshing.

1.Is there anyway to apply it to the original code? if so I would really like help on how to do so.

if not

2.What changes would I need to make to have the NEW JS work with what I have now?

Extra Challenge:

(I only want it to affect the profile page and settings page and not the full website)

I Would really appreciate the help I don’t mean to sound terrible.

Down below are links to the Codepens.

1.This is my original code I used to be able to change background:https://codepen.io/Elixble/pen/RwzZaWB

2.This is the code I’ve tried to implement but have gotten confused/lost on how to get it to work with what I have:https://codepen.io/Elixble/pen/KwPyyVY

I will also show the code below.

1.Working code but DOES NOT save

(HTML)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<body id="Background">
  <div id="SettingsBox">
    <div>

      <div class="Embers" data-class="Embers-Theme-Card-Gradient" onclick="myFunction(this)">
        <h1>Embers</h1>

        <div class="mouse-position-tracker">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>

      <div class="Darkmode-Theme-Card" data-class="Darkmode-Theme-Card-Gradient" onclick="myFunction(this)">
        <h1>Darkmode</h1>

        <div class="mouse-position-tracker">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
</body>

JS

function myFunction(obj) {
  $('body#Background').removeClass().addClass($(obj).data('class'));
}

CSS

body {
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
  position: absolute;
  margin: auto;
}

.Embers-Theme-Card-Gradient{
  background-image: url("https://i.postimg.cc/RFdn3tYZ/Embers-Background.png");
  position:relative;
}

.Darkmode-Theme-Card-Gradient{
("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
  position:relative;
}

.Coffee-Theme-Card-Gradient{
("https://i.postimg.cc/Njxp1Q0J/Coffee.png");
  position:relative;
}

.Embers {
  --perspective: 1400px;
  --rotateX: 0;
  --rotateY: 0;
  --angle: 6.5deg;
  position: absolute;
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
  padding: 2rem;
  aspect-ratio: 1 / 2;
  background-image: url("https://i.postimg.cc/wBDMSNcj/Embers.png");
  background-size: cover;
  transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
  transition: transform 350ms ease;
  width: 180px;
  height: 75px;
  border-radius: 20px;
  left: 29%;
  bottom: 80%;
}

.Embers> :where(h1,
p) {
  background: rgba(221, 221, 221, 0.432);
  margin: 0;
  padding: 0.5rem;
}

.mouse-position-tracker {
  position: absolute;
  inset: 0;
}

.mouse-position-tracker>div {
  position: absolute;
  width: calc(100% / 3);
  height: calc(100% / 3);
  z-index: 2;
}

.Embers:has(.mouse-position-tracker>div:nth-child(1):hover) {
  --rotateX: var(--angle);
  --rotateY: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(2):hover) {
  --rotateX: var(--angle);
}

.Embers:has(.mouse-position-tracker>div:nth-child(3):hover) {
  --rotateX: var(--angle);
  --rotateY: var(--angle);
}

.Embers:has(.mouse-position-tracker>div:nth-child(4):hover) {
  --rotateY: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(6):hover) {
  --rotateY: var(--angle);
}

.Embers:has(.mouse-position-tracker>div:nth-child(7):hover) {
  --rotateX: calc(var(--angle) * -1);
  --rotateY: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(8):hover) {
  --rotateX: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(9):hover) {
  --rotateX: calc(var(--angle) * -1);
  --rotateY: var(--angle);
}


/* 1st, 4th, 7th */

.mouse-position-tracker>div:nth-of-type(3n - 2) {
  left: 0;
}


/* 2nd, 5th, 8th */

.mouse-position-tracker>div:nth-of-type(3n - 1) {
  left: calc(100% / 3);
}


/* 3rd, 6th, 9th */

.mouse-position-tracker>div:nth-of-type(3n) {
  right: 0;
}


/* 1-3 */

.mouse-position-tracker>div:nth-child(n+1):nth-child(-n+3) {
  top: 0;
}


/* 4-6 */

.mouse-position-tracker>div:nth-child(n+4):nth-child(-n+6) {
  top: calc(100% / 3);
}


/* 7-9 */

.mouse-position-tracker>div:nth-child(n+7):nth-child(-n+9) {
  bottom: 0;
}


/* general styling */

 :root {
  --shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02), 0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035), 0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05), 0px 37px 80px rgba(0, 0, 0, 0.07);
}

.Embers {
  cursor: pointer;
}

.Darkmode-Theme-Card {
  --perspective: 1400px;
  --rotateX: 0;
  --rotateY: 0;
  --angle: 5deg;
  position: absolute;
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
  padding: 2rem;
  aspect-ratio: 1 / 2;
  background-image: url("https://i.postimg.cc/Px4xqk7G/DarkMode.png");
  background-size: cover;
  transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
  transition: transform 350ms ease;
  width: 180px;
  height: 75px;
  border-radius: 20px;
  left: 10%;
  bottom: 80%;
}

.Darkmode-Theme-Card > :where(h1, p) {
    background: rgba(221, 221, 221, 0.432);
    margin: 0;
    padding: 0.5rem;
  }
  
  .mouse-position-tracker {
    position: absolute;
    inset: 0;
  }
  
  .mouse-position-tracker > div {
    position: absolute;
    width: calc(100% / 3);
    height: calc(100% / 3);
    z-index: 2;
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(1):hover) {
    --rotateX: var(--angle);
    --rotateY: calc(var(--angle) * -1);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(2):hover) {
    --rotateX: var(--angle);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(3):hover) {
    --rotateX: var(--angle);
    --rotateY: var(--angle);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(4):hover) {
    --rotateY: calc(var(--angle) * -1);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(6):hover) {
    --rotateY: var(--angle);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(7):hover) {
    --rotateX: calc(var(--angle) * -1);
    --rotateY: calc(var(--angle) * -1);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(8):hover) {
    --rotateX: calc(var(--angle) * -1);
  }
  
 .Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(9):hover) {
    --rotateX: calc(var(--angle) * -1);
    --rotateY: var(--angle);
  }
  
  /* 1st, 4th, 7th */
  .mouse-position-tracker > div:nth-of-type(3n - 2) {
    left: 0;
  }
  /* 2nd, 5th, 8th */
  .mouse-position-tracker > div:nth-of-type(3n - 1) {
    left: calc(100% / 3);
  }
  /* 3rd, 6th, 9th */
  .mouse-position-tracker > div:nth-of-type(3n) {
    right: 0;
  }
  
  /* 1-3 */
  .mouse-position-tracker > div:nth-child(n + 1):nth-child(-n + 3) {
    top: 0;
  }
  
  /* 4-6 */
  .mouse-position-tracker > div:nth-child(n + 4):nth-child(-n + 6) {
    top: calc(100% / 3);
  }
  
  /* 7-9 */
  .mouse-position-tracker > div:nth-child(n + 7):nth-child(-n + 9) {
    bottom: 0;
  }
  
  /* general styling */
  :root {
    --shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02),
      0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035),
      0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05),
      0px 37px 80px rgba(0, 0, 0, 0.07);
  }

  .Darkmode-Theme-Card
  {
    cursor:pointer;
  }

#SettingsBox
{
  position:relative;
  height:850px;
  width:1400px;
  background-color:rgba(0, 0, 0, 0.25);
  border-radius:20px;
  box-shadow: -5px 5px 15px #111a;
  margin:auto;
  top:10%;
}

2.NOT Working (Same HTML and CSS)
(HTML)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<body id="Background">
  <div id="SettingsBox">
    <div>

      <div class="Embers" data-class="Embers-Theme-Card-Gradient" onclick="myFunction(this)">
        <h1>Embers</h1>

        <div class="mouse-position-tracker">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>

      <div class="Darkmode-Theme-Card" data-class="Darkmode-Theme-Card-Gradient" onclick="myFunction(this)">
        <h1>Darkmode</h1>

        <div class="mouse-position-tracker">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
</body>

JS

let Embers = localStorage.getItem( 'Embers' )
const themeSwitch = document-getElementById ('Background')

const enableEmbers = () =› {
document.body.classList.add ('Embers')
localStorage setItem( 'Embers', 'active')
}

const disableEmbers = () => {
document. body. classList. remove( 'Embers')
localStorage setItem( 'Embers', null)
}

themeSwitch. addEventListener ("click", () => {
Embers !== "active" ? enableDarkmode() : disableDarkmode()
({

CSS

body {
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
  position: absolute;
  margin: auto;
}

.Embers-Theme-Card-Gradient{
  background-image: url("https://i.postimg.cc/RFdn3tYZ/Embers-Background.png");
  position:relative;
}

.Darkmode-Theme-Card-Gradient{
("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
  position:relative;
}

.Coffee-Theme-Card-Gradient{
("https://i.postimg.cc/Njxp1Q0J/Coffee.png");
  position:relative;
}

.Embers {
  --perspective: 1400px;
  --rotateX: 0;
  --rotateY: 0;
  --angle: 6.5deg;
  position: absolute;
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
  padding: 2rem;
  aspect-ratio: 1 / 2;
  background-image: url("https://i.postimg.cc/wBDMSNcj/Embers.png");
  background-size: cover;
  transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
  transition: transform 350ms ease;
  width: 180px;
  height: 75px;
  border-radius: 20px;
  left: 29%;
  bottom: 80%;
}

.Embers> :where(h1,
p) {
  background: rgba(221, 221, 221, 0.432);
  margin: 0;
  padding: 0.5rem;
}

.mouse-position-tracker {
  position: absolute;
  inset: 0;
}

.mouse-position-tracker>div {
  position: absolute;
  width: calc(100% / 3);
  height: calc(100% / 3);
  z-index: 2;
}

.Embers:has(.mouse-position-tracker>div:nth-child(1):hover) {
  --rotateX: var(--angle);
  --rotateY: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(2):hover) {
  --rotateX: var(--angle);
}

.Embers:has(.mouse-position-tracker>div:nth-child(3):hover) {
  --rotateX: var(--angle);
  --rotateY: var(--angle);
}

.Embers:has(.mouse-position-tracker>div:nth-child(4):hover) {
  --rotateY: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(6):hover) {
  --rotateY: var(--angle);
}

.Embers:has(.mouse-position-tracker>div:nth-child(7):hover) {
  --rotateX: calc(var(--angle) * -1);
  --rotateY: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(8):hover) {
  --rotateX: calc(var(--angle) * -1);
}

.Embers:has(.mouse-position-tracker>div:nth-child(9):hover) {
  --rotateX: calc(var(--angle) * -1);
  --rotateY: var(--angle);
}


/* 1st, 4th, 7th */

.mouse-position-tracker>div:nth-of-type(3n - 2) {
  left: 0;
}


/* 2nd, 5th, 8th */

.mouse-position-tracker>div:nth-of-type(3n - 1) {
  left: calc(100% / 3);
}


/* 3rd, 6th, 9th */

.mouse-position-tracker>div:nth-of-type(3n) {
  right: 0;
}


/* 1-3 */

.mouse-position-tracker>div:nth-child(n+1):nth-child(-n+3) {
  top: 0;
}


/* 4-6 */

.mouse-position-tracker>div:nth-child(n+4):nth-child(-n+6) {
  top: calc(100% / 3);
}


/* 7-9 */

.mouse-position-tracker>div:nth-child(n+7):nth-child(-n+9) {
  bottom: 0;
}


/* general styling */

 :root {
  --shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02), 0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035), 0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05), 0px 37px 80px rgba(0, 0, 0, 0.07);
}

.Embers {
  cursor: pointer;
}

.Darkmode-Theme-Card {
  --perspective: 1400px;
  --rotateX: 0;
  --rotateY: 0;
  --angle: 5deg;
  position: absolute;
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
  padding: 2rem;
  aspect-ratio: 1 / 2;
  background-image: url("https://i.postimg.cc/Px4xqk7G/DarkMode.png");
  background-size: cover;
  transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));
  transition: transform 350ms ease;
  width: 180px;
  height: 75px;
  border-radius: 20px;
  left: 10%;
  bottom: 80%;
}

.Darkmode-Theme-Card > :where(h1, p) {
    background: rgba(221, 221, 221, 0.432);
    margin: 0;
    padding: 0.5rem;
  }
  
  .mouse-position-tracker {
    position: absolute;
    inset: 0;
  }
  
  .mouse-position-tracker > div {
    position: absolute;
    width: calc(100% / 3);
    height: calc(100% / 3);
    z-index: 2;
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(1):hover) {
    --rotateX: var(--angle);
    --rotateY: calc(var(--angle) * -1);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(2):hover) {
    --rotateX: var(--angle);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(3):hover) {
    --rotateX: var(--angle);
    --rotateY: var(--angle);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(4):hover) {
    --rotateY: calc(var(--angle) * -1);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(6):hover) {
    --rotateY: var(--angle);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(7):hover) {
    --rotateX: calc(var(--angle) * -1);
    --rotateY: calc(var(--angle) * -1);
  }
  
.Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(8):hover) {
    --rotateX: calc(var(--angle) * -1);
  }
  
 .Darkmode-Theme-Card:has(.mouse-position-tracker > div:nth-child(9):hover) {
    --rotateX: calc(var(--angle) * -1);
    --rotateY: var(--angle);
  }
  
  /* 1st, 4th, 7th */
  .mouse-position-tracker > div:nth-of-type(3n - 2) {
    left: 0;
  }
  /* 2nd, 5th, 8th */
  .mouse-position-tracker > div:nth-of-type(3n - 1) {
    left: calc(100% / 3);
  }
  /* 3rd, 6th, 9th */
  .mouse-position-tracker > div:nth-of-type(3n) {
    right: 0;
  }
  
  /* 1-3 */
  .mouse-position-tracker > div:nth-child(n + 1):nth-child(-n + 3) {
    top: 0;
  }
  
  /* 4-6 */
  .mouse-position-tracker > div:nth-child(n + 4):nth-child(-n + 6) {
    top: calc(100% / 3);
  }
  
  /* 7-9 */
  .mouse-position-tracker > div:nth-child(n + 7):nth-child(-n + 9) {
    bottom: 0;
  }
  
  /* general styling */
  :root {
    --shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02),
      0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035),
      0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05),
      0px 37px 80px rgba(0, 0, 0, 0.07);
  }

  .Darkmode-Theme-Card
  {
    cursor:pointer;
  }

#SettingsBox
{
  position:relative;
  height:850px;
  width:1400px;
  background-color:rgba(0, 0, 0, 0.25);
  border-radius:20px;
  box-shadow: -5px 5px 15px #111a;
  margin:auto;
  top:10%;
}