Skip to content

Instantly share code, notes, and snippets.

@jung-han
Created May 15, 2018 11:26
Show Gist options
  • Save jung-han/86b6932cabc270d2eb799e8438d86e28 to your computer and use it in GitHub Desktop.
Save jung-han/86b6932cabc270d2eb799e8438d86e28 to your computer and use it in GitHub Desktop.
var layoutCode =
'<div id="container">'
+ '<div id="input-div">'
+ '<input id="job-input" type="text">'
+ '<button id="submit-btn">생성</button>'
+ '</div>'
+ '<ul id="todo-list-ul"></ul>'
+ '<div id="tooltip-info-div" class="tooltip-info-div">'
+ '<div class="info-div">'
+ '<span id="left-job-cnt">0</span><span> left items</span>'
+ '</div>'
+ '<div class="info-div">'
+ '<button id="show-all-btn">All</button><button id="show-active-btn">Active</button><button id="show-complete-btn">Complete</button>'
+ '</div>'
+ '<div class="info-div">'
+ '<button id="clear-complete-btn">clear complete</button>'
+ '</div>'
+ '</div>'
+ '</div>';
appendPoint.innerHTML = layoutCode;
/////////////////////////
var containerDiv = makeElem('div', 'container');
var inputDiv = makeElem('div', 'input-div');
var input = makeElem('input', 'job-input');
var btn = makeElem('button', 'submit-btn', null, '생성');
var todoListUl = makeElem('ul', 'todo-list-ul');
var todoInfoDiv = makeElem('div', 'tooltip-info-div', 'tooltip-info-div');
var leftJobDiv = makeElem('div', null, 'info-div');
var leftJobCntSpan = makeElem('span', 'left-job-cnt', null, '0');
var leftJobUnitSpan = makeElem('span', null, null, ' left items');
var showOptionDiv = makeElem('div', null, 'info-div');
var showAllBtn = makeElem('button', 'show-all-btn', null, 'All');
var showActiveBtn = makeElem('button', 'show-active-btn', null, 'Active');
var showCompleteBtn = makeElem('button', 'show-complete-btn', null, 'Complete');
var clearCompleteDiv = makeElem('div', null, 'info-div');
var clearCompleteBtn = makeElem('button', 'clear-complete-btn', null, 'clear complete');
input.type = 'text';
inputDiv.appendChild(input);
inputDiv.appendChild(btn);
containerDiv.appendChild(inputDiv);
containerDiv.appendChild(todoListUl);
appendPoint.appendChild(containerDiv);
clearCompleteDiv.appendChild(clearCompleteBtn);
showOptionDiv.appendChild(showAllBtn);
showOptionDiv.appendChild(showActiveBtn);
showOptionDiv.appendChild(showCompleteBtn);
leftJobDiv.appendChild(leftJobCntSpan);
leftJobDiv.appendChild(leftJobUnitSpan);
todoInfoDiv.appendChild(leftJobDiv);
todoInfoDiv.appendChild(showOptionDiv);
todoInfoDiv.appendChild(clearCompleteDiv);
document.getElementById('container').appendChild(todoInfoDiv);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment