Javascript clock not functioning

Javascript clock not functioning - javascript

Created a javascript clock but it's not functioning The css styled it correctly, but it's not actually telling the time. Tips and suggestions would be very much appreciated, thanks! If you can, please explain what I did wrong when you answer.. ^-^
All the code is on codepen, linked below
https://codepen.io/codinchopin2117/pen/vYKRNBp
Here's the code
/
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript Clock</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>
<script type="text/javascript">
const deg = 6;
const hr = document.querySelector('#hr');
const mn = document.querySelector('#mn');
const sc = document.querySelector('#sc');
setInterval(() => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
hr.style.transform = 'rotatez(${(hh)+(mm/12)}deg)';
mn.style.transform = 'rotatez(${mm}+deg)';
sc.style.transform = 'rotatez(${ss}+deg)';
})
</script>
</body>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #9B0C43;
}
.clock {
width: 350px;
height: 350px;
display: flex;
justify-content: center;
align-items: center;
background-image: url(clock.png);
background-size: cover;
border: 4px solid #000;
border-radius: 50%;
box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
inset 0 -15px 15px rgba(255, 255, 255, 0.05),
0 15px 15px rgba(0, 0, 0, 0.3),
inset 0 15px 15px rgba(0, 0, 0, 0.3);
}
.clock::before
{
content: '';
position: absolute;
width: 15px;
height: 15px;
background: #FFF;
border-radius: 50%;
z-index: 10000;
}
.clock .hour,
.clock .min,
.clock .sec
{
position: absolute;
}
.clock .hour, .hr
{
width: 160px;
height: 160px;
}
.clock .min, .mn{
width: 190px;
height: 190px;
}
.clock .sec, .sc{
width: 230px;
height: 230px;
}
.hr, .mn, .sc
{
display: flex;
justify-content: center;
position: absolute;
border-radius: 50%;
}
.hr:before {
content: '';
position: absolute;
width: 8px;
height: 80px;
background: #FFF;
z-index: 10;
border-radius: 6px 6px 0 0;
}
.mn:before {
content: '';
position: absolute;
width: 4px;
height: 90px;
background: #F7F0D6;
z-index: 11;
border-radius: 6px 6px 0 0;
}
.sc:before {
content: '';
position: absolute;
width: 2px;
height: 150px;
background: #F7F0D6;
z-index: 12;
border-radius: 6px 6px 0 0;
}

The problem here is is that your using the ${} wrong as you have to place them and your string inside of `` instead of '' or "". All you should have to do is replace
hr.style.transform = 'rotatez(${(hh)+(mm/12)}deg)';
mn.style.transform = 'rotatez(${mm}+deg)';
sc.style.transform = 'rotatez(${ss}+deg)';
with
hr.style.transform = `rotatez(${(hh)+(mm/12)}deg)`;
mn.style.transform = `rotatez(${mm}deg)`;
sc.style.transform = `rotatez(${ss}deg)`;

you should do
hr.style.transform = `rotate(${(hh)+(mm/12)}deg)`;
mn.style.transform = `rotate(${mm}deg)`;
sc.style.transform = `rotate(${ss}'deg')`;
so first the function or whatever you call ${} can only be used within backticks
`` not '' or "" third no need for the + between the value and the deg
also i would use rotate not rotatez and even if you use rotateZ its Z not z but thats a good pratice issue and will not break you code

Related

Popup does not work when I click on the element responsible for opening it

