IP CALCULATOR

index.html

<!--make change view to full page  -->

    <div id="main">
        <div class="sisi cal">
            <div class="form">
                <div class="isi">
                    <div class="pageHeader">
                        IP Calculator
                    </div>
                    <div id="form-IP">
                        <input type="text" class="borderLine" name="ip" id="ip" placeholder="Masukkan IP Address">
                        <p class="help abu">Example: 192.168.0.0</p>
                        <div id="range">
                            <p>
                                <label for="amount" class="help">Per : </label>
                                <span id="amount"></span>
                            </p>
                            <div id="slider-Per"></div>
                        </div>
                        <p class="help abu">Slide to change value</p>

                    </div>

                </div>

            </div>
            <div class="tombol">
                <div id="kirim">CALCULATION</div>
            </div>
        </div>
        <div class="sisi hasil addMargin">
            <div id="konten">
                <div class="isi">
                    <div class="pageHeader">
                        Result
                        <span id="kanan">&#xd7;</span>
                    </div>
                    <div id="tag">
                        <div id="judul" class="hasilJudul">
                            Network Address
                        </div>
                        <div id="network" class="spasi hasilJudul">
                        </div>
                    </div>
                    <div id="tag">
                        <div id="judul" class="hasilJudul">
                            Broadcast Address
                        </div>
                        <div id="broadcast" class="spasi hasilJudul">
                        </div>
                    </div>
                    <div id="tag">
                        <div id="judul" class="hasilJudul">
                            Subnet Mask
                        </div>
                        <div id="dnsHasil" class="spasi hasilJudul">
                        </div>
                    </div>
                    <div id="tag">
                        <div id="judul" class="hasilJudul">
                            Wildcard Mask
                        </div>
                        <div id="wildCard" class="spasi hasilJudul">
                        </div>
                    </div>
                    <div id="tag">
                        <div id="judul" class="hasilJudul">
                            First Host
                        </div>
                        <div id="firstHost" class="spasi hasilJudul">
                        </div>
                    </div>
                    <div id="tag">
                        <div id="judul" class="hasilJudul">
                            Last Host
                        </div>
                        <div id="lastHost" class="spasi hasilJudul">
                        </div>
                    </div>

                </div>
            </div>
            <div id="copyright">
                <div class="bona">
                    Made with <span class="red">&#x2764;</span> by Bona Tua
                </div>
            </div>
        </div>
    </div>

ip-calculator.markdown

IP CALCULATOR

ip calculator my first pen

A Pen by bona on CodePen.

License.

script.js

$(document).ready(function () {
    var per = 0;

    function cekIP(ip) {
        ip = ip.split(".");
        var betul = true;
        if (ip.length != 4)
            betul = false;
        else {
            for (var i = 0; i < ip.length; i++) {
                if (parseInt(ip[i]) >= 0 && parseInt(ip[i]) <= 255) {
                    for (var j = 0; j < ip[i].length; j++) {
                        if (parseInt(ip[i][j]) >= 0 && parseInt(ip[i][j]) <= 255) {
                            betul = true;
                        } else {
                            betul = false;
                            break;
                        }
                    }
                    if (betul == false)
                        break;
                } else {
                    betul = false;
                    break;
                }
            }

        }
        return betul;
    }
    $("#kirim").click(function () {
        if (cekIP($("#ip").val()) == false) {
            $("#main .cal").toggleClass("shake");
            $("input#ip").addClass("error");
            $("p.help").html("Wrong Format");
            $("p.help").removeClass("abu").addClass("red");
            $("#main .hasil").removeClass("removeMargin");
            $("#main .cal .form").removeClass("shadow");

        } else {
            $("input#ip").removeClass("error");
            $("p.help").html("Example: 192.168.0.0");
            $("p.help").removeClass("red").addClass("abu");
            $("#main .hasil").addClass("removeMargin");
            $("#main .cal .form").addClass("shadow");


            /*IP*/
            var ip = $("#ip").val();

            ip = ip.split(".");

            function jadiInt(arr) {
                for (var i = 0; i < arr.length; i++)
                    arr[i] = parseInt(arr[i]);
                return arr;
            }
            ip = jadiInt(ip);
            var listIP = [8, 16, 24, 32];
            var dns = [255, 255, 255, 255];
            var daftarBiner = [0, 1, 3, 7, 15, 31, 63, 127, 255];
            var wildCard = [0, 0, 0, 0];
            var indexDnsNsisaL = [];

            function cariAntara(n) {
                var an = 0;
                var arr = [];
                var index = 0;
                for (var i = 0; i < listIP.length; i++) {
                    if (listIP[i] > n) {
                        arr.push(listIP[i] - n);
                        arr.push(index);
                    }
                    index++;
                }
                return arr;
            }
            var sisa = cariAntara(per)[0];
            /*DNS*/
            var indexDns = cariAntara(per)[1];

            function cariDns(index) {
                for (var i = 0; i < dns.length; i++) {
                    if (i > index)
                        dns[i] = 0;
                    else if (i == index)
                        dns[i] = dns[i] - daftarBiner[sisa];
                }
            }
            cariDns(indexDns);
            var dnsHasil = "";

            function cetak(arr) {
                var hasil = "";
                for (var i = 0; i < arr.length; i++) {
                    hasil += arr[i];
                    i < arr.length - 1 ? hasil += "." : "";
                }
                return hasil;
            }
            dnsHasil = cetak(dns);
            $("#dnsHasil").html(dnsHasil);

            $("#network").html(cetak(ip));
            var firstHost = ip;
            firstHost[3] += 1;

            $("#firstHost").html(cetak(firstHost));
            /*Broadcast*/
            function cariBroadcast() {
                for (var i = 0; i < ip.length; i++) {
                    if (i > indexDns)
                        ip[i] = 255;
                    else if (i == indexDns)
                        ip[i] = ip[i] + daftarBiner[sisa];
                }
            }
            cariBroadcast();
            ip[3] -= 1;
            $("#broadcast").html(cetak(ip));
            var lastHost = ip;
            lastHost[3] -= 1;
            $("#lastHost").html(cetak(lastHost));
            /*WildCard*/
            function cariWildCard() {
                for (var i = 0; i < wildCard.length; i++)
                    wildCard[i] = Math.abs(dns[i] - 255);
            }
            cariWildCard();
            $("#wildCard").html(cetak(wildCard));
        }
    });

    $("span#kanan").click(function () {
        $("#main .hasil").removeClass("removeMargin");
        $("#main .cal .form").removeClass("shadow");
    });
    $("#slider-Per").slider({
        range: "max"
        , min: 1
        , max: 30
        , value: 1
        , slide: function (event, ui) {
            $("#amount").html(ui.value);
            per = ui.value;
        }
    });
    $("#amount").val($("#slider-Per").slider("value"));



});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

