We Keep Coding

Why is the div inside not load inside the a tag?

I am trying to make a slideshow inside of an accordion, however when I load the code into the browser, the content inside the <a> is beside it, not inside it. Is there any solution to it? The main problem is that when I load the code to debug the <div class="grid2 transition" id="grid4"> is supposed to be inside of <a onclick="openUp4()" class="pane1 button" id="pane4">, however it loads just side by side.
let slideIndex = [1, 1];
let slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
let i;
let x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {
slideIndex[no] = 1
}
if (n < 1) {
slideIndex[no] = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no] - 1].style.display = "block";
}
function openUp4() {
var element = document.getElementById("pane4");
element.classList.toggle("active2")
if (element.classList.contains("active2")) {
// document.getElementById("grid2").style.visibility = "visible";
document.getElementById("grid4").style.opacity = 1;
} else {
// document.getElementById("grid2").style.visibility = "hidden";
document.getElementById("grid4").style.opacity = 0;
}
}
.pane1 {
background-color: white;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 20px;
position: relative;
text-align: center;
font-size: 20px;
transition: 0.4s;
}
.active2 {
height: fit-content;
}
.grid2 {
display: grid;
gap: 0rem;
grid-template-rows: 1fr;
grid-auto-columns: 1fr;
height: inherit;
justify-content: center;
place-items: center;
overflow: hidden;
}
.blacktitle {
color: #ffffff;
position: absolute;
background-color: #191919;
height: 70px;
width: 50%;
left: -20px;
top: -45px;
border-radius: 10px;
padding: 21px;
letter-spacing: 6px;
}
.mySlides1 {
display: none
}
img {
vertical-align: middle;
max-width: 400px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
border-radius: 5px;
}
video {
max-width: 400px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
border-radius: 5px;
margin-top: 40%;
}
/* Slideshow container */
.slideshow-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
width: 400px;
max-width: 400px;
position: relative;
margin: 40px auto auto auto;
}
.videocontainer {
position: relative;
height: 533.333px;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover,
.next:hover {
background-color: #f1f1f1;
color: black;
}
<a onclick="openUp4()" class="pane1 button" id="pane4">
<div class="blacktitle">
Concerts
</div>
<div class="grid2 transition" id="grid4">
<div class="slideshow-container">
<div class="mySlides1">
<img src="Concerts/a03c3e49-cdff-4382-87c1-b473de9f6447.jpg" style="width:100%">
</div>
<div class="mySlides1">
<img src="Concerts/IMG_6847.png" style="width:100%">
</div>
<div class="mySlides1 videocontainer">
<video controls preload="metadata">
<source src="Concerts/IMG_5888.mov" type="video/mp4" style="width:100%">
</video>
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
</div>
</a>

I must admit I'm having a little trouble understanding the question, but from your code, 2 things pop up immediately:
The first is the usage of <div> inside <a>. You should never use a block element (like div, h1, p, etc) inside an inline element (like a,span,strong, etc). Some browsers might be able to parse it but this is definitely invalid HTML.
A solution to that would be to replace the <div> elements inside the anchor tag with <span> instead, and add a display:block CSS rule to the relevant <span> tags so they mimic how the <div> looks like.
The second issue is around this line:
x[slideIndex[no] - 1].style.display = "block";
x[slideIndex[no] - 1] does not always return an element, so you cannot assume you can access its style property. A safer way to do it would be this:
// Get the element first
const el = x[slideIndex[no] - 1];
// If it exists, *then* access and mutate its properties.
if(el) el.style.display = "block";

I fixed it this works:
<div class="pagebody">
<div class="container">
<div class="flex-container">
<div class="pane1 button" id="pane4">
<span onclick="openUp4()" class="blacktitle">
Concerts
</span>
<span class="grid2 transition" id="grid4">
<span class="slideshow-container">
<span class="mySlides1">
<div style="width: 400px; height: 533px; background-color:"></div>
</span>
<span class="mySlides1">
<div style="width: 400px; height: 533px; background-color: green"></div>
</span>
<span class="mySlides1">
<div style="width: 400px; height: 533px; background-color: blue"></div>
</span>
<button class="prev" onclick="plusSlides(-1, 0)">❮</button>
<button class="next" onclick="plusSlides(1, 0)">❯</button>
</span>
</span>
</div>
</div>
</div>
</div>
<style>
.blacktitle:hover {
background-color: #555555;
}
.blacktitle {
color: #ffffff;
position: absolute;
background-color: #191919;
height: 70px;
width: 50%;
left: -20px;
top: -45px;
border-radius: 10px;
padding: 21px;
letter-spacing: 6px;
z-index: 10;
}
.transition {
opacity: 0;
transition: opacity 0.5s linear;
}
.grid2 {
display: grid;
gap: 0rem;
grid-template-rows: 1fr;
grid-auto-columns: 1fr;
height: inherit;
justify-content: center;
place-items: center;
overflow: hidden;
}
.active2 {
height: 600px;
}
.pane1 {
background-color: white;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 20px;
position: relative;
text-align: center;
font-size: 20px;
transition: 0.4s;
}
.container {
padding: 0px 60px 60px 60px;
background-color: #191919;
max-width: 1000px;
min-width: 800px;
width: 100%; }
.flex-container {
display: flex;
justify-content: center;
align-items: top;
flex-direction: column;
margin-top: 60px;
}
.pagebody {
background-color: #191919;
margin: 0;
display: flex;
justify-content: center;
}
.mySlides1 {display: none; overflow: hidden;}
img {vertical-align: middle; max-width: 400px; box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); border-radius: 5px;}
video {max-width: 400px; box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); border-radius: 5px; margin-top: 40%;}
/* Slideshow container */
.slideshow-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
width: 400px;
max-width: 400px;
position: relative;
margin: 40px auto auto auto;
}
.videocontainer {
position: relative;
height: 533.333px;
}
/* Next & previous buttons */
.prev, .next {
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
background:none;
border:none;
cursor: pointer;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
function openUp4(){
var element = document.getElementById("pane4");
element.classList.toggle("active2")
if (element.classList.contains("active2")) {
// document.getElementById("grid2").style.visibility = "visible";
document.getElementById("grid4").style.opacity = 1;
} else {
// document.getElementById("grid2").style.visibility = "hidden";
document.getElementById("grid4").style.opacity = 0;
}
}
let slideIndex = [1,1];
let slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
let i;
let x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
const el = x[slideIndex[no] - 1];
if(el){el.style.display = "block";}
}
}

