Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="icon" href="https://deckofcardsapi.com/static/img/favicon/apple-touch-icon-144x144.png">
    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
    <title>Igra s kartama</title>
    <!--FONT AWESOME-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
    <div id="aplikacija">
        <div id="newGame" class="popup">
            <i class="fa fa-info-circle" aria-hidden="true" id="info" onclick="popUp()"></i>
            <span class="popuptext" id="myPopup">
                Welcome!! In this game you can play alone or against someone. The game is played so that 2 cards from 52 cards are drawn.
                Then the game shows you one card, and you have to guess wheter the other one is bigger/smaller/equal to the
                current one. After that you have to wait 2.5 seconds for game to drawn 2 new cards. Enjoy.

            </span>
            <br>
            <br>
            <button id="setup">New Game</button>
            <button id="igrac" style="display:none">
                <i class="material-icons">&#xe7fd;</i> Player</button>
            <button id="dvaigraca" style="display:none">
                <i class="material-icons">&#xe7ef;</i> Players</button>
        </div>

        <div id="prikazKarte" style="display:none">
            <p id="ostalo">Cards remaining : </p>
            <img id="slikaKarte">
        </div>
        <div id="jedanIgrac" style="display:none">           
            <button id="veca">Higher</button>
            <button id="manja">Less</button>
            <button id="jednaka">Equal</button>
            <h1 id="ispisIgraca">FIRST PLAYER</h1>
        </div>
        <div id="statistikaJedan" style="display:none">
            <table id="prvaTablica">
                <tr>
                    <h1>
                        <i class="fa fa-desktop" aria-hidden="true"></i> STATISTIC
                    </h1>
                </tr>
                <tr>
                    <td>
                        <p class="statistika" id="tocno">Correct : </p>
                    </td>
                </tr>
            </table>
        </div>

        <div id="statistikaDva" style="display:none">
            <table id="drugaTablica">
                <tr>
                    <h1>
                        <i class="fa fa-desktop" aria-hidden="true"></i> STATISTIC
                    </h1>
                </tr>
                <tr>
                    <th>
                        FIRST PLAYER
                    </th>
                </tr>
                <tr>
                    <td>
                        <p class="statistika" id="tocnoPrvi">
                            </i> Correct : </p>
                    </td>
                </tr>
                <tr>
                    <th>
                        SECOND PLAYER
                    </th>
                </tr>
                <tr>
                    <td>
                        <p class="statistika" id="tocnoDrugi">Correct : </p>
                    </td>
                </tr>
            </table>
        </div>

    </div>

    <div id="footer">
        <p>Kristijan Kelić
            <i class="fa fa-copyright" aria-hidden="true"></i>
            <i class="fa fa-code"></i>
        </p>
        <p>Find me on:
            <a href="https://github.com/KristijanKelic" style="color:white;" target="_blank" title="GitHub">
                <i class="fa fa-github" aria-hidden="true"></i>
            </a>
            <a href="https://codepen.io/KristijanKelic/" style="color:white;" target="_blank" title="CodePen">
                <i class="fa fa-codepen" aria-hidden="true"></i>
            </a>
        </p>
        <p>Contact:
            <a href="mailto:kkelic7@gmail.com">
                <i class="fa fa-envelope" style="color:white" aria-hidden="true"></i>
            </a>
        </p>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
</body>

</html>

              
            
!

CSS

              
                /*za sve smo elemente postavili zadani font i box-sizing*/

* {
    box-sizing: border-box;
    font-family: "Source Code Pro", monospace;
}

h1 {
    text-align: center;
}

table tr th td {
    border-collapse: collapse;
    width: 32%;
}

th {
    text-align: left;
    padding-left: 10px;
}


/*CSS selector za element sa danim ID-om #statistikaJedan*/

#statistikaJedan h1,
#statistikaDva h1 {
    background: transparent;
    font-style: italic;
    text-align: left;
    padding: 10px;
    width: 33%;
    display: block;
    float: right;
}

#statistikaJedan,
#statistikaDva {
    padding-top: 38px;
    margin-bottom: 12%;
}


/*Kod statistike jedan, cards remaining je poravnato lijevo, a kod statistika dva
smo stavili na sredinu*/

#ostalo2 {
    text-align: center;
}


/*CSS selector za sve elemente sa klasom statistika, odnosi se na p elemente unutar div statistika*/

.statistika {
    background: transparent;
    text-align: left;
    padding-left: 10px;
}


/*sredili smo buttone*/

button {
    width: 100%;
    padding: 15px 25px;
    text-align: center;
    background-color: green;
    border: 0px;
    outline: none;
    color: white;
    border-radius: 25px;
    box-shadow: 0 5px #999;
    margin-bottom: 15px;
}


/*buttoni posebno za selectat vecu, manju i jednako, velicina uvijek 200px*/

#veca,
#manja,
#jednaka {
    margin: 0px, auto;
    width: 100%;
    font-size: 1vw;
    display: block;
}


/*pseudo-klase za button akcije, hover, active i disabled*/

button:hover {
    background-color: rgb(8, 51, 8);
    color: white;
}

button:active {
    box-shadow: 0 2px #666;
    transform: translateY(4px);
}

button:disabled {
    cursor: not-allowed;
}


/*sredili smo body da bude relativan, i da ima padding-bottom 8rem kako bi footer uvijek bio na dnu
i tako smo izbjegli stanje kada nam footer prelazi preko nekog djela contenta kada se učitaju slika
i buttoni, inače bi nam footer išao preko statistike*/

body {
    background-color: rgb(16, 75, 9);
    color: white;
    margin: 0;
    padding-bottom: 8rem;
    min-height: 100%;
    position: relative;
}

html {
    height: 100%;
    box-sizing: border-box;
}


/*sredili smo div element u kojem se prikazuje karta*/

#prikazKarte {
    margin: 0 auto;
    padding-top: 1rem;
    width: 33%;
    float: left;
    text-align: center;
    display: block;
    text-align: center;
}

#slikaKarte {
    width: 50%;
}

#jedanIgrac {
    width: 33%;
    display: block;
    display: block;
    float: left;
    padding: 2rem;
    margin-top: 5rem;
}


/*div element u kojem se pojavljuju buttoni redosljedom od New Game...New Card*/

#newGame {
    width: 100%;
    text-align: center;
}


/*Glavni div element u kojem je smješteno sve*/

#aplikacija {
    margin: 0 auto;
    padding: 2rem;
    width: 100%;
    min-height: 100%;
}


/*footer u kojem se nalazi ime autora, i kontakt podaci*/

#footer {
    background: linear-gradient(black, green);
    font-family: "Source Code Pro", monospace;
    font-size: 0.8rem;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    /*padding: 1rem;*/
    text-align: center;
    color: white;
}

.popup {
    position: relative;
    margin: 0 auto;
    display: block;
    cursor: pointer;
    width: 100%;
}

.popup .popuptext {
    visibility: hidden;
    width: 100%;
    background-color: rgb(1, 44, 2);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    display: none;
    z-index: 1;
    margin: 0px auto;
    margin-top: 10px;
}

.popup .show {
    visibility: visible;
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

@media all and (max-width: 780px) {
    #jedanIgrac {
        width: 50%;
        float: right;
        display: block;
        padding-top: 0px;
    }
    #prikazKarte {
        width: 50%;
        float: left;
        display: block;
    }
    #statistikaJedan h1,
    #statistikaDva h1 {
        width: 100%;
        font-size: 3vw;
        display: block;
        clear: both;
    }
    .statistika {
        font-size: 4vw;
    }
    table {
        position: relative;
        clear: both;
    }
    .popup .popuptext {
        margin: 0px auto;
        margin-top: 20px;
        left: 0%;
    }
    .popup {
        width: 100%;
    }
    #slikaKarte {
        width: 75%;
    }
    #veca,
    #manja,
    #jednaka {
        font-size: 4vw;
        margin-bottom: 5%;
        margin-top: 5px;
        padding: 10px;
    }

    #ispisIgraca{
        font-size: 4vw;
    }
}

              
            
!

JS

              
                /*Setup game-a, prikazujemo samo jedan button, te klikom na njega biramo između
igre s jednim ili dva igrača*/


/* niz vrijednosti karata */
var nizKarata = ["2","3","4","5","6","7","8","9","10","JACK","QUEEN","KING","ACE"];

var stara;
var nova;
var slikaNova;


/*varijabla koja nam služi kao okidač, provjerava o koliko je igrača riječ, ako je o jednom 
drugačiji je poredak elemenata nego za dva igrača i ovisno o tome prikazujemo određeno*/
var jedan;

/*varijabla koja služi za određivanje kojeg igrača je red za igrat*/
var prvi = true;



/*prilikom učitavanja aplikacije, tj. kad uređaj bude spreman, poziva se metoda postavi*/
window.onload = function()
{
    document.addEventListener("deviceready", postavi);
    postavi();
};

//metoda postavlja eventHandlere za događaj click na button-e sa id setup i igrac
function postavi()
{
    document.getElementById("setup").addEventListener("click", novaIgra);
    document.getElementById("igrac").addEventListener("click", jedanIgrac);
    document.getElementById("dvaigraca").addEventListener("click", dvaIgraca);
    document.getElementById("veca").addEventListener("click", function () { vecaKarta(stara, nova); });
    document.getElementById("manja").addEventListener("click", function () { manjaKarta(stara, nova); });
    document.getElementById("jednaka").addEventListener("click", function () { jednakaKarta(stara, nova); });
    
}

function popUp(){
    var pp =document.getElementById("myPopup");
    pp.classList.toggle("show");
}


//metoda koja se poziva kada se klikne button Nova Igra, učitava nova 2 botuna, a sakriva Nova Igra
function novaIgra()
{
    document.getElementById("igrac").style.display = "block";
    document.getElementById("dvaigraca").style.display = "block";
    document.getElementById("setup").style.display = "none";
}

/*metoda koja se poziva ako se klikne novoučitani button Jedan Igrač, ona učitava novi button
i postavlja eventHandlere za nova dva buttona koja će se pojaviti*/
function jedanIgrac()
{
    document.getElementById("prikazKarte").style.display = "block";
    document.getElementById("igrac").style.display = "none";
    document.getElementById("dvaigraca").style.display = "none";
    jedan = true;
    document.getElementById("ispisIgraca").innerHTML = "";
    dohvatiSpil();
}

function dvaIgraca()
{
    document.getElementById("prikazKarte").style.display = "block";
    document.getElementById("ispisIgraca").innerHTML = "FIRST PLAYER";
    document.getElementById("igrac").style.display = "none";
    document.getElementById("dvaigraca").style.display = "none";
    jedan = false;
    dohvatiSpil();
}




//globalna varijabla za ID špila

//var spilID;

/*kada smo jedan put pribavili špilID, da ne opterećujemo server sa stalnim zahtjevima
koristit ćemo ovaj dobijeni. Nakon nekog vremena kada se on izbriše potrebno je samo odkomentirat
gornju deklaraciju varijable spilID te ponovno pribavit ID, potom je opet zakomentirat a dobivenu spremit
u istu varijablu na način var spilID = "dobiveniID"*/
var spilID;


//varijable u koje spremamo score
var score = 0;
var score2 = 0;


//Metoda koja šalje XML request serveru kako bi dobili novi špil
function dohvatiSpil() {
    if (spilID === undefined) {
        var zahtjevSpil = new XMLHttpRequest();
        zahtjevSpil.onreadystatechange = function(){
            if(this.readyState == 4 && this.status == 200){
                obradiSpil(this);
            }
        };
        zahtjevSpil.open('GET', 'https://deckofcardsapi.com/api/deck/new/shuffle/', true);
        zahtjevSpil.send();
    }
}

//Metoda koja obrađuje novodobiveni špil
function obradiSpil(zahtjev) {
    var podaci = JSON.parse(zahtjev.responseText);
    spilID = podaci.deck_id;
    dohvatiKartu();
}


//Metoda koja dohvaća kartu sa servera
function dohvatiKartu() {
    var zahtjevKarta = new XMLHttpRequest();
    zahtjevKarta.onreadystatechange = function(){
        if(this.readyState == 4 && this.status ==200){
            obradiKartu(this);
        }
    };
    zahtjevKarta.open("GET", "https://deckofcardsapi.com/api/deck/" + spilID + "/draw/?count=2", true);
    zahtjevKarta.send();


    /*postavljamo div element u kojem se prikazuje karta i ostali sadržaj
    da se pojavi display = "block" kako bismo vidjeli kartu i statistiku*/

    document.getElementById("jedanIgrac").style.display = "block";
    document.getElementById("veca").disabled = false;
    document.getElementById("manja").disabled = false;
    document.getElementById("jednaka").disabled = false;

    /*provjeravamo koliko igrača igra i ovisno o tome prikazujemo elemente*/
    if(jedan == true){
        document.getElementById("statistikaJedan").style.display = "block";
    }
    else{
        document.getElementById("statistikaDva").style.display = "block";      
    }
}

//Metoda koja provjerava da li je uspješno pribavljen request i obrađuje dobivene podatke za prikaz karte
function obradiKartu(zahtjev) {
    var podaci = JSON.parse(zahtjev.responseText);
    document.getElementById("ostalo").innerHTML = "Remaining cards: " + (podaci.remaining);

    if (podaci.remaining == 0) {
        if(jedan == false){
            if(score > score2){
                window.alert("PLAYER 1 WON");
            }
            else if(score2 > score){
                window.alert("PLAYER 2 WON");
            }
            else{
                window.alert("DRAW");
            }
            score = 0;
            score2 =0;
            document.getElementById("tocnoPrvi").innerHTML = "Correct: " + score;
            document.getElementById("tocnoDrugi").innerHTML = "Correct: " + score2;
        }
        ponovnoPromjesaj();         
    }
    else {
        //spremamo vrijednosti dobiveni podataka u varijable radi daljnjeg korištenja
        var slikaKarte = podaci.cards[0].image;

        stara = podaci.cards[0].value;
        nova = podaci.cards[1].value;

        slikaNova = podaci.cards[1].image;
        
        document.getElementById("slikaKarte").src = slikaKarte;
    }
    
}


//Metoda koja služi da se špil nanovo promješa kada se istroše 52 karte
function ponovnoPromjesaj() {
    zahtjevKarta = new XMLHttpRequest();
    zahtjevKarta.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            obradiKartu(this);
        }
    };
    zahtjevKarta.open("GET", "https://deckofcardsapi.com/api/deck/" + spilID + "/shuffle/", true);
    zahtjevKarta.send();
}




function vecaKarta(prva, druga) {
    if (jedan == true) {
        if (nizKarata.indexOf(prva) < nizKarata.indexOf(druga)) {
            score = score + 1;
        }

        document.getElementById("tocno").innerHTML = "Correct: " + score;
        document.getElementById("slikaKarte").src = slikaNova;
    }
    else {
        if (prvi == true) {
            if (nizKarata.indexOf(prva) < nizKarata.indexOf(druga)) {
                score = score + 1;
            }
            document.getElementById("tocnoPrvi").innerHTML = "Correct: " + score;
            prvi = false;
            document.getElementById("slikaKarte").src = slikaNova;
            if (prvi == true) {
                document.getElementById("ispisIgraca").innerHTML = "FIRST PLAYER";
            }
            else {
                document.getElementById("ispisIgraca").innerHTML = "SECOND PLAYER";
            }
        }
        else {
            if (nizKarata.indexOf(prva) < nizKarata.indexOf(druga)) {
                score2 = score2 + 1;
            }
            document.getElementById("tocnoDrugi").innerHTML = "Correct: " + score2;
            prvi = true;
            document.getElementById("slikaKarte").src = slikaNova;
            if (prvi == true) {
                document.getElementById("ispisIgraca").innerHTML = "FIRST PLAYER";
            }
            else {
                document.getElementById("ispisIgraca").innerHTML = "SECOND PLAYER";
            }
        }
    }
    document.getElementById("veca").disabled = true;
    document.getElementById("manja").disabled = true;
    document.getElementById("jednaka").disabled = true;
    setTimeout(dohvatiKartu, 2500);
}

function manjaKarta(prva, druga) {
    if (jedan == true) {
        if (nizKarata.indexOf(prva) > nizKarata.indexOf(druga)) {
            score = score + 1;
        }

        document.getElementById("tocno").innerHTML = "Correct: " + score;
        document.getElementById("slikaKarte").src = slikaNova;
    }
    else {
        if (prvi == true) {
            if (nizKarata.indexOf(prva) > nizKarata.indexOf(druga)) {
                score = score + 1;
            }
            document.getElementById("tocnoPrvi").innerHTML = "Correct: " + score;
            prvi = false;
            document.getElementById("slikaKarte").src = slikaNova;
            if (prvi == true) {
                document.getElementById("ispisIgraca").innerHTML = "FIRST PLAYER";
            }
            else {
                document.getElementById("ispisIgraca").innerHTML = "SECOND PLAYER";
            }
        }
        else {
            if (nizKarata.indexOf(prva) > nizKarata.indexOf(druga)) {
                score2 = score2 + 1;
            }
            document.getElementById("tocnoDrugi").innerHTML = "Correct: " + score2;
            prvi = true;
            document.getElementById("slikaKarte").src = slikaNova;
            if (prvi == true) {
                document.getElementById("ispisIgraca").innerHTML = "FIRST PLAYER";
            }
            else {
                document.getElementById("ispisIgraca").innerHTML = "SECOND PLAYER";
            }
        }
    }
    document.getElementById("veca").disabled = true;
    document.getElementById("manja").disabled = true;
    document.getElementById("jednaka").disabled = true;
    setTimeout(dohvatiKartu, 2500);
}

function jednakaKarta(prva, druga) {
    if (jedan == true) {
        if (nizKarata.indexOf(prva) == nizKarata.indexOf(druga)) {
            score = score + 1;
        }

        document.getElementById("tocno").innerHTML = "Correct: " + score;
        document.getElementById("slikaKarte").src = slikaNova;
    }
    else {
        if (prvi == true) {
            if (nizKarata.indexOf(prva) == nizKarata.indexOf(druga)) {
                score = score + 1;
            }
            document.getElementById("tocnoPrvi").innerHTML = "Correct: " + score;
            prvi = false;
            document.getElementById("slikaKarte").src = slikaNova;
            if (prvi == true) {
                document.getElementById("ispisIgraca").innerHTML = "FIRST PLAYER";
            }
            else {
                document.getElementById("ispisIgraca").innerHTML = "SECOND PLAYER";
            }
        }
        else {
            if (nizKarata.indexOf(prva) == nizKarata.indexOf(druga)) {
                score2 = score2 + 1;
            }
            document.getElementById("tocnoDrugi").innerHTML = "Correct: " + score2;
            prvi = true;
            document.getElementById("slikaKarte").src = slikaNova;
            if (prvi == true) {
                document.getElementById("ispisIgraca").innerHTML = "FIRST PLAYER";
            }
            else {
                document.getElementById("ispisIgraca").innerHTML = "SECOND PLAYER";
            }
        }
    }
    document.getElementById("veca").disabled = true;
    document.getElementById("manja").disabled = true;
    document.getElementById("jednaka").disabled = true;
    setTimeout(dohvatiKartu, 2500);
}
              
            
!
999px

Console