JavaScript experiment state engine class

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.

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 ~~~~
/* 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;
}

~~~~~~  JavaScript to manipulate to DOM ~~~~~~


// JS file:
// localStorage stateofHTML = which state of quiz.  Start, middle, End

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();
   
};


function getDOMElements() {
    //get DOM elements:
    a_paragraph = document.getElementById("doSomethingHere");
    first_div = document.getElementById("doSomethingInDiv1");
    second_div = document.getElementById("doSomethingInDiv2");   
};

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

<!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>