// Author: Ali Soueidan
// Author URI: https//: www.alisoueidan.com

-
    let item = [
        {
            "id": "login",
            "icon": "fas fa-sign-in-alt",
        },
        {
            "id": "love",
            "icon": "fas fa-heart",
        },
        {
            "id": "community",
            "icon": "fas fa-users",
        },
        {
            "id": "photography",
            "icon": "fas fa-camera",
        },
        {
            "id": "communication",
            "icon": "fas fa-comment-alt",
        },
        {
            "id": "call",
            "icon": "fas fa-phone",
        },
    ]

#container 

    h2 Achievement-Box

    .content

        each id, i in item
            .achievement
                .bar
                    .img-box
                        i(class="" + item[i].icon + "")
                    .progress(class="" + item[i].id + "")
                    p 
                        span(class="" + item[i].id + "-counter")
                            | 0
                        | /5 
                        =item[i].id
    
#button-bar 
    each achievement, i in ['login', 'love', 'community', 'photography', 'communication', 'call']
        button(name="" + item[i].id + "" title="click to fill item-achievement bar")
            i(class="" + item[i].icon + "")

a( href='http://bit.ly/2JPuBjx' target="_blank" class='reference' ) 🔗 alisoueidan.com

// Author: Ali Soueidan
// Author URI: https//: www.alisoueidan.com
*
    margin: 0px
    padding: 0px
    box-sizing: border-box
    border: 0px
    outline: 0
    background-repeat: no-repeat
    appearance: none
    border-radius: 0

////
// Gap-Factor
$gap: 10px

////
// Animations

// Standard animation mixin
=animate($name, $delay, $duration, $count:"")
    animation-name: $name
    animation-delay: $delay+s
    animation-duration: $duration+s
    animation-iteration-count: $count
    animation-fill-mode: forwards

// Vibration animation
@keyframes fill 
    0%
        border-radius: 0 $gap*2 $gap*2 0
    50%
        border-radius: 0 $gap*1.5 $gap*1.5 0
    100%
        border-radius: 0 $gap*2 $gap*2 0

////
// Color-Mixins

// Main-Color
$main: rgb(255, 255, 255)

// Sub-Color
=sub( $value, $transparency )
    @if $value == "bg"
        background-color: rgba( 120, 110, 255, $transparency )
    @if $value == "color"
        color: rgba( 120, 110, 255, $transparency )
    @if $value == "fill"
        fill: rgba( 120, 110, 255, $transparency )
    @if $value == "stroke"
        stroke: rgba( 120, 110, 255, $transparency )
    @if $value == "rgba"
        rgba( 120, 110, 255, $transparency )

// Accent-Color
=accent( $value, $transparency )
    @if $value == "bg"
        background-color: rgba( 30, 30, 30, $transparency )
    @if $value == "color"
        color: rgba( 30, 30, 30, $transparency )
    @if $value == "fill"
        fill: rgba( 30, 30, 30, $transparency )
    @if $value == "stroke"
        stroke: rgba( 30, 30, 30, $transparency )
    @if $value == "rgba"
        rgba( 30, 30, 30, $transparency )

// Media-Query mixin
=query( $setsize )
    @media screen and ( min-width: $setsize+px )
        @content

body 
    display: flex 
    flex-direction: column
    justify-content: center 
    align-items: center
    margin: 0
    padding: $gap*2
    box-sizing: border-box
    height: 100vh
    background: radial-gradient(#9E98FE,#93278F)

#container
    margin-bottom: $gap*4
    padding: $gap*2
    width: 100%	
    height: auto
    background: $main
    border-radius: $gap*2
    max-width: 800px
    filter: drop-shadow(0 0 20px rgba(0,0,0,.25))

    h2 
        font-size: 22px
        font-family: 'Open Sans', sans-serif

    .content
        +query(600)
            display: grid
            grid-gap: $gap*2
            grid-template-columns: repeat(2, 1fr)

    .achievement
        margin-top: $gap*2
        width: 100%

        .bar
            position: relative
            display: flex
            align-items: center
            width: 100%
            height: $gap*4
            +accent(bg,.05)
            border-radius: $gap*4
            overflow: hidden

            .img-box 
                position: relative
                z-index: 1
                display: flex
                justify-content: center
                align-items: center
                margin-right: $gap
                width: $gap*4
                height: $gap*4
                +accent(bg,1)
                border-radius: 50%

                i 
                    color: #fff

            p 
                position: relative
                z-index: 1
                +accent(color,1)
                font-size: 18px
                font-family: 'Open Sans', arial, sans-serif

            .progress
                position: absolute
                top: 0
                left: 0
                width: $gap*4
                height: 100%
                background: linear-gradient(30deg, #64a9ff, #93ffa0)
                border-radius: $gap*2
                transition: 1s ease 

                &.running 
                    +animate(fill, 0, 1, $count:"infinite")

#button-bar
    display: grid
    grid-gap: $gap*4
    grid-template-columns: repeat(3, 1fr)
    +query(600)
        grid-gap: $gap*4
        grid-template-columns: repeat(6, 1fr)

    button 
        width: $gap*4
        height: $gap*4
        background: #ffffff
        border-radius: 50%
        filter: drop-shadow(0 0 20px rgba(0,0,0,.25))
        &:hover, &:active, &:focus
            cursor: pointer
            transition: .2s ease
            transform: scale(1.05)
            filter: drop-shadow(0 0 5px rgba(255,255,255,.5))
        i 
            font-size: 1rem


.reference
    position: absolute
    right: $gap 
    bottom: $gap
    color: #fff
    font-family: arial
    text-decoration: none

// Author: Ali Soueidan
// Author URI: https//: www.alisoueidan.com

let progress = document.querySelectorAll("button");

let i = 0;
progress.forEach( function() {

    progress[i].addEventListener( "click", function() {

        let getSelection = this.getAttribute("name");
        let setSelection = document.querySelector("." + getSelection);
        let getCounter = document.querySelector("." + getSelection + "-counter").textContent;
        let setCounter = Number.parseInt(getCounter) + 1;

        let currentWidth = setSelection.style.width;
        let newWidth = Number.parseInt(currentWidth) + 20;

        setSelection.classList.add("running");
        document.querySelector("#container").classList.add("running");

        setTimeout(() => {
            setSelection.classList.remove("running");
            document.querySelector("#container").classList.add("running");
        }, 1000);

        if ( isNaN(newWidth) ) {
            setSelection.style.width = "20%";
        } else {
            if ( newWidth <= 100) {
                setSelection.style.width = newWidth + "%";
            } else {
                setSelection.style.width = "0%";
                setCounter = 0;
            }
        };

        setSelection.getAttribute("style");
        document.querySelector("." + getSelection + "-counter").textContent = setCounter;
    })

    ++i;

})