Senha e Password Div

by thvinic

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="multifooter" class="sessao">
	<a href="#" id="esconde" class="close-alert">&times;</a>
	<div id="multifootericon">
div com conteudo
	</div>
	<p id="multifootertext">
  
  
  
  
  
  

<input type="text" id="password">
<br>
<input id="button" type="button" value="Login">
  
  
  
  
  
  
  
  
  </p>
</div>






<div id="HIDDENDIV" class="hidden">Parabéns! você ativou com sucesso o seu App! recarregue esta pagina e tenha acesso a todo o conteudo.</div>


<div id="container">
    <a id="foo" style="display:none;" href="javascript:void(0);">validacao</a>
    <div id="bar">conteudo da pagina</div>
</div>

CSS

.hidden { display: none; }

#foo {
    display:block;
    float:left;
    width:200px;
    height:20px;
    text-align:center;
}
#bar {
    display:none;
    float:left;
    height:100%;
    width:100%;
    background: (204 204 204 / 0.5);
}
#multifooter {
	position: fixed;
	width: 100%;
	background: #007fad;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10px;
}
#multifootericon {
	float: left;
	width: 80px;
	margin-right: 15px;
}
#multifootertext {
	font-size: 14px;
	color: white;
	line-height: 1.5;
	text-align: center;
	vertical-align: middle;
}

.close-alert {
	position: absolute;
	top: 1em;
	right: 1.5em;
	color: white;
	font-weight: bold;
	display: block;
	font-size: 22px;
	line-height: 20px;
	cursor: pointer;
	transition: 0.3s;
	text-decoration: none
}
.close-alert:hover {
	color: #414042;
}
.sessao {
  display: none;
	}

JavaScript

// Get references to the elements you'll be working with
var input = document.getElementById("password");
var div = document.getElementById("HIDDENDIV");
var btn = document.getElementById("button");

// Set up event handlers in JavaScript
button.addEventListener("click", validate);

function validate(){
  if (input.value == '123') { 
     // No need to add a "show" class. Just remove the "hidden" class.
     
     // Or, add it:
localStorage.removeItem('button');
div.classList.remove('hidden');
document.getElementById("foo").click();
document.getElementById("esconde").click();
  } else {  
     password.focus(); // <-- If you don't do this first, your select code won't work
     password.setSelectionRange(0, password.value.length);   
     alert('incorrect password!'); 
  }
}

input.addEventListener("keydown", function(event){
 if (event.keyCode === 13){
   // No reason to simulate a button click. Just call the code that needs to be run.
   validate();
 }
});
$(document).ready(function () {
    $('#foo').click(function () {
        $(this).siblings().toggle();
        //you need to pass string values, your variables display & block was not defined
        localStorage.setItem('display', $(this).siblings().is(':visible'));
    });
    var block = localStorage.getItem('display');
    if (block == 'true') {
        $('#bar').show()
    }
});

//local storage

//store local storage in a variable
var showStatusStorage = localStorage;
//test to see if local storage is already set on page load
if (!showStatusStorage.getItem("showStatus")) {
  showStatusStorage.setItem("showStatus", "show");
}

updateLocalStorageTextField();

//show the alert IF the user hasn't expressly checked the 'dont show again' checkbox on a previous visit
if (showStatusStorage.getItem("showStatus") === "show") {
   $("#multifooter").removeClass("sessao");
}

function closeAlert() {
  $(this).closest("#multifooter").addClass("sessao");
  showStatusStorage.setItem("showStatus", "dontShow");
 ...