test

In this example below you will see how to do a test with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by --pk--, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright --pk-- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>test</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="boxCheckboxVirtual">
<div class="boxCheckboxVirtualTitle">pracoviště: <strong>P2</strong></div>
  <!--
  <div class="checkboxVirtual checkboxVirtual-item-0">
    <input type="checkbox" id="id0" class="mainCheckbox"/>
    <label for="id0"><div><span class="checkboxVirtualName">Svačinář</span>
    <span class="stopwatchBreak"></span><span class="stopwatch"></span></div></label>    
  </div>
    -->
  <div>
  <div class="checkboxVirtual checkboxVirtual-item-1">
    <input type="checkbox" id="id1" class="mainCheckbox"/>
    <label for="id1"><div><span class="checkboxVirtualName">Logistika</span>
    <span class="stopwatchBreak"></span><span class="stopwatch"></span></div></label>   
  </div>
  </div>  
  <div class="checkboxVirtual checkboxVirtual-item-2">
    <input type="checkbox" id="id2" class="mainCheckbox"/>
    <label for="id2"><div><span class="checkboxVirtualName">Kvalita</span>
    <span class="stopwatchBreak"></span><span class="stopwatch"></span></div></label>   
  </div>
  <div class="checkboxVirtual checkboxVirtual-item-3">
    <input type="checkbox"checked id="id3" class="mainCheckbox" startTime="2017/03/10 22:00:00"/>
    <label for="id3"><div><span class="checkboxVirtualName">Teamleader</span>
    <span class="stopwatchBreak"></span><span class="stopwatch"></span></div></label>
  </div>
  <div class="checkboxVirtual checkboxVirtual-item-4">
    <input type="checkbox" id="id4" class="mainCheckbox"/>
    <label for="id4"><div><span class="checkboxVirtualName">Seřizovač</span>
    <span class="stopwatchBreak"></span><span class="stopwatch"></span></div></label>   
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://momentjs.com/downloads/moment-with-locales.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/--pk--/test-jBBoVe */
body {
  	background-color: #2c2e41;
    font-family: "Helvetica Neue", sans-serif;
}
/* brát až odsud, tamto definuje už default.css */
.boxCheckboxVirtual {
  border: 1px solid #bdc3c7;
  width: 230px;
  background: #2c3e50;
}
.boxCheckboxVirtualTitle {
  color: black;
  background:#bdc3c7;
  padding:10px 5px;
  text-align:center;
}

.checkboxVirtual {
	width: 140px;
	height: 140px;
	background: #ddd;
	margin: 20px 45px;
	border-radius: 70px;
	position: relative;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
  text-align: center;
  display:table;
  vertical-align: middle;
}
.checkboxVirtual label {
	width: 130px;
	height: 130px;
	border-radius: 65px;
	cursor: pointer;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 1;
	box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
  color:white;
  background-color: #34495e;
  display: table;
}
.checkboxVirtual div {
  display: table-cell;
  vertical-align:middle;
}

.checkboxVirtual label > div > span {padding-bottom: 4px; }

.checkboxVirtual-item-0 .checkboxVirtualName {border-bottom: solid 4px #27ae60;}
.checkboxVirtual-item-1 .checkboxVirtualName {border-bottom: solid 4px #f1c40f;}
.checkboxVirtual-item-2 .checkboxVirtualName {border-bottom: solid 4px #ecf0f1;}
.checkboxVirtual-item-3 .checkboxVirtualName {border-bottom: solid 4px #2980b9;}
.checkboxVirtual-item-4 .checkboxVirtualName {border-bottom: solid 4px #c0392b;}

.checkboxVirtual input[type=checkbox]:checked + label {color:black;}
.checkboxVirtual input[type=checkbox]:checked + label > div > span {border-bottom:none;}

.checkboxVirtual-item-0 input[type=checkbox]:checked + label {background:#2ecc71;}
.checkboxVirtual-item-1 input[type=checkbox]:checked + label {background:#f1c40f;}
.checkboxVirtual-item-2 input[type=checkbox]:checked + label {background:#ecf0f1;}
.checkboxVirtual-item-3 input[type=checkbox]:checked + label {background:#3498db;}
.checkboxVirtual-item-4 input[type=checkbox]:checked + label {background:#e74c3c;}

.stopwatch {
  background-color:rgba(0, 0, 0, 0.5);
  color: white;
  padding:3px;
  border:inset 2px rgba(0, 0, 0, 0.5);
  display:none;
}
.stopwatchBreak {
   display:block;
   height:5px;
}

/*Downloaded from https://www.codeseek.co/--pk--/test-jBBoVe */

$(document).ready(function() {
  //Ty co jsou zatržený zobrazí stopky
  var runStopWatch = 0;
  $( ".checkboxVirtual" ).each(function() {
     if ($(this).find(".mainCheckbox").is(":checked")) {
     		$(this).find(".stopwatch").html('??:??:??');
        $(this).find(".stopwatch").show();
        if (runStopWatch == 0) {var controlStopWatch = setInterval(function(){ stopWatchFunc() }, 1000)}
     }
  });

  $('.mainCheckbox').change(function() {
    if($(this).is(":checked")) {
    	$(this).parent().find(".stopwatch").html('00:00:00');
      $(this).parent().find(".stopwatch").show();
      $(this).attr('startTime',moment(_.now()).format('YYYY/MM/DD HH:mm:ss'));
      if (runStopWatch == 0) {var controlStopWatch = setInterval(function(){ stopWatchFunc() }, 1000)}
    } else {
      $(this).parent().find(".stopwatch").hide();
      var checkRunStopWatch = 0;
      //Pokud uz nic nebezi, zastavit funkci
      $( ".checkboxVirtual" ).each(function() {
        if ($(this).find(".mainCheckbox").is(":checked")) {checkRunStopWatch = 1;}
      });
      if (checkRunStopWatch == 0) {clearInterval(controlStopWatch);}
    } 
  });
  
    function stopWatchFunc() {
    			runStopWatch = 1;
          $( ".checkboxVirtual" ).each(function() {
     			if ($(this).find(".mainCheckbox").is(":checked")) {
             tmpDate = moment.utc(moment().format('x') - moment($(this).find(".mainCheckbox").attr('startTime'))).format('HH:mm:ss');
             $(this).find(".stopwatch").html(tmpDate);
   				}
  			});
    }
 
});

Comments