JSFiddle - React, Tailwind, and code Playground

by 80351

HTML

<div class = "login">
<form>
<input type = "password" class = "enterPassword">
<button class = "submit">Submit</button>
</form>

</div>

CSS

.login {
   position: absolute;
   margin: 0 auto;
   width: 300px;
   height: 50px;
   top: 50%;
   display: block;
   background-color: white;
   color: black;
   border: 6px solid red;
   border-radius: 15px;
}

.enterPassword {
   position: relative;
   width: 80%;
   height: 80%;
   color: black;
}

.submit {
   position: relative;
   height: 50%;
   float: right;
   color: white;
   background-color: black;
   border: 1px solid gray;
   cursor: pointer;
}

JavaScript

var p = document.querySelector(".enterPassword");
console.log(p)
p.required = true;
p.style.backgroundColor = "gray";

var s = document.querySelector(".submit");
s.addEventListener("click", clickHandler.bind(p));

function clickHandler() {

	console.log("Password: " + this.value);
}