Currently, I am honing my skills in vanilla JavaScript by working on a website project. In this project, I have implemented a feature where clicking on a fingerprint icon triggers an input field to appear for the user to enter their password. The code snippet below showcases what I have attempted, with some inspiration from .
However, despite my efforts, I seem to be facing issues getting it to function correctly. I would greatly appreciate any assistance in troubleshooting and fixing the code.
Code
var show = function(elem) {
elem.style.display = 'block';
};
var hide = function(elem) {
elem.style.display = 'none';
};
var toggle = function(elem) {
elem.classList.toggle('wash');
};
// Listen for click events
document.addEventListener('click', function(event) {
// Ensure that the clicked element is our toggle
if (!event.target.classList.contains('wash')) return;
// Prevent default link behavior
event.preventDefault();
// Obtain the content
var content = document.querySelector(event.target.hash);
if (!content) return;
// Toggle the content
toggle(content);
}, false);h1 {
font-family: 'Libre Baskerville', serif;
text-align: center;
font-size: 4em;
color: #e0e4ec
}
html {
background: #556c9a
}
.keys {
text-align: center;
}
.fa-fingerprint {
text-align: center;
padding-left: 2%;
padding-right: 2%;
font-size: 3rem;
}
h2 {
position: relative;
text-align: center;
}
.press:hover {
color: yellow;
}
.type {
display: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello</title>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@1&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/923b4d30ed.js" crossorigin="anonymous"></script>
<h1>Pineapple</h1>
</head>
<body>
<div class="keys">
<span class="press"><i class="fas fa-fingerprint"></i><h2>Log In</h2></span>
<span class="type"><input placeholder="Password"></span>
</div>
</body>
</html>