i chose to make a separate page to enter a password. since i’m a beginner i figured out that for a decent prototype and to show how my app flow functions, i’d just make a separate page for it. i might shift the password feature to the homepage later, but this is my plan so far.

So what we can see here is a before vs. after of the password page. Like how you saw the stuff in my first and second devlog, how i went from a scrappy prototype to a decent and cleaned up one clearly showing the intended structure, i’ve framed it similarly here as well.

the first photo shows the elements that were put together using pure semantic HTML (no CSS yet), the logo, the heading, the container which consists of the subtext, password input and button weren’t styled yet.

the second photo on the other hand shows the cleaned up version using CSS and the similar principles I presented in my second devlog. And guess what? this is the exact same page i hinted about in my second devlog? exciting for you? maybe not. exciting for me? absolutely. It does the same three things.

On a serious note though, I coded this mechanism using JavaScript by comparing the fixedPassword (a constant variable) to the passwordEntered (another constant variable which receives the input from the input id using getElementById(“elementName”) ). I assigned two more constant variables, one, to retrieve the click of the ‘Continue’ button and number two, to push an error message. Additionally, I used an addEventListener function, which responds to the click of the button and nested three different conditionals inside the click function. “IF the password is correct” - it takes you to the next page using window.location.href (which I already spoiled earlier)
“ELSE IF there is no password incorrect” - trigger a response.
“ELSE” - trigger another error response.