1

I wanted to make poker charts for my self. I want to make all combination of cards in square divs.

I figured out how to make divs with id and text from array with all cards. I find out how to fit 13 pairs in line.

But I cant find out how to make this square responsible.

I tried to use height auto, percent of wrapping div - its only work if height and width was fixed. If i use height and width with percent everything collapse.

const cards = ["AA", "AKs", "AQs", "AJs", "ATs", "A9s", "A8s", "A7s", "A6s", "A5s", "A4s", "A3s", "A2s", "AKo", "KK", "KQs", "KJs", "KTs", "K9s", "K8s", "K7s", "K6s", "K5s", "K4s", "K3s", "K2s", "AQo", "KQo", "QQ", "QJs", "QTs", "Q9s", "Q8s", "Q7s", "Q6s", "Q5s", "Q4s", "Q3s", "Q2s", "AJo", "KJo", "QJo", "JJ", "JTs", "J9s", "J8s", "J7s", "J6s", "J5s", "J4s", "J3s", "J2s", "ATo", "KTo", "QTo", "JTo", "TT", "T9s", "T8s", "T7s", "T6s", "T5s", "T4s", "T3s", "T2s", "A9o", "K9o", "Q9o", "J9o", "T9o", "99", "98s", "97s", "96s", "95s", "94s", "93s", "92s", "A8o", "K8o", "Q8o", "J8o", "T8o", "98o", "88", "87s", "86s", "85s", "84s", "83s", "82s", "A7o", "K7o", "Q7o", "J7o", "T7o", "97o", "87o", "77", "76s", "75s", "74s", "73s", "72s", "A6o", "K6o", "Q6o", "J6o", "T6o", "96o", "86o", "76o", "66", "65s", "64s", "63s", "62s", "A5o", "K5o", "Q5o", "J5o", "T5o", "95o", "85o", "75o", "65o", "55", "54s", "53s", "52s", "A4o", "K4o", "Q4o", "J4o", "T4o", "94o", "84o", "74o", "64o", "54o", "44", "43s", "42s", "A3o", "K3o", "Q3o", "J3o", "T3o", "93o", "83o", "73o", "63o", "53o", "43o", "33", "32s", "A2o", "K2o", "Q2o", "J2o", "T2o", "92o", "82o", "72o", "62o", "52o", "42o", "32o", "22" 
]

function blind(){

const toAdd = document.getElementById("display");

for(var i=0; i < 169; i++){
   var newDiv = document.createElement('div');
   newDiv.id = cards[i];
   newDiv.className = 'fold';
   newDiv.innerHTML = cards[i];
   toAdd.appendChild(newDiv);
}

document.appendChild(toAdd);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#wrapper {
    max-width: 1000px;
    margin: 0 auto 0 auto;
    background-color: green;
}

#display {
    max-width: 600px;
    height: 600px;
    margin: 10px auto;
    background-color: yellow;
    border: 2px solid black;
    
}

#display::after{
    content: "";
    display: block;
    padding-bottom: 100%;
}

.fold {
    width: 7.1923%;
    height: 7.1923%;
    float: left;
    background-color: aqua;
    margin: 0.25%;
    text-align: center;
}
<!DOCTYPE html>
<html lang="pl">

<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>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
    <script  type="text/javascript" src="script.js"></script>
</head>

<body onload="blind()">
    <div id="wrapper">
        <div id="display">
        </div>

    </div>
</body>

</html>
Gloki
  • 11
  • 2

0 Answers0