I am currently practicing using just vanilla JavaScript to program a website. At the moment, I am making a website where clicking on the fingerprint icon triggers an input to show for the user to key in the password. This is the code I have tried, some of which I adapted from https://gomakethings.com/how-to-show-and-hide-elements-with-vanilla-javascript/.
Despite that, I can't make it work. Please can you help fix 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) {
// Make sure clicked element is our toggle
if (!event.target.classList.contains('wash')) return;
// Prevent default link behavior
event.preventDefault();
// Get 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>
This would do in regular JS. Target and id and toggle display state.
function myFunction() {
var x = document.getElementById("my");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
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" onclick="myFunction()"><i class="fas fa-fingerprint"></i><h2>Log In</h2></span>
<span class="type" id="my"><input placeholder="Password"></span>
</div>
</body>
</html>
It would seem you need to add an onclick() method to your <span> containing the input box you want to show, which once clicked will change the display property from none to block.
You can view the solution here.
In Javascript you can do this in a simple way by just checking the property of block and none.
input type is self closing element you don't need to add </input> at the end.
You need to set the display property to the input type and based on the click event you can toggle on the condition.
document.addEventListener('click', function(event) {
var type = document.getElementById('inputType'); // the type you want to hide/show
if (type.style.display !== 'none') {
type.style.display = 'none';
} else {
type.style.display = 'block';
}
});
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;
}
<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>
<body>
<div class="keys">
<span class="press"><i class="fas fa-fingerprint"></i><h2>Log In</h2></span>
<span id="inputType" style="display:none;"><input placeholder="Password"/></span>
</div>
</body>
You can add an event listener to the .press class to toggle between setting the <input>'s display to none and block.
document.getElementsByClassName('press')[0].addEventListener('click', () => {
var input = document.getElementsByClassName('type')[0];
input.style.display = (input.style.display == 'none') ? 'block' : 'none';
});
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;
}
<!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" style="display: none;"><input placeholder="Password"></span>
</div>
</body>
</html>
Related
I am trying to create a To-Do App in HTML, CSS and Vanilla JavaScript, but I get the error checkBox is undefined when I try to toggle the class completed (which has text-decoration: line-through) on my checkBox constant. Does anybody know how to make this work?
Edit: I added HTML and CSS codes.
My code is as following:
function addTask() {
const checkBox = document.createElement("INPUT");
checkBox.setAttribute("type", "checkbox");
let task = document.createElement("li");
let inputVal = document.getElementById("taskName").value;
if (inputVal === "") {
alert ("Luilak!")
return
}
task.innerHTML = inputVal;
taskItem.appendChild(task);
taskItem.appendChild(checkBox);
let taskList = [];
taskList.push(inputVal);
}
if (checkBox.checked === true) {
taskItem.classList.toggle("completed", true)
} else {
taskItem.classList.toggle("completed", false)
}
html {
text-align: center;
}
h1 {
font-family: arial;
}
h2 {
font-family: arial;
font-style: italic;
}
#add {
background-color: hsl(185,100%,50%);
font-family: arial;
font-size: 20px;
border-radius: 15px;
margin-top: 25px;
height: 50px;
width: auto;
}
.completed {
text-decoration: line-through;
}
li {
font-family: arial;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="Style.css" rel="stylesheet">
<script src="Script.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do App</title>
</head>
<body>
<h1>To-Do App</h1>
<h2>Today</h2>
<ul id="taskItem"></ul>
<input type="text" id="taskName" value=""> <br>
<button onclick="addTask()" type="button" id="add">Add task</button>
</body>
</html>
Use onchange event.
You are directly checking checkBox.checked === true inside the function, this will check only once. Tis must be done inside the onchange of the checkbox. Inside that check the value of the checkbox and toggle the class of task, which is your li element.
function addTask() {
const checkBox = document.createElement("INPUT");
checkBox.setAttribute("type", "checkbox");
checkBox.onchange = function(e) {
if(e.target.checked) {
}
}
let task = document.createElement("li");
let inputVal = document.getElementById("taskName").value;
if (inputVal === "") {
alert("Luilak!")
return
}
task.innerHTML = inputVal;
taskItem.appendChild(task);
taskItem.appendChild(checkBox);
let taskList = [];
taskList.push(inputVal);
checkBox.onchange = function(e) {
if(e.target.checked) {
task.classList.toggle("completed", true)
} else {
task.classList.toggle("completed", false)
}
}
}
html {
text-align: center;
}
h1 {
font-family: arial;
}
h2 {
font-family: arial;
font-style: italic;
}
#add {
background-color: hsl(185, 100%, 50%);
font-family: arial;
font-size: 20px;
border-radius: 15px;
margin-top: 25px;
height: 50px;
width: auto;
}
.completed {
text-decoration: line-through;
}
li {
font-family: arial;
}
<h1>To-Do App</h1>
<h2>Today</h2>
<ul id="taskItem"></ul>
<input type="text" id="taskName" value=""> <br>
<button onclick="addTask()" type="button" id="add">Add task</button>
this way
const
todoList = document.querySelector('ul#taskItem')
, btAddTask = document.querySelector('button#add')
, task = document.querySelector('#taskName')
;
btAddTask.onclick = e =>
{
task.value = task.value.trim() // remve extra spaces
if ( task.value === '' ) // control first
{
alert ('Luilak!')
return
}
let newLI = document.createElement('li')
newLI.innerHTML = `<input type="checkbox"> ${task.value}` // use back quotes system
task.value = '' // clear input 4 next usage
todoList.appendChild(newLI);
}
todoList.onclick = e => // use event delegation
{
if (!e.target.matches('input[type="checkbox"]')) return // verify clicked element
e.target.closest('li').classList.toggle('completed', e.target.checked) // 1 line 4 both cases
}
html {
text-align : center;
font-family : Arial, Helvetica, sans-serif; /* same font 4 both elements */
}
h2 {
font-style : italic;
}
#add {
background : hsl(185,100%,50%);
font-size : 1.8em; /* use em unit */
border-radius : .7em;
margin : 1em;
padding : .2em .7em;
}
.completed {
text-decoration : line-through;
}
#taskItem {
margin : .1em auto;
width : 12em;
padding : 0;
list-style : none;
text-align : left;
}
#taskItem li {
display : inline-block;
width : 100%;
margin-bottom : .3em;
padding : .4em;
background : whitesmoke;
}
<h1>To-Do App</h1>
<h2>Today</h2>
<input type="text" id="taskName" value=""> <br>
<button type="button" id="add">Add task</button>
<ul id="taskItem"></ul>
This is my first leap on trying to implement a HTML/CSS website, so please take this into consideration.
I have multiple .html pages that implement the navbar from a nav.html, using a jQuery function( i guess?). The other html's are similar to index.
Any idea of what's wrong?
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
The code i used for adding active class is pure JS.
Here is index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/9a39db93cf.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
let count = 0;
function counter()
{
count++;
document.querySelector('#pageContent').innerHTML = count;
}
</script>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<script type="text/javascript">
const currentLocation = location.href;
const menuItem = document.querySelectorAll('a');
const menuLength = menuItem.length
for( let i=0; i<menuLength; i++){
if(menuItem[i].href === currentLocation){
menuItem[i].className = "active";
}
}
</script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>My Webpage</title>
</head>
<body>
<div id="nav-placeholder" class="sticky-top">
</div>
<div class="firstPage">
<h4>The title of this paragraph</h4>
<img onclick="counter(); return false;" src="images/mirciun.jpg" alt="mirciun" height=auto max-width=auto class="center">
<p id='pageContent'>0</p>
</div>
</body>
</html>
CSS:
body{
display: block;
margin: 0;
}
.menu li{
display: inline-block;
margin: 0;
}
ul.topnav{
background-color: #333;
margin: 0;
padding: 0;
text-align:center;
overflow: hidden;
}
ul.topnav li a{
display: block;
font-size: 20px;
padding: 10px;
color: whitesmoke;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #222;}
ul.topnav li a.active {background-color: #4CAF50;}
#media screen and (max-width: "600px") {
ul.topnav li {float: none;}
}
#brand{
display: table-cell;
vertical-align: middle;
line-height:50px;
}
#topText{
max-width: 500px;
margin: auto;
text-align: center;
border: 5px solid green;
color: red;
background-color: #0f0f0f;
margin-top: 10px;
}
.firstPage
{
margin-top: -20px;
background-color:grey;
max-width: 100%;
height: auto;
}
h4{
padding: 20px;
text-align: center;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
#pageContent{
text-align:center;
width: 75%;
margin: auto;
color: blue;
}
wrap your code with jquery on ready function and move to the bottom of the page.
$(function () {
const currentLocation = location.href;
const menuItem = document.querySelectorAll('a');
const menuLength = menuItem.length
for (let i = 0; i < menuLength; i++) {
if (menuItem[i].href === currentLocation) {
menuItem[i].className = "active";
}
}
})
Nevermind, i solved it using $( window ).on( "load", function(){, instead of $( document ).ready(function () { . The short explanation is that code will run once the entire page (images or iframes), not just the DOM, is ready. - > https://learn.jquery.com/using-jquery-core/document-ready/
First of all I've been browsing for a while trying to avoid opening yet another "div not expanding" question, but I haven't found a solution yet.
I'm building a web reporting tool with SCOM data I get via powershell scripting. We don't have access to SCOM reporting tools, that's why I have to build a website by hand.
<!DOCTYPE html>
<html lang="en">
<head>
<title>SCOM Reporting</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href=".\style\style.css">
</head>
<body>
<div class="header">
<h1 id="header">SCOM WEB REPORTING TOOL</h1>
</div>
<div class="navbar">
Home
PROD
ABN
EDEN
</div>
<div class="div_report" id="divReport">
</div>
<script src=".\js\scripts.js"></script>
</body>
</html>
My css
/* Style the body */
body, html {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
overflow: hidden;
height:100%;
width: 100%;
min-height:100%;
}
/* Header/logo Title */
.header {
padding: 20px;
text-align: center;
background: DarkSeaGreen;
color: white;
}
/* Increase the font size of the heading */
.header h1 {
font-size: 60px;
}
.navbar {
overflow: hidden;
text-align: center;
background-color: DimGrey;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #555;
}
/* Main column */
.main {
padding: 20px;
}
.div_report {
width: auto;
height: 500px;
border:1px solid #c0c0c0;
overflow: hidden;
}
And my js
function changeGuay(id){
changeHeader(id);
changeContent(id);
}
function changeHeader(id) {
if (id === "HOME") {
document.getElementById("header").innerText = "SCOM WEB REPORTING TOOL";
} else {
document.getElementById("header").innerText = id + " REPORTING";
}
}
function changeContent(id){
if (id === "HOME"){
document.getElementById("divReport").innerHTML = '<object type="text/html" data="about:blank"></object>';
} else {
document.getElementById("divReport").innerHTML = '<object type="text/html" data="'+id+'.html"></object>';
}
}
The div content changes to whatever I want as I desire but the content it shows doesn't expand at all, it remains as a small square. I'd like it to fill the rest of the empty space of the page, with the vertical scroll since the data I'm pulling from SCOM is long.
Live example here : https://codepen.io/bala421/pen/wvMqKwy
The problem is not the div, it is that you are using an <object> </object>. Select the object and apply the styles to it. I used this
object{
width: 100%;
height: 100%;
}
for basic grid layout i suggest bootstrap.
but anyway,
.div_report {
width: 100%;
}
everyone,
I have only just started to write my first website. Now I have encountered a first problem, which I cannot solve without your help.
How can I change my Javascript so that my NAV element closes by clicking on one of the links and by clicking outside the element?
You know what I mean?
I hope you can help me, thank you very much!
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="Design.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header">
<img src="" onClick="myFunction()"></img>
<h1>
</h1>
</div>
<hr>
</header>
<script>
function myFunction() {
var x = document.getElementById("myNAV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<nav id="myNAV">
<p> </p>
<p>WORK</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>ME</p>
<p></p>
<p></p>
<p>AARAU</p>
<p> <a href="</a> </p>
<p> </p>
<p> IMPRESSUM </p>
<p> </p>
</nav>
</body>
</html>
#charset "UTF-8";
html {
height: 100%;
margin-top: -13px;
margin-left: -7px;
}
body {
font-family: Helvetica, "Helvetica Neue", "Myriad Pro", "sans-serif", "Frutiger LT Std 65 Bold";
height: 100%;
min-height: 100%;
}
body header hr {
border: none;
height: 2px;
color: black;
background-color: #333333;
}
hr {
border: none;
height: 1px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #333; /* Modern Browsers */
margin-top: 0px;
}
body header h1 {
font-weight: bold;
text-indent: 20px;
height: 41px;
font-size: 120%;
display: table-cell;
vertical-align: middle
}
.header {
height: 41px;
}
body header img {
float: left;
width: 56px;
height: 41px;
}
#myNAV {
background-color: #01FFFF;
width: 50%;
height: 100%;
margin-top: -17px;
padding-top: 0px;
min-width: 500px;
}
body header {
height: 42px;
}
#myNAV p {
font-size: 120%;
font-weight: bold;
text-indent: 76px;
padding-top: 10px;
margin-top: 19px;
clear: left;
}
/* unvisited link */
#myNAV p a:link {
color: #000000;
text-decoration: none;
}
/* visited link */
#myNAV p a:visited {
color: #000000;
text-decoration: none;
}
/* mouse over link */
#myNAV p a:hover {
color: #F8F8F8;
text-decoration: none;
}
/* selected link */
#myNAV p a:active {
color: #F1F1F1;
text-decoration: none
}
Here is the demo link:
You need to bind a click event listener to the DOM
//Store the nav in a variable
var nav = document.getElementById('myNAV')
var domClickHandler = function(event){
nav.style.display = 'none'
}
document.addEventListener('click', domClickHandler)
Also modify your toggle function like so
function myFunction(event) {
// this would stop the event from reaching the DOM click listener
event.stopPropagation()
var x = document.getElementById("myNAV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
You need to setup an event listener on the nav div
function toggleVisibilityEventHandler(event) {
// event is the javascript event that triggered this function call
// currentTarget is the element we bound this event to
// your nav bar in this case
// you also have event.target to get the element that was clicked
let element = event.currentTarget;
if (element.style.display === "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
// find your element ONCE instead of crawling the DOM every time to find it
let nav = document.getElementById("myNAV");
// when the 'click' event is fired on the nav element, call the provided function
nav.addEventListener('click', toggleVisibilityEventHandler);
I was wondering why the button doesn't change to the other function where the button will turn red when clicking it a second time.
My goal is to have one button that will change function depending on whether you pressed it once
<!DOCTYPE html>
<html>
<head>
<style>
#hello {
padding: 30px 60px;
background-color: #4db8ff;
width: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
cursor: pointer;
color: white;
font-family: arial;
font-size: 20px;
}
</style>
</head>
<body>
<div id="hello" onclick="button()">START</div>
</body>
<script>
var x = true;
if(x == true) {
function button() {
x = false;
alert("once");
}
}
if(x == false) {
function button() {
alert("twice");
document.getElementById("hello").style.background = "#ff3333";
}
}
</script>
</html>
You're conditionally creating, on page load, one of two possible function definitions. The second definition won't replace the first just because you've reassigned the boolean flag at some point.
Create a single function that checks the status of x internally:
function button() {
if(x) { // Comparing against true is redundant
x = false;
alert("once");
} else {
alert("twice");
document.getElementById("hello").style.background = "#ff3333";
}
}
Your function button() is only being defined once. You can not define a function based on a condition, it will be defined as soon as its surrounding code is executed. Thus, you need to place your if statements inside the function.
<!DOCTYPE html>
<html>
<head>
<style>
#hello {
padding: 30px 60px;
background-color: #4db8ff;
width: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
cursor: pointer;
color: white;
font-family: arial;
font-size: 20px;
}
</style>
</head>
<body>
<div id="hello" onclick="button()">START</div>
</body>
<script>
var x = true;
function button(){
if(x) {
x = false;
alert("once");
} else {
alert("twice");
document.getElementById("hello").style.background = "#ff3333";
}
}
</script>
</html>