what is causing borders to appear in my modal?

what is causing borders to appear in my modal? - javascript

there are 2 silver borders in my modal, I looked over the css but there are no border property or anything of that sort that could be the cause. I tried going through developer tools to try and maybe select the border but realized I am unable to do that too. I tried going through the code individually but couldn't locate the source
I looked over the entire code and I feel dumb but I couldn't figure out what's causing the border to appear for the life of me.
my JSX:
import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { CSSTransition } from "react-transition-group";
import "./Signin.css";
const Modal = props => {
const closeOnEscapeKeyDown = e => {
if ((e.charCode || e.keyCode) === 27) {
props.closeModal();
}
if ((e.charCode || e.keyCode) === 87) {
props.showModal();
}
};
useEffect(() => {
document.body.addEventListener("keydown", closeOnEscapeKeyDown);
return function cleanup() {
document.body.removeEventListener("keydown", closeOnEscapeKeyDown);
};
}, []);
return ReactDOM.createPortal(
<CSSTransition
in={props.show}
unmountOnExit
timeout={{ enter: 0, exit: 300 }}
>
<div className="modal" onClick={props.closeModal}>
<div className="modal-content" onClick={e => e.stopPropagation()}>
<div className="modal-header">
<h4 className="modal-title">Sign in</h4>
</div>
<div className="modal-body">
<div className = "modal-input-field">
<div className = "modal-username-field">
<p className = "p-username">Username</p>
<input tag = "username" placeholder = "eg: muhammet-aldulaimi"/>
</div>
<div className = "modal-password-field">
<p className = "p-password">Password</p>
<input tag = "password" placeholder = "eg: someStrongPassword123"/>
</div>
</div>
<div className = "modal-submit">
<button className = "modal-submit-button">Submit</button>
</div>
</div>
<div className="modal-footer">
<button onClick={props.closeModal} className="button">
Close
</button>
</div>
</div>
</div>
</CSSTransition>,
document.getElementById("root")
);
};
export default Modal;
my CSS:
.modal {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.3s ease-in-out;
pointer-events: none;
}
.modal.enter-done {
opacity: 1;
pointer-events: visible;
}
.modal.exit {
opacity: 0;
}
.modal-content {
width: 400px;
height: 500px;
background-image: url(../../Images/flowersSidebarBackground.png);
transition: all 0.3s ease-in-out;
transform: translateY(-200px);
}
.modal.enter-done .modal-content {
transform: translateY(0);
}
.modal.exit .modal-content {
transform: translateY(-200px);
}
.modal-header {
display: flex;
justify-content: center;
align-items: center;
padding: 40px 0px 0px 0px;
}
.modal-title {
/* padding-bottom: 20px; */
font-family: 'Pacifico', cursive;
background-image: linear-gradient(45deg, #a9dba4, #e25734);
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
background-clip: text;
font-size: 38px;
font-weight: 40px;
}
.modal-body {
padding: 0px 0px 0px 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.modal-input-field {
width: 80%;
}
.modal-username-field {
display: flex;
flex-direction: column;
}
.p-username {
padding-top: 10px;
font-size: 20px;
background-image: linear-gradient(45deg, #a9dba4, #e25734);
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
background-clip: text;
}
.modal-password-field {
display: flex;
flex-direction: column;
}
.p-password {
padding-top: 10px;
font-size: 20px;
background-image: linear-gradient(45deg, #a9dba4, #e25734);
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
background-clip: text;
}
.modal-submit {
display: flex;
justify-content: center;
padding-top: 30px;
}
.modal-submit-button {
background-color: rgb(24, 102, 116);
padding: 20px 40px;
border-radius: 7px;
}
.modal-footer {
padding: 10px;
}

The borders give you visual feedback that the element is focused. You can get rid of it by adding the following code in your Modal.css
input:focus {
outline: none;
}

I solved the issue by tracing the problem to a Bootstrap cdn, I fixed removing the borders by adding a border: 0px solid black to make the border 0 pixels therefor nonexistent+

Related

How do I make this Hover effect on a Card component?

I want to make a hover effect over a Card component that shows more information but I tried a lot of codepen's and videos but it doesn't work for me.
import React, { Component } from 'react'
import '../styles/Project.css'
class Project extends Component {
render() {
return (
<div className="Project-card">
<img
className="Project-card-image"
src={this.props.image}
alt={this.props.title}
/>
<div className="display-over">
<div className="Project-card-libraries">
{this.props.libraries.map((prop) => (
<img
src={prop.image}
alt={prop.name}
className="Project-card-library-images"
/>
))}
</div>
</div>
</div>
)
}
}
.Project-card {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 60%;
height: 100%;
border-radius: 1em;
margin-top: 1em;
align-self: center;
border-radius: 15px;
transition: 0.4s ease-out;
box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
position: relative;
}
.display-over {
position: relative;
display: block;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
color: #fff;
opacity: 0;
transition: all 0.3s ease-in-out;
box-sizing: border-box;
}
.Project-card:hover .display-over {
opacity: 1;
}
.Project-card-image {
width: 100%;
object-fit: cover;
border-radius: 15px;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Example I want the red container to be over the whole green container.
I have this. I don't want that white space there which is the div with classname - display-over.
I need that content to be displayed over the image.

scroll eventListener not working in javascript

window.addEventListener for scroll event is not working in my JS. I've tried several ways but still not working. I've used intersectionObserver in the JS also. Here is the JS code
const moveToAbout = () => {
document.getElementById('about').scrollIntoView(true)
}
const moveToWork = () => {
document.getElementById('work').scrollIntoView()
}
const moveToTop = () => {
document.getElementById('main-section').scrollIntoView(true)
}
const options = {
root: null,
threshold: 0,
rootMargin: "-150px"
}
const header = document.querySelector("header")
const sections = document.querySelectorAll(".section")
const mainSection = document.querySelector(".main-container")
const bttWrapper = document.getElementById('bttBtn-wrapper')
const veganImage = document.getElementById('vegan-store-image')
const navbar = document.getElementById('header')
veganImage.onclick = () => {
window.open("https://thoughtlessmind.github.io/Vegan-store")
}
const sectionOne = document.querySelector(".about-section");
// bttWrapper.style.display = 'none'
const mainObserver = new IntersectionObserver(function (entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
header.classList.remove("nav-theme-2")
bttWrapper.classList.add("btnWrapperHidden")
bttWrapper.classList.remove("btnWrapperShow")
} else {
header.classList.add("nav-theme-2")
bttWrapper.classList.add("btnWrapperShow")
}
// console.log(entry.target, '-', entry.isIntersecting)
});
}, options);
mainObserver.observe(mainSection)
window.addEventListener("scroll", (event)=>{
console.log("scrolled")
var scroll = this.scrollY
if(scroll > 20){
console.log('reached')
}
})
const test = () =>{
console.log('working')
}
window.addEventListener("scroll", test)
window.addEventListener("scroll", () => console.log(window.pageYOffset));
Later in the lower part, I've tried to add scroll event in some ways but nothing is happening.
Here is the link for the whole repo: Github repo link

remove height property from CSS main. It is working now :
use min-height, max-height
const moveToAbout = () => {
document.getElementById('about').scrollIntoView(true)
}
const moveToWork = () => {
document.getElementById('work').scrollIntoView()
}
const moveToTop = () => {
document.getElementById('main-section').scrollIntoView(true)
}
const options = {
root: null,
threshold: 0,
rootMargin: "-150px"
}
const header = document.querySelector("header")
const sections = document.querySelectorAll(".section")
const mainSection = document.querySelector(".main-container")
const bttWrapper = document.getElementById('bttBtn-wrapper')
const veganImage = document.getElementById('vegan-store-image')
const navbar = document.getElementById('header')
veganImage.onclick = () => {
window.open("https://thoughtlessmind.github.io/Vegan-store")
}
const sectionOne = document.querySelector(".about-section");
// bttWrapper.style.display = 'none'
const mainObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
header.classList.remove("nav-theme-2")
bttWrapper.classList.add("btnWrapperHidden")
bttWrapper.classList.remove("btnWrapperShow")
} else {
header.classList.add("nav-theme-2")
bttWrapper.classList.add("btnWrapperShow")
}
// console.log(entry.target, '-', entry.isIntersecting)
});
}, options);
mainObserver.observe(mainSection)
window.onload = () =>{
console.log("loaded");
window.onscroll = function()
{
console.log("scrolling.....", window.scrollY);
}
}
#import 'global.css';
/* -----Navigation bar styles */
#import 'navbar.css';
/* ----------- Main contaier styles*/
main{
overflow: scroll;
scroll-snap-type: y mandatory;
}
.section{
/* scroll-snap-align: start; */
/* Uncomment above to add snap scrolling effect */
margin-left: auto;
margin-right: auto;
width: 80%;
max-width: 1100px;
border-bottom: 1px solid grey;
}
.main-container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
justify-content: space-between;
}
.name-text{
font-size: 2.8rem;
font-weight: 500;
color: var(--primary-text-color);
}
.intro-text{
padding: 1rem;
padding-left: 0;
font-size: 1.2rem;
color: var(--para-text-color);
}
.right-container{
text-align: left;
}
.text-container{
align-self: center;
}
.left-image{
width: 200px;
height: 200px;
background-color: palegreen;
animation: rotate 8s infinite ease-in-out ;
}
#keyframes rotate{
0%{
border-radius: 0;
}
50%{
border-radius: 50%;
transform: rotate(145deg);
background-color: green;
}
100%{
transform: rotate(360deg);
border-radius: 0;
}
}
.social-link-container{
margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.social-logo{
font-size: 2rem;
color: var(--primary-text-color);
}
.social-link{
margin: 0 10px;
}
/* About section */
.about-section{
height: 100vh;
padding-top: 38.5px;
border-bottom: 1px solid grey;
}
.about-section > h2{
padding: 10px 10px 10px 0px;
}
/* ----Work section ---- */
#work{
height: 100vh;
padding-top: 38.5px;
}
#work >h2 {
padding: 10px 10px 10px 0;
}
/* .inverse{
background-color: #111;
color: #eee;
} */
.project-card{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 10px;
border-radius: 5px;
margin-top: 15px;
transition: 0.3s;
}
.project-card:hover{
background-color: rgba(200, 200, 200, 0.2);
}
.left-side-card{
padding-right: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
max-height: 145px;
height: 145px;
}
.project-name{
margin-bottom: 10px;
display: inline-block;
}
.project-link{
text-decoration: none;
letter-spacing: 0.8px;
position: relative;
}
.project-name::after{
position: absolute;
bottom: 0;
left: 0;
content: '';
height: 1px;
width: 100%;
background-color: black;
/* transform: scale(1); */
transition: 0.3s;
transform-origin: left;
}
.project-name:hover::after{
transform: scale(0);
transform-origin: left;
}
.project-description {
word-spacing: 0.8px;
letter-spacing: -0.2px;
}
.project-image{
height: 150px;
width: 250px;
cursor: pointer;
border-radius: 5px;
}
.tech-stack-container{
display: flex;
}
.tech-stack{
margin-right: 10px;
font-size: 12px;
font-weight: 600;
color: rgba(198, 198, 198,0.8);
transition: 0.3s;
}
.project-card:hover .tech-stack{
color: #6d6d6d
}
.repo-link{
margin-left: 20px;
}
.repo-logo{
color: rgba(0, 0, 0, 0.8);
}
.repo-logo:hover{
color: rgba(0, 0, 0, 0.6);
}
#media only screen and (max-width: 500px){
nav{
display: flex;
align-items: center;
justify-content: center;
float: none;
height: 22px;
}
.section{
width: 90%;
}
.main-container{
flex-direction: column-reverse;
justify-content: space-evenly;
}
.name-text{
text-align: center;
font-size: 28px;
}
.intro-text{
font-size: 18px;
}
.project-card{
flex-direction: column;
}
#work{
min-height: fit-content;
height: fit-content;
}
}
header {
position: fixed;
width: 100%;
background: rgba(255, 255, 255, 0.8);
padding: 10px 0;
z-index: 1;
transition: all ease-in-out 0.5s;
}
.green-nav {
background-color: lawngreen;
}
header:after {
content: "";
display: block;
clear: both;
}
nav {
float: right;
padding: 0 10%;
}
nav a {
font-size: 1rem;
margin: 5px 10px;
color: #484848;
text-decoration: none;
transition: 0.3s;
padding-bottom: 2px;
font-weight: 500;
position: relative;
padding: 2px 5px;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
nav a::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
height: 1px;
width: 100%;
background-color: #484848;
transform: scaleX(0);
transition: 0.5s;
transform-origin: center;
}
nav a:hover::after {
transform: scaleX(1);
}
* {
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
:root{
--primary-text-color: #000;
--para-text-color: #323232;
}
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
/* scrollbar-color: rgba(0, 0, 0, .5);
scrollbar-track-color: #f1f1f1; */
}
a {
text-decoration: none;
color: #000;
}
/*-------- Custom scroll bar and selection -----*/
#media only screen and (min-width: 600px) {
::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, .6);
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
}
::selection {
background-color: rgb(78, 81, 83);
color: #fff;
}
/* ------- back to top btn */
#bttBtn-wrapper {
position: absolute;
bottom: 50px;
right: 50px;
background-color: grey;
border-radius: 50%;
height: 40px;
width: 40px;
cursor: pointer;
}
.btnWrapperHidden {
transform: scale(0);
transform-origin: center;
transition: 300ms;
}
.btnWrapperShow {
transform: scale(1) rotate(360deg);
transform-origin: center;
transition: 300ms;
}
#bttBtn {
width: 15px;
height: 15px;
border-radius: 2dpx;
border-left: 3px solid;
border-top: 3px solid;
transform: rotate(45deg);
margin: auto;
margin-top: 11px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-site-verification" content="x2GVvk7gy3nGrRmARofMXwMNs9MIXvu2BcyEs7RH8KQ" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet">
<meta name="Description" content="Name: Rajiv, thoughtlessmind, Profession: Web developer, Country: India, ">
<script src="https://kit.fontawesome.com/09ef7cae5b.js" crossorigin="anonymous"></script>
<script defer src="index.js"></script>
<link rel="stylesheet" href="CSS/style.css">
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">
<title>Rajiv</title>
</head>
<body>
<div id="top"></div>
<header>
<nav>
<a onclick="moveToWork()">Work</a>
<a onclick="moveToAbout()">About</a>
<a onclick="moveToContact()">Contact</a>
</nav>
</header>
<main>
<div class="main-container section" id="main-section">
<!-- <img src="" alt="avatar" class="avatar" style="height: 200px;width: 200px; background-color: wheat;align-self: center;"> -->
<div class="right-container">
<div class="text-container">
<h1 class="name-text">Rajiv</h1>
<p class="intro-text">
Hey, I'm a web developer based in New Delhi.
<br>
I build things using <b>Javasript</b>.
</p>
</div>
</div>
<div class="left-container">
<div class="left-image">
</div>
<div class="social-link-container">
<a href="https://github.com/thoughtlessmind" target="_blank" id="github" class="social-link">
<i class="fab fa-github social-logo"></i>
</a>
<a href="https://www.linkedin.com/in/thoughtlessmind/" target="_blank" id="linkedin"
class="social-link">
<i class="fab fa-linkedin social-logo"></i>
</svg>
</a>
</div>
</div>
</div>
<!-- Work Section -->
<div id="work" class="work-section section">
<h2>Work</h2>
<div class="project-card">
<div class="left-side-card">
<div>
<a href="https://thoughtlessmind.github.io/Vegan-store" target="_blank" class="project-link">
<h3 class="project-name">
Vegan Store
</h3>
</a>
<p class="project-description">
It is a dummy vegan food store website. <br>
This is a fully responsive website made using CSS Flexbox and Grids
</p>
</div>
<div title="techstack used" class="tech-stack-container">
<p class="tech-stack html-logo">HTML</p>
<p class="tech-stack css-logo">CSS</p>
<a title="open repo" href="" class="repo-link">
<i class="fas fa-code repo-logo"></i>
</a>
</div>
</div>
<div class="right-side-card">
<img src="/assets/vegan-store-img.jpg" title="Visit Page" alt="Vegan store" class="project-image"
id="vegan-store-image">
</div>
</div>
<div class="project-card">
<div class="left-side-card">
<div>
<a href="https://thoughtlessmind.github.io/Vegan-store" target="_blank" class="project-link">
<h3 class="project-name">
Vegan Store
</h3>
</a>
<p class="project-description">
It is a dummy vegan food store website. <br>
This is a fully responsive website made using CSS Flexbox and Grids
</p>
</div>
<div title="techstack used" class="tech-stack-container">
<p class="tech-stack html-logo">HTML</p>
<p class="tech-stack css-logo">CSS</p>
<a title="open repo" href="" class="repo-link">
<i class="fas fa-code repo-logo"></i>
</a>
</div>
</div>
<div class="right-side-card">
<img src="/assets/vegan-store-img.jpg" title="Visit Page" alt="Vegan store" class="project-image"
id="vegan-store-image">
</div>
</div>
</div>
<!-- about section -->
<div id="about" class="about-section section">
<h2>About</h2>
<div class="education-container">
<h3>Education</h3>
</div>
</div>
<!-- Back to top btn -->
<div onclick="moveToTop()" id="bttBtn-wrapper">
<div id="bttBtn">
</div>
</div>
</main>
</body>
</html>

Try this one
const main = document.querySelector('main');
// main.onscroll = logScroll;
main.addEventListener('scroll', logScroll)
function logScroll(e) {
console.log(`Scroll position: ${e.target.scrollTop}`);
if(e.target.scrollTop == 761){
console.log('About Page is Reached');
}
}
Note for target.onscroll
Only one onscroll handler can be assigned to an object at a time. For greater flexibility, you can pass a scroll event to the EventTarget.addEventListener() method instead.
As explained here https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll
As I understand here in my code above, the target.scrollTop will only works when you have selected a valid target in your document object. In this case as I inspect your html markup you have wrapped your whole sections to a main tag.
Now that's it, I tried to get your main tag and add an eventListener to it, and it works to me. Hope this also works to you.

QuerySelectorAll won't work for shuffling the order of that list

I'm building a card flip matching game. Rather than having the card flip on a mouse click, I want keyboard controls.
I'm having trouble getting the cards to shuffle. The cards will shuffle fine if I use the 'selector' class from the DOM, but I plan to use those as a highlighter/selector icon when then user is toggling through the cards. So I need the cards themselves to shuffle.
Don't mind that most of this code is tailored for clicking with a mouse. I'm still in the middle of modifying it and I need to first be able to shuffle the cards and leave the selector classes.
Here is a snippet of my HTML:
<section class='gameContainer'>
<div class='game'>
<div class='row'>
<div class='selector'>
<div class='card' data-framework='star'>
<img class='frontSide'src='https://drive.google.com/uc?export=view&id=1A_zvQyMfZtwBqiVbYifebM07R15dUVD-'>
<img class='backSide'src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
</div>
</div>
<div class='selector'>
<div class='card' data-framework='mushroom'>
<img class='frontSide'src='https://drive.google.com/uc?export=view&id=1VgbaVqfGrAw_RefRbMpaKNW4yuQRA5Lm'>
<img class='backSide'src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
</div>
</div>
<div class='selector'>
<div class='card' data-framework='flower'>
<img class='frontSide'src='https://drive.google.com/uc?export=view&id=1Vae7dDSTQmvFlW0hoODvud_Y8_m-VVJk'>
<img class='backSide'src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
</div>
</div>
<div class='selector'>
<div class='card' data-framework='coinTen'>
<img class='imageWithNum'src='https://drive.google.com/uc?export=view&id=1aTtc4B_GK_EbUyk6Uhl2HFh7uZrZLahr'>
<img class='backSide'src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
</div>
</div>
<div class='selector'>
<div class='card' data-framework='chest'>
<img class='imageWithNum'src='https://drive.google.com/uc?export=view&id=1CYWq7iEShB2YG3bQPUCbihsW9_vzgEL_'>
<img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
</div>
</div>
<div class='selector'>
<div class='card' data-framework='mushroom'>
<img class='frontSide'src='https://drive.google.com/uc?export=view&id=1VgbaVqfGrAw_RefRbMpaKNW4yuQRA5Lm'>
<img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
</div>
</div>
</div>
</div>
</section>
Here is my CSS:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: #000;
}
#titleContainer {
border: solid 0px red;
width: 50%;
margin: auto;
background-color: #ffe400;
padding: 20px;
}
#title1 {
font-family: '8BITWONDERNominal';
font-weight: normal;
font-style: normal;
color: #1f57b8;
text-align: center;
text-shadow: 1px 2px 0px #ff0000;
}
#title2 {
font-family: '8BITWONDERNominal';
font-weight: normal;
font-style: normal;
text-align: center;
color: #ff0000;
text-shadow: 1px 2px 0px #000;
}
.gameContainer {
border: solid 1px black;
background: repeating-linear-gradient(
-45deg,
#fff,
#fff 10px,
#b30000 10px,
#b30000 20px
);
width: 640px;
height: 500px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.game {
background-color: #000;
width: 90%;
height: 90%;
}
.row {
border: solid 0px red;
width: 100%;
height: 33.333%;
display: flex;
justify-content: space-around;
align-items: center;
padding: 20px;
perspective: 1000px;
}
.selector, .selectorActive {
box-sizing: content-box;
border: solid 8px black;
border-radius: 6px;
position: relative;
width: 15%;
height: 110%;
display: flex;
justify-content: center;
align-items: center;
}
.selectorActive {
border: solid 8px orange;
}
.card {
border: solid 0px aqua;
position: absolute;
display: flex;
width: 90%;
height: 89%;
transform-style: preserve-3d;
transition: transform .5s;
}
.card.flip {
transform: rotateY(180deg);
}
.frontSide, .backSide{
border: solid 0px deeppink;
position: absolute;
width: 100%;
height: 100%;
padding: 24px 9px;
background-color: #ffd1d1;
backface-visibility: hidden;
}
.frontSide {
transform: rotateY(180deg);
}
.imageWithNum {
border: solid 0px deeppink;
position: absolute;
width: 100%;
height: 100%;
padding: 29px 14px 0px;
background-color: #ffd1d1;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.backSide {
background-color: #fff;
}
.cardSelector {
border: solid 8px #ff7b00;
}
Here is my JavaScript. I grab the card classes at the beginning of the script, then at the end there's the shuffle function. Also, don't mind that the For loop starts at 1 rather than 0. That was intended:
const cards = document.querySelectorAll('.card');
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
function flipCard(){
// This will disable any clicks that occur before the non-matched cards reset
if(lockBoard)
return;
// This will prevent a double click on the same card to obtain a match
if(this === firstCard)
return;
this.classList.add('flip');
if(!hasFlippedCard){
// First card is clicked
hasFlippedCard = true;
firstCard = this;
return;
}
// Second card is clicked
secondCard = this;
// Check if cards match
checkForMatch();
}
//This function will check if the two cards chosen match
function checkForMatch(){
let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
isMatch ? disableCards() : unflipCards();
}
//This function will disable the chosen cards whenever there's a match
function disableCards(){
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
}
//This function will reset the cards if they don't match
function unflipCards(){
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');
resetBoard();
}, 1500);
}
function resetBoard(){
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
(function shuffle(){
for(let x = 1; x < cards.length; x++){
let randomPos = Math.floor(Math.random() * 17);
cards[x].style.order = randomPos;
}
})();
cards.forEach(card => card.addEventListener('click', flipCard));
Also yes, I'm trying to recreate the card flip game from Super Mario Bros. 3. :D

When you specify the order, it applies to the child of the flex container. According to the specification:
The contents of a flex container consists of zero or more flex items:
each child of a flex container becomes a flex item.
Your .card elements do not appear to be children of the flex container. They're descendants of it, but they're children of the .selector elements. If you apply the ordering to the elements with the selector class, I think it should work.
Note that your first card will always be the star, since you're starting your for loop at x = 1. This may be intentional, but I just wanted to point it out.
const cards = document.querySelectorAll('.card');
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
function flipCard() {
// This will disable any clicks that occur before the non-matched cards reset
if (lockBoard)
return;
// This will prevent a double click on the same card to obtain a match
if (this === firstCard)
return;
this.classList.add('flip');
if (!hasFlippedCard) {
// First card is clicked
hasFlippedCard = true;
firstCard = this;
return;
}
// Second card is clicked
secondCard = this;
// Check if cards match
checkForMatch();
}
//This function will check if the two cards chosen match
function checkForMatch() {
let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
isMatch ? disableCards() : unflipCards();
}
//This function will disable the chosen cards whenever there's a match
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
}
//This function will reset the cards if they don't match
function unflipCards() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');
resetBoard();
}, 1500);
}
function resetBoard() {
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
(function shuffle() {
let s = document.querySelectorAll(".selector");
for (let x = 1; x < s.length; x++) {
let randomPos = Math.floor(Math.random() * 17);
s[x].style.order = randomPos;
}
})();
cards.forEach(card => card.addEventListener('click', flipCard));
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: #000;
}
#titleContainer {
border: solid 0px red;
width: 50%;
margin: auto;
background-color: #ffe400;
padding: 20px;
}
#title1 {
font-family: '8BITWONDERNominal';
font-weight: normal;
font-style: normal;
color: #1f57b8;
text-align: center;
text-shadow: 1px 2px 0px #ff0000;
}
#title2 {
font-family: '8BITWONDERNominal';
font-weight: normal;
font-style: normal;
text-align: center;
color: #ff0000;
text-shadow: 1px 2px 0px #000;
}
.gameContainer {
border: solid 1px black;
background: repeating-linear-gradient( -45deg, #fff, #fff 10px, #b30000 10px, #b30000 20px);
width: 640px;
height: 500px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
.game {
background-color: #000;
width: 90%;
height: 90%;
}
.row {
border: solid 0px red;
width: 100%;
height: 33.333%;
display: flex;
justify-content: space-around;
align-items: center;
padding: 20px;
perspective: 1000px;
}
.selector,
.selectorActive {
box-sizing: content-box;
border: solid 8px black;
border-radius: 6px;
position: relative;
width: 15%;
height: 110%;
display: flex;
justify-content: center;
align-items: center;
}
.selectorActive {
border: solid 8px orange;
}
.card {
border: solid 0px aqua;
position: absolute;
display: flex;
width: 90%;
height: 89%;
transform-style: preserve-3d;
transition: transform .5s;
}
.card.flip {
transform: rotateY(180deg);
}
.frontSide,
.backSide {
border: solid 0px deeppink;
position: absolute;
width: 100%;
height: 100%;
padding: 24px 9px;
background-color: #ffd1d1;
backface-visibility: hidden;
}
.frontSide {
transform: rotateY(180deg);
}
.imageWithNum {
border: solid 0px deeppink;
position: absolute;
width: 100%;
height: 100%;
padding: 29px 14px 0px;
background-color: #ffd1d1;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.backSide {
background-color: #fff;
}
.cardSelector {
border: solid 8px #ff7b00;
}
<section class='gameContainer'>
<div class='game'>
<div class='row'>
<div class='selector'>
<div class='card' data-framework='star'>
<img class='frontSide' src='https://drive.google.com/uc?export=view&id=1A_zvQyMfZtwBqiVbYifebM07R15dUVD-'>
<img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
</div>
</div>
<div class='selector'>
<div class='card' data-framework='mushroom'>
<img class='frontSide' src='https://drive.google.com/uc?export=view&id=1VgbaVqfGrAw_RefRbMpaKNW4yuQRA5Lm'>
<img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
</div>
</div>
<div class='selector'>
<div class='card' data-framework='flower'>
<img class='frontSide' src='https://drive.google.com/uc?export=view&id=1Vae7dDSTQmvFlW0hoODvud_Y8_m-VVJk'>
<img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
</div>
</div>
<div class='selector'>
<div class='card' data-framework='coinTen'>
<img class='imageWithNum' src='https://drive.google.com/uc?export=view&id=1aTtc4B_GK_EbUyk6Uhl2HFh7uZrZLahr'>
<img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
</div>
</div>
<div class='selector'>
<div class='card' data-framework='chest'>
<img class='imageWithNum' src='https://drive.google.com/uc?export=view&id=1CYWq7iEShB2YG3bQPUCbihsW9_vzgEL_'>
<img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
</div>
</div>
<div class='selector'>
<div class='card' data-framework='mushroom'>
<img class='frontSide' src='https://drive.google.com/uc?export=view&id=1VgbaVqfGrAw_RefRbMpaKNW4yuQRA5Lm'>
<img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
</div>
</div>
</div>
</div>
</section>

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.

We Keep Coding

JavaScript is the programming language of the Web.

what is causing borders to appear in my modal? - javascript

The borders give you visual feedback that the element is focused. You can get rid of it by adding the following code in your Modal.css input:focus { outline: none; }

I solved the issue by tracing the problem to a Bootstrap cdn, I fixed removing the borders by adding a border: 0px solid black to make the border 0 pixels therefor nonexistent+

Related

How do I make this Hover effect on a Card component?

scroll eventListener not working in javascript

QuerySelectorAll won't work for shuffling the order of that list

Javascript Stop Propagation

Prices wont show up

Categories

Resources