CODEWITHSUNDEEP
javascripthtmljquerycss
user11149597
user11149597

Reputation:

LocalStorage for current div?

I'm trying to make localstorage to store the current chosen div like button clicked, but I'm still weak on js coding. Could you please tell me, why this code is not working and storing the current div?

$('.tdnn').click(function () {
  $("body").toggleClass('light');
  $(".moon").toggleClass('sun');
  $(".tdnn").toggleClass('day');
});



var save_button = document.getElementsByClassName('.light')
save_button.onclick = saveData;

function saveData(){
  var input = document.getElementsByClassName(".light");
  var input = document.getElementsByClassName(".sun");

  localStorage.setItem("save", input.value);
  var storedValue = localStorage.getItem("save");
}
:root {
  --darkbg:#251D29;
  --darkt: #FFD1F7;
  --lightbg: #fff;
  --lightt: #D43370;
  
  --toggleHeight: 16em;
  --toggleWidth: 30em;
  --toggleBtnRadius: 10em;

  --bgColor--night: #423966;
  --toggleBtn-bgColor--night: var(--bgColor--night);
  --mooncolor: #D9FBFF;
  --bgColor--day: #9ee3fb;
  --toggleBtn-bgColor--day: var(--bgColor--day);
}

body{
  transition: all .2s ease-in-out;
  background: var(--darkbg);
  color: var(--darkt);
  text-align: center;
}
.light{
  background: var(--lightbg);
  color: var(--lightt);
}
.tdnn {
  margin: 0 auto;
  /*change size of toggle with font-size*/
  font-size: 30%;
  margin-top: 10em;
   position: relative;
    height: var(--toggleHeight);
    width: var(--toggleWidth);
    border-radius: var(--toggleHeight);
  transition: all 500ms ease-in-out;
  background: var(--bgColor--night);
}
.day{
  background: #FFBF71;
}
.moon {
  position: absolute;
  display: block;
  border-radius: 50%;
  transition: all 400ms ease-in-out;
  
  top: 3em;
  left: 3em;
  transform: rotate(-75deg);
  width: var(--toggleBtnRadius);
  height: var(--toggleBtnRadius);
  background: var(--bgColor--night);
  box-shadow: 
    3em 2.5em 0 0em var(--mooncolor) inset,
    rgba(255, 255, 255, 0.1) 0em -7em 0 -4.5em,
    rgba(255, 255, 255, 0.1) 3em 7em 0 -4.5em,
    rgba(255, 255, 255, 0.1) 2em 13em 0 -4em,
    rgba(255, 255, 255, 0.1) 6em 2em 0 -4.1em,
    rgba(255, 255, 255, 0.1) 8em 8em 0 -4.5em,
    rgba(255, 255, 255, 0.1) 6em 13em 0 -4.5em,
    rgba(255, 255, 255, 0.1) -4em 7em 0 -4.5em,
    rgba(255, 255, 255, 0.1) -1em 10em 0 -4.5em;
}
.sun {
  top: 4.5em;
  left: 18em;
  transform: rotate(0deg);
  width: 7em;
  height: 7em;
  background: #fff;
  box-shadow: 3em 3em 0 5em #fff inset,
    0 -5em 0 -2.7em #fff,
    3.5em -3.5em 0 -3em #fff,
    5em 0 0 -2.7em #fff,
    3.5em 3.5em 0 -3em #fff,
    0 5em 0 -2.7em #fff,
    -3.5em 3.5em 0 -3em #fff,
    -5em 0 0 -2.7em #fff,
    -3.5em -3.5em 0 -3em #fff;
}
<body>
    moon & sun
      <div class="tdnn">
           <div class="moon">
          </div>
      </div>
    </body>
    
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

the script i wrote had to choose first the class ".light" as initial option, then when ".sun" class background is choosen the background will change and then save to "save" storage when user refresh or come back to site later.

Upvotes: 0

Views: 40

Answers (1)

vanowm
vanowm

Reputation: 10201

  1. getElementsByClassName returns list of elements, not a single element
  2. .light class only available when you click the button, so your onclick registration will never succeed
  3. you don't have anything in the code to set theme when page loaded.

Try this: https://jsfiddle.net/fgr1b97d/

if (Boolean(~~localStorage.getItem("save")))
    setTheme();

function setTheme()
{
  $("body").toggleClass('light');
  $(".moon").toggleClass('sun');
  $(".tdnn").toggleClass('day');
}

$('.tdnn').click(function()
{
  setTheme();
  saveData();
});

function saveData(){
  localStorage.setItem("save", ~~document.body.classList.contains("light"));
}
:root {
  --darkbg:#251D29;
  --darkt: #FFD1F7;
  --lightbg: #fff;
  --lightt: #D43370;
  
  --toggleHeight: 16em;
  --toggleWidth: 30em;
  --toggleBtnRadius: 10em;

  --bgColor--night: #423966;
  --toggleBtn-bgColor--night: var(--bgColor--night);
  --mooncolor: #D9FBFF;
  --bgColor--day: #9ee3fb;
  --toggleBtn-bgColor--day: var(--bgColor--day);
}

body{
  transition: all .2s ease-in-out;
  background: var(--darkbg);
  color: var(--darkt);
  text-align: center;
}
.light{
  background: var(--lightbg);
  color: var(--lightt);
}
.tdnn {
  margin: 0 auto;
  /*change size of toggle with font-size*/
  font-size: 30%;
  margin-top: 10em;
   position: relative;
    height: var(--toggleHeight);
    width: var(--toggleWidth);
    border-radius: var(--toggleHeight);
  transition: all 500ms ease-in-out;
  background: var(--bgColor--night);
}
.day{
  background: #FFBF71;
}
.moon {
  position: absolute;
  display: block;
  border-radius: 50%;
  transition: all 400ms ease-in-out;
  
  top: 3em;
  left: 3em;
  transform: rotate(-75deg);
  width: var(--toggleBtnRadius);
  height: var(--toggleBtnRadius);
  background: var(--bgColor--night);
  box-shadow: 
    3em 2.5em 0 0em var(--mooncolor) inset,
    rgba(255, 255, 255, 0.1) 0em -7em 0 -4.5em,
    rgba(255, 255, 255, 0.1) 3em 7em 0 -4.5em,
    rgba(255, 255, 255, 0.1) 2em 13em 0 -4em,
    rgba(255, 255, 255, 0.1) 6em 2em 0 -4.1em,
    rgba(255, 255, 255, 0.1) 8em 8em 0 -4.5em,
    rgba(255, 255, 255, 0.1) 6em 13em 0 -4.5em,
    rgba(255, 255, 255, 0.1) -4em 7em 0 -4.5em,
    rgba(255, 255, 255, 0.1) -1em 10em 0 -4.5em;
}
.sun {
  top: 4.5em;
  left: 18em;
  transform: rotate(0deg);
  width: 7em;
  height: 7em;
  background: #fff;
  box-shadow: 3em 3em 0 5em #fff inset,
    0 -5em 0 -2.7em #fff,
    3.5em -3.5em 0 -3em #fff,
    5em 0 0 -2.7em #fff,
    3.5em 3.5em 0 -3em #fff,
    0 5em 0 -2.7em #fff,
    -3.5em 3.5em 0 -3em #fff,
    -5em 0 0 -2.7em #fff,
    -3.5em -3.5em 0 -3em #fff;
}
<body>
    moon & sun
      <div class="tdnn">
           <div class="moon">
          </div>
      </div>
    </body>
    
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

Upvotes: 1

Related Questions