Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <html>
<head>
    <title>Learning project</title>
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
 
</head>
<body>
    <h2 id="title">LIST OF COMAPANIES :</h2>
  
    <div class="left-block">
        <table id="companies" class="data-table">
            <tbody id="myTBody">
                <tr>
                    <th><input id="check-all" type="checkbox" class="no"/></th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>City</th>
                    <th>Post</th>
                    <th>Country</th>
                    <th>Phone</th>
                </tr>
                <tr class="unchecked"><td><input type="checkbox" /></td><td>Johhan von Berlin</td><td>Ein Berliner Strasse 2</td><td>Berlin</td><td>7655</td><td>Germany</td><td>070-77715555</td></tr>
                <tr class="unchecked"><td><input type="checkbox" /></td><td>Maria los Amigos</td><td>Plaja 77</td><td>Accapulco</td><td>21009</td><td>Mexico</td><td>9898-194-7285</td></tr>
                <tr class="unchecked"><td><input type="checkbox" /></td><td>Jajo Majajo</td><td>Mata'd'orro  9</td><td>México D.F.</td><td>9023</td><td>Mexico</td><td>9898-314-8731</td></tr>				
                <tr class="unchecked"><td><input type="checkbox" /></td><td>Johhny White</td><td>666 Hangover St.</td><td>Sasquachland</td><td>ZZ-678</td><td>Canada</td><td>(789) 789-5431</td></tr>				
                <tr class="unchecked"><td><input type="checkbox" /></td><td>Waste Inc.</td><td>No-way street 6</td><td>London</td><td>LN.879</td><td>UK</td><td>98073-9872-12</td></tr>				
                <tr class="unchecked"><td><input type="checkbox" /></td><td>Ciao BellaDonna!</td><td>Strada Fonte 18</td><td>Roma</td><td>24662</td><td>Italy</td><td>2109-203333</td></tr>				
                <tr class="unchecked"><td><input type="checkbox" /></td><td>Smajzlpajzl s.p.</td><td>Rovt 100</td><td>Cerkno</td><td>4500</td><td>Slovenia</td><td>88.60.15.31</td></tr>				
                <tr class="unchecked"><td><input type="checkbox" /></td><td>Bonna Nona</td><td>Aquilla 67</td><td>Paddova</td><td>78933</td><td>Italy</td><td>66-55-12-8761-0988</td></tr>				
            </tbody>
        </table>

        <div id="selection-and-button">
            <select id="actionSelect" onchange="ActionSelect()">
                <option value="blank">Select action</option>
                <option value="remove">Remove selected Companys</option>
                <option value="edit">Edit selected Company</option>
                <option value="add">Add new Company</option>
            </select>

            <input id="actionBtn" type="button" value="Submit" onclick="ExecAction()" />
        </div>
    </div>

    <!-- /////////////////  MODAL ///////////////////-->
    <div id="myModal" class="modal">

        <!-- Modal content -->
        <div class="modal-content">

            <div class="modal-header">
                <span class="close">&times;</span>
                <h2 id="modal-title">Modal Header</h2>
            </div>
            <hr />
            <div class="modal-body">
                <form>
                    <input id="addModalName"    type="text" class="modal-tweak grab-me" placeholder="COMPANY NAME" value="COMPANY NAME"/><br>
                    <input id="addModalAddress" type="text" class="modal-tweak grab-me" placeholder="ADDRESS" value="ADDRESS"/><br>
                    <input id="addModalCity"    type="text" class="modal-tweak grab-me" placeholder="CITY"/><br>
                    <input id="addModalPost"    type="text" class="modal-tweak grab-me" placeholder="POST"/><br>
                    <select id="addModalCountry" class="modal-tweak grab-me">
                        <option value="select">SELECT COUNTRY</option>
                        <option value="Mexico">Mexico</option>
                        <option value="Spain">Spain</option>
                        <option value="Sweden">Sweden</option>
                        <option value="Canada">Canada</option>
                        <option value="Argentina">Argentina</option>
                        <option value="Switzerland">Switzerland</option>
                        <option value="Brasil">Brasil</option>
                        <option value="Austria">Austria</option>
                        <option value="Slovenia">Slovenia</option>
                        <option value="Italy">Italy</option>
                        <option value="Germany">Germany</option>
                        <option value="France">France</option>
                        <option value="UK">UK</option>
                    </select><br>
                    <input id="addModalPhone"   type="text" class="modal-tweak grab-me" placeholder="PHONE"/><br>
                </form>

                <hr style="margin-top:3%;"/>
                <input id="modalActionBtn" type="button" value="SUBMIT" onclick="" />

            </div>

        </div>

        <script>
            
            /*Modal koda*/
            var modal = document.getElementById('myModal');
            var btn = document.getElementById("myBtn");
            var span = document.getElementsByClassName("close")[0];
            /*
            btn.onclick = function () {
                modal.style.display = "block";
            }*/

            //Metoda odstrani modal okno ob kliku na x
            span.onclick = function () {
                modal.style.display = "none";
            }

            //Metoda odstrani modal okno ob kliku kamorkoli izven modal okna
            window.onclick = function (event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            }
        </script>


</body>
</html>

            
          
!
            
              html, body, form{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
}

*{
  font-family:'Roboto';
}
#title{
  margin-left:5%;
}

.left-block{
    float: left;
    width: 90%;
    margin-left:5%;
}

.data-table{
    border-top: 1px solid silver;
    border-left: 1px solid silver;
    border-collapse: separate;
    border-spacing:0px;
    margin-bottom:5px;
    width:100%;
}

.data-table th:first-child{
    width:20px;
}

.data-table th{
    text-align:left;
    text-transform:uppercase;
    background-color: #007399;/*#A7C942;*/
    color: #ffffff;
    font-size: 20px;
}

.data-table th, .data-table td{
    border-bottom: 1px solid silver;
    border-right: 1px solid silver;
    padding-left:3px;
    padding-right:3px;
}

.data-table tr:hover{
    background-color : #80dfff;
}

.checked{
    background-color:  #b3ecff;
}

#selection-and-button{
    margin-top:15px; 
}

#actionBtn:

/* === MODAL ===*/

.modal-header{
    text-align:center;
    color:#333333;
}

.modal-tweak{
    width:80%;
    margin-left:10%;
    margin-top:2%;
}

#modalActionBtn{
    width:80%;
    margin-left:10%;
    margin-top:2.5%;
}

 /* modal background */
.modal{
    display: none;                  /* Hidden by default */
    position: fixed;                /* Stay in place */
    z-index: 1;                     /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;                    /* Full width */
    height: 100%;                   /* Full height */
    overflow: auto;                 /* Enable scroll if needed */
    background-color: rgb(0,0,0);       /* Fallback color */
    background-color: rgba(0,0,0,0.5);  /* Black w/ opacity */
    color:#333333;
}

.modal input, .modal select{
    font-size:16px;
    color:#333333;

}

/* modal content*/
.modal-content{
    height:40%;
    background-color: #fefefe;
    margin: 5% auto;                   /* 15% from the top and centered */
    padding: 20px;
    border: 2px solid skyblue;
    width: 30%;
    border-radius:20px;    
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* modal close button */
.close{
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus{
    color: black;
    text-decoration: none;
    cursor: pointer;
}

@-webkit-keyframes animatetop{
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

@keyframes animatetop{
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

@media screen and (max-width: 768px){
    .right-block{     
        margin-top:30px;   
        float:left;
        width:100%;
    }
    .left-block{
        width:100%;
    }

}
            
          
!
            
              ////////////////////////////////////////////////////////////////
//jQuery metoda spreminja razrede elementov v tabeli


$(document).ready(function () {

    $('tr:not(:first-child)').click(function () {                               //metoda ne deluje na prvem <tr> elementu
        if ($(this).hasClass('unchecked')) {
            $(this).attr('class', 'checked');
            $(this).children().children("input").prop('checked', true);
        } else {
            $(this).attr('class','unchecked');
            $(this).children().children("input").prop('checked', false);
        }
    });

    //metoda za selekcijo oziroma deselekcijo vseh vnosov naenkrat potrebuje za pravilno delovanje dodaten razred no/yes ki označuje ali je odkljukan input check-all
    $('#check-all').click(function () {
        if ($(this).hasClass('no')) {                                           //pogoj
            $(this).attr('class','yes');                                        //zamenjaj razred check-all elementa
            $('tr').attr('class','checked');                                    //zamenjaj razrede vseh <tr> elementov
            $('tr').children().children('input').prop('checked', true);         //obkljukaj vse check-box-e
        } else {
            $(this).attr('class', 'no');
            $('tr').attr('class','unchecked');
            $('tr').children().children('input').prop('checked', false);
        }
    });
});


////////////////////////////////////////////////////////////////
//Metoda spreminja samo razrede naknadno dodanih <tr> elementov ki jih zgornji jQuery ne doseže

function ToggleCheck(id) {

    var elem = document.getElementById(id);
    //elem.childNodes[0].setAttribute('type', 'checkbox');    //Pri dodajanju html kode v metodi AddNewCompanySubmit (linja 156) se checkbox atribut izgubi

    if (elem.getAttribute('class') == 'unchecked') {
        elem.childNodes[0].childNodes[0].checked = true;   
        elem.setAttribute('class', 'checked');
    } else {
        elem.childNodes[0].childNodes[0].checked = false;
        elem.setAttribute('class', 'unchecked');
    }
}



///*
function ActionSelect() {
    var obj = document.getElementById('actionSelect');
    var selection = obj.options[obj.selectedIndex].value;
    var btn = document.getElementById('actionBtn');


    switch (selection) {
        case 'blank':
            btn.value = 'Submit';
            break;
        case 'edit':
            btn.value = 'Edit Company';
            break;
        case 'add':
            btn.value = 'Add Company';
            break;
        case 'remove':
            btn.value = 'Remove Company';
            break;
    }

}//*/
////////////////////////////////////////////////////////////////
//Switch stavek za proženje primerne metode glede na uporabnikovo izbiro

function ExecAction() {

    var args = document.getElementById('actionSelect');
    var action = args.options[args.selectedIndex].value;

    switch (action) {
        case 'add':
            AddCompany();
            break;
        case 'remove':
            RemoveCompaniesOnSite();
            break;
        case 'edit':
            EditCompany();
            break;
        default:
            console.log("No action specified");
    }
}


////////////////////////////////////////////////////////////////
//Metoda za brisanje izbranih vnosov

function RemoveCompaniesOnSite() {

    var checkedCompaines = document.getElementsByClassName('checked');
    var idArr = [];

    for (var i = 0; i < checkedCompaines.length; i++) {
        var id = checkedCompaines[i].getAttribute("data-recordid");
        idArr.push(id);
    }

    if (checkedCompaines.length == 1) {
        if (!confirm('WARNING : You are about to delete a company. Click OK to proceed.')) {
            return;
        }
    } else {
        if (!confirm('WARNING : You are about to delete ' + checkedCompaines.length + ' companies. Click OK to proceed.')) {
            return;
        }
    }   

    //Kliče dummy metodo, če dobi true, se metoda nadaljuje in sproži preostanek kode, sicer sporoči napako v alert okencu in konzole logu
    //pošljemo argumente na "strežnik"

    if (RemoveCompanies(idArr)) {
        while (checkedCompaines[0]) {
            checkedCompaines[0].parentNode.removeChild(checkedCompaines[0]);
        }
    } else {
        alert("An unexpected error occured while processing your request.");
    }
}


////////////////////////////////////////////////////////////////
//Dummy metoda iz zadja, ki naj bi sprejela nove podatke in odgovorila - v tem primeru samo z true ali false

function RemoveCompanies(args) {
    return true;
}


////////////////////////////////////////////////////////////////
//Metoda za proženje modal okna ko uporabnik izbere "Add new company"

function AddCompany() {
    var title = document.getElementById('modal-title');
    title.innerHTML = "Add new Company";

    var compName = document.getElementById('addModalName');            //očistim vsa input polja nazaj na default vrednost
    var compAddr = document.getElementById('addModalAddress');
    var compCity = document.getElementById('addModalCity');
    var compPost = document.getElementById('addModalPost');
    var cmpCntry = document.getElementById('addModalCountry');
    var cmpPhone = document.getElementById('addModalPhone');

    compName.value = '';
    compAddr.value = '';
    compCity.value = '';
    compPost.value = '';
    cmpCntry.value = 'select';
    cmpPhone.value = '';

    modal.style.display = "block";
    console.log("Add Company");  
    var actionBtn = document.getElementById('modalActionBtn');
    actionBtn.setAttribute('onclick', 'AddCompanySubmit()');
}


////////////////////////////////////////////////////////////////
//Dejanska metoda, ki se sproži po uporabnikovem pritisku na gumb 'SUBMIT' - za dodajanje novega vnosa na zaslonu.

var elemIDNum = 0;
function AddCompanySubmit() {

    var elemTag = 'tr';
    var elemID = elemTag + elemIDNum;                                   //elemID bo postal vrednost id selektorja novega <tr> taga
    var input = document.getElementsByClassName('grab-me');             //grab me razred imajo vsa input polja v modal oknu - tukaj jih vse prenesem v tabelo input
    var input2 = document.getElementById('addModalCountry');            //select polje v modal oknu zgrabim posebaj
    var inputCity = input2.options[input2.selectedIndex].innerHTML;     //in ga prenesem v inputCity variabilo
    var newCompany = [];                                                //vse podatke iz modalovih polj bom spravil v to novo tabelo

    for (var i = 0; i < input.length; i++) {
        if (input[i].value == "" || inputCity == "SELECT COUNTRY") {    //preverim če je katero od modal input/select polj prazno, ustavim po potrebi
            alert("All fields are required");
            return;
        } else {
            newCompany.push(input[i].value);                            //potisnem vrednosti v tabelo
        }
    }
    newCompany.push(inputCity);                                         //posebaj na koncu dodam še mesto

    if (SubmitNewCompanyToDB) {                                         //dummy klic v backend, vrne true, temu sledi izpis novega podjetja na zaslonu      
        var newRow = document.createElement('tr');                      //ustvarim tag element tr 
        newRow.setAttribute('id', elemID);                                          //določim mu svoj id namesto id-ja, ki bi ga moral dobiti iz backenda
        newRow.setAttribute('class', 'unchecked');                                              //dodam razred, ki ga imajo vsi ostali zapisi in služi barvnemu označevanju vrstic
        newRow.setAttribute('onclick', 'ToggleCheck(\'' + elemID +'\')');                                       //dodam posebaj metodo ToggleCheck za spreminjanje razredov ker z jQuery-em ne dosežem novo dodanih elementov                                        
        var parent = document.getElementById('myTBody');                                                                    //myTBody je posebej dodan razred, tbody-a samega ne dosežem
        parent.appendChild(newRow);                                                                                         //pripnem nov element na starša
        var newRowInfo = '<td><input type="checkbox" /></td><td>'                                                           //pripravim html kodo v obliki stringa
                   + newCompany[0] + '</td><td>' + newCompany[1] + '</td><td>' + newCompany[2] + '</td><td>'    
                   + newCompany[3] + '</td><td>' + newCompany[4] + '</td><td>' + newCompany[5] + '</td>';
        newRow.innerHTML = newRowInfo;                                                                          //vstavim zgoraj pripravljen string (html)
        elemIDNum++;                                                                                            //dodam +1 elemIDNum-u, ki je globalen in skrbi za unikatnost id selektorjev novih elementov
    } else {
        alert("An unexpected error occured while processing your request.");
    }
 

    modal.style.display = "none";                                       //zaprem modal okno
    alert('New company has been successfully added.');

}


////////////////////////////////////////////////////////////////
//Dummy backend funkcija za dodajanje novega vnosa

function SubmitNewCompanyToDB() {
    return true;
}


////////////////////////////////////////////////////////////////
//Metoda za proženje modal okna ko uporabnik izbere "Add new company"

function EditCompany() {
    var elements = document.getElementsByClassName('checked');
    var element = elements[0];
    var title = document.getElementById('modal-title');
    title.innerHTML = "Edit Company";

    if (elements.length > 1) {
        alert('You can edit only one company at a time.');
        return;
    } else if (elements.length == 0) {
        alert('You should choose a company to edit. You can do so by clicking on one and selecting it.');
    }
    else {
        var compName = document.getElementById('addModalName');
        var compAddr = document.getElementById('addModalAddress');
        var compCity = document.getElementById('addModalCity');
        var compPost = document.getElementById('addModalPost');
        var cmpCntry = document.getElementById('addModalCountry');
        var cmpPhone = document.getElementById('addModalPhone');
        
        compName.value = element.childNodes[1].innerHTML;
        compAddr.value = element.childNodes[2].innerHTML;
        compCity.value = element.childNodes[3].innerHTML;
        compPost.value = element.childNodes[4].innerHTML;
        cmpCntry.value = element.childNodes[5].innerHTML;
        cmpPhone.value = element.childNodes[6].innerHTML;

     
        modal.style.display = "block";
        console.log("Edit Company");
        var actionBtn = document.getElementById('modalActionBtn');
        actionBtn.setAttribute('onclick', 'EditCompanySubmit()');
        element.className += ' tempID';
    }
}


///////////////////////////////////////////////////////////////
//Dejanska metoda, ki se sproži po uporabnikovem pritisku na gumb 'SUBMIT' - za spreminjanje vnosa na zaslonu.

function EditCompanySubmit() {

    var targets = document.getElementsByClassName('checked tempID');    //s pomočjo dodatnega tempID razreda počrpam element, ki ga želi uporabnik spremeniti v tabelo array (ker z id selektorjem nisem uspel sem uporabil razred, zato je rezultat tabela)
    var target = targets[0];                                            //iz tabele stremenim v posamičen objekt 

    var compName = document.getElementById('addModalName').value;       //počrpam nove vrednosti iz modal okna
    var compAddr = document.getElementById('addModalAddress').value;
    var compCity = document.getElementById('addModalCity').value;
    var compPost = document.getElementById('addModalPost').value;
    var cmpCntry = document.getElementById('addModalCountry').value;
    var cmpPhone = document.getElementById('addModalPhone').value;

    target.childNodes[1].innerHTML = compName;                          //vnesem nove/spremenjene vrednosti v tabeli
    target.childNodes[2].innerHTML = compAddr;
    target.childNodes[3].innerHTML = compCity;
    target.childNodes[4].innerHTML = compPost;
    target.childNodes[5].innerHTML = cmpCntry;
    target.childNodes[6].innerHTML = cmpPhone;

    target.className = 'checked';                                       //izbrišem tempID del selektorja

    var modalName = document.getElementById('addModalName');            //očistim vsa input polja nazaj na default vrednost
    var modalAddr = document.getElementById('addModalAddress');
    var modalCity = document.getElementById('addModalCity');
    var modalPost = document.getElementById('addModalPost');
    var mdalCntry = document.getElementById('addModalCountry');
    var mdalPhone = document.getElementById('addModalPhone');

    modalName.value = '';
    modalAddr.value = '';
    modalCity.value = '';
    modalPost.value = '';
    mdalCntry.value = 'select';
    mdalPhone.value = '';

    modal.style.display = "none";                                      //zaprem modal okno
    alert('New company has been successfully edited.');
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console