Password Generator does not work until I move slider

Password Generator does not work until I move slider - javascript

Problem: My password generator will not work until I move my slider. However, I would like the value to default to 8. So if someone loads page, and clicks generate PW, a random pw of 8 would populate.
//generate a password function
function passwordGenerator () {
// Length of the password?
var passwordLength = document.getElementById('num').value;
// characters options for PW
const values = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!##$%^&*()";
// defining password
var password = "";
// creating a loop to choose password
for (var i = 1; i <= passwordLength; i++) {
password = password + values.charAt(Math.floor(Math.random() * Math.floor(values.length -1)));
}
// adding the password to the content area
document.getElementById('display').value = password;
}
// adjust value when moving slider
function sliderMove(){
document.getElementById('num').value = document.getElementById('slider1').value;
document.getElementById('num').textContent = document.getElementById('num').value;
}
//copy to clipboard
function selectText() {
const input = document.getElementById('display');
input.focus();
input.select();
document.execCommand('copy')
}
.backgroundWhite {
background-color: white;
border: darkgray 2px solid;
padding-bottom: 25px;
}
.backgroundGray {
background-color: lightgray;
width: 100%;
height: 500%;
}
.passwordBox {
width: 500px;
height: 200px;
text-align: center;
}
body {
height: 100%;
background-color: lightgray;
}
.headText {
padding: 50px;
}
.buttonOnClick {
margin: 20px;
}
.passGenButton {
color: white;
background-color: red;
margin-right: 15%;
height: 40px;
border-radius: 12px;
}
.copyButton {
margin-left: 15%;
background-color: darkgray;
color: white;
height: 40px;
border-radius: 12px;
}
textarea {
padding: 20px;
font-size: 19px;
color: #4f4f4f;
}
.titleClass {
padding-top: 10px;
}
#media (max-width: 537px) {
.passGenButton {
color: white;
background-color: red;
margin-right: 1%;
height: 40px;
border-radius: 12px;
}
.copyButton {
margin-left: 1%;
background-color: darkgray;
color: white;
height: 40px;
border-radius: 12px;
}
.passwordBox {
width: 400px;
height: 200px;
text-align: center;
}
.backgroundWhite {
background-color: white;
border: darkgray 2px solid;
padding-bottom: 25px;
padding-left: 20px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="app.js"></script>
<title>Random Password Generator</title>
</head>
<body>
<div class="conatiner backgroundGray">
<div class="row">
<div class="col-12">
<div class="topText">
<!-- Header -->
<h1 class="text-center text-dark headText">Password Generator</h1>
</div>
<div class="container">
<div class='row'>
<div class="col-lg-12 col-sm-12 text-center">
<div class="content backgroundWhite">
<!-- Sub Header -->
<h4 class="titleClass">Generate a Password</h4>
<br />
<!-- Slider -->
<div class="slidecontainer">
<p>Select PW Length</p>
<input id="slider1" type="range" min="8" max="128" value="8" onchange="sliderMove()"
class="robClass">
<span id="num">8</span>
</div>
<br />
<!-- Password Box -->
<textarea class="passwordBox" type="text" id="display"
placeholder="Your Secure Password"></textarea>
<br />
<button onclick="passwordGenerator()" class="passGenButton buttonOnClick">Generate
Password</button>
<button class="buttonOnClick copyButton" defaultValue="8" onclick="selectText()">Copy to
clipboard</button>
<div id='length'></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have played with HTML and JS. I have tried to create a var num = 8;
no luck.
Does anyone have any ideas on how I can do this?

At the start of your passwordGenerator function:
var passwordLength = document.getElementById('num').value;
This element (<span id="num">8</span>) doesn't have a value attribute, so your function will try to generate a password with a length equal to undefined.
You should get the value from your slider instead:
var passwordLength = document.getElementById('slider1').value;
You can also simplify your function sliderMove function:
function sliderMove() {
document.getElementById('num').textContent = document.getElementById('slider1').value;
}

Related

How to get an element inside a function javascript

I'm trying to use the value that each book has on its "status" and make the function "changeStatus()" run but "book.status" is defined inside a function, how can I get it? or is there any other way i can change the button behavior on click? I tried using a querySelector but it only allows me to click one button per refresh
let books = [];
const $name = document.querySelector("#name");
const $author = document.querySelector("#author");
const $status = document.querySelector("#status");
const $pages = document.querySelector("#pages");
const $tableBody = document.querySelector("#book-table-body");
function addBookToTable() {
// checkLocalStorage();
$tableBody.innerHTML = "";
books.forEach((book) => {
const htmlBook = `
<tr>
<td>${book.title}</td>
<td>${book.author}</td>
<td>${book.pages}</td>
<td><button class="status-button" onclick="changeStatus()">${book.status}</button></td>
<td><button class="delete">delete</button></td>
</tr>
`;
$tableBody.insertAdjacentHTML("afterbegin", htmlBook);
});
}
function changeStatus(){
}
const addBook = (event) => {
event.preventDefault();
let book = {
title: $("#title").val(),
author: $("#author").val(),
pages: $("#pages").val(),
status: $("#status").val(),
};
const cb = document.querySelector("#status");
if (cb.checked === true) {
book.status = "read";
} else {
book.status = "not read";
}
books.push(book);
document.forms[0].reset();
// Update DOM
addBookToTable(book);
const deleteBtn = document.querySelector(".delete");
deleteBtn.addEventListener("click", function deleteBook(){
books.splice(books.indexOf(book), 1);
addBookToTable(book);
})
// const myBtn = document.querySelector(".status-button");
// myBtn.addEventListener('click', function changeStatus(){
// if (book.status === "read"){
// myBtn.innerHTML="not read"
// book.status = "not read"
// }
// else if(book.status === "not read"){
// myBtn.innerHTML = "read";
// book.status = "read"
// }
// }
// );
localStorage.setItem("myMangaList", JSON.stringify(books));
};
function popForm() {
$("#popup").removeClass("hide");
}
function minimizeForm(){
$("#popup").addClass("hide");
}
function hideForm() {
$("#popup").addClass("hide");
$("#main-page").removeClass("hide");
}
function toggle() {
$("#main-page").addClass("hide");
}
* {
font-family: 'Lato', sans-serif;
text-align: center;
/* background-image: url(./images/image.jpg);
background-position: bottom;
background-size: cover; */
}
.hide {
display: none;
}
.hide-form {
background-color: transparent;
color: white;
border: none;
cursor: pointer;
font-size: 1.5rem;
margin-top: 20px;
margin-right: 15px;
position: absolute;
top: 0;
right: 0;
}
h1 {
font-size: 2.5rem;
font-weight: 900;
font-family: 'Work Sans', sans-serif;
}
h1 span {
color: #48abe0;
}
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
/* border: 1px solid #dddddd; */
text-align: center;
padding: 8px;
}
#main-page {
margin-right: 80px;
margin-left: 80px;
}
#addBook {
border-radius: 70%;
background-color: #48abe0;
color: white;
border: none;
padding: 5px;
font-size: 31px;
height: 65px;
width: 65px;
box-shadow: 0 2px 4px darkslategray;
cursor: pointer;
transition: all 0.2s ease;
position: fixed;
bottom: 25px;
right: 25px;
}
#popup {
/* display: flex; */
justify-content: center;
align-items: center;
flex-direction: column;
gap: 30px;
padding-top: 50px;
padding-bottom: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
background: #48abe0;
border-radius: 10px;
}
#popup input {
width: 80%;
padding: 15px;
margin-top: 25px;
border: 1px solid;
border-radius: 5px;
outline: none;
color: white;
font-weight: bold;
font-size: 1em;
background: #48abe0;
}
.status-box {
margin-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css">
<!-- fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation:wght#500&family=Edu+QLD+Beginner:wght#400;600;700&family=Edu+TAS+Beginner:wght#700&family=Josefin+Sans:wght#300&family=Lato&family=Montserrat:wght#100;600&family=Mouse+Memoirs&family=Poppins:ital,wght#0,500;1,200&family=Quicksand:wght#300&family=Ubuntu:wght#300&family=Work+Sans:wght#200&display=swap"
rel="stylesheet">
<title>Library</title>
</head>
<body>
<h1>My <span>Manga</span> Library</h1>
<div id="popup" class="hide">
<form>
<button class="hide-form" onclick=" minimizeForm()">X</button>
<!-- <label for="title">Manga Title:</label> -->
<input type="text" id="title" placeholder="Title eg: One Piece"> <br>
<!-- <label for="author">Author:</label> -->
<input type="text" id="author" placeholder="Author eg: Eichiro Oda"><br>
<!-- <label for="pages">Pages:</label> -->
<input type="text" id="pages" placeholder="Pages eg: 2000"><br>
<div class="status-box">
<label for="status">Read the book</label>
<input type="checkbox" id="status" name="status" value="">
</div>
<button type="submit" id="submit" onclick="addBook(event); hideForm()">Submit</button>
</form>
</div>
<!-- onclick="addBook() -->
<div id="main-page">
<h1>list</h1>
<div id="books-grid">
<table id="di-books">
<tr>
<th>Name</th>
<th>Author</th>
<th>Pages</th>
<th>Status</th>
<th></th>
</tr>
<tbody id="book-table-body"></tbody>
</table>
</div>
<button id="addBook" onclick="popForm(); toggle()">+</button>
</div>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>

If you want to update the status of a book, you need a way to identify each book uniquely. Although it is possible to do this based on e.g. title or author, the reality is that those fields are not guaranteed to be unique.
Typically, you'd use the Id number of a database entry, but since you're using mock data that isn't realy an option here. We could e.g. use a UUID though:
let book = {
title: $("#title").val(),
author: $("#author").val(),
pages: $("#pages").val(),
status: $("#status").val(),
id: self.crypto.randomUUID() //Warning: might only work with HTTPS sites. Implement your own unique id in any way you please.
};
Now we have a unique id, we can use it to couple each status button with a unique book entry. Lets adjust the HTML:
const htmlBook = `
<tr>
<td>${book.title}</td>
<td>${book.author}</td>
<td>${book.pages}</td>
<td><button class="status-button" onclick="changeStatus('${book.id}')">${book.status}</button></td>
<td><button class="delete">delete</button></td>
</tr>
`;
and lets write the update function:
function changeStatus(id){
//step 1: find our book with the matching unique id
let book = books.filter(book => book.id === id)[0];
//Step 2: update the book its status
if (book.status === "read"){
book.status = "not read";
}
else if(book.status === "not read"){
book.status = "read"
}
//Step 3: update our table with the new data.
addBookToTable();
};
And voila, we're able to switch the status of any book!
I tried to stick as close to your code as possible so you'd better understand it, but a lot more improvements can be implemented, such as event listeners instead of explicitly calling the changeStatus function, but I'll leave that as an exercise to you.
Full working example:
codepen

Javascript file partially running

So I taught myself coding a few years ago, and got it just enough to put together a few tools for work. I recently had to migrate my site out of CodePen and onto an actual web server. Now I'm having an issue where part of my javascript is executing properly (a portion that empties all other input fields when a user enters an input field using JQuery), but the button that calculates an answer will not work. I believe the .click is not picking it up. Either way I'm not getting error messages, the button just does nothing when I press it.
When I put the code in a snippet to share with you guys, it works (just like it did in CodePen), but the exact same code on my web host does not work. I'm really at a loss here and any help would be greatly appreciated. I feel like I'm missing some small line of code that's supposed to be included in all web files.
$(document).ready(function() {
//Clear out input fields when not selected
$("#sg").focusin(function() {
$("#density").val("");
});
$("#density").focusin(function() {
$("#sg").val("");
});
$("#pounds").focusin(function() {
$("#grams").val("");
$("#percentage").val("");
});
$("#grams").focusin(function() {
$("#percentage").val("");
$("#pounds").val("");
});
$("#percentage").focusin(function() {
$("#pounds").val("");
$("#grams").val("");
});
$(".input_field").focusin(function() {
$("#density").removeClass('highlight');
$("#sg").removeClass('highlight');
$("#pounds").removeClass('highlight');
$("#grams").removeClass('highlight');
$("#percentage").removeClass('highlight');
});
//Calculate on press of enter
$("#button").keypress(function(e) {
if (e.which == 13) {
alert("this is working");
}
});
$("#button").click(function() {
calculateButton();
});
//Calculate values on button hit
function calculateButton() {
function numberWithCommas(x) {
x = x.toString();
var pattern = /(-?\d+)(\d{3})/;
while (pattern.test(x))
x = x.replace(pattern, "$1,$2");
return x;
}
function removeCommas(x) {
x = x.replace(",", "");
return x;
}
var results = 0;
//Pulling information from input cells
var densityStr = document.getElementById("density").value;
var sgStr = document.getElementById("sg").value;
var poundsStr = document.getElementById("pounds").value;
var gramsStr = document.getElementById("grams").value;
var percentageStr = document.getElementById("percentage").value;
//remove commas from string and then convert string to number
var densityNum = Number(removeCommas(densityStr));
var sgNum = Number(removeCommas(sgStr));
var poundsNum = Number(removeCommas(poundsStr));
var gramsNum = Number(removeCommas(gramsStr));
var percentageNum = Number(removeCommas(percentageStr));
if (densityStr.length !== 0) {
var sgConversion = densityNum / 8.3454;
$("#sg").val(sgConversion.toFixed(3));
$("#density").addClass('highlight');
} else if (sgStr.length !== 0) {
var densityConversion = sgNum * 8.3454;
$("#density").val(densityConversion.toFixed(3));
$("#sg").addClass('highlight');
}
if (poundsStr.length !== 0) {
$("#pounds").addClass("highlight");
densityNum = document.getElementById("density").value;
var gramsConversion = poundsNum * 119.83;
var percentageConversion = poundsNum / densityNum * 100;
$("#grams").val(gramsConversion.toFixed(0));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (gramsStr.length !== 0) {
$("#grams").addClass("highlight");
densityNum = document.getElementById("density").value;
var poundsConversion = gramsNum / 119.83;
var percentageConversion = poundsConversion / densityNum * 100;
$("#pounds").val(poundsConversion.toFixed(2));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (percentageStr.length !== 0) {
$("#percentage").addClass("highlight");
densityNum = document.getElementById("density").value;
var percentageDec = percentageNum / 100;
var poundsConversion = densityNum * percentageDec;
var gramsConversion = poundsConversion * 119.83;
$("#pounds").val(poundsConversion.toFixed(2));
$("#grams").val(gramsConversion.toFixed(2));
}
}
});
body {
margin: 0;
font-family: 'Lato', sans-serif;
background: #d2d2d2;
}
p {
text-align: center;
}
conatiner {
max-width: 1024px;
margin: 0 auto;
}
#navbarContainer {
background: #F44336;
overflow: hidden;
width: 100%;
margin: 0;
}
.navbar {
float: left;
display: block;
font-family: 'Lato', sans-serif;
height: 40px;
width: 200px;
line-height: 40px;
text-align: center;
background: #F44336;
text-decoration: none;
color: #212121;
}
.navbar:hover {
background: #E57373;
color: white;
}
.active {
background: #C62828;
color: white;
}
#formContainer {
width: 450px;
background: #FDFFFC;
margin: 50px auto;
padding: 0px;
border-radius: 8px;
overflow: hidden;
}
#formContainer header {
width: 100%;
height: 130px;
background-color: #3cba54;
overflow: auto;
color: white;
}
header h1 {
margin: 35px 0 0 0;
text-align: center;
line-height: 30px;
}
header h3 {
line-height: 40px;
text-align: center;
margin: 0;
}
#heading {
background-color: #3cba54;
height: 40px;
color: white;
margin-bottom: 25px;
margin-left: -30px;
}
#heading h3 {
line-height: 40px;
}
form {
padding: 20px 0 0 20px;
text-align: center;
}
label {
display: inline-block;
width: 220px;
text-align: right;
}
#myForm .input_field {
margin-left: 20px;
margin-bottom: 10px;
font-size: 20px;
padding-left: 10px;
width: 125px;
height: 35px;
font-size: 17px;
border-radius: 3px;
background-color: #E0E0E0;
border: none;
}
#button {
display: block;
border-radius: 6px;
width: 200px;
height: 50px;
padding: 8px 15px 8px 15px;
margin: 0 auto;
margin-bottom: 50px;
font-size: 16px;
box-shadow: 0 6px #540000;
background-color: #FF3636;
border: none;
outline: none;
}
#button:active {
background-color: #B81B1B;
box-shadow: 0 1px #27496d;
transform: translateY(5px);
}
.highlight {
background: #FFEB3B !important;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
</body>
</html>

Sometimes putting script tags before the elements on the page can cause issues. You can try to put the scripts at the bottom of the body like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Can not get power button to work with display to display time as innerHTML?

I'm currently building a digital clock wow super easy yes i know. I guess what i want to be able to do is to click the powerButton to turn on the clock and then display the time inside the clockdisplay as innerHTML. I would like to use the variables from the setting time function and display them when the if statement executes. Can i get some help with this problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<title>Document</title>
<style>
/*Google Fonts */
#import url('https://fonts.googleapis.com/css?family=Righteous&display=swap');
/*The Body the clock */
#container {
background-color: lime;
/* border: 1px solid black; */
border-radius: 15px;
height: 300px;
position: relative;
left: 400px;
top: 50px;
width: 800px;
}
/**/
#clock-display {
background-color: white;
border: 1px solid rgb(97, 97, 97);
border-radius: 15px;
font-family: 'Righteous', cursive;
font-size: 2em;
height: 100px;
line-height:100px;
position: absolute;
top: 30px;
left: 30px;
width: 400px;
text-align: center;
}
#clock-display:hover {
box-shadow: 0 1px 6px 0#00E4FF, 0 4px 8px 0 #C3FAFF;
}
#powerButton {
background-color: #E7E7E7;
border: 2px solid #F7F7F7;
border-radius: 50%;
color: white;
position: absolute;
height: 100px;
line-height: 102px;
top: 30px;
left: 490px;
width: 100px;
text-align: center;
}
#powerButton:active {
border: 2px solid #B8FDFF;
}
#power-icon {
color: #FF0000;
font-size: 2.7em;
}
#power-icon:hover {
text-shadow: 2px 5px 5px#FF9898;
}
#alarm {
color: white;
border: 1px solid white;
height: 40px;
width: 100px;
position: absolute;
top: 200px;
left: 50px;
}
#text-box {
border: 2px solid gray;
height: 35px;
position: absolute;
top: 200px;
left:175px;
text-align: center;
}
</style>
</head>
<body>
<!-- Basically a container that stores all the data -->
<div id="container">
<!-- The clock display where the time is to be displayed on. -->
<div id="clock-display"></div>
<!-- ------------------------------------------------------------------ -->
<!-- The HTML for the power button -->
<div id="powerButton">
<!-- the span that allows us to use css with the icon -->
<span id="power-icon">
<!-- the icon import from front-awesome ver 4.7.0 -->
<i class="fa fa-power-off" aria-hidden="true"></i>
</span>
</div>
<!-- ------------------------------------------------------------------ -->
<!--Alarm container contains a label and input text box to retrieve your alarm time with audio.-->
<div id="alarm-container">
<label name="text-box">Alarm</label>
<input type="text" id="text-box" name="text-box" placeholder="Enter Time Here"/>
</div>
</div>
<!-- -->
<script type="text/javascript" language="javascript">
// global variables
var clockDisplay = document.getElementById("clock-display");
var powerButton = document.getElementById("power-icon");
var buttonON = document.getElementById("powerButton");
console.log(clockDisplay); //exsists in the console in developer tools.
function settingTime() {
var x = setInterval(function () {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
});
//return hours,minutes,seconds;
}
//button toggle algorithm i came up with that allows you to toggle the button with out built in function or jquery/vanilla api's
function on_Off_Switch() {
let numOfClick = 0;
buttonON.addEventListener('click', function(e) {
console.log(e);
numOfClick += 1;
console.log(numOfClick);
const randArr = ["#00F0FF","red"];
if(numOfClick % 2 === 0) {
powerButton.style.color = randArr[0];//red
powerButton.style.textShadow = "1px 3px 3px #74F7FF, 2px 5px 5px white";
} else {
powerButton.style.color = randArr[1];//bluetooth bluetooth blue
powerButton.style.textShadow = "1px 3px 3px #FF9898, 2px 5px 5px white";
clockDisplay.innerHTML = ""; //where we turn off the audio to the radio if you decide to code it.
}
});
}
function powerButtonToggle () {
let toggle_int = 0;
let z = setInterval(function() {
toggle_int += 1;
console.log(toggle_int);
if(toggle_int % 2 === 0) {
$(powerButton).fadeOut(400, function() {
});
}
else if(toggle_int % 2 === 1) {
$(powerButton).fadeIn(400,function() {
console.log("this function is logging data");
});
}
},1000);
}
//main function
settingTime();
on_Off_Switch();
powerButtonToggle();
</script>
</body>
</html>

You can use .innerHTML to rewrite the content inside of a certain tag.
For example,
document.getElementById("clock-display").innerHTML = date + "; " + hours + ":" + minutes + ":" + seconds;
will set the clock-display element to the date and time. An example is below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<title>Document</title>
<style>
/*Google Fonts */
#import url('https://fonts.googleapis.com/css?family=Righteous&display=swap');
/*The Body the clock */
#container {
background-color: lime;
/* border: 1px solid black; */
border-radius: 15px;
height: 300px;
position: relative;
left: 400px;
top: 50px;
width: 800px;
}
/**/
#clock-display {
background-color: white;
border: 1px solid rgb(97, 97, 97);
border-radius: 15px;
font-family: 'Righteous', cursive;
font-size: 2em;
height: 100px;
line-height: 100px;
position: absolute;
top: 30px;
left: 30px;
width: 400px;
text-align: center;
}
#clock-display:hover {
box-shadow: 0 1px 6px 0#00E4FF, 0 4px 8px 0 #C3FAFF;
}
#powerButton {
background-color: #E7E7E7;
border: 2px solid #F7F7F7;
border-radius: 50%;
color: white;
position: absolute;
height: 100px;
line-height: 102px;
top: 30px;
left: 490px;
width: 100px;
text-align: center;
}
#powerButton:active {
border: 2px solid #B8FDFF;
}
#power-icon {
color: #FF0000;
font-size: 2.7em;
}
#power-icon:hover {
text-shadow: 2px 5px 5px#FF9898;
}
#alarm {
color: white;
border: 1px solid white;
height: 40px;
width: 100px;
position: absolute;
top: 200px;
left: 50px;
}
#text-box {
border: 2px solid gray;
height: 35px;
position: absolute;
top: 200px;
left: 175px;
text-align: center;
}
</style>
</head>
<body>
<!-- Basically a container that stores all the data -->
<div id="container">
<!-- The clock display where the time is to be displayed on. -->
<div id="clock-display"></div>
<!-- ------------------------------------------------------------------ -->
<!-- The HTML for the power button -->
<div id="powerButton">
<!-- the span that allows us to use css with the icon -->
<span id="power-icon">
<!-- the icon import from front-awesome ver 4.7.0 -->
<i class="fa fa-power-off" aria-hidden="true"></i>
</span>
</div>
<!-- ------------------------------------------------------------------ -->
<!--Alarm container contains a label and input text box to retrieve your alarm time with audio.-->
<div id="alarm-container">
<label name="text-box">Alarm</label>
<input type="text" id="text-box" name="text-box" placeholder="Enter Time Here" />
</div>
</div>
<!-- -->
<script type="text/javascript" language="javascript">
// global variables
var clockDisplay = document.getElementById("clock-display");
var powerButton = document.getElementById("power-icon");
var buttonON = document.getElementById("powerButton");
function settingTime() {
var x = setInterval(function () {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
document.getElementById("clock-display").innerHTML = date + "; " + hours + ":" + minutes + ":" + seconds;
});
}
//button toggle algorithm i came up with that allows you to toggle the button with out built in function or jquery/vanilla api's
function on_Off_Switch() {
let numOfClick = 0;
buttonON.addEventListener('click', function (e) {
numOfClick += 1;
const randArr = ["#00F0FF", "red"];
if (numOfClick % 2 === 0) {
powerButton.style.color = randArr[0];//red
powerButton.style.textShadow = "1px 3px 3px #74F7FF, 2px 5px 5px white";
} else {
powerButton.style.color = randArr[1];//bluetooth bluetooth blue
powerButton.style.textShadow = "1px 3px 3px #FF9898, 2px 5px 5px white";
clockDisplay.innerHTML = ""; //where we turn off the audio to the radio if you decide to code it.
}
});
}
function powerButtonToggle() {
let toggle_int = 0;
let z = setInterval(function () {
toggle_int += 1;
if (toggle_int % 2 === 0) {
$(powerButton).fadeOut(400, function () {
});
}
else if (toggle_int % 2 === 1) {
$(powerButton).fadeIn(400, function () {
});
}
}, 1000);
}
//main function
settingTime();
on_Off_Switch();
powerButtonToggle();
</script>
</body>
</html>

One inline-block element isn't lowering

Alright so I am making a Rock Paper Scissors game. And so I have the rock paper and scissors set out in an inline-block and centered. When one of them is selected, I want the other two to lower and disappear. Here is what it looks like:
$(function() {
$("#playerRock").click(function() {
$("#playerPaper").animate({
opacity: 0,
top: "+=20"
}, 800);
setTimeout(function() {
$("#playerPaper").css("display", "none");
}, 805);
});
});
body {
background: #EDEDED;
}
#mainTitle {
font-family: 'Muli', sans-serif;
font-size: 54px;
}
.lowerTitle {
font-family: 'Muli', sans-serif;
font-size: 32px;
}
.scoreTitle {
font-family: 'Muli', sans-serif;
font-size: 20px;
display: inline-block;
}
#scoreTitle2 {
margin-right: 20px;
margin-left: 20px;
}
.scoreBox {
margin-top: 10px;
border: 2px solid #AAAAAA;
width: 50px;
height: 20px;
}
.scoreBox:focus {
outline: none;
font-family: 'Muli', sans-serif;
text-align: center;
}
.image {
height: 75px;
width: 75px;
}
#computerRock, #computerPaper, #computerScissors {
display: inline-block;
background: #878787;
padding: 20px;
border-radius: 50%;
border: 3px solid #D01A14;
}
#playerRock, #playerPaper, #playerScissors {
cursor: pointer;
background: #878787;
padding: 20px;
display: inline-block;
border-radius: 50%;
border: 3px solid #095BB3;
top: 0px;
}
#computerPaper, #playerPaper {
margin-right: 30px;
margin-left: 30px;
}
hr {
margin-top: 100px;
margin-bottom: 100px;
height: 4px;
background: #5E5E5E;
border: none;
width: 90%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<center><div id = "mainTitle">Please make a selection</div></center><br><br>
<center>
<div class = "scoreTitle">You</div>
<div class = "scoreTitle" id = "scoreTitle2">Tie</div>
<div class = "scoreTitle">Cpu</div>
</center>
<center>
<input class = "scoreBox" id = "scoreBox1" type = "text" disabled>
<input class = "scoreBox" id = "scoreBox2" type = "text" disabled>
<input class = "scoreBox" id = "scoreBox3" type = "text" disabled>
</center><br><br><br>
<center><div class = "lowerTitle">Computer</div></center><br><br>
<center>
<div id = "computerRock">
<img class = "image" src = "https://image.ibb.co/eR6Fga/rock.png">
</div>
<div id = "computerPaper">
<img class = "image" src = "https://image.ibb.co/mv0aga/paper.png">
</div>
<div id = "computerScissors">
<img class = "image" src = "https://image.ibb.co/mPKqEv/scissors.png">
</div>
</center>
<center><hr></center>
<center>
<div id = "playerRock">
<img class = "image" src = "https://image.ibb.co/eR6Fga/rock.png">
</div>
<div id = "playerPaper">
<img class = "image" src = "https://image.ibb.co/mv0aga/paper.png">
</div>
<div id = "playerScissors">
<img class = "image" src = "https://image.ibb.co/mPKqEv/scissors.png">
</div>
</center>
<br><br><center><div class = "lowerTitle">Player</div></center>
</body>
</html>
Right now I have it so that if you click on the rock div, it animates the paper div. However, it does not animate the top: "+=20" part.
So I figured I should try using marginTop (or margin-top in CSS). However, this lowered all three. And when you change it from display: inline-block, they look bad.
How can I keep these looking like this and aligned and still lower one of them?

You need to add vertical-align: top to the 3 player divs.
$(function() {
$("#playerRock").click(function() {
$("#playerPaper").animate({
opacity: 0,
'margin-top': "+=20"
}, 800);
setTimeout(function() {
$("#playerPaper").css("display", "none");
}, 805);
});
});
body {
background: #EDEDED;
}
#mainTitle {
font-family: 'Muli', sans-serif;
font-size: 54px;
}
.lowerTitle {
font-family: 'Muli', sans-serif;
font-size: 32px;
}
.scoreTitle {
font-family: 'Muli', sans-serif;
font-size: 20px;
display: inline-block;
}
#scoreTitle2 {
margin-right: 20px;
margin-left: 20px;
}
.scoreBox {
margin-top: 10px;
border: 2px solid #AAAAAA;
width: 50px;
height: 20px;
}
.scoreBox:focus {
outline: none;
font-family: 'Muli', sans-serif;
text-align: center;
}
.image {
height: 75px;
width: 75px;
}
#computerRock, #computerPaper, #computerScissors {
display: inline-block;
background: #878787;
padding: 20px;
border-radius: 50%;
border: 3px solid #D01A14;
}
#playerRock, #playerPaper, #playerScissors {
cursor: pointer;
background: #878787;
padding: 20px;
display: inline-block;
border-radius: 50%;
border: 3px solid #095BB3;
top: 0px;
vertical-align: top;
}
#computerPaper, #playerPaper {
margin-right: 30px;
margin-left: 30px;
}
hr {
margin-top: 100px;
margin-bottom: 100px;
height: 4px;
background: #5E5E5E;
border: none;
width: 90%;
}
center {
vertical-align: top;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<center><div id = "mainTitle">Please make a selection</div></center><br><br>
<center>
<div class = "scoreTitle">You</div>
<div class = "scoreTitle" id = "scoreTitle2">Tie</div>
<div class = "scoreTitle">Cpu</div>
</center>
<center>
<input class = "scoreBox" id = "scoreBox1" type = "text" disabled>
<input class = "scoreBox" id = "scoreBox2" type = "text" disabled>
<input class = "scoreBox" id = "scoreBox3" type = "text" disabled>
</center><br><br><br>
<center><div class = "lowerTitle">Computer</div></center><br><br>
<center>
<div id = "computerRock">
<img class = "image" src = "https://image.ibb.co/eR6Fga/rock.png">
</div>
<div id = "computerPaper">
<img class = "image" src = "https://image.ibb.co/mv0aga/paper.png">
</div>
<div id = "computerScissors">
<img class = "image" src = "https://image.ibb.co/mPKqEv/scissors.png">
</div>
</center>
<center><hr></center>
<center>
<div id = "playerRock">
<img class = "image" src = "https://image.ibb.co/eR6Fga/rock.png">
</div>
<div id = "playerPaper">
<img class = "image" src = "https://image.ibb.co/mv0aga/paper.png">
</div>
<div id = "playerScissors">
<img class = "image" src = "https://image.ibb.co/mPKqEv/scissors.png">
</div>
</center>
<br><br><center><div class = "lowerTitle">Player</div></center>
</body>
</html>

Trying to get $(document).on('Click') to work for a p tag

I am trying to get my document.on function to work when the user clicks on the p tag that has a class called card. So far the function is non responsive. What should I change so the function will respond when I click on the p tag that has a class called card. Here is my HTML and JQuery code.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Contacts">
<title>Contacts</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
$('div.right').append("<p class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></p><p class='back'>"+desc+"</p>");
return false;
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name: <input type="text" name="fname" class="first"></p>
<p >Last name: <input type="text" name="lname" class="last"></p>
<p class="desc">Description:</p>
<p><textarea rows="4" cols="50"></textarea></p>
<button>Add User</button>
</form>
</div>
<div class="right">
</div>
</div>
</body>
Here is my css code
*{
/* outline: 2px dotted red;*/
border: 0 none;
padding: 0;
margin: 0;
}
div.wrapper{
width: 970px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
}
div.left{
border: 2px solid black;
width: 500px;
display: inline-block;
}
div.right{
width: 200px;
display: inline-block;
height: 100px;
vertical-align: top;
padding-right: 100px;
text-align: center;
}
p{
margin-left: 80px;
margin-top: 20px;
font-size: 20px;
width: 400px;
}
p.email{
margin-left: 45px;
}
button{
margin: 30px;
height: 20px;
width: 100px;
margin-left: 75px;
text-align: center;
}
div.card{
margin-left: 100px;
margin-bottom: 20px;
border: 2px solid black;
width: 300px;
height: 100px;
text-align: center;
}
p.back{
display: none;
margin: 0px;
padding: 0px;
text-align: center;
}
textarea{
border: 2px solid black;
}

Somehow the p.class you were appending was broken, it was below the other elements and was not being identified as the sender by jQuery event.
The following works fine:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Contacts">
<title>Contacts</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
var p = $('<p class="card">');
p.append("<h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4><p class='back'>"+desc+"</p>");
$('div.right').append(p);
return false;
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name: <input type="text" name="fname" class="first"></p>
<p >Last name: <input type="text" name="lname" class="last"></p>
<p class="desc">Description:</p>
<p><textarea rows="4" cols="50"></textarea></p>
<button>Add User</button>
</form>
</div>
<div class="right">
</div>
</div>
</body>

your code were not right , the appending elements not formatted as your wish , thats why the click function not working, check the below snippt i have fixed your code, hope fully this will help you
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
$('div.right').append('<p class="card"></p>');
$('.card').html("<h1> first +' '+last</h1><h4>Click for description!'</h4><p class='back'>+desc+</p>"
);
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
* {
/* outline: 2px dotted red;*/
border: 0 none;
padding: 0;
margin: 0;
}
div.wrapper {
width: 970px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
}
div.left {
border: 2px solid black;
width: 500px;
display: inline-block;
}
div.right {
width: 200px;
display: inline-block;
height: 100px;
vertical-align: top;
padding-right: 100px;
text-align: center;
}
p {
margin-left: 80px;
margin-top: 20px;
font-size: 20px;
width: 400px;
}
p.email {
margin-left: 45px;
}
button {
margin: 30px;
height: 20px;
width: 100px;
margin-left: 75px;
text-align: center;
}
div.card {
margin-left: 100px;
margin-bottom: 20px;
border: 2px solid black;
width: 300px;
height: 100px;
text-align: center;
}
p.back {
display: none;
margin: 0px;
padding: 0px;
text-align: center;
}
textarea {
border: 2px solid black;
}
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name:
<input type="text" name="fname" class="first">
</p>
<p >Last name:
<input type="text" name="lname" class="last">
</p>
<p class="desc">Description:</p>
<p>
<textarea rows="4" cols="50"></textarea>
</p>
<button>Add User</button>
</form>
</div>
<div class="right"> </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

looks like You're misusing the header tags.
I tried your DOM structure, and what's happening is that when Firefox/Chrome sees an invalid <h1> tag inside the <p>, it automatically closes the <p> tag. You can clearly see this in Developer Tools.
You should use <span> tags instead of header tags, check this it Works here
JS CODE:
$('div.right')
.append('<p class="card"><span>'+first+'<==>'+last+'</span>Click for Description!!!</p>');

Using developer tools inpsection, you'll see your added html is
<p class="card"></p><h1> </h1><h4>'Click for description!'</h4><p></p><p class="back"></p>`
No matter what I've tried, I can't get Firefox to create insert that html as you want it!! it's like it doesn't want to put h1/h4 inside a p so decides to close the p early!
change to
$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></div><p class='back'>"+desc+"</p>");
and it all goes good - indeed, it's odd, that you already have css for div.card, but not p.card!!

You could do it in Javascript and impliment jquery in the function:
var div = document.getElementById('someid');
function foo(e) {
//Jquery Here
}
div.addEventListener('click', foo);
This is what I use for a lot of my functions.

Wrap card with <div/> instead of <p/> and it should work. As you have other block elements inside <p/>. It's breaking your html.
$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4><p class='back'>"+desc+"</p></div>");
And then change 'p.card' to 'div.card'.

We Keep Coding

JavaScript is the programming language of the Web.

Password Generator does not work until I move slider - javascript

Related

How to get an element inside a function javascript

Javascript file partially running

Can not get power button to work with display to display time as innerHTML?

One inline-block element isn't lowering

Trying to get $(document).on('Click') to work for a p tag

Categories

Resources