Responsive grid with CSS Grids

Responsive grid with CSS Grids

by zerrax

HTML

<button type="button" id="ini" class="tigger"></button>

<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">
            <div class="col">
                <label class="line_form">Bear color:<input id="rg_bear" class="jscolor" value="d42c2c"></label>
            </div>
            <div class="col">
                <label class="line_form">Bull color:<input id="rg_bull" class="jscolor" value="2cd44b"></label>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <label class="line_form">Bg color:<input id="bg" class="jscolor" value="303036"></label>
            </div>
        </div>
        <div class="row">
            <button class="tigger">Close</button>
        </div>

    </div>
</div>

<ul id="output">
    <li></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;
    margin-top: 10px;
    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;
    position: absolute;
    left: 10px;
    right: 10px;

}

.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:...

JavaScript

var bigbuy = 10000;
var min_buy = 100;

var rgbull = "rgba(44, 212, 75,";
var rgbear = "rgba(212, 44, 44,";

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 = rgbull+opp+")";
        //li.style.opacity = opp;

        div1.className = "chevron top";
    } else {
        li.style.background = rgbear+opp+")";
       // 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'];
        if (d > min_buy) {
            create_new_order(a, datetime, c, d + "USD", "Bitmex", background_oppacity(d));
        }
 ...