Responsive grid with CSS Grids

Responsive grid with CSS Grids

by zerrax

HTML

<div id="slide" style="height:0;">
    <div class="colorize">
        <div class="row">
            <div class="col">
                <label class="line_form">Min Quantity (usd):<input value="100" id="mq" type="text"></label>
            </div>
            <div class="col">
                <label class="line_form">Big Quantity (usd):<input value="10000" id="bq" type="text"></label>
            </div>
        </div>
        <div class="row">
            <button class="tigger">Close</button>
        </div>

    </div>
</div>
<button type="button" class="tigger">Menu</button>

<ul id="output">
    <li>
        <div class="chevron top"></div>
        <div>10h30</div>
        <div>7,750$</div>
        <div>0.05</div>
        <div>Bitfinex</div>

    </li>

</ul>

CSS

body {
    padding: 20px;
    font-family: Helvetica;
    background-color: #303036;
    overflow: hidden;
}

ul {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 10px;
    overflow: hidden;
}

li {
    color: white;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    padding: 0px;
    font-size: 14px;
    display: grid;
    grid-template-columns: 50px calc((100% / 4) - 15.5px) calc((100% / 5.5) - 15.5px) calc((100% / 4) - 15.5px) calc((100% / 4) - 15.5px);
    grid-gap: 10px;
    text-align: center;
}

.info {
    text-align: center;
    font-size: 13px;
    padding-top: 20px;
    color: #fff;
}

ul {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column-reverse;
}

ul li {
    padding: 5px;
    margin-bottom: 5px;
}

ul>li>span {
    padding: 0 10px;
}

.chevron::before {
    border-style: solid;
    border-width: 0.25em 0.25em 0 0;
    content: '';
    display: inline-block;
    height: 0.45em;
    left: 0.15em;
    position: relative;
    top: 0.40em;
    transform: rotate(-45deg);
    vertical-align: top;
    width: 0.45em;
}

.chevron.right:before {
    left: 0;
    transform: rotate(45deg);
}

.chevron.bottom:before {
    top: 0;
    transform: rotate(135deg);
    color: white;
}

.chevron.top:before {
    color: white;
}

#slide {
    overflow-y: auto;
    z-index: 100;
    background: none;
}

.colorize {
    background: #292938;
}

h1 {
    font-size: 20px;
    line-height: 20px;
    background-color: pink;
    margin-bottom: 20px;
}

p {
    font-size: 16px;
    line-height: 20px;
    background-color: pink;
    margin-bottom: 20px;
}

label {
    color: #eee;
}

button {
    width: 100%;
    height: 20px;
    border: 1px solid #888;
    border-radius: 5px;
    margin: 0 20px 20px 0;
    background-color: #ddd;
}

input,
button {
    text-align: center;
}

input,
button:focus {
    outline: 0;
}

button:hover {
    cursor: pointer;
...

JavaScript

var bigbuy = 10000;
var min_buy = 100;

function create_new_order(u_d, h, p, q, e, opp = 0) {
    if (opp < 0.1) {
        opp = 0.1;
    }
    var ul_data = document.getElementById("output");
    if (ul_data.getElementsByTagName("li").length > 50) {
        ul_data.removeChild(ul_data.getElementsByTagName("li")[0]);
    }
    var li = document.createElement('li');

    var div1 = document.createElement('div');
    if (u_d == "u") {
        li.style.background = "rgba(33, 219, 67,1)"
        li.style.opacity = opp;

        div1.className = "chevron top";
    } else {
        li.style.background = "rgba(201, 30, 56,1)"
        li.style.opacity = opp;
        div1.className = "chevron bottom";
    }
    var div2 = document.createElement('div');
    div2.innerHTML = h;
    var div3 = document.createElement('div');
    div3.innerHTML = p;
    var div4 = document.createElement('div');
    div4.innerHTML = q;
    var div5 = document.createElement('div');
    div5.innerHTML = e;
    li.appendChild(div1);
    li.appendChild(div2);
    li.appendChild(div3);
    li.appendChild(div4);
    li.appendChild(div5);
    document.getElementById('output').appendChild(li);


}
const w_b = new WebSocket('wss://www.bitmex.com/realtime?subscribe=trade:XBTUSD');
const w = new WebSocket('wss://api-pub.bitfinex.com/ws/2')
w_b.onmessage = function(msg) {
    try {
        var currentdate = new Date();
        var datetime = currentdate.getHours() + ":" +
            currentdate.getMinutes() + ":" +
            currentdate.getSeconds();
        var obj = JSON.parse(msg.data);
        var a, b, c, d, e;
        b = obj['data'][0]['side'];
        if (b == "Buy") {
            a = "u";
        } else {
            a = "d";
        }
        d = obj['data'][0]['size'];
        c = obj['data'][0]['price'];
        background_oppacity(d);
        if (d > min_buy) {
            create_new_order(a, datetime, c, d + "USD", "Bitmex", background_oppacity(c));
        }
    } catch (ex)...