ToDo List

Test for a ToDo list

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<div class="container bg-dark min-vh-100">

<div id="demo" class="p-3 mx-auto">

</div>

<button class="btn btn-info" onclick="myFunction()">
Los
</button>

<div class="btn-checkbox m-2">
<input id="check1" type="checkbox" />
<label for="check1"></label>
</div>

<div class="btn-checkbox m-2">
<input id="check2" type="checkbox" checked />
<label for="check2"></label>
</div>

</div>

CSS

#demo {
  width: 360px;
  height: auto;
}

.bg-darkl {
  background-color: rgba(255, 255, 255, 0.05)
}

.tasklistentry {
  color: #fff;
  font-size: 1.2em;
  line-height: 1.4em;
}

.btn-checkbox input[type=checkbox] {
  cursor: pointer;
  opacity: 0;
  z-index: 1;
  outline: 0 !important;
}

.btn-light:not(:disabled):not(.disabled).active,
    .btn-light:not(:disabled):not(.disabled):active,
    .show > .btn-light.dropdown-toggle {
        color: #fff;
        background-color: #f5a51a;
        border-color: #f4a00e;
    }

.btn-checkbox input[type=checkbox]{
  height: 50px;
  width: 50px;
	opacity: 0;
	display: none;
}

.btn-checkbox label::before{
	width: 50px;
	height: 50px;
  display: block;
	background-color: #3E444A;
  border: 1px solid rgba(0, 0, 0, 0.4);
	
  content: "";
	color: rgba(0, 0, 0, 0.2);
  font-family: "Font Awesome 5 Free";
  
  font-size: 30px;
  font-weight: 600;
	line-height: 50px;
	text-align: center;
	border-radius: 0.2em;
	/*
	-moz-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
   -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
   box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
*/
}
.btn-checkbox input[type=checkbox]:checked + label::before{
	background-color: rgb(171, 0, 0);
}

.btn-checkbox label[for=check1]::before {
	content: "\f011";
}

JavaScript

(function() {
  var theString = "~B01|~B20|B03",
			bits = theString.split('|'); // split the string and remove the last one
	var text = ""
	var taskdone = ""
	var taskdonecheck = ""
	for (var i = 0; i < bits.length; i++) {
	
			//alert(bits[i].charAt(0));
			if (bits[i].charAt(0) == "~") {
					bits[i] = bits[i].slice(1);
					taskdone = "text-decoration-line-through ";
					taskdonecheck = "checked"
					}else{
					taskdone = "";
					taskdonecheck = "";
					
					}
			//text += "<li class='" + taskdone + "'>" + bits[i] + "</li>";
			text +='<div class="tasklistentry p-3 mb-1 bg-darkl">'
			text +='<div id="' + i + '" class="form-check mb-2">'
			text +=	'<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" ' + taskdonecheck + '>'
			text +=	'<label class="form-check-label ' + taskdone + '" for="inlineCheckbox1">' + bits[i] + '</label>'
			text +='</div>'
			text +='</div>'
	}

  document.getElementById("demo").innerHTML = text;

})();