Skip to content
Advertisements

JS Array Card Flip

CODEPEN:

JS Array Card Flip

Github:https://github.com/furkangulsen98/HTML-CSS-JAVASCRIPT/tree/master/JavaScript%20Array%20Card%20Flip


HTML CODE:

<body onkeydown="keyFunction(event)">

    <div class="container">
        <!-- title -->
        <h2>JavaScript <br />Array Card Flip</h2>

        <!-- Card Box 1 -->
        <div id="cardBox_1">
            <div class="card" onclick="transFunction()">
                <div class="front word1_front">Array fill()</div>
            </div>

            <div class="card" onclick="transFunction()">
                <div class="back word1_back">
                    The fill() method serves to fill the array
                    with the specified variables. it takes 3
                    parameters. They are value, start and end.
                    Start and end values ​​can be given on request.
                    But it is imperative to enter value.
                </div>
            </div>
        </div>

        <!-- Card Box 2 -->
        <div id="cardBox_2">
            <div class="card" onclick="transFunction()">
                <div class="front word1_front">Array pop()</div>
            </div>

            <div class="card" onclick="transFunction()">
                <div class="back word1_back">
                    The pop () method removes the last element of an array.
                    And define a new array. So this method changes the
                    sequence (length and elements).
                </div>
            </div>
        </div>

        <!-- Card Box 3 -->
        <div id="cardBox_3">
            <div class="card" onclick="transFunction()">
                <div class="front word1_front">Array push()</div>
            </div>

            <div class="card" onclick="transFunction()">
                <div class="back word1_back">
                    The push () method adds one or more elements to the end
                    of an array. And it returns its new length. This changes
                    the number and length of elements of the array.
                </div>
            </div>
        </div>

        <!-- Card Box 4 -->
        <div id="cardBox_4">
            <div class="card" onclick="transFunction()">
                <div class="front word1_front">Array sort()</div>
            </div>

            <div class="card" onclick="transFunction()">
                <div class="back word1_back">
                    The sort () method sorts the items in an array.
                    This order (if we do not specify a function) is
                    in the form of increasing order.
                </div>
            </div>
        </div>

        <!-- Card Box 5 -->
        <div id="cardBox_5">
            <div class="card" onclick="transFunction()">
                <div class="front word1_front">Array slice()</div>
            </div>

            <div class="card" onclick="transFunction()">
                <div class="back word1_back">
                    The Slice() method copies the desired portion of a directory.
                </div>
            </div>
        </div>

        <!-- Card Box 6 -->
        <div id="cardBox_6">
            <div class="card" onclick="transFunction()">
                <div class="front word1_front">Array every()</div>
            </div>

            <div class="card" onclick="transFunction()">
                <div class="back word1_back">
                    “Every” function checks whether all the elements of
                    the array satisfy the given condition or not that is
                    provided by a function passed to it as the argument.
                </div>
            </div>
        </div>

        <!-- Card Box 7 -->
        <div id="cardBox_7">
            <div class="card" onclick="transFunction()">
                <div class="front word1_front">
                    Array map()
                </div>
            </div>

            <div class="card" onclick="transFunction()">
                <div class="back word1_back">
                    The Map () method scans through each element 
                    of the array. It returns a new array with the elements 
                    it scans. The map() method calls the provided function 
                    once for each element in an array, in order.
                </div>
            </div>
        </div>


        <i id="back_arrow" onclick="backFunction()" class="fas fa-chevron-circle-left"></i>
        <i id="next_arrow" onclick="nextFunction()" class="fas fa-chevron-circle-right"></i>
    </div>

CSS CODE:

@import url('https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou');
html,body{
    margin: 0;
}
body {
    background: url("js.jpg");
    background-size: cover;
    position:absolute;
    top: 50%;
    left: 40%;
    transform: translate(-40%,-50%);
    font-family: 'ZCOOL QingKe HuangYou', cursive;
}
.container{
    position: relative;
    width: 250px;
    height: 525px;
    perspective:1000px;
    -webkit-perspective: 1000px;
    border-radius: 4px;
    overflow: hidden;
}
h2{
    color: #ccc;
    font-weight: normal;
    text-align: center;
    font-size: 30px;   
    word-spacing: 5px;
    line-height: 36px;
}
.card {
    width: 225px;
    height: 350px;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
    cursor: pointer;
    transform: translateX(12.5px) translateY(5px);
}
    .card div {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        border-radius: 6px;
        background: linear-gradient(to bottom right, #272e41, #15243b, #060d1d);
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Verdana;
        color: #ccc;
    }
.card .back {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
          padding-left: 5px;
          padding-right: 5px;
}
.card.active {
    -webkit-transform: rotateX(180deg) translateX(12.5px) translateY(5px);
    transform: rotateX(180deg) translateX(12.5px) translateY(5px);
}
.fas{
    position: absolute;
    z-index: 99;
    bottom: 10px;
    color: #ccc;
    font-size: 24px;
}
.front {
    font-size: 25px;
}
.back.word1_back{
    font-family: Verdana
}
#back_arrow {
    left: 50px;
    cursor: pointer;
    transition: .5s;
}
#back_arrow:hover{ transform:scale(1.2)}
#next_arrow {
    right: 50px;
    cursor: pointer;
}
#cardBox_2{
    margin-left: 275px
}
#cardBox_3{
    margin-left: 550px;
}
#cardBox_4{
    margin-left: 825px;
}
#cardBox_5 {
    margin-left: 1100px;
}
#cardBox_6 {
    margin-left: 1375px;
}
#cardBox_7 {
    margin-left: 1650px;
}

JS CODE:

        let box = document.querySelectorAll(".card");
        function transFunction() {
            var i;
            for (i = 0; i < box.length; i++) {
                box[i].classList.toggle("active");
            }
        }
        function keyFunction(e) {
            var i;
            for (i = 0; i < box.length; i++) {
                if (e.keyCode == 38) {
                    box[i].classList.add("active");
                }
                if (e.keyCode == 40) {
                    box[i].classList.remove("active");
                }
            }
            if (e.keyCode == 39) {
                nextFunction()
            }
            if (e.keyCode == 37) {
                backFunction()
            }
        };

        let n = 0;
        function nextFunction() {
            let i;
            n = n - 275;
            if (n <= (-275)*(box.length/2)) {
                n = (-275)*(box.length/2);
            }
            for (i = 0; i < box.length; i++) {
                box[i].style.marginLeft = n + "px";
            }
        }

        function backFunction() {
            let i;
            console.log(box.length)
            n = n + 275;
            if (n > 0) {
                n = 0;
            }
            for (i = 0; i < box.length; i++) {
                box[i].style.marginLeft = n + "px";
            }
        }
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: