JSFiddle - React, Tailwind, and code Playground

by kyuhyun kim

HTML

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="user-scalable=no, initial-scale=1, width=device-width, height=device-height, minimal-ui">
	<meta name="apple-mobile-web-app-capable" content="no">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="css/content.css" />
	<script src="js/jquery-1.9.1.min.js"></script>
	<title></title>
</head>

<body>

	<div id="wrap">
		<!-- Wrap start-->
		<div class="top">
			<div id="speed">
				<select id="selectBox">
					<option value="" selected disabled hidden>중요도</option>
					<option>보통</option>
					<option>중요</option>
					<option>매우중요</option>
				</select>
			</div>
			<div id="myInput">
				<input type="text" id="addContent" placeholder="할 일을 입력하세요" />
			</div>
			<a href="#" id="addBtn" onclick="addContentFunc()">추가</a>
		</div>

		<div class="filter">
			<div class="priority">
				<a href="#" id = "all" class="tgBtn">모두</a>
				<a href="#" id = "3" class="tgBtn">매우중요</a>
				<a href="#" id = "2" class="tgBtn">중요</a>
				<a href="#" id = "1" class="tgBtn">보통</a>
			</div>
			<div class="progress">
				<a href="#" class="tgBtn">모두</a>
				<a href="#" class="tgBtn">완료</a>
				<a href="#" class="tgBtn">미완료</a>
			</div>
		</div>

		<div class="content">
			<ul id="myUL" class="myclass">
				<li class="lstContent sb1"><input type="checkbox" class="lstChk"><span> 보통의 </span></li>
				<li class="lstContent sb2"><input type="checkbox" class="lstChk"><span> 중요한 내용</span></li>
				<li class="lstContent sb3"><input type="checkbox" class="lstChk"><span> 매우중요 내용</span></li>
			</ul>

		</div>

	</div><!-- Wrap end-->
</body>

CSS

#head{
    position : fixed;
  }
  
  @charset "UTF-8";
  
  wrap:after {content:"";display:block;clear:both;height:0;visibility:hidden}
  wrap.content:after{content:"";display:block;clear:both;height:0;visibility:hidden}
  wrap {position:relative}
  .content {min-width:320px;width:100%;margin:0 auto;position:relative;}
  
  /* input-area */
  .input-area {z-index:999;background:#fff;position:fixed;top:0;left:0;padding:7px 52px 8px 10px;width:100%;height:50px;border-top:1px solid #dfe2e6;border-bottom:2px solid #dfe2e6;box-sizing:border-box;z-index:100;/* -moz-box-shadow:0px 2px 5px #ccc;-webkit-box-shadow:0px 2px 5px #ccc;box-shadow:0px 2px 5px #ccc; */}
  .input-area:after {content:"";display:block;clear:both;height:0;visibility:hidden}
  .input-area .input-text {display:block;position:relative;width:100%;height:30px;border-radius:5px;background-color:#fff;box-sizing:border-box}
  .input-area .input-text:after {content:'';display:block;position:absolute;top:9px;left:10px;width:16px;height:16px}
  .input-area .input-text input {padding:2px 0 2px 5px;margin:0;width:100%;height:30px;line-height:30px;font-size:16px;border:0 none;outline:0 none;display:inline-block;}
  .input-area .input-text .placeholder {position:absolute;top:7px;left:10px;font-size:14px;color:#a9a9a9;font-weight:900}
  .input-area .btn-search {display:block;position:absolute;top:0;right:0px;}
  .input-area .btn-search span {line-height:47px;display:block;background:#f27935;width:50px;height:47px;color:#fff}
  
  /* list-area */
  .list-area {position:relative;border-top:7px solid #f0f0f0;margin-top:50px}
  .list-area ul:after {content:"";display:block;clear:both;visibility:hidden}
  .list-area ul li {border-bottom:1px solid #e9eaec;padding:10px 20px;letter-spacing:-0.05em;}
  div.todo-check {cursor:pointer;display:block;color:#585c67}

  input[type=checkbox] + label{display:inline-block;cursor:pointer;position:relative;padding-left:25px;margin-right:15px}
  input[type=checkbox] + label:before...

JavaScript

//filter 부분 토글선택
	$(document).ready(function () {
		$('a.tgBtn').click(function () {
			$(this).toggleClass("down");
			var _this = this;
			var chosen = "sb"+ $(_this).attr("id");
			if($(this).context.className == "tgBtn down" && chosen != "sball"){
				$(".content ul li").show()
				$(".content ul li").not('.' + chosen).hide();
			}else{
				$(".content ul li").show()
			}
		});
	});
	// filter 부분 선택한것만 보여주기
	$('.tgBtn').change(function () {
		var chosenCat = $(this).val();
		console.log(chosenCat);
		//var className = $('#mapContent ul li.');
		$("#mapContent ul li").show()
		$("#mapContent ul li").not('.' + chosenCat).hide();
	});

	//content list 체크박스

	$(document).on("change", "input[type='checkbox']", function () {
		if ($(this).is(":checked")) {
			$('.lstContent').addClass("checked");
		} else {
			$('.lstContent').removeClass("checked");
		}
	});


	var myNodelist = document.getElementsByTagName("LI");
	var i;
	for (i = 0; i < myNodelist.length; i++) {
		var span = document.createElement("SPAN");
		var txt = document.createTextNode("\u00D7");
		span.className = "close";
		span.appendChild(txt);
		myNodelist[i].appendChild(span);
	}

	// Click on a close button to hide the current list item
	var close = document.getElementsByClassName("close");
	var i;
	for (i = 0; i < close.length; i++) {
		close[i].onclick = function () {
			var div = this.parentElement;
			div.style.display = "none";
		}
	}


	// 게시물 추가
	function addContentFunc() {
		var selectedName = $("#selectBox option:selected").val();
		var selectedClass = $("#selectBox option").index($("#selectBox option:selected"));
		var li = document.createElement("li");
		var inputValue = document.getElementById("addContent").value;
		var ckbox = document.createElement("input");
		ckbox.type = "checkbox";
		ckbox.className = "lstChk";
		var span = document.createElement("span");
		span.textContent = inputValue;
		li.className = "lstContent sb" +...