Build a HTML5 Source Code Compressor Web App With Progressbar Using Vanilla Javascript Full Project For Beginners

 

 

 

index.html

 

 

<div id="wrap">
    <div id="over-wrap">
        <div id="content">
            <h1 id="title">HTML Compressor</h1> 
            <div id="button-wrap">
                <span id="close">x</span> 
                <textarea id="source"></textarea>
                <button id="top">How to Use?</button>
                <button id="bottom">Compress</button>
                <div class="la-anim-6">
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" viewBox="0 0 500 500">
                        <path id="la-anim-6-border" transform="translate(250, 250)" d="M 0 0 v -250 A 250 250 1 0 1 0 -250 z"></path>
                        <path id="la-anim-6-loader" transform="translate(250, 250) scale(0.9)" d="M 0 0 v -250 A 250 250 1 0 1 0 -250 z"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>
    <a href="http://www.koheishingai.com" target="_blank">
        <h1 id="logo">www.koheishingai.com</h1>
    </a>
</div>
</div>
<div id="shares">
    <div id="gcon"></div>
    <div id="fbcon"></div>
    <div id="twicon"></div>
</div>
<img id="wrap-background" src="http://p1.pichost.me/i/11/1344899.jpg">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Ubuntu:300' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

 

 

style.css

 

 

/* HTML Compressor: Default Styles */
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-family: 'Montserrat', sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

body {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #5f545a;
    color: #fff;
    font-size: 100%;
    line-height: 1.25;
}

div#wrap {
    background: url(http://p1.pichost.me/i/11/1344899.jpg);
    background-size: cover;
    width: 100%;
    height: 100%;
}

div#over-wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 800;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    pointer-events: none;
}

div#over-wrap.dark {
    opacity: 1;
}

div#content {
    margin: -210px 0 0 -170px;
    top: 47%;
    left: 50%;
    width: 340px;
    height: 420px;
    background-color: rgba(255, 255, 255, 0.87);
    box-shadow: inset 0px 0px 82px rgba(121, 110, 99, 0.25);
    font-family: 'Ubuntu', sans-serif;
    color: #e75854;
    opacity: 0;
    z-index: 1900;
    position: absolute;
    pointer-events: auto;
    padding: 23px;
}

div#content {
    overflow: hidden;
    -webkit-transition: opacity 0.32s 0.28s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.09s, left 0.4s 0.1s, margin 0.4s 0.1s;
    transition: opacity 0.32s 0.28s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.09s, left 0.4s 0.1s, margin 0.4s 0.1s;
}

div#content.visible {
    opacity: 1;
    top: 50%;
}

h1#title {
    text-align: center;
    margin: 12px 0;
    font-size: 0px;
    color: #e85657;
    cursor: default;
    opacity: 0;
}

h1#title.visible {
    opacity: 1;
    font-size: 36px;
}

h1#title {
    -webkit-transition: opacity 0.32s 0.28s, font-size 0.32s 0.16s;
    transition: opacity 0.32s 0.28s font-size 0.32s 0.16s;
}

h1#logo {
    position: absolute;
    width: 100%;
    bottom: -9px;
    font-size: 23px;
    text-align: center;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    opacity: 0;
    z-index: 4000;
}

h1#logo:hover {
    color: rgba(255, 255, 255, 0.47);
}

h1#logo.visible {
    opacity: 1;
    bottom: -6px;
}

h1#logo {
    -webkit-transition: color 0.32s 0.1s, opacity 0.32s 0.28s, bottom 0.32s 0.28s;
    transition: color 0.32s 0.1s opacity 0.32s 0.28s bottom 0.32s 0.28s;
}

div#button-wrap {
    margin-top: 112px;
}

button#top,
        button#bottom {
    position: relative;
    padding: 0 1em;
    border: none;
    background-color: #e85657;
    color: #f9f6e5;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    line-height: 71px;
    overflow: hidden;
    outline: none;
    width: 100%;
    font-size: 17px;
    height: 71px;
    margin-bottom: 8px;
    cursor: pointer;
}

button#top:hover,
        button#bottom:hover {
    background-color: #f9f6e5;
    color: #e85657;
}

button#top:active,
        button#bottom:active {
    box-shadow: inset 0px 0px 7px rgba(0, 0, 0, 0.17);
    background-color: #F3F1E1;
}

button#top,
        button#bottom {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

button#bottom.down {
    margin-top: 600px;
}

div#content,
        h1#logo,
        h1#title,
        span#close,
        textarea#source {
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

span#close {
    opacity: 1;
    -webkit-transition: opacity 0.2s 0.35s, -webkit-transform 0.2s 0.35s;
    transition: opacity 0.2s 0.35s, transform 0.2s 0.35s;
    -webkit-transform: scale(0.85);
    color: #AA8C70;
    font-size: 75%;
    position: absolute;
    top: -27px;
    right: -27px;
    z-index: 100;
    display: block;
    overflow: hidden;
    width: 3em;
    height: 3em;
    text-align: center;
    line-height: 3;
    cursor: pointer;
    font-size: 29px;
    opacity: 0;
}

span#close.visible {
    opacity: 1;
}

span#close:hover {
    color: #D5635F;
}

textarea#source {
    line-height: normal;
    font-family: inherit;
    font-size: 100%;
    margin: -89px 0 10px;
    height: 87px;
    padding: 10px;
    width: 100%;
    font-weight: 300;
    font-size: 20px;
    outline: none;
    background: rgba(240, 217, 97, 0.1);
    color: #b09a86;
    border: 2px solid #ebd3bd;
    resize: none;
    display: block;
    opacity: 0;
}

textarea#source {
    -webkit-transition: opacity 0.32s 0.1s, height 0.35s 0.15s;
    transition: opacity 0.32s 0.1s, height 0.21s 0.09s;
}

textarea#source.visible {
    opacity: 1;
    height: 313px;
}

textarea#source.visible2 {
    opacity: 1;
    height: 166px;
    margin-bottom: 16px;
}

textarea#source.visible3 {
    opacity: 1;
    height: 387px;
    margin-bottom: 16px;
    background: none;
    text-align: center;
    border: none;
    font-size: 24px;
    margin-top: -79px;
    color:#e85657;
}

svg:not(:root) {
    overflow: hidden;
}

.la-anim-6 svg {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: -1;
    display: block;
    width: 500px;
    height: 500px;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.4);
    transform: translateX(-50%) translateY(-50%);
    pointer-events: none;
    margin-top: 52px;
}

#la-anim-6-border {
    fill: #e85657;
    fill-opacity: 1;
}

#la-anim-6-loader {
    fill: rgb(230, 230, 230);
    fill-opacity: 1;
}

#shares {
    width: 96px;
    height: 31px;
    bottom: 3px;
    right: 1px;
    position: absolute;
    z-index: 9999;
}

div#gcon {
    float: right;
    margin-top: 0px;
    margin-right: -1px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

div#gcon::before {
    font-family: FontAwesome;
    content: "\f0d4";
    margin-left: 1px;
    font-size: 23px;
    line-height: 33px;
    color: rgba(255, 255, 255, 0.17);
    transition: all 0.3s 0s ease;
    -webkit-transition: all 0.3s 0s ease;
    cursor: pointer;
}

div#fbcon {
    float: right;
    margin-top: 0px;
    margin-right: -1px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

div#fbcon::before {
    font-family: FontAwesome;
    content: "\f082";
    margin-left: 1px;
    font-size: 23px;
    line-height: 33px;
    color: rgba(255, 255, 255, 0.17);
    transition: all 0.3s 0s ease;
    -webkit-transition: all 0.3s 0s ease;
    cursor: pointer;
}

div#twicon {
    float: right;
    margin-top: 0px;
    margin-right: -1px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

div#twicon::before {
    font-family: FontAwesome;
    content: "\f099";
    margin-left: -1px;
    font-size: 26px;
    line-height: 33px;
    color: rgba(255, 255, 255, 0.17);
    transition: all 0.3s 0s ease;
    -webkit-transition: all 0.3s 0s ease;
    cursor: pointer;
}

div#fbcon:hover::before,
        div#gcon:hover::before,
        div#twicon:hover::before {
    color: #B3B3B3;
}

    .la-anim-6 svg {
        -webkit-transform: scale(0.48) translateX(-530px) translateY(-530px);
    }

@media (max-width: 43.75em) {
    #shares {
        display: none;
    }

    div#content {
      margin-top: 340px;
    }
  
    .la-anim-6 svg {
        margin-top: -73px;
    }

    textarea#source.visible3 {
        margin-top: -104px;
        font-size: 12px;
        text-align: left;
    }
}

@media (max-height: 604px) {
    h1#logo.visible {
        bottom: -50px;
        opacity: 0;
    }
}

 

 

script.js

 

 

/* * 
 * HTML_Compressor.js v1.0.0 
 * http://www.koheishingai.com 
 * 
 * Licensed under the MIT license. 
 * https://www.opensource.org/licenses/mit-license.php 
 * 
 * Copyright 2014, koheishingai 
 * http://www.koheishingai.com 
 */
$(function () {
    var flg = {};
    var timer = null;

    function init() {
        flg.compress = false;
        flg.help = false;
        setTimeout(function () {
            $("#over-wrap").addClass("dark");
            $("#content").addClass("visible");
            $("#logo").addClass("visible");
            $("#title").addClass("visible")
        }, 800)
    }

    function reset() {
        $("#source").val("");
        $("#title").removeClass("visible");
        $("#bottom").removeClass("down");
        $(".la-anim-6 ").fadeOut();
        setTimeout(function () {
            $("#content").css({
                "height": "420px",
                "width": "340px",
                "margin": "-210px 0 0 -170px"
            });
            $("#source").removeClass('visible').removeClass('visible2').removeClass('visible3').css("opacity", "");
            setTimeout(function () {
                $("#close").removeClass("visible");
                $("#title").text("HTML Compressor").addClass("visible");
                $("#top").fadeIn();
                $("#bottom").fadeIn();
                flg.help = false;
                flg.compress = false
            }, 297)
        }, 390)
    }

    function compressor() {
        $(".la-anim-6 ").fadeIn();
        $("#title").removeClass("visible");
        $("#close").removeClass("visible");
        $("#source").removeClass('visible').removeClass('visible2').removeClass('visible3');
        $("#bottom").addClass("down");
        setTimeout(function () {
            $("#content").css({
                "height": "420px",
                "width": "340px",
                "margin": "-210px 0 0 -170px"
            });
            setTimeout(function () {
                var allHTML = $("#source").val();
                allHTML = allHTML.replace(/(\r\n|\n|\r|\t)/gm, "");
                allHTML = allHTML.replace(/\s+/g, " ");
                $("#source").val(allHTML);
                $("#title").text("Now Compressing...").addClass("visible");
                setTimeout(function () {
                    PieDraw()
                }, 490)
            }, 297)
        }, 390)
    }

    function deleteCElement(check) {
        $("#top").fadeOut("fast", function () {
            $("#close").addClass("visible")
        });
        if (check !== true) {
            $("#bottom").fadeOut("fast");
            setTimeout(function () {
                $("#source").addClass("visible3")
            }, 200)
        } else {
            if (window.innerWidth > 700) {
                $("#source").addClass("visible")
            } else {
                $("#source").addClass("visible2")
            }
        }
        $("#title").removeClass("visible");
        setTimeout(function () {
            if (window.innerWidth > 700) {
                var tempWidth = window.innerWidth;
                tempWidth = tempWidth * 0.75;
                var tempMargin = tempWidth / 2;
                tempMargin = tempMargin * -1;
                $("#content").css({
                    "height": "520px",
                    "width": tempWidth,
                    "margin": "-260px 0 0 " + tempMargin + "px"
                })
            } else {}
        }, 200)
    }

    function openHelp() {
        $("#title").text("How to Use?").addClass("visible")
    }

    function openComp() {
        $("#bottom").removeClass("down");
        $("#title").text("Compress HTML Source").addClass("visible")
    }
    //$("#wrap-background").load(function () {
        init()
    //});
    $("#top").click(function () {
        if (flg.help === false) {
            $("#source").val('1st > Click the COMPRESS Button\n\n2nd > Paste Your HTML Source Code to the Form\n\n3rd > Click the COMPRESS Button Again');
            deleteCElement(false);
            setTimeout(function () {
                openHelp()
            }, 470);
            flg.help = true
        } else {
            flg.help = false
        }
    });
    $("#bottom").click(function () {
        if (flg.compress === false) {
            $("#source").val('<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset="utf-8">\n        <title>HTML Compressor</title>\n        <link rel="stylesheet" href="styles/html_compressor.css">\n        <script src="/scripts/html_compressor.js">\n    </head>\n    <body>\n        <h1>Hello HTML Compressor!</h1>\n    </body>\n</html>');
            deleteCElement(true);
            setTimeout(function () {
                openComp()
            }, 470);
            flg.compress = true
        } else {
            compressor()
        }
    });
    $("#close").click(function () {
        $("#source").css("opacity", "0");
        reset()
    });
    $(window).resize(function () {
        if (timer !== false) {
            clearTimeout(timer)
        }
        timer = setTimeout(function () {
            if (window.innerWidth < 701) {
                reset()
            }
        }, 200)
    });
    var loader = document.getElementById('la-anim-6-loader'),
        border = document.getElementById('la-anim-6-border'),
        α = 0,
        π = Math.PI,
        t = 15,
        tdraw;

    function PieDraw() {
        α++;
        α %= 360;
        var r = (α * π / 180),
            x = Math.sin(r) * 250,
            y = Math.cos(r) * -250,
            mid = (α > 180) ? 1 : 0,
            anim = 'M 0 0 v -250 A 250 250 1 ' + mid + ' 1 ' + x + ' ' + y + ' z';
        loader.setAttribute('d', anim);
        border.setAttribute('d', anim);
        console.log(α);
        if (α != 0) {
            tdraw = setTimeout(PieDraw, t)
        }
        if (α === 0) {
            PieReset()
        }
    }

    function PieReset() {
        deleteCElement(true);
        setTimeout(function () {
            openComp()
        }, 470);
        clearTimeout(tdraw);
        var anim = 'M 0 0 v -250 A 250 250 1 0 1 0 -250 z';
        loader.setAttribute('d', anim);
        border.setAttribute('d', anim)
    }
    var inProgress = false;
    Array.prototype.slice.call(document.querySelectorAll('#la-buttons > button')).forEach(function (el, i) {
        var anim = el.getAttribute('data-anim'),
            animEl = document.querySelector('.' + anim);
        el.addEventListener('click', function () {
            if (inProgress) return false;
            inProgress = true;
            classie.add(animEl, 'la-animate');
            if (anim === 'la-anim-6') {
                PieDraw()
            }
            setTimeout(function () {
                classie.remove(animEl, 'la-animate');
                if (anim === 'la-anim-6') {
                    PieReset()
                }
                inProgress = false
            }, 6000)
        })
    })
});

Leave a Reply