style.css

body {
    background: #AEC4E9;
    font-family: calibri;
}
/*Main Layout*/
#main {
    width: 50%;

    margin: 5vh auto 0px auto;
    color: #5d5d5d;
}

.sisi {
    float: left;
    height: 90vh;
}

#main .cal {
    position: relative;
    background: white;
    width: 55%;
    z-index: 1;
}

#main .hasil {
    height: 90%;
    margin-top: 5%;
    position: relative;
    z-index: 0;
    width: 45%;
    background: #fff;
    transition: 0.5s ease-in-out;
}
div#tag {
    height: 1em;
    padding: 0.2em 0;
}
#main .hasil #tag .spasi:before {
    content: ": ";
}

#main .hasil #tag .hasilJudul {
    width: 49%;
    float: left;
}

.addMargin {
    margin-left: -45%;
}

.removeMargin {
    margin-left: 0%;
}

.isi {
    padding: 20px;
}

.pageHeader {
    font-size: 28px;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    margin-bottom: 0.5em;
}

#main .cal .form {
    height: 85%;
}

#main .cal input[type="text"] {
    width: 96%;
    padding: 3% 2%;
    color: #666;
}

#form-IP {
    margin-top: 2em;
}

.shadow {
    box-shadow: 1px 50px 10px rgba(0, 0, 0, 0.2);
}

#main .cal .tombol {
    height: 15%;
    font-size: 20px;
    line-height: 13.5vh;
    text-align: center;
    background: #FFF79A;
}

span#kanan {
    float: right;
}
p.help {
    font-size: 0.8em;
    margin: 0.5em 0;
    opacity: 0.8;
}
.borderLine {
    border: none;
    border: 1px solid #eee;
}
.error {
    border: none;
    border: 1px solid #FE566E;
    transition: 1s linear;
}
span#close {
    position: absolute;
    right: 20px;
    top: -45vh;
    transition: 0.5 linear;
}
#main .hasil #konten{
    height: 90%;
}
#main .hasil #copyright{
    height: 10%;
    text-align: center;
}
#copyright .bona{border-top: 1px solid #eee;padding: 1em 0;}
/*End Main*/
/*Warna*/

.abu {
    color: #bbb;
}

.red {
    color: #FE566E;
}
.ungu {
    background: #8781BD;
    border: 1px solid #8781BD;
}

/*End Warna*/


/*Animation from Animate.css*/

@keyframes shake {
    0%,
    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translateX(-10px);
        -ms-transform: translateX(-10px);
        transform: translateX(-10px);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
        transform: translateX(10px);
    }
}

.shake {
    animation: shake 1s linear;
}


/*End Animation*/


/*Custom Slider Range*/

.ui-widget-content {
    border: 1px solid #eee;
}
.ui-widget-header {
    background: #eee;
}
#range {
    margin-top: 1em;
}
#slider-Per {
    margin-top: 1em;
}
.ui-corner-all {
    border-radius: 8px;
}
.ui-slider-horizontal {
    height: .4em;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -.3em;
    margin-left: -.6em;
}
.ui-slider .ui-slider-handle {
    width: .9em;
    height: .9em;
}
.ui-draggable,
.ui-droppable {
    background-position: top;
}

/*End Custom*/

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />