Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Nathan Boaldin
Nathan Boaldin
Courses Plus Student 12,545 Points

Show div based on date and local storage value.

Hello. I am wanting to show a div that holds a form on Wednesdays. After one click on the submit button I do not want the div to show again until the next Wednesday (really the Tuesday before as a reset day). I am able to get the functionality I want with the following code EXCEPT I have to refresh the page twice on 'resetDay' for the div to show again. The code is based on what is happening with the value of the submit button in the localStorage object.

My brain is fuzzy for the day, so I would love for someone to look it over and make some suggestions. Thanks a ton!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  </head>
  <style>
    .modal-wrapper {
      height: 300px;
      background-color: blue;
    }
  </style>
  <body>
    <div class="modal-wrapper" style="">
      <form>
        <select>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <input type="submit" id="sg_SubmitButton" value="submit"/>
        </select>
      </form>
    </div>

    <script>
      var submit = document.getElementById('sg_SubmitButton');
      var modal = document.querySelector('.modal-wrapper');
      var rightNow = new Date();
      var day = rightNow.getDay();
      var Wed = (day == 3);
      var resetDay = (day == 2);



      function storeSubmitTrue() {
        submit.addEventListener('click', function(e) {
         localStorage.setItem("SubmitValue", true);
       });

      }

      function hideModal(){
       if(localStorage.SubmitValue === "true"){
         modal.style.display = 'none';
       }
      }

      function showModal(){
       if(Wed){
         modal.style.display = 'block';
         submit.addEventListener('click', function(e){
           localStorage.setItem("SubmitValue", true )
         });
       } else if(resetDay) {
               localStorage.removeItem("SubmitValue");
         }
       hideModal();
      }

      storeSubmitTrue();
      hideModal();

      showModal();

    </script>
  </body>
</html>

2 Answers

Steven Parker
Steven Parker
243,228 Points
Steven Parker
Steven Parker
243,228 Points

Unless I'm misunderstanding its importance, I would bypass the "resetDay" by storing the current date.

On load, if the stored date is not the same as today, and the day is Wed, then show the form and store the date.

Nathan Boaldin
Nathan Boaldin
Courses Plus Student 12,545 Points

Steven Parker I have not had a chance to try it, but I will! Thank you for your time, and I will let you know.

Nathan Boaldin
Nathan Boaldin
Courses Plus Student 12,545 Points

Is this what you mean, Steven Parker ? If so, it feels way more concise and not as clunky. Thanks a ton.

    <script>
      var submit = document.getElementById('sg_SubmitButton');
      var modal = document.querySelector('.modal-wrapper');
      var date = new Date();
      var today = date.getDay();
      var sunday = 0;

      function storeSubmitTrue() {
        submit.addEventListener('click', function(e) {
         localStorage.setItem("SubmitValue", true);
       });
      }

      function hideModal(){
       if(localStorage.SubmitValue === "true"){
         modal.style.display = 'none';
       }
      }

      function removeSubmitValue() {
        localStorage.removeItem('SubmitValue');
      }


      modal.style.display = 'none';

      if(today === sunday) {
        modal.style.display = 'block';
        storeSubmitTrue();
        hideModal();
      } else if (today !== sunday) {
        removeSubmitValue();
      }
    </script>
Steven Parker
Steven Parker
243,228 Points
Steven Parker
Steven Parker
243,228 Points

Almost, but I don't think you want to both show and hide the modal at the same time. If today is the day, then if the value is already set, hide the modal. But if it is not set, set it and show the modal.

Nathan Boaldin
PLUS
Nathan Boaldin
Courses Plus Student 12,545 Points
Nathan Boaldin
Nathan Boaldin
Courses Plus Student 12,545 Points

Thanks Steven Parker