I'm a beginner and I don't understand why it doesn't work. I have code that allows you to move a circle on the screen. I also need to make a popup appear when clicking on a circle.Also, I want a popup to appear in the middle of the screen when the circle is clicked
I have code that allows you to move a circle. It chooses a random point to move to. Also, I want a popup to appear in the middle of the screen when the circle is clicked
HTML:
<!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">
<link rel="stylesheet" href="css/style.css">
<title>Circle</title>
</head>
<body>
<header></header>
<main>
<label name="popup" id="popup" class="popup"></label>
<div class="button">
<input type="checkbox" name="popup" id="popup" class="popup__check">
</div>
</main>
<footer></footer>
<script src="js/script.js"></script>
</body>
</html>
CSS:
*,*::before,*::after {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
body main html{
width: 100%;
height: 100%;
position: relative;
}
.button {
width: 200px;
height: 200px;
border-radius: 100%;
background: linear-gradient(#e66465, #9198e5);;
position: absolute;
transition: linear 4s;
}
.popup {
display: none;
width: 1000px;
background: rgba(61, 55, 61);
height: 1000px;
overflow: auto;
font-size: 1rem;
padding: 20px;
position: absolute;
box-shadow: 0px 0px 10px 0px rgba(61, 55, 61, 0.7);
align-self: center;
}
.popup__check {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
cursor: pointer;
z-index: 3;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.popup__check:checked ~ .popup{
display: block;
}
JS:
let elem = document.querySelector('.button');
const changePosition = () => {
let randX = Math.random();
let randY = Math.random();
const circleSize = {
width: elem.clientWidth,
heigth: elem.clientHeight
};
const windowWidth = window.innerWidth - circleSize.width;
const windowheigth = window.innerHeight - circleSize.heigth;
let randXMult = windowheigth * randX;
let randXP = randXMult + 'px';
let randYMult = windowWidth * randY;
let randYP = randYMult + 'px';
elem.style.left = randYP;
elem.style.top = randXP;
};
setInterval(changePosition,1000);

It seems like you cant use checkboxes if you use appearance: none.
So you need to do it in JS:
HTML:
<main>
<div class="button" data-popup="false"></div>
<label name="popup" id="popup" class="popup"></label>
</main>
CSS:
.popup {
display: none;
width: 100px;
background: rgba(61, 55, 61);
height: 100px;
overflow: auto;
font-size: 1rem;
padding: 20px;
position: absolute;
box-shadow: 0px 0px 10px 0px rgba(61, 55, 61, 0.7);
align-self: center;
}
.button[data-popup='true'] + .popup{
display: block;
}
JS:
const btn = document.querySelector(".button")
const onClick = () => {
console.log("onCLick")
const current = btn.getAttribute("data-popup") == "true";
btn.setAttribute("data-popup", !current);
}
btn.addEventListener("click", onClick);

This is how it should be done. You can use :checked to determine the state of checkbox, you just need correct CSS selectors and markup. Take a look below:
let elem = document.querySelector('.button');
const changePosition = () => {
let randX = Math.random();
let randY = Math.random();
const circleSize = {
width: elem.clientWidth,
heigth: elem.clientHeight
};
const windowWidth = window.innerWidth - circleSize.width;
const windowheigth = window.innerHeight - circleSize.heigth;
let randXMult = windowheigth * randX;
let randXP = randXMult + 'px';
let randYMult = windowWidth * randY;
let randYP = randYMult + 'px';
elem.style.left = randYP;
elem.style.top = randXP;
};
setInterval(changePosition, 1000);
*,
*::before,
*::after {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
main {
width: 100%;
height: 100%;
position: relative;
}
.button {
width: 200px;
height: 200px;
border-radius: 100%;
background: linear-gradient(#e66465, #9198e5);
position: absolute;
transition: linear 4s;
}
.popup {
display: none;
width: 100%;
height: 100%;
background: rgba(61, 55, 61);
font-size: 4rem;
padding: 20px;
position: fixed;
left: 0;
top: 0;
box-shadow: 0px 0px 10px 0px rgba(61, 55, 61, 0.7);
justify-content: center;
align-items: center;
color: #fff;
}
.popup__check {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
cursor: pointer;
z-index: 3;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.popup__check:checked+.popup {
display: flex;
}
<main>
<div class="button">
<input type="checkbox" name="popup" id="popup" class="popup__check">
<label name="popup" id="popup" class="popup">So you clicked on that thing...</label>
</div>
</main>

javascript open and close window [duplicate]

This question already has answers here:
What is the difference between a function call and function reference?
(6 answers)
Closed last year.
i tried to make a function to open and close a rules window and i don't know why but it doesn't work, i tried to search for examples to the same idea but however i try it wouldn't work,
and yeah that's it please if some one know leave a comment
const openRulesBtn = document.getElementById("openRulesBtn");
const rulesWindow = document.getElementById("bgRules");
const closeRulesBtn = document.getElementById("rulesCancelBtn");
openRulesBtn.onclick = openRules();
closeRulesBtn.onclick = closeRules();
function openRules() {
rulesWindow.style.display = "block";
}
function closeRules() {
rulesWindow.style.display = "none";
}
.openRulesBtn {
display: flex;
justify-content: center;
align-items: center;
width: 7rem;
height: 1rem;
margin: 2rem 4rem;
border: 2px solid hsl(217, 16%, 45%);
border-radius: 8px;
text-transform: uppercase;
}
.openRulesBtn:hover {
cursor: pointer;
}
#bgRules {
position: absolute;
top: 50%;
left: 50%;
display: none;
}
#rulesWindow {
position: relative;
z-index: 10;
background-color: white;
}
#rulesCancelBtn {
position: absolute;
top: 0;
right: 0;
z-index: 11;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid rgba(0, 0, 0, 0.3);
cursor: pointer;
}
#rulesCancelBtn:hover {
background-color: rgb(255, 30, 0);
}
<div id="bgRules">
<img id="rulesWindow" src="/images/image-rules.svg" alt="" />
<div id="rulesCancelBtn">x</div>
</div>
<footer>
<div class="openRulesBtn" id="openRulesBtn">Rules</div>
</footer>

functionName() executes/calls the function. To add event listeners do this :
openRulesBtn.onclick = openRules;
closeRulesBtn.onclick = closeRules;
const openRulesBtn = document.getElementById("openRulesBtn");
const rulesWindow = document.getElementById("bgRules");
const closeRulesBtn = document.getElementById("rulesCancelBtn");
openRulesBtn.onclick = openRules;
closeRulesBtn.onclick = closeRules;
function openRules() {
rulesWindow.style.display = "block";
}
function closeRules() {
rulesWindow.style.display = "none";
}
.openRulesBtn {
display: flex;
justify-content: center;
align-items: center;
width: 7rem;
height: 1rem;
margin: 2rem 4rem;
border: 2px solid hsl(217, 16%, 45%);
border-radius: 8px;
text-transform: uppercase;
}
.openRulesBtn:hover {
cursor: pointer;
}
#bgRules {
position: absolute;
top: 50%;
left: 50%;
display: none;
}
#rulesWindow {
position: relative;
z-index: 10;
background-color: white;
}
#rulesCancelBtn {
position: absolute;
top: 0;
right: 0;
z-index: 11;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid rgba(0, 0, 0, 0.3);
cursor: pointer;
}
#rulesCancelBtn:hover {
background-color: rgb(255, 30, 0);
}
<div id="bgRules">
<img id="rulesWindow" src="/images/image-rules.svg" alt="" />
<div id="rulesCancelBtn">x</div>
</div>
<footer>
<div class="openRulesBtn" id="openRulesBtn">Rules</div>
</footer>

Need assistance with Palindrome flip-card app! It's not excuting the functions as planned

I'm made a Palindrome app that takes a word input and flips to say if it's a palindrome or not. However, after inputting a word it's not flipping the card to reveal if it's a palindrome or not. I was using following the Multi-faced Flip Card with a Click by Maria del Carmen Santiago, particularly the CSS and JavaScript sections as a guide. Could someone please help me figure out what it is I'm doing wrong?
I'm also attaching a CodePen link for the app.
{
const form = document.querySelector("form");
const input = document.querySelector(".word__input");
const cardContent = document.querySelector(".card__content");
const cardBack = document.querySelectorAll(".card__back");
const resultBack = document.querySelector(".back__result");
const backButton = document.querySelector(".back__button");
function clean(input) {
input.toLowercase().replace(/[\W]/g, "");
}
function isPalindrome(event) {
event.preventDefault();
const cleanInput = clean(input);
// const cleanInput = input.toLowerCase().replace(/[\W_]/g, "");
// const reverseInput = cleanInput.split("");
const reverseInput = cleanInput.split("").reverse().join("");
// for (let i = 0; i < reverseInput.length; i++) {
// // const element = array[index];
// if
// }
if (reverseInput === cleanInput) {
// console.log(reverseInput);
// console.log(cleanInput);
cardBack.classList.add(
"display",
(resultBack.innerHTML = `Yes ${CleanInput} is a Palindrome!`)
);
// resultBack.innerHTML = `Yes ${CleanInput} is a Palindrome!`;
// document.querySelector(
// ".back__result"
// ).innerHTML = `Yes ${CleanInput} is a Palindrome!`;
} else {
// console.log(reverseInput);
// console.log(cleanInput);
cardBack.classList.add(
"display",
(resultBack.innerHTML = `No sorry, ${CleanInput} is not a Palindrome!`)
);
// resultBack.innerHTML = `No sorry, ${CleanInput} is not a Palindrome!`;
// document.querySelector(
// ".back__result"
// ).innerHTML = `No sorry, ${CleanInput} is not a Palindrome!`;
}
cardFlip();
form.reset();
}
function cardFlip() {
cardContent.classList.toggle("is-flipped");
}
// function cardFlipBack() {
// // Remove back of the card 2 seconds after flipping.
// setTimeout(function () {
// cardBack.classList.remove("display");
// }, 2000);
// cardFlip();
// }
form.addEventListener("submit", isPalindrome);
backButton.addEventListener("click", cardFlip);
// backButton.forEach(function (button) {
// Button.addEventListener("click", cardFlip);
// });
}
:root {
--first-color: #fe9813;
--second-color: #e77b0e;
--third-color: #a22000;
--fourth-color: #281200;
--fith-color: #281200db;
--sixth-color: #e4dede80;
--seventh-color: #e4dedec5;
--font: "Orbitron";
--first-shadow: 6px 6px 12px #220f00, -6px -6px 12px #2e1500;
--second-shadow: 6px 6px 12px #931d00, -6px -6px 12px #b12300;
--first-shadow-inset: inset 8px 8px 16px #c76a0c, inset -8px -8px 16px #ff8c10;
--second-shadow-inset: inset 6px 6px 12px #931d00,
inset -6px -6px 12px #b12300;
--first-shadow-text: 2px 2px 4px rgba(0, 0, 0, 0.6), -1px -1px 3px #fff;
--second-shadow-text: 1px 1px 2px rgba(0, 0, 0, 0.3), -1px -1px 1.5px #fff;
}
*,
*:before,
*:after {
box-sizing: inherit;
text-align: center;
font-family: var(--font), sans-serif, monospace;
font-size: 30px;
font-weight: normal;
color: var(--first-color);
-webkit-text-stroke: 2px var(--third-color);
}
body {
background-color: var(--fourth-color);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
min-height: 100vh;
}
main {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
margin: 0 auto;
}
img {
align-items: center;
width: 90vw;
height: 60vh;
margin: -20px 0px;
margin-top: -150px;
}
.card {
width: 450px;
height: 450px;
perspective: 450px;
text-align: center;
border-radius: 5px;
margin-top: -100px;
}
.card__content {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 2s;
}
.card__content.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
border-radius: 10px;
backface-visibility: hidden;
border-radius: 10px;
}
.card__front {
padding: 20px 5px;
box-shadow: var(--first-shadow);
}
h2 {
font-size: 45px;
font-weight: normal;
}
.enter__word {
margin-top: 25px;
}
.word__input {
padding: 10px;
align-items: center;
border: 1px solid var(--third-color);
outline: none;
width: 300px;
height: 50px;
-webkit-text-stroke: 1px var(--third-color);
background: var(--fourth-color);
border-radius: 10px;
}
.card__back {
transform: rotateY(180deg);
display: none;
padding: 20px 5px;
}
.card__back.display {
display: block;
}
p {
font-size: 2em;
font-weight: 700;
text-align: center;
margin-top: -50px;
}
button {
margin: 5px;
padding: 10px;
width: 90px;
height: 45px;
outline: 0;
border: 1px solid var(--third-color);
background: transparent;
cursor: pointer;
font-size: 25px;
-webkit-text-stroke: 1.2px var(--third-color);
border-radius: 5px 10px;
position: absolute;
bottom: 0px;
right: 0px;
}
.start__button:hover {
color: var(--third-color);
background: var(--second-color);
font-weight: bolder;
}
.start__button:active {
box-shadow: var(--first-shadow-inset);
}
.back__button:hover {
color: var(--third-color);
background: var(--second-color);
font-weight: bolder;
}
.back__button:active {
box-shadow: var(--first-shadow-inset);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ROTATOR</title>
<link
href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<main>
<div class="title">
<h1 class="logo">
<img src="https://raw.githubusercontent.com/Avixph/Palindrome/fbca45350e2be55f7db82f2b64a0dad94dfe7d16/images/rotator_logo.svg" />
</h1>
</div>
<div>
<div class="card">
<div class="card__content">
<div id="front" class="card__face card__front">
<h2>Is</h2>
<form class="enter__word">
<input id="form__input" class="word__input" type="text" placeholder="Enter Word" required="required" />
<h2>a Palindrome?</h2>
<button id="form__button" class="button start__button" type="submit">
Check
</button>
</form>
</div>
<div id="back" class="card__face card__back">
<p class="back__result">Yes, _____ is a Palindrome.</p>
<button id="back__button" class="button back__button">
Reset
</button>
</div>
</div>
</div>
</div>
</main>
<script src="js/script.js"></script>
</body>
</html>

You very very close to getting it right, you just had some issues that should be catched by an IDE.
Typo: toLowerCase instead of toLowercase.
You were not using return inside the function clean. If you don't do that, the value will never be passed to the outer environment.
Typo: cleanInput instead of CleanInput.
querySelectorAll is used when you want to grab many items. You just wanted one.
You were adding changing the innerHTML in a wrong place, as a second parameter of the classList.add method.
But don't fret over these issues, you did a good job!
{
const form = document.querySelector("form");
const input = document.querySelector(".word__input");
const cardContent = document.querySelector(".card__content");
const cardBack = document.querySelector(".card__back");
const resultBack = document.querySelector(".back__result");
const backButton = document.querySelector(".back__button");
function clean(input) {
return input.toLowerCase().replace(/[\W]/g, "");
}
function isPalindrome(event) {
event.preventDefault();
const cleanInput = clean(input.value);
// const cleanInput = input.toLowerCase().replace(/[\W_]/g, "");
// const reverseInput = cleanInput.split("");
const reverseInput = cleanInput.split("").reverse().join("");
// for (let i = 0; i < reverseInput.length; i++) {
// // const element = array[index];
// if
// }
if (reverseInput === cleanInput) {
// console.log(reverseInput);
// console.log(cleanInput);
cardBack.classList.add("display");
resultBack.innerHTML = `Yes ${cleanInput} is a Palindrome!`;
// resultBack.innerHTML = `Yes ${CleanInput} is a Palindrome!`;
// document.querySelector(
// ".back__result"
// ).innerHTML = `Yes ${CleanInput} is a Palindrome!`;
} else {
// console.log(reverseInput);
// console.log(cleanInput);
cardBack.classList.add("display");
resultBack.innerHTML = `No sorry, ${cleanInput} is not a Palindrome!`;
// resultBack.innerHTML = `No sorry, ${CleanInput} is not a Palindrome!`;
// document.querySelector(
// ".back__result"
// ).innerHTML = `No sorry, ${CleanInput} is not a Palindrome!`;
}
cardFlip();
form.reset();
}
function cardFlip() {
cardContent.classList.toggle("is-flipped");
}
// function cardFlipBack() {
// // Remove back of the card 2 seconds after flipping.
// setTimeout(function () {
// cardBack.classList.remove("display");
// }, 2000);
// cardFlip();
// }
form.addEventListener("submit", isPalindrome);
backButton.addEventListener("click", cardFlip);
// backButton.forEach(function (button) {
// Button.addEventListener("click", cardFlip);
// });
}
:root {
--first-color: #fe9813;
--second-color: #e77b0e;
--third-color: #a22000;
--fourth-color: #281200;
--fith-color: #281200db;
--sixth-color: #e4dede80;
--seventh-color: #e4dedec5;
--font: "Orbitron";
--first-shadow: 6px 6px 12px #220f00, -6px -6px 12px #2e1500;
--second-shadow: 6px 6px 12px #931d00, -6px -6px 12px #b12300;
--first-shadow-inset: inset 8px 8px 16px #c76a0c, inset -8px -8px 16px #ff8c10;
--second-shadow-inset: inset 6px 6px 12px #931d00,
inset -6px -6px 12px #b12300;
--first-shadow-text: 2px 2px 4px rgba(0, 0, 0, 0.6), -1px -1px 3px #fff;
--second-shadow-text: 1px 1px 2px rgba(0, 0, 0, 0.3), -1px -1px 1.5px #fff;
}
*,
*:before,
*:after {
box-sizing: inherit;
text-align: center;
font-family: var(--font), sans-serif, monospace;
font-size: 30px;
font-weight: normal;
color: var(--first-color);
-webkit-text-stroke: 2px var(--third-color);
}
body {
background-color: var(--fourth-color);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
min-height: 100vh;
}
main {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
margin: 0 auto;
}
img {
align-items: center;
width: 90vw;
height: 60vh;
margin: -20px 0px;
margin-top: -150px;
}
.card {
width: 450px;
height: 450px;
perspective: 450px;
text-align: center;
border-radius: 5px;
margin-top: -100px;
}
.card__content {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 2s;
}
.card__content.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
border-radius: 10px;
backface-visibility: hidden;
border-radius: 10px;
}
.card__front {
padding: 20px 5px;
box-shadow: var(--first-shadow);
}
h2 {
font-size: 45px;
font-weight: normal;
}
.enter__word {
margin-top: 25px;
}
.word__input {
padding: 10px;
align-items: center;
border: 1px solid var(--third-color);
outline: none;
width: 300px;
height: 50px;
-webkit-text-stroke: 1px var(--third-color);
background: var(--fourth-color);
border-radius: 10px;
}
.card__back {
transform: rotateY(180deg);
display: none;
padding: 20px 5px;
}
.card__back.display {
display: block;
}
p {
font-size: 2em;
font-weight: 700;
text-align: center;
margin-top: -50px;
}
button {
margin: 5px;
padding: 10px;
width: 90px;
height: 45px;
outline: 0;
border: 1px solid var(--third-color);
background: transparent;
cursor: pointer;
font-size: 25px;
-webkit-text-stroke: 1.2px var(--third-color);
border-radius: 5px 10px;
position: absolute;
bottom: 0px;
right: 0px;
}
.start__button:hover {
color: var(--third-color);
background: var(--second-color);
font-weight: bolder;
}
.start__button:active {
box-shadow: var(--first-shadow-inset);
}
.back__button:hover {
color: var(--third-color);
background: var(--second-color);
font-weight: bolder;
}
.back__button:active {
box-shadow: var(--first-shadow-inset);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ROTATOR</title>
<link
href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<main>
<div class="title">
<h1 class="logo">
<img src="https://raw.githubusercontent.com/Avixph/Palindrome/fbca45350e2be55f7db82f2b64a0dad94dfe7d16/images/rotator_logo.svg" />
</h1>
</div>
<div>
<div class="card">
<div class="card__content">
<div id="front" class="card__face card__front">
<h2>Is</h2>
<form class="enter__word">
<input id="form__input" class="word__input" type="text" placeholder="Enter Word" required="required" />
<h2>a Palindrome?</h2>
<button id="form__button" class="button start__button" type="submit">
Check
</button>
</form>
</div>
<div id="back" class="card__face card__back">
<p class="back__result">Yes, _____ is a Palindrome.</p>
<button id="back__button" class="button back__button">
Reset
</button>
</div>
</div>
</div>
</div>
</main>
<script src="js/script.js"></script>
</body>
</html>

Javascript Stop Propagation

I have been trying to figure out how to get an index of a dynamically created element so that I can write a function to delete it (splice).
I have figured out how to get the index really manually, but the problem is that I am getting Propagation from my event delegation and I am not sure how to stop it.
I have tried putting stopPropagation(), preventDefault(), stopImmediatePropagation() at various points within the function and have spent the last hour reading around online trying to figure out how to stop it. I even tried setting the e.bubble to false with no avail.
Could someone point me in the right direction here? Im sure its my inexperience but I am just out of ideas as of now.
// Title of Question Set
const title = document.querySelector(".input_title-input");
// Array of Questions
const questions = [];
let chosen = [];
// Selected Question
let qChosen = [];
// Toggles if a new question is selected
let toggle = 0;
// Selecting Inputs and Button
let question = document.querySelector(".input_question-input");
let answer = document.querySelector(".input_answer-input");
let submit = document.querySelector(".input_submit-button");
let display = document.querySelector(".input_display");
let card = document.querySelector(".card_container");
let start = document.querySelector(".input_start-btn");
let guessInput = document.querySelector(".guess_input");
let submitGuess = document.querySelector(".submitGuess");
let nextQuestion = document.querySelector(".nextQuestion");
// Select all display items
let displayItems = document.getElementsByClassName("input_display-item");
// Select P quiz card values
let cardQuestion = document.querySelector(".quiz_question");
let cardAnswer = document.querySelector(".quiz_answer");
// Event Listener on Submit Button for Display Items Idividually
submit.addEventListener("click", function() {
if (question.value === "") {
question.classList.toggle("error");
answer.classList.toggle("error");
} else {
createObj();
let trashCan = createDisplayItem();
trashCan.addEventListener("click", function(e) {
console.log(this.parentNode);
console.log(questions);
console.log(e);
this.parentNode.remove();
});
inputReset();
toggle = questions.length;
start.removeAttribute("disabled");
}
});
start.addEventListener("click", function() {
console.log("clicked");
generateCard();
});
// Event Listener to test if guess is correct
submitGuess.addEventListener("click", function() {
if (guessInput.value.toLowerCase() === qChosen.answer.toLowerCase()) {
card.classList.toggle("flip");
submitGuess.disabled = true;
} else {
console.log("wrong or not working");
}
});
nextQuestion.addEventListener("click", function() {
card.classList.toggle("flip");
submitGuess.disabled = false;
setTimeout(generateCard, 1000);
});
// Create The object for inclusion to array
function createObj() {
let obj = {};
obj.question = question.value;
obj.answer = answer.value;
questions.push(obj);
}
// Resets inputs to blank after submit
function inputReset() {
question.value = "";
answer.value = "";
if (question.classList.contains("error")) {
question.classList.toggle("error");
answer.classList.toggle("error");
}
}
// Creates Each Display Item
function createDisplayItem() {
// Create new Div
let newUl = document.createElement("ul");
// Create Li and Image Elements
let liQuestion = document.createElement("li");
let liAnswer = document.createElement("li");
let trashCan = document.createElement("img");
// Set img src
trashCan.src = "../assets/trash.svg";
// Set classes
newUl.className = "input_display-item";
liQuestion.className = "input_display-question";
liAnswer.className = "input_display-answer";
trashCan.className = "input_display-delete";
// Set LI textContent
liQuestion.textContent = question.value;
liAnswer.textContent = answer.value;
// Append Children
display.appendChild(newUl);
newUl.appendChild(liQuestion);
newUl.appendChild(liAnswer);
return newUl.appendChild(trashCan);
}
//Generating Card Information per question
function generateCard() {
random();
if (toggle < 0) {
cardQuestion.textContent = "There are no more questions left";
cardAnswer.textContent = "There are no more questions left";
} else {
cardQuestion.textContent = qChosen.question;
cardAnswer.textContent = qChosen.answer;
}
}
// Choses a random value for the selection set
function random() {
if (questions.length === 0) {
toggle = -1;
} else {
let num = Math.floor(Math.random() * questions.length);
chosen = questions.splice(num, 1).concat(chosen);
qChosen = chosen[0];
}
}
// Notes
// I need to create a function that upon submit of a guess, checks its value against the answer textContent.
// I will likely need to make the text lowercase for the check to just make sure that they match exactly and that a capital letter wont create a false when its true.
/** Variables
---------------------------------------------------------*/
/** Reset
---------------------------------------------------------*/
* {
margin: 0;
padding: 0; }
*,
*::before,
*::after {
box-sizing: inherit; }
html {
box-sizing: border-box;
font-size: 62.5%; }
body {
font-weight: 400;
line-height: 1.5;
font-size: 2rem;
background-color: #bdbdc7; }
/** Primary Container
---------------------------------------------------------*/
.container {
max-width: 180rem;
display: flex; }
.flex {
display: flex;
justify-content: center;
align-items: center; }
.visible {
visibility: hidden; }
/** Input Section
---------------------------------------------------------*/
input[type="text"] {
padding: 0.5rem;
width: auto;
min-width: 100%;
line-height: 2rem; }
.input {
width: 40rem;
height: 100%;
padding: 1rem;
background-color: #ccc;
display: flex;
align-items: flex-start;
flex-direction: column; }
.input_title {
width: 100%;
display: flex;
flex-direction: column; }
.input_title-label {
display: flex;
justify-content: center; }
.input_title-input {
padding: 0.5rem; }
.input_question {
width: 100%;
display: flex;
flex-direction: column; }
.input_question-label {
display: flex;
justify-content: center; }
.input_question-input {
padding: 0.5rem; }
.input_answer {
width: 100%;
display: flex;
flex-direction: column; }
.input_answer-label {
display: flex;
justify-content: center; }
.input_answer-input {
padding: 0.5rem; }
.input_question-input.error, .input_answer-input.error {
border: 2px red solid; }
.input_submit {
width: 100%; }
.input_submit-button {
margin-top: 1rem;
padding: 0 1.5rem; }
.input_start {
width: 100%; }
.input_display {
width: 100%;
font-size: 1.5rem;
padding: 2rem 0 1rem 0; }
.input_display-item {
margin-bottom: 1rem;
padding: .2rem 2rem;
text-transform: capitalize;
background-color: #fff;
border-radius: 1rem;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center; }
.input_display-item:nth-child(odd) {
background-color: #aaa;
border-radius: 1rem; }
.input_display-delete {
height: 1.8rem;
width: 1.8rem; }
.input :not(.input_display) div {
padding-bottom: 2rem; }
/** Quiz Card
---------------------------------------------------------*/
.card {
display: flex;
justify-content: center;
align-items: center;
width: 100%; }
.card_container {
transform-style: preserve-3d;
perspective: 1000px;
width: 60rem;
margin: 1rem;
cursor: pointer; }
.card_container .front {
transform: rotateY(0deg);
transform-style: preserve-3d; }
.card_container .front:after {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
content: "";
display: block;
opacity: 0.6;
background-color: #000;
backface-visibility: hidden;
border-radius: 10px; }
.card_container .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #cedce7;
background: linear-gradient(45deg, #dedce7 0%, #596a72 100%);
transform: rotateY(180deg);
transform-style: preserve-3d; }
.card_container .front,
.card_container .back {
background-color: red;
background-size: cover;
background-position: center;
transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
backface-visibility: hidden;
text-align: center;
min-height: 500px;
height: auto;
border-radius: 10px;
color: #fff;
font-size: 1.5rem; }
.flip {
transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1); }
.flip .back {
transform: rotateY(0deg);
transform-style: preserve-3d; }
.flip .front {
transform: rotateY(-180deg);
transform-style: preserve-3d; }
.inner {
transform: translateY(-50%) translateZ(60px) scale(0.94);
top: 50%;
position: absolute;
left: 0;
width: 100%;
padding: 2rem;
box-sizing: border-box;
outline: 1px solid transparent;
perspective: inherit;
z-index: 2; }
.front .inner p {
font-size: 2rem;
margin-bottom: 2rem;
position: relative; }
.card_container-guess {
padding-top: 2rem; }
.card_container-guess .guess_input {
width: 2rem;
margin: 1rem auto;
padding: 1rem;
border-radius: 1rem;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55), 0px 1px 1px rgba(255, 255, 255, 0.5);
border: 1px solid #666;
opacity: 0.6; }
.card_container-guess .guess_input:hover, .card_container-guess .guess_input:focus {
opacity: .8;
color: #08c;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25), inset 0px 3px 6px rgba(0, 0, 0, 0.25); }
.btnNew {
height: 5rem;
width: 12rem;
margin: 1.5rem 3rem 1rem 0;
font-weight: 700;
color: #333;
background-image: linear-gradient(top, #f4f1ee, #fff);
box-shadow: 0px 8px 30px 1px rgba(0, 0, 0, 0.3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204, 198, 197, 0.5);
border-radius: 5%;
position: relative;
transition: all .1s linear;
outline: none; }
.btnNew:after {
color: #e9e6e4;
content: "";
display: block;
font-size: 30px;
height: 3rem;
text-decoration: none;
text-shadow: 0px -1px 1px #bdb5b4, 1px 1px 1px white;
position: absolute;
width: 3rem; }
.btnNew:hover {
background-image: linear-gradient(top, #fff, #f4f1ee);
color: #0088cc; }
.btnNew:active {
background-image: linear-gradient(top, #efedec, #f7f4f4);
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4), inset opx -3px 1px 1px rgba(204, 198, 197, 0.5);
outline: none; }
.btnNew:active:after {
color: #dbd2d2;
text-shadow: 0px -1px 1px #bdb5b4, 0px 1px 1px white;
outline: none; }
<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">
<title>Flash</title>
<!-- Custom CSS -->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<section class="input">
<div class="input_title">
<label class="input_title-label" for="title">Enter a Title</label>
<input class="input_title-input" id="title" type="text" placeholder="List of Towels">
</div>
<div class="input_question">
<label class="input_question-label" for="question">Enter a Question</label>
<input class="input_question-input" id="question" type="text" placeholder="What is 42?">
</div>
<div class="input_answer">
<label class="input_answer-label" for="answer">Enter an Answer</label>
<input class="input_answer-input" id="answer" type="text" placeholder="The Meaning Life, Universe, and Everything">
</div>
<div class="input_submit flex">
<button class="input_submit-button btnNew">Submit</button>
</div>
<div class="input_display"></div>
<div class="input_start flex">
<button type="button" class="input_start-btn btnNew" disabled>Start Quiz</button>
</div>
</section>
<section class="card">
<div class="card_container">
<div class="front">
<div class="inner">
<p class="quiz_question">Question</p>
</div>
</div>
<div class="back">
<div class="inner">
<p class="quiz_answer">Answer</p>
</div>
</div>
<div class="card_container-guess">
<input type="text" class="guess_input">
<button class="submitGuess btnNew">Submit Guess</button>
<button class="nextQuestion btnNew">Next Question</button>
</div>
</div>
</section>
</div>
<!-- Custom JS -->
<script src="js/scripts.js"></script>
</body>
</html>

I am wanting to figure out how to delete an item from the list
How about we change the last line of the function createDisplayItem to ..
function createDisplayItem(){
...
return newUl.appendChild(trashCan) // Added return
}
Now, you have an instance of the newly created trash can element being returned to the calling code, so now all we have to do is add a click event to this specific trash can element and let it delete its parent ul ..
submit.addEventListener("click", function() {
...
let trashCan = createDisplayItem();
trashCan.addEventListener('click', function(){
confirm('Are you sure you want to delete this?')
&& this.parentNode.remove()
})
...
});
So, since now in this code, each trash can takes care of its own parent element, you do not have to worry about finding the index from the parent display element anymore.

JavaScript. How to control background image slide show to synchronize with bubbles

I am trying to create backgroundImage slide show with bubbles. i was working very fine untill i added eventListeners for mouseover and mouseout.
mouseover enent clears the setInterval while the mouseout calls back the setInterval().
The execution is triggered with the setInterval in the window load event.
i dont know if my explained my problem very well
var bubble_Array;
var bubble_i = 0;
var intrval;
var ba;
var bi =0;
var intr;
var man = ['url(imags/ParLour.jpg', 'url(imags/767.jpg', 'url(imags/7series.jpg', 'url(imags/02.jpg', 'url(imags/BedRoom.jpg', 'url(imags/30.jpg', 'url(imags/volks.jpg', 'url(imags/sports.jpg', 'url(imags/real.jpg', 'url(imags/portable.jpg', 'url(imags/perspective.jpg', 'url(imags/green.jpg', 'url(imags/fantom.jpg', 'url(imags/fantom2.jpg', 'url(imags/elegance.jpg', 'url(imags/bridge.jpg', 'url(imags/BMW.jpg', 'url(imags/interior.jpg','url(imags/3Dcar007.jpg'];
function _(x){
return document.getElementById(x);
}
function bubbleMain(bi){
bubble_i++;
if(bubble_i == man.length){
bubble_i = 0;
}
_('bubblebox').style.opacity = 0;
for (var i =0; i < ba.length; i ++){
ba[i].style.background = "rgba(0,0,0,.1)";
}
setTimeout(function(){
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.background = "red";
_("bubblebox").style.opacity = 1;
}, 500);
}
function bubbleSlide(){
ba = _('bubbles').children;
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.backgroundColor = 'red';
bi++;
if (bi == ba.length){
bi =0;
}
bubbleMain(bi);
}
window.addEventListener("load", function(){
ba = _('bubbles').children;
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.backgroundColor = 'red';
intrval = setInterval(bubbleSlide, 2000);
})
window.addEventListener("mouseover", function(){
clearInterval(intrval);
})
window.addEventListener("mouseout", function(){
intrval = setInterval(bubbleSlide, 2000);
})
#bubblebox{
height: 550px;
width: 1200px;
border:2px solid black;
margin: 50px auto;
background-repeat: no-repeat;
z-index: -5;
background-size: cover;
transition:background-image 0.2s;
transition: opacity 0.3s linear 0s;
}
#bubbles{
height: 0px;
width: auto;
text-align: center;
z-index: 100;
position: absolute;
}
#bubbles div{
height: 20px;
width: 20px;
background: rgba(0,0,0,.1);
border: 2px solid green;
border-radius: 100%;
display: inline-block;
position: relative;
margin: 0px auto;
top: 10px;
z-index: 1000;
left: 310px;
color:#fff;
cursor: pointer;
}
#heading{
height: 20px;
width: 200px;
background-color: red;
position: relative;
top: 100px;
left: 500px;
color: #fff;
text-align: center;
}
#arrow_right, #arrow_left, #arrow_middle{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -4px 4px 0 rgb(255, 255, 255);
cursor: pointer;
left: 1100px;
position: relative;
margin: 0 -10px 0 0px;
top: 200px;
border-bottom: 3px solid black;
border-left: 3px solid black;
transform: rotate(225deg);
}
#arrow_right2, #arrow_left2, #arrow_middle2{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -4px 4px 0 rgb(255, 255, 255);
cursor: pointer;
left: 10px;
position: relative;
margin: 0 -10px 0 0px;
top: 200px;
border-bottom: 3px solid black;
border-left: 3px solid black;
transform: rotate(45deg);
tex
}
#arrow_right2:hover, #arrow_left2:hover, #arrow_middle2:hover{
box-shadow: -5px 5px 0 rgb(255, 255, 255);
}
#arrow_right:hover, #arrow_left:hover, #arrow_middle:hover{
box-shadow: -5px 5px 0 rgb(255, 255, 255);
}
<div id="bubblebox">
<div id="bubbles">
<div onclick="bubbleMain(0)">1</div>
<div onclick="bubbleMain(1)">2</div>
<div onclick="bubbleMain(2)">3</div>
<div onclick="bubbleMain(3)">4</div>
<div onclick="bubbleMain(4)">5</div>
<div onclick="bubbleMain(5)">6</div>
<div onclick="bubbleMain(6)">7</div>
<div onclick="bubbleMain(7)">8</div>
<div onclick="bubbleMain(8)">9</div>
<div onclick="bubbleMain(9)">10</div>
<div onclick="bubbleMain(10)">11</div>
<div onclick="bubbleMain(11)">12</div>
<div onclick="bubbleMain(12)">13</div>
<div onclick="bubbleMain(13)">14</div>
<div onclick="bubbleMain(14)">15</div>
<div onclick="bubbleMain(15)">16</div>
<div onclick="bubbleMain(16)">17</div>
<div onclick="bubbleMain(17)">18</div>
<div onclick="bubbleMain(18)">19</div>
<div onclick="bubbleMain(19)">20</div>
</div>
<div id="heading">Caption</div>
<div id="arrow_right"></div>
<div id="arrow_middle"></div>
<div id="arrow_left"></div>
<div id="arrow_right2"></div>
<div id="arrow_middle2"></div>
<div id="arrow_left2"></div>
<div id="bubblecontent"></div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Javascript clock not functioning - javascript

Related

Popup does not work when I click on the element responsible for opening it

javascript open and close window [duplicate]

Need assistance with Palindrome flip-card app! It's not excuting the functions as planned

Javascript Stop Propagation

JavaScript. How to control background image slide show to synchronize with bubbles

Categories

Resources