javascript class state localstorage

I've been working with my Chingu project a ton, and haven't posted recent experiments, so as I was working on figuring something out today, I kept in mind to share the experiment on blogger.

picture:  the html page in 'start' state.  'START' is text in the main div which is green.  

Below that div is a shorter div with the next color that will appear, which is yellow.

The top of the page says:  Make something happen here: below that is a button that says:

"CHANGE PAGE STATE".  video of process in action box changes from text: start, background-color: green,  to middle/yellow, to end/red.

I start off like I do the other javascript experiments,
Make a folder on desktop (anyname):
in anyname folder,  I make a JavaScript file, and a HTML file. (optional css file)
*This one also has a small css file to just give it some shape*

Now when I want to test how my files are interacting and running,  I go to my anyname folder, double click the HTML file,  and my browser loads it up for me.

Then time to Google!
    * JavaScript class
    * localStorage
    * JavaScript State Engines
    * if/else clauses


You can make changes as you go, and refresh the page.
One thing I did learn with this experiment, is that refresh does not change localStorage items, which is exactly what I was hoping for.  I also wanted to see how to incorporate a class mechanism for the state of the page.

(I wanted to make the javascript change my layout, and elements dependent on what my local Storage item 'state' is set at.)

So, without further ado,  the code.   Break it, play with it, do whatever you want.

Remember if the page isn't changing, check the browser web tools, and the console log.  You might need to clear current browser history (cookies, cache).

~~~~   A little css to give it some life ~~~~
--- Start code block ---

/* testJS folder => css file, for js tests
    * #F2EBE2 -- white/ orange tinge
    * container -- main div on HTMLPage1.html of testJS folder
*/

body {
    background-color: #F2EBE2;
}

h1 {
    font-family: fantasy;
    color: darkblue;
    text-shadow: 1px 2px 3px white;
    font-weight: lighter;
}

.container {
    border: 10px double purple;
    height: 25vh;
    width: 75vw;
    margin-top: 12.5vh;
    margin-bottom: 12.5vh;
    margin-left: 12.5vw;
    margin-right: 12.5vw;
}

--- end code block ---

~~~~~~  JavaScript to manipulate to DOM ~~~~~~
--Start code block--

   
 function classStartWindow() { 
   this.whichState = window.localStorage.getItem('state'); 
   this.a_paragraph = document.getElementById("doSomethingHere"); 
   this.first_div = document.getElementById("doSomethingInDiv1"); 
   this.second_div = document.getElementById("doSomethingInDiv2");  
   
   if (this.whichState == 'start') { 
     this.a_paragraph.innerHTML = "START"; 
     this.a_paragraph.style.color = "black"; 
     this.first_div.style.background = "green"; 
     this.second_div.style.background = "yellow"; 
   }; 
   
   if (this.whichState == 'middle') { 
     this.a_paragraph.innerHTML = "MIDDLE"; 
     this.a_paragraph.style.color = "purple"; 
     this.first_div.style.background = "yellow"; 
     this.second_div.style.background = "red"; 
   }; 
   
   if (this.whichState == 'end') { 
     this.a_paragraph.innerHTML = "END"; 
     this.a_paragraph.style.color = "black"; 
     this.first_div.style.background = "red"; 
     this.second_div.style.background = "green"; 
   }; 
   
 }; 
   
 function MyFunction() { 
   //let states = ['start', 'middle', 'end']; 
   state = window.localStorage.getItem('state'); 
   console.log(state); 
   if (state == null) { 
     window.localStorage.setItem('state', 'start') 
   } 
   let getstate = new classStartWindow() 
   getstate 
 }; 
   
   
 function Change_State() { 
 
   let state = window.localStorage.getItem('state'); 
   if (state == null) { 
     window.localStorage.setItem('state', 'start'); 
   } 
   else if (state == 'start') { 
     window.localStorage.setItem('state', 'middle'); 
   } 
   else if (state == 'middle') { 
     window.localStorage.setItem('state', 'end'); 
   } 
   else if (state == 'end') { 
     window.localStorage.setItem('state', 'start'); 
   } 
   else { 
     console.log("state not found:", state); 
   }; 
   location.reload(); 
   
 }; 

--End code block--

~~~  The HTML for the browser to run ~~~~

--Start HTML code block ---

<!DOCTYPE html>



<html lang="en">

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript" src="testjs.js"></script>

    <link rel="stylesheet" href="testjs.css" />



    <title>TestJS</title>

    <!-- Change_State() -->

</head>

<body>

    <h1>Make something happen here:</h1>

    <button id="moveState" onclick="Change_State()"> CHANGE PAGE STATE </button>

    <div class="container" id="doSomethingInDiv1">

        <p id="doSomethingHere" style="font-size: 3em; text-align: center;"></p>

    </div>

    <div class="container" id="doSomethingInDiv2" style="height: 5vh; width: 75vw;"></div>



    <script>

       window.onload = MyFunction();

    </script>



</body>

</html>

--End Code block ----