ss

by kirkim

HTML

<div class="A13_block">
	<span>KIRKIM</span>
	<form id="A13_form" class="hidden">
		<span  >
			<input
				required
				maxlength="15"
				type="text"
				placeholder="what is your name?"
			/>
			<inp
</div>
<div class="A13_block2">
	<b id="A13_out" class="hidden"></b><br>
</div>

CSS

.A13_block {
		background-color: green;
		color: white;
		border-radius: 5px;
		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		width: 80%;
		padding: 1% 2%;
	}
	.A13_block2 {
		background-color: #79a575;
		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		width: 80%;
		padding: 1% 2%;
		font-size:40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.hidden {
		display: none;
	}
	.aaa {
		display: inline;
	}

JavaScript

const outA = document.querySelector("#A13_out");
	const loginForm = document.querySelector("#A13_form")
	const loginInput = document.querySelector(".A13_block input");
	const logOut = document.querySelector("#A13_logout");
	const usrName = localStorage.getItem("username");

	function onLoginSubmit(event) {
		loginForm.classList.add("hidden");
		loginForm.classList.remove("aaa");
		const username = loginInput.value;
		localStorage.setItem("username", username);
		paintHello(username);
	}

	function paintHello(username) {
		outA.innerText = `Hello ${username}!`;
		outA.classList.remove("hidden");
		logOut.classList.remove("hidden");
	}

	function logOutFunc() {
		if  (usrName !== null) {
			localStorage.removeItem("username");
			logOut.classList.add("hidden");
			outA.classList.add("hidden");
			loginForm.classList.remove("hidden");
			loginForm.classList.add("aaa");
		}
	}

	if  (usrName === null) {
		loginForm.classList.remove("hidden");
		loginForm.classList.add("aaa");
		logOut.classList.add("hidden");
		loginForm.addEventListener("submit", onLoginSubmit);
	} else {
		paintHello(usrName);
		logOut.addEventListener("click", logOutFunc);
	}