Scroll Snap for div that looks like an iPhone in HTML

I made this iPhone in HTML (Please do not pay attention to the spaghetti code, and it's in german, if it is necessary i can translate it with pleasure):
var time = document.getElementById("time");
var notification = document.getElementById("notification");
var notificationHeader = document.getElementById("notificationHeader");
var notificationDescription = document.getElementById("notificationDescription");
var verificationCode = Math.floor(1000 + Math.random() * 9000);
var input = document.getElementById("instagramNumberText");
var correctOrWrongCheck = document.getElementById("correctOrWrongCheck");
var verificationCodePTag = document.getElementById("verificationCode");
var instagram = document.getElementById("instagramApp");
var mail = document.getElementById("mailApp");
var createAccountButton = document.getElementById("createAccount");
var createAccountForm = document.getElementById("createAccountForm");
var verificationCodeInstagramPage = document.getElementById("verificationCodeInstagramPage");
var controlVerificationCodeButton = document.getElementById("controlVerificationCode");
var continueToInstagramAccountButton = document.getElementById("continueToInstagramAccount");
var verificationCodeEmailDescription = document.getElementById("verificationCodeEmailDescription");
var verificationCodeEmail = document.getElementById("verificationCodeEmail");
var erfolgreichAngemeldet = document.getElementById("erfolgreichAngemeldet");
var instagramAccount = document.getElementById("instagramAccount");
var instagramName = document.getElementById("instagramName");
var instagramNameInput = document.getElementById("instagramNameInput");
// Time
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
// add a zero in front of numbers<10
m = checkTime(m);
document.getElementById('time').innerHTML = h + ":" + m;
t = setTimeout(function() {
startTime()
}, 500);
}
startTime();
// Insta
function controlVerificationCode() {
if (input.value == verificationCode) {
correctOrWrongCheck.innerHTML = "Der Code war korrekt!";
continueToInstagramAccountButton.style.display = "block";
continueToInstagramAccountButton.style.margin = "5px auto";
controlVerificationCodeButton.style.display = "none";
} else if (input.value !== verificationCode) {
correctOrWrongCheck.innerHTML = "Der Code ist leider Falsch!";
continueToInstagramAccountButton.style.display = "none";
controlVerificationCodeButton.style.display = "block";
}
}
verificationCodeEmailDescription.innerHTML = "Ihr Bestätigunscode lautet: " + verificationCode;
// OPEN AND CLOSE APPS
function openVerificationCodeInstagramPage() {
createAccountForm.style.display = "none";
verificationCodeInstagramPage.style.display = "block"
verificationCodeEmail.style.display = "block";
instagramName.value = instagramNameInput.value;
notification.style.transform = "translate(-50%, -50%) scale(0)";
notificationDescription.innerHTML = "Ihr Bestätigunscode lautet: ...";
setTimeout(
function() {
notification.style.transform = "translate(-50%, -50%) scale(1)";
}, 1000);
setTimeout(
function() {
notification.style.transform = "translate(-50%, -50%) scale(0)";
}, 7000);
}
function continueToInstagramAccount() {
verificationCodeInstagramPage.style.display = "none";
instagramAccount.style.display = "flex";
erfolgreichAngemeldet.display = "none";
notificationDescription.innerHTML = "Erfolgreich bei Instagram angemeldet"
notification.style.transform = "translate(-50%, -50%) scale(0)";
erfolgreichAngemeldet.style.display = "block";
setTimeout(
function() {
notification.style.transform = "translate(-50%, -50%) scale(1)";
}, 1000);
setTimeout(
function() {
notification.style.transform = "translate(-50%, -50%) scale(0)";
}, 7000);
var counter = 0;
var followers = document.getElementById('followers');
setTimeout(function(){
var st = setInterval(function(){
followers.innerHTML = ++counter;
},100)
},100);
}
function closeNotification() {
notification.style.transform = "translate(-50%, -50%) scale(0)";
}
function openInstagram() {
instagram.style.transform = "scale(1)";
}
function openMail() {
mail.style.transform = "scale(1)";
}
function closeApp() {
instagram.style.transform = "scale(0)";
mail.style.transform = "scale(0)";
}
window.onload = function() {
document.getElementById("instagramNumberText").value = '';
}
* {
margin: 0;
padding: 0;
font-family: 'Roboto',sans-serif;
user-select: none;
}
input:focus, textarea:focus {
outline: 0;
}
#phone {
height: 600px;
width: 350px;
border-radius: 50px;
position: absolute;
top: 600px;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-top: 90px solid;
border-right: 15px solid;
border-left: 15px solid;
border-bottom: 90px solid;
background-image: url("https://ioshacker.com/wp-content/uploads/2019/06/iOS-13-wallpaper.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.app {
box-shadow: 0 0 9px -4px #000;
}
#topbar {
padding: 0.3em;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
height: 20px;
transform: translate(-4%,0) scale(0.9);
width: 370px;
}
#connection {
display: flex;
align-items: center;
width: 110px;
justify-content: space-around;
}
#battery {
display: flex;
align-items: center;
width: 110px;
justify-content: end;
}
#battery .bi-battery-full {
font-size: 23px;
margin-left: 5px;
}
#topbar .bi-wifi-2 {
font-size: 25px;
margin-top: -3px;
}
#time {
text-align: center;
}
#notification {
margin: 0;
position: absolute;
top: 365px;
left: 50%;
-ms-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
height: 85px;
width: 315px;
background: #EDEBED;
border-radius: 10px;
z-index: 10000;
transition: all 0.5s;
box-shadow: 0 0 10px -1px #525252;
padding: 0.5em 0 0.5em 1em;
display: flex;
flex-direction: column;
justify-content: center;
}
#notification h1 {
font-size: 23px;
}
#appsOne {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
#instagramIcon, #verificationCode, #mailIcon {
margin: 20px;
}
.app {
font-size: 40px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
transition: all 0.2s;
}
.app:hover {
cursor: pointer;
filter: brightness(90%);
}
.bi-instagram, .bi-envelope-fill {
width: 40px;
height: 40px;
color: #fff;
font-family: sans-serif;
}
/* Instagram */
#instagramIcon {
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}
#instagramApp {
position: absolute;
top: 0;
left: 0;
background: #EAEAEA;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: all 0.3s;
transform: scale(0);
z-index: 99999;
text-align: center;
}
.instagramHeader {
font-family: 'Handlee', cursive;
font-size: 35px;
}
.instagramSecondHeader {
font-size: 15px;
width: 260px;
margin: 1em 0;
}
#instagramNameInput, #instagramEmail, #instagramNumberText {
font-size: 15px;
padding: 0.5em;
border: 1px solid #D1D1D1;
margin: 0.5em 0 0.5em 0;
width: 220px;
}
.instagramButton {
width: 236px;
font-size: 15px;
padding: 0.5em;
background: #3296F0;
color: #fff;
border: none;
margin: 0.5em 0;
transition: all 0.2s;
}
.instagramButton:hover {
filter: brightness(80%);
cursor: pointer;
}
#verificationCodeInstagramPage {
display: none;
}
#continueToInstagramAccount {
display: none;
}
#instagramAccount {
display: none;
justify-content: flex-start;
height: 100%;
width: 100%;
background: #f7f7f7;
flex-direction: column;
align-items: center;
}
#instagramName {
font-size: 20px;
text-align: left;
width: 85%;
padding: 20px 20px 15px 10px;
border-bottom: 1px solid gray;
height: 20px;
border-right: none;
border-top: none;
border-left: none;
background: none;
}
#profilePicture {
font-size: 35px;
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
background: #eae9e9;
border-radius: 100000px;
margin: 20px;
border: 1px solid #6f6e6e;
color: #6f6e6e;
}
#instagramPictureAndNumbers {
display: inherit;
width: 360px;
}
#numbers {
width: 225px;
height: 45px;
margin: 35px 0 0 0;
}
#userDescription {
width: 320px;
font-size: 13px;
border: none;
background: none;
resize: none;
}
.bi-table {
font-size: 25px;
border-bottom: 1px solid;
width: 90%;
margin-top: 0.5em;
}
#emptyImages {
color: #c7c7c7;
margin: 100px;
font-size: 14px;
}
/* Mail */
#mailIcon {
background: linear-gradient(0deg, #05ffff 0%, #3cabe6 30%, #2763dc 70%);
}
#mailApp {
position: absolute;
top: 0;
left: 0;
background: #f6f6f6;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
transition: all 0.3s;
transform: scale(0);
z-index: 99999;
text-align: center;
}
#mailHeader {
font-size: 25px;
padding: 20px;
background: #fff;
width: 88%;
z-index: 999;
}
#verificationCodeEmail {
display: none;
}
.email {
background: #fff;
width: 97%;
padding: 5px;
border-top: 1px solid #e6e6e6;
}
.emailHeader {
text-align: left;
margin: 10px;
font-size: 25px;
}
#verificationCodeEmailDescription, #erfolgreichAngemeldetDescription {
text-align: left;
margin: 10px;
}
#erfolgreichAngemeldet {
display: none;
}
/* Home Button */
#homeButton {
position: absolute;
height: 60px;
width: 60px;
background: transparent;
z-index: 9999;
bottom: -107px;
border-radius: 100000px;
left: 50%;
-ms-transform: translate(-50%, -50%) rotate(-10deg);
transform: translate(-50%, -50%) rotate(-10deg);
border: 1px outset;
cursor: pointer;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.1/font/bootstrap-icons.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400&display=swap" rel="stylesheet">
<div id="notification" onclick="closeNotification();">
<h1 id="notificationHeader"><b>Neue Email erhalten!</b></h1>
<p id="notificationDescription"></p>
</div>
<div id="phone">
<div id="topbar">
<div id="connection">
<i class="bi bi-bar-chart-fill"></i>
LIDL LTE
<i class="bi bi-wifi-2"></i>
</div>
<p id="time"></p>
<div id="battery">
98%
<i class="bi bi-battery-full"></i>
</div>
</div>
<div id="slider">
<div id="appsOne">
<!-- Instagram -->
<div id="instagramIcon" class="app" onclick="openInstagram();"><i class="bi bi-instagram"></i></div>
<div id="instagramApp">
<form id="createAccountForm" action="#" onsubmit="openVerificationCodeInstagramPage(); return false;">
<h1 class="instagramHeader">Instagram</h1>
<p>Erstelle einen Account</p>
<input type="text" id="instagramNameInput" placeholder="Name" maxlength="12" autocomplete="off" required>
<input type="email" id="instagramEmail" placeholder="E-Mail" autocomplete="off" required>
<button type="submit" id="createAccount" class="instagramButton">Erstellen</button>
</form>
<div id="verificationCodeInstagramPage">
<h1 class="instagramHeader">Bestätigen</h1>
<p class="instagramSecondHeader">Wir haben ihn einen Bestätigungscode per Email gesendet!</p>
<input type="text" id="instagramNumberText" maxlength="4" onkeypress="return /[0-9]/i.test(event.key)" placeholder="Bestätigungscode"><br>
<button onclick="controlVerificationCode();" id="controlVerificationCode" class="instagramButton">Bestätigen</button>
<button class="instagramButton" id="continueToInstagramAccount" onclick="continueToInstagramAccount()">Weiter</button>
<p id="correctOrWrongCheck"></p>
</div>
<div id="instagramAccount">
<input type="text" id="instagramName">
<div id="instagramPictureAndNumbers">
<div id="profilePicture"><i class="bi bi-person-fill"></i></div>
<table id="numbers">
<tr>
<th id="posts">0</th>
<th id="followers">1</th>
<th id="following">0</th>
</tr>
<tr>
<td>Posts</td>
<td>Followers</td>
<td>Following</td>
</tr>
</table>
</div>
<textarea id="userDescription" placeholder="Beschreibung..." rows="10"></textarea>
<i class="bi bi-table"></i>
<p id="emptyImages">No images found</p>
</div>
</div>
<div id="appsTwo">
Second App Page
</div>
</div>
<!-- Mail App -->
<div id="mailIcon" class="app" onclick="openMail();"><i class="bi bi-envelope-fill"></i></div>
<div id="mailApp">
<h1 id="mailHeader">E-Mails</h1>
<div class="email" id="erfolgreichAngemeldet">
<h1 class="emailHeader">Instagram</h1>
<p class="emailDescription" id="erfolgreichAngemeldetDescription">Erfolgreich angemeldet</p>
</div>
<div class="email" id="verificationCodeEmail">
<h1 class="emailHeader">Instagram</h1>
<p class="emailDescription" id="verificationCodeEmailDescription">Ihr Bestätigunscode lautet</p>
</div>
</div>
</div>
<div id="homeButton" onclick="closeApp();"></div>
To see the iPhone better you should click on Full-Page in the snippet.
My problem was that I have 2 divs: #appsOne and #appsTwo which are in the div #slider. On the home page of the iPhone you can see two apps (#appsOne) and a text (#appsTwo) in the middle. The apps (#appsOne) should stay where they are but the text (#appsTwo) should be made on a second page with a horizontal scroll snap. How could I do that?
And here's an image, how it looks like without the slider and the #appsTwo div:

CSS Scroll-snapping
We can seperate the two 'screen's by wrapping each in a div with class panel.
To make the slider scrollable, we have to apply white-space: nowrap to force it into a single line. To make scroll-snap work horizontally, set scroll-snap-type to x and make it mandatory (scroll-snap-type: x mandatory;). This means that:
The visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled. That means it snaps on that point when the scroll action finished, if possible. If content is added, moved, deleted or resized the scroll offset will be adjusted to maintain the resting on that snap point.MDN
We also set overscroll-behavior-x to contain which makes sure that no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.
We then apply scroll-snap-align: center to .panel. To prevent the overflowing contents in the panels, we also apply white-space: initial.
Result:
https://jsfiddle.net/Spectric/j7br8h5a/
JS Scroll-snapping (mouse drag)
We can take it one step further by adding support for user drag to scroll.
For this, we don't actually need scroll-snap at all. We can do it with pure JS.
Add an event listener for mousedown that sets isDown to true. Record the last position of the mouse.
Add an event listener for mousemove that checks whether the user is currently dragging (isDown == true). If the user is, calculate the distance from the current mouse position and the last mouse position, increment the slider's scrollLeft by the difference, and set the last position to the current position.
Add an event listener for mouseup that sets isDown to false and checks whether the slider's current scrollLeft is bigger than half. If it is, we can use scrollIntoView() on one panel to smoothly scroll it into the viewport.
To prevent scrolling when an app is opened, we can store the status in a variable which we set it to true when one of the open app function is called and false when the closeApp function is called. In the mousemove listener we also check whether this variable is true.
Best viewed in full-page mode
var time = document.getElementById("time");
var notification = document.getElementById("notification");
var notificationHeader = document.getElementById("notificationHeader");
var notificationDescription = document.getElementById("notificationDescription");
var verificationCode = Math.floor(1000 + Math.random() * 9000);
var input = document.getElementById("instagramNumberText");
var correctOrWrongCheck = document.getElementById("correctOrWrongCheck");
var verificationCodePTag = document.getElementById("verificationCode");
var instagram = document.getElementById("instagramApp");
var mail = document.getElementById("mailApp");
var createAccountButton = document.getElementById("createAccount");
var createAccountForm = document.getElementById("createAccountForm");
var verificationCodeInstagramPage = document.getElementById("verificationCodeInstagramPage");
var controlVerificationCodeButton = document.getElementById("controlVerificationCode");
var continueToInstagramAccountButton = document.getElementById("continueToInstagramAccount");
var verificationCodeEmailDescription = document.getElementById("verificationCodeEmailDescription");
var verificationCodeEmail = document.getElementById("verificationCodeEmail");
var erfolgreichAngemeldet = document.getElementById("erfolgreichAngemeldet");
var instagramAccount = document.getElementById("instagramAccount");
var instagramName = document.getElementById("instagramName");
var instagramNameInput = document.getElementById("instagramNameInput");
// Time
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
// add a zero in front of numbers<10
m = checkTime(m);
document.getElementById('time').innerHTML = h + ":" + m;
t = setTimeout(function() {
startTime()
}, 500);
}
startTime();
// Insta
function controlVerificationCode() {
if (input.value == verificationCode) {
correctOrWrongCheck.innerHTML = "Der Code war korrekt!";
continueToInstagramAccountButton.style.display = "block";
continueToInstagramAccountButton.style.margin = "5px auto";
controlVerificationCodeButton.style.display = "none";
} else if (input.value !== verificationCode) {
correctOrWrongCheck.innerHTML = "Der Code ist leider Falsch!";
continueToInstagramAccountButton.style.display = "none";
controlVerificationCodeButton.style.display = "block";
}
}
verificationCodeEmailDescription.innerHTML = "Ihr Bestätigunscode lautet: " + verificationCode;
// OPEN AND CLOSE APPS
function openVerificationCodeInstagramPage() {
createAccountForm.style.display = "none";
verificationCodeInstagramPage.style.display = "block"
verificationCodeEmail.style.display = "block";
instagramName.value = instagramNameInput.value;
notification.style.transform = "translate(-50%, -50%) scale(0)";
notificationDescription.innerHTML = "Ihr Bestätigunscode lautet: ...";
setTimeout(
function() {
notification.style.transform = "translate(-50%, -50%) scale(1)";
}, 1000);
setTimeout(
function() {
notification.style.transform = "translate(-50%, -50%) scale(0)";
}, 7000);
}
function continueToInstagramAccount() {
verificationCodeInstagramPage.style.display = "none";
instagramAccount.style.display = "flex";
erfolgreichAngemeldet.display = "none";
notificationDescription.innerHTML = "Erfolgreich bei Instagram angemeldet"
notification.style.transform = "translate(-50%, -50%) scale(0)";
erfolgreichAngemeldet.style.display = "block";
setTimeout(
function() {
notification.style.transform = "translate(-50%, -50%) scale(1)";
}, 1000);
setTimeout(
function() {
notification.style.transform = "translate(-50%, -50%) scale(0)";
}, 7000);
var counter = 0;
var followers = document.getElementById('followers');
setTimeout(function() {
var st = setInterval(function() {
followers.innerHTML = ++counter;
}, 100)
}, 100);
}
function closeNotification() {
notification.style.transform = "translate(-50%, -50%) scale(0)";
}
var isAppOpened = false;
function openInstagram() {
isAppOpened = true;
instagram.style.transform = "scale(1)";
}
function openMail() {
isAppOpened = true;
mail.style.transform = "scale(1)";
}
function closeApp() {
isAppOpened = false;
instagram.style.transform = "scale(0)";
mail.style.transform = "scale(0)";
}
window.onload = function() {
document.getElementById("instagramNumberText").value = '';
}
const slider = document.getElementById("slider");
const panels = document.querySelectorAll('.panel');
var lastX = 0;
var isDown = false;
document.addEventListener("mousedown", function(e) {
lastX = e.pageX;
isDown = true;
})
document.addEventListener("mousemove", function(e) {
if (isDown && !isAppOpened) {
const curX = e.pageX;
const diff = lastX - curX;
slider.scrollLeft += diff;
lastX = curX;
}
})
document.addEventListener("mouseup", function() {
isDown = false;
slider.style.scrollBehavior = "smooth";
if (slider.scrollLeft > 175) {
panels[1].scrollIntoView();
} else {
panels[0].scrollIntoView();
}
slider.style.scrollBehavior = "unset";
})
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
user-select: none;
}
input:focus,
textarea:focus {
outline: 0;
}
#phone {
height: 600px;
width: 350px;
border-radius: 50px;
position: absolute;
top: 600px;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-top: 90px solid;
border-right: 15px solid;
border-left: 15px solid;
border-bottom: 90px solid;
background-image: url("https://ioshacker.com/wp-content/uploads/2019/06/iOS-13-wallpaper.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.app {
box-shadow: 0 0 9px -4px #000;
}
#topbar {
padding: 0.3em;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
height: 20px;
transform: translate(-4%, 0) scale(0.9);
width: 370px;
}
#connection {
display: flex;
align-items: center;
width: 110px;
justify-content: space-around;
}
#battery {
display: flex;
align-items: center;
width: 110px;
justify-content: end;
}
#battery .bi-battery-full {
font-size: 23px;
margin-left: 5px;
}
#topbar .bi-wifi-2 {
font-size: 25px;
margin-top: -3px;
}
#time {
text-align: center;
}
#notification {
margin: 0;
position: absolute;
top: 365px;
left: 50%;
-ms-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
height: 85px;
width: 315px;
background: #EDEBED;
border-radius: 10px;
z-index: 10000;
transition: all 0.5s;
box-shadow: 0 0 10px -1px #525252;
padding: 0.5em 0 0.5em 1em;
display: flex;
flex-direction: column;
justify-content: center;
}
#notification h1 {
font-size: 23px;
}
#appsOne {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
#instagramIcon,
#verificationCode,
#mailIcon {
margin: 20px;
}
.app {
font-size: 40px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
transition: all 0.2s;
}
.app:hover {
cursor: pointer;
filter: brightness(90%);
}
.bi-instagram,
.bi-envelope-fill {
width: 40px;
height: 40px;
color: #fff;
font-family: sans-serif;
}
/* Instagram */
#instagramIcon {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
#instagramApp {
position: absolute;
top: 0;
left: 0;
background: #EAEAEA;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: all 0.3s;
transform: scale(0);
z-index: 99999;
text-align: center;
}
.instagramHeader {
font-family: 'Handlee', cursive;
font-size: 35px;
}
.instagramSecondHeader {
font-size: 15px;
width: 260px;
margin: 1em 0;
}
#instagramNameInput,
#instagramEmail,
#instagramNumberText {
font-size: 15px;
padding: 0.5em;
border: 1px solid #D1D1D1;
margin: 0.5em 0 0.5em 0;
width: 220px;
}
.instagramButton {
width: 236px;
font-size: 15px;
padding: 0.5em;
background: #3296F0;
color: #fff;
border: none;
margin: 0.5em 0;
transition: all 0.2s;
}
.instagramButton:hover {
filter: brightness(80%);
cursor: pointer;
}
#verificationCodeInstagramPage {
display: none;
}
#continueToInstagramAccount {
display: none;
}
#instagramAccount {
display: none;
justify-content: flex-start;
height: 100%;
width: 100%;
background: #f7f7f7;
flex-direction: column;
align-items: center;
}
#instagramName {
font-size: 20px;
text-align: left;
width: 85%;
padding: 20px 20px 15px 10px;
border-bottom: 1px solid gray;
height: 20px;
border-right: none;
border-top: none;
border-left: none;
background: none;
}
#profilePicture {
font-size: 35px;
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
background: #eae9e9;
border-radius: 100000px;
margin: 20px;
border: 1px solid #6f6e6e;
color: #6f6e6e;
}
#instagramPictureAndNumbers {
display: inherit;
width: 360px;
}
#numbers {
width: 225px;
height: 45px;
margin: 35px 0 0 0;
}
#userDescription {
width: 320px;
font-size: 13px;
border: none;
background: none;
resize: none;
}
.bi-table {
font-size: 25px;
border-bottom: 1px solid;
width: 90%;
margin-top: 0.5em;
}
#emptyImages {
color: #c7c7c7;
margin: 100px;
font-size: 14px;
}
/* Mail */
#mailIcon {
background: linear-gradient(0deg, #05ffff 0%, #3cabe6 30%, #2763dc 70%);
}
#mailApp {
position: absolute;
top: 0;
left: 0;
background: #f6f6f6;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
transition: all 0.3s;
transform: scale(0);
z-index: 99999;
text-align: center;
}
#mailHeader {
font-size: 25px;
padding: 20px;
background: #fff;
width: 88%;
z-index: 999;
}
#verificationCodeEmail {
display: none;
}
.email {
background: #fff;
width: 97%;
padding: 5px;
border-top: 1px solid #e6e6e6;
}
.emailHeader {
text-align: left;
margin: 10px;
font-size: 25px;
}
#verificationCodeEmailDescription,
#erfolgreichAngemeldetDescription {
text-align: left;
margin: 10px;
}
#erfolgreichAngemeldet {
display: none;
}
/* Home Button */
#homeButton {
position: absolute;
height: 60px;
width: 60px;
background: transparent;
z-index: 9999;
bottom: -107px;
border-radius: 100000px;
left: 50%;
-ms-transform: translate(-50%, -50%) rotate(-10deg);
transform: translate(-50%, -50%) rotate(-10deg);
border: 1px outset;
cursor: pointer;
}
#slider {
white-space: nowrap;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
height: calc(100% - 30px);
}
.panel {
display: inline-block;
width: 350px;
white-space: initial;
}
#appsTwo {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.1/font/bootstrap-icons.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400&display=swap" rel="stylesheet">
</head>
<body>
<div id="notification" onclick="closeNotification();">
<h1 id="notificationHeader"><b>Neue Email erhalten!</b></h1>
<p id="notificationDescription"></p>
</div>
<div id="phone">
<div id="topbar">
<div id="connection">
<i class="bi bi-bar-chart-fill"></i> LIDL LTE
<i class="bi bi-wifi-2"></i>
</div>
<p id="time"></p>
<div id="battery">
98%
<i class="bi bi-battery-full"></i>
</div>
</div>
<div id="slider">
<div class="panel">
<div id="appsOne">
<!-- Instagram -->
<div id="instagramIcon" class="app" onclick="openInstagram();"><i class="bi bi-instagram"></i></div>
<div id="instagramApp">
<form id="createAccountForm" action="#" onsubmit="openVerificationCodeInstagramPage(); return false;">
<h1 class="instagramHeader">Instagram</h1>
<p>Erstelle einen Account</p>
<input type="text" id="instagramNameInput" placeholder="Name" maxlength="12" autocomplete="off" required>
<input type="email" id="instagramEmail" placeholder="E-Mail" autocomplete="off" required>
<button type="submit" id="createAccount" class="instagramButton">Erstellen</button>
</form>
<div id="verificationCodeInstagramPage">
<h1 class="instagramHeader">Bestätigen</h1>
<p class="instagramSecondHeader">Wir haben ihn einen Bestätigungscode per Email gesendet!
</p>
<input type="text" id="instagramNumberText" maxlength="4" onkeypress="return /[0-9]/i.test(event.key)" placeholder="Bestätigungscode"><br>
<button onclick="controlVerificationCode();" id="controlVerificationCode" class="instagramButton">Bestätigen</button>
<button class="instagramButton" id="continueToInstagramAccount" onclick="continueToInstagramAccount()">Weiter</button>
<p id="correctOrWrongCheck"></p>
</div>
<div id="instagramAccount">
<input type="text" id="instagramName">
<div id="instagramPictureAndNumbers">
<div id="profilePicture"><i class="bi bi-person-fill"></i></div>
<table id="numbers">
<tr>
<th id="posts">0</th>
<th id="followers">1</th>
<th id="following">0</th>
</tr>
<tr>
<td>Posts</td>
<td>Followers</td>
<td>Following</td>
</tr>
</table>
</div>
<textarea id="userDescription" placeholder="Beschreibung..." rows="10"></textarea>
<i class="bi bi-table"></i>
<p id="emptyImages">No images found</p>
</div>
</div>
<div id="mailIcon" class="app" onclick="openMail();"><i class="bi bi-envelope-fill"></i></div>
<div id="mailApp">
<h1 id="mailHeader">E-Mails</h1>
<div class="email" id="erfolgreichAngemeldet">
<h1 class="emailHeader">Instagram</h1>
<p class="emailDescription" id="erfolgreichAngemeldetDescription">Erfolgreich angemeldet</p>
</div>
<div class="email" id="verificationCodeEmail">
<h1 class="emailHeader">Instagram</h1>
<p class="emailDescription" id="verificationCodeEmailDescription">Ihr Bestätigunscode lautet
</p>
</div>
</div>
</div>
</div>
<div class="panel">
<div id="appsTwo">
<div>
Second App Page
</div>
</div>
</div>
</div>
<div id="homeButton" onclick="closeApp();"></div>
</div>
</body>
</html>
Result:
You can hide the horizontal scrollbar by applying overflow-x:hidden to #slider

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.

Prices wont show up

I made a program showing the price for BTC and i was going to make an chrome extension out of it.
But sadly, i wrote it in PHP. which google extensions does not support.
I looked up a script on Codepen.io to see if it will work at all,
and i found this one - https://codepen.io/magnificode/pen/KyMMOB?q=bitcoin+price+&limit=all&type=type-pens
JS file ->
const app = new Vue({
el: '.btc-badge',
data: {
btcUSD: '0.00',
upDown: 'up',
},
mounted() {
this.getInfo();
setInterval(()=> {
this.getInfo();
}, 1000*60);
},
methods: {
getInfo() {
axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => {
const oldPrice = this.btcUSD
const newPrice = parseFloat(response.data.bpi.USD.rate_float).toFixed(2)
if (newPrice > oldPrice) {
this.upDown = 'up'
} else {
this.upDown = 'down'
}
this.btcUSD = newPrice
});
}
},
});
CSS file ->
body,html {
height: 100%;
}
body {
-webkit-font-smoothing: antialiased;
background-image: linear-gradient(to right, #ece9e6, #ccc);
font-smoothing: antialiased;
align-items: center;
color: #fafafa;
display: flex;
font-family: "macha";
height: 100%;
justify-content: center;
}
.card {
align-items: center;
background-image: linear-gradient(to top right, #141e30, #243b55);
border-radius: .4em;
box-shadow: 0 0 66px rgba(#000, 0.3);
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
overflow: hidden;
padding: 1em;
position: relative;
width: 250px;
height: 300px;
z-index: 0;
&:after {
mix-blend-mode: overlay;
border: 1px solid #eee;
border-radius: .4em;
content: '';
height: calc(100% - 2em);
left: 0;
margin: 1em;
position: absolute;
top: 0;
width: calc(100% - 2em);
z-index: 1;
}
}
h1 {
letter-spacing: 0.05em;
margin: 0;
}
p {
margin: 0;
}
.up {
color: #42ffa8;
}
.down {
color: #ff0740;
&:after {
transform: rotate(180deg);
}
}
.up,
.down {
align-items: center;
display: flex;
&:after{
border-style: solid;
border-width: 0 5px 5px 5px;
border-color: transparent transparent currentColor transparent;
content: "";
height: 0;
margin-left: .5em;
margin-top: .1em;
width: 0;
}
}
svg {
bottom: -50%;
fill: #999;
left: -20%;
mix-blend-mode: overlay;
position: absolute;
transform: scaleX(-1);
width: 150%;
z-index: -1;
}
and the html file ->
try{Typekit.load({ async: true });}catch(e){}
<div class="btc-badge">
<div class="card">
<p>Current Bitcoin price</p>
<h1>${{ btcUSD }}</h1>
<p :class="upDown">{{upDown}}</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125"><path d="M50 30L30 40 10 10v80h80V50L70 60"/></svg>
</div>
</doesnt took the code and put it in a folder, uploaded it and i pressed the little icon for my app. but now i saw that the prices doesn't show up.
Does anyone of you have any idea as to why this is happening?
Thanks - Jonas.

How to get rid of space between rows with flex-wrap: wrap [duplicate]

This question already has an answer here:
Flex items create space between them when they wrap [duplicate]
(1 answer)
Closed 6 years ago.
I am making a simple pen on CodePen, where you can add and remove blocks from a box. It's really simple, and it is working fully except for one thing. I am using flex-wrap to make the overflow go into separate columns but it has an unwanted space in the middle of the rows. I am awarer that this is the default of flex-wrap, but I am wondering if there is a way to get rid of the space between the rows. My pen is here: http://codepen.io/TheAndersMan/pen/KggVOj
Also, I am using SCSS
Here is my HTML:
<div class="buttonWrap">
<button>Add</button>
<button class="two">Subtract</button>
</div>
<div class="box"></div>
My CSS:
#import 'https://fonts.googleapis.com/css?family=Roboto:300';
body {
margin: 0;
display: flex;
align-items: center;
}
.buttonWrap {
margin-top: 37.5vh;
margin-left: 7.5vw;
&:nth-child(1) {
margin-bottom: 5vh;
}
button {
cursor: pointer;
outline: none;
background: #3f51b5;
border: none;
color: white;
width: 10vw;
height: 10vh;
font-size: 2em;
font-family: roboto;
display: block;
// margin-top: 5vh;
}
.two {
margin-top: 5vh;
}
}
.box {
position: absolute;
height: 50vh;
width: 50vw;
left: 25vw;
top: 25vh;
background: #ff5252;
display: flex;
flex-wrap: wrap;
}
.newDiv {
background: #3f51b5;
width: 5vw;
height: 5vh;
z-index: 10;
}
#media (max-width: 1350px) {
.buttonWrap {
button {
font-size: 1em;
}
}
}
And my JS:
var add = document.querySelector("button");
var subtract = document.querySelector(".two");
var box = document.querySelector(".box");
add.addEventListener("click", function() {
var newDiv = document.createElement("div");
var newContent = document.createTextNode("");
newDiv.classList.add("newDiv")
newDiv.appendChild(newContent);
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
box.appendChild(newDiv);
})
subtract.addEventListener("click", function() {
document.querySelector(".newDiv:last-of-type").remove();
})
So is there any way I can fix this?

Add this to your .box:
align-content: flex-start;
var add = document.querySelector("button");
var subtract = document.querySelector(".two");
var box = document.querySelector(".box");
add.addEventListener("click", function() {
var newDiv = document.createElement("div");
var newContent = document.createTextNode("");
newDiv.classList.add("newDiv")
newDiv.appendChild(newContent);
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
box.appendChild(newDiv);
})
subtract.addEventListener("click", function() {
document.querySelector(".newDiv:last-of-type").remove();
})
Roboto:300';
body {
margin: 0;
display: flex;
align-items: center;
}
.buttonWrap {
margin-top: 37.5vh;
margin-left: 7.5vw;
&:nth-child(1) {
margin-bottom: 5vh;
}
button {
cursor: pointer;
outline: none;
background: #3f51b5;
border: none;
color: white;
width: 10vw;
height: 10vh;
font-size: 2em;
font-family: roboto;
display: block;
// margin-top: 5vh;
}
.two {
margin-top: 5vh;
}
}
.box {
position: absolute;
height: 50vh;
width: 50vw;
left: 25vw;
top: 25vh;
background: #ff5252;
display: flex;
flex-wrap: wrap;
align-content: flex-start; /* <-- this here */
}
.newDiv {
background: #3f51b5;
width: 5vw;
height: 5vh;
z-index: 10;
}
#media (max-width: 1350px) {
.buttonWrap {
button {
font-size: 1em;
}
}
}
<div class="buttonWrap">
<button>Add</button>
<button class="two">Subtract</button>
</div>
<div class="box"></div>
Further reading: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content