Troubles making styling off cards reference javascript

Question

I've got troubles making a styling for an array,

Here is my code:

This is my HTML:

<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<script src="card.js"></script>
<script src="Deck.js"></script>
<link rel="stylesheet" href="card.css">
</head>
<body onload = "addCard()">
</body>
</html>

Here is my first JavaScript file with the array (Deck) which refers to my second JavaScript file with the card:

var Deck = new Array();
function addCard(){
Deck[0] = new Card("test");
Deck[1] = new Card("1234");
}

Here is my second JavaScript file with the card:

class Card{
constructor(myText){
document.write("<div class = \"card\">");
document.write("<div class = \"back\">");
document.write("<div class = \"up\"><\/div>");
document.write("<div class=\"down\"><\/div>");
document.write("<hr class = \"arrowUpLeft\">");
document.write("<hr class = \"arrowDownRight\">");
document.write("<hr class = \"arrowUpRight\">");
document.write("<hr class = \"arrowDownLeft\">");
document.write("<div class = \"front\">");
document.write("<p id =\"text_card\">");
document.write(myText);
document.write("<\/p>");
document.write("<\/div>");
document.write("<\/div>");
document.write("<\/div>");
}
}

And this is my CSS:

.card{
    height: 336px;
    width: 240px;
    border: 4px solid transparent;
    border-radius: 50px;
    box-sizing: border-box;
    z-index: 2;
    position: relative;
    bottom: 100%;
}

.card:hover > .back{
    animation: cardturn 1s;
    background-color: blue;
}

.card:hover>.back :not(.front), .card:hover>.back :not(.front)>*{
    animation: cardturn 1s;
    animation: setvisibilityBackInvisible 1s;
    visibility: hidden;
}

.card:hover>.back>.front, .card:hover>.back>.front>*{
    animation: setvisibilityBackVisible 1s;
    visibility: visible;
}

.back{
    height: 328px;
    width: 232px;
    background-color: red;
    border-radius:46px;
    z-index: 2;
    border: 4px solid black;
    animation: cardturn2 1s;
}

.front, .front>*{
    animation: setvisibilityBackInvisible 1s;
    visibility: hidden;
}

.back>:not(.front), .back>:not(.front)>*{
    animation: setvisibilityBackVisible 1s;
    visibility: visible;
}

.up{
    position: relative;
    top: 114px;
    left: 66px;
    height: 0px;
    width: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid blue;
    background-color: transparent;
}

.down{
    position: relative;
    top: 114px;
    left: 66px;
    height: 0px;
    width: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid blue;
    background-color: transparent;
}

.arrowUpLeft{
    position: relative;
    top: -22px;
    left:-25px;
    width: 214px;
    transform: rotate(45deg);
    border: 2px solid black;
}

.arrowDownRight{
    position: relative;
    top: 118px;
    left:25px;
    width: 214px;
    transform: rotate(45deg);
    border: 2px solid black;
}

.arrowUpRight{
    position: relative;
    top: 4px;
    left:-25px;
    width: 70px;
    transform: rotate(-45deg);
    border: 2px solid black;
}

.arrowDownLeft{
    position: relative;
    top: 44px;
    left:25px;
    width: 70px;
    transform: rotate(-45deg);
    border: 2px solid black;
}

@keyframes cardturn{
    0%,100%{
        transform: scale(1,1);
    }
    50%{
        transform: scale(0,1);
        background-color: red;
    }
    51%{
        background-color: blue;
    }
    0%{
        background-color: red;
    }
    100%{
        background-color:blue;
    }
}

@keyframes cardturn2{
    0%,100%{
        transform: scale(1,1);
    }
    50%{
        transform: scale(0,1);
        background-color: blue;
    }
    51%{
        background-color: red;
    }
    100%{
        background-color: red;
    }
    0%{
        background-color: blue;
    }
}

@keyframes cardturn3{
    0%,100%{
        transform: scale(1,1);
    }
    50%{
        transform: scale(0,1);
    }
}

@keyframes setvisibilityBackInvisible{
    0%,50%{
        visibility: visible;
    }
    51%,100%{
        visibility: hidden;
    }
}

@keyframes setvisibilityBackVisible{
    0%,50%{
        visibility: hidden;
    }
    100%{
        visibility: visible;
    }
}

I hope you can help me guys, I would thank you very much. Even if you could just only explain why the CSS doesn't work could explain I actually would be very happy, because I then know what to do.

**What is your problem and what is your question** ? You've pretty much said, "here is the code I have, I hope you can help" Help with what? Please be direct, specific and clear. See [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — ProEvilz, Oct 27 '17 at 12:02

score 0 · Answer 1 · answered Oct 27 '17 at 12:03

0

You need to remove the spaces:

"<div class = \"card\">"

Should be:

"<div class=\"card\">"

answered Oct 27 '17 at 12:03

beingalex

2,416
4
32
71

Is this makes any sense, what are you trying to do – Man Programmer Oct 27 '17 at 12:07
Thanks for your help, now I think I can get to work on – Aaron Slots Oct 28 '17 at 17:11

score 0 · Answer 2 · answered Oct 27 '17 at 13:00

You are triggering your function on onload <body onload="addCard()">. I think that it could be that when you use document.write at that time, the document has been closed and it will automatically calls document.open, which will clear the document.

For more information, you can check this post.

Maybe instead of using document.write, you can create an element using document.createElement and add your html.

Note that you are duplicating the id's <p id =\"text_card\">

class Card {
    constructor(myText) {
        var elm = document.createElement('div');
        elm.setAttribute('class', "card");

        var html = '<div class = "back">';
        html += '<div class = "up"></div>';
        html += '<div class="down"></div>';
        html += '<hr class = "arrowUpLeft">';
        html += '<hr class = "arrowDownRight">';
        html += '<hr class = "arrowUpRight">';
        html += '<hr class = "arrowDownLeft">';
        html += '<div class = "front">';
        html += '<p id ="text_card">';
        html += myText;
        html += "</p>";
        html += "</div>";
        html += "</div>";

        elm.innerHTML = html;
        document.body.appendChild(elm);
    }
}

var Deck = new Array();

function addCard() {
    Deck[0] = new Card("test");
    Deck[1] = new Card("1234");
}

.card{
    height: 336px;
    width: 240px;
    border: 4px solid transparent;
    border-radius: 50px;
    box-sizing: border-box;
    z-index: 2;
    position: relative;
    bottom: 100%;
}

.card:hover > .back{
    animation: cardturn 1s;
    background-color: blue;
}

.card:hover>.back :not(.front), .card:hover>.back :not(.front)>*{
    animation: cardturn 1s;
    animation: setvisibilityBackInvisible 1s;
    visibility: hidden;
}

.card:hover>.back>.front, .card:hover>.back>.front>*{
    animation: setvisibilityBackVisible 1s;
    visibility: visible;
}

.back{
    height: 328px;
    width: 232px;
    background-color: red;
    border-radius:46px;
    z-index: 2;
    border: 4px solid black;
    animation: cardturn2 1s;
}

.front, .front>*{
    animation: setvisibilityBackInvisible 1s;
    visibility: hidden;
}

.back>:not(.front), .back>:not(.front)>*{
    animation: setvisibilityBackVisible 1s;
    visibility: visible;
}

.up{
    position: relative;
    top: 114px;
    left: 66px;
    height: 0px;
    width: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid blue;
    background-color: transparent;
}

.down{
    position: relative;
    top: 114px;
    left: 66px;
    height: 0px;
    width: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid blue;
    background-color: transparent;
}

.arrowUpLeft{
    position: relative;
    top: -22px;
    left:-25px;
    width: 214px;
    transform: rotate(45deg);
    border: 2px solid black;
}

.arrowDownRight{
    position: relative;
    top: 118px;
    left:25px;
    width: 214px;
    transform: rotate(45deg);
    border: 2px solid black;
}

.arrowUpRight{
    position: relative;
    top: 4px;
    left:-25px;
    width: 70px;
    transform: rotate(-45deg);
    border: 2px solid black;
}

.arrowDownLeft{
    position: relative;
    top: 44px;
    left:25px;
    width: 70px;
    transform: rotate(-45deg);
    border: 2px solid black;
}

@keyframes cardturn{
    0%,100%{
        transform: scale(1,1);
    }
    50%{
        transform: scale(0,1);
        background-color: red;
    }
    51%{
        background-color: blue;
    }
    0%{
        background-color: red;
    }
    100%{
        background-color:blue;
    }
}

@keyframes cardturn2{
    0%,100%{
        transform: scale(1,1);
    }
    50%{
        transform: scale(0,1);
        background-color: blue;
    }
    51%{
        background-color: red;
    }
    100%{
        background-color: red;
    }
    0%{
        background-color: blue;
    }
}

@keyframes cardturn3{
    0%,100%{
        transform: scale(1,1);
    }
    50%{
        transform: scale(0,1);
    }
}

@keyframes setvisibilityBackInvisible{
    0%,50%{
        visibility: visible;
    }
    51%,100%{
        visibility: hidden;
    }
}

@keyframes setvisibilityBackVisible{
    0%,50%{
        visibility: hidden;
    }
    100%{
        visibility: visible;
    }
}

<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<script src="card.js"></script>
<script src="Deck.js"></script>
<link rel="stylesheet" href="card.css">
</head>
<body onload = "addCard()">
</body>
</html>

Troubles making styling off cards reference javascript

2 Answers2