ㅗㅜㅑ
This commit is contained in:
Suh
@@ -17,22 +17,23 @@ public class TodoDao implements TodoService{
|
||||
ResultSet rs;
|
||||
|
||||
|
||||
final String SELECT_ALL = "SELECT * FROM userTodo";
|
||||
final String SELECT_ALL = "SELECT * FROM userTodo where userno = ?";
|
||||
@Override
|
||||
public ArrayList<TodoVo> selectAll(Connection conn){
|
||||
public ArrayList<TodoVo> selectAll(Connection conn, int userNo){
|
||||
ArrayList<TodoVo> list = new ArrayList<TodoVo>();
|
||||
try{
|
||||
psmt = conn.prepareStatement(SELECT_ALL);
|
||||
psmt.setInt(1, userNo);
|
||||
rs = psmt.executeQuery();
|
||||
|
||||
|
||||
while(rs.next()){
|
||||
TodoVo vo = new TodoVo();
|
||||
vo.setuNo(rs.getInt("uNo"));
|
||||
vo.setUserno(rs.getInt("userno"));
|
||||
vo.setuContent(rs.getString("uContent"));
|
||||
vo.setuDay(rs.getString("uDay"));
|
||||
vo.setuNpc(rs.getString("uNpc"));
|
||||
vo.setuCheck(rs.getString("uCheck"));
|
||||
vo.setuSub1(rs.getString("uSub1"));
|
||||
vo.setuSub2(rs.getString("uSub2"));
|
||||
list.add(vo);
|
||||
}
|
||||
}catch(SQLException throwables){
|
||||
@@ -47,9 +48,26 @@ public class TodoDao implements TodoService{
|
||||
return 0;
|
||||
}
|
||||
|
||||
final String UPDATE = "UPDATE userTodo SET uContent = ?, uCheck = ?, uSub1 = ?, uSub2 = ? WHERE uNo = ?";
|
||||
@Override
|
||||
public int update(Connection conn, TodoVo vo){
|
||||
return 0;
|
||||
int result = 0;
|
||||
try{
|
||||
psmt = conn.prepareStatement(UPDATE);
|
||||
psmt.setString(1, vo.getuContent());
|
||||
psmt.setString(2, vo.getuCheck());
|
||||
psmt.setString(3, vo.getuSub1());
|
||||
psmt.setString(4, vo.getuSub2());
|
||||
psmt.setInt(5, vo.getuNo());
|
||||
|
||||
|
||||
result = psmt.executeUpdate();
|
||||
}catch(SQLException e){
|
||||
e.printStackTrace();
|
||||
}
|
||||
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
@Override
|
||||
|
||||
@@ -6,7 +6,7 @@ import java.sql.Connection;
|
||||
import java.util.ArrayList;
|
||||
|
||||
public interface TodoService{
|
||||
public ArrayList<TodoVo> selectAll(Connection conn);
|
||||
public ArrayList<TodoVo> selectAll(Connection conn, int userNo);
|
||||
public int insert(Connection conn, TodoVo vo);
|
||||
public int update(Connection conn, TodoVo vo);
|
||||
public int delete(Connection conn, TodoVo vo);
|
||||
|
||||
@@ -18,8 +18,8 @@ public class TodoServiceImpl implements TodoService{
|
||||
}
|
||||
|
||||
@Override
|
||||
public ArrayList<TodoVo> selectAll(Connection conn){
|
||||
return todoDao.selectAll(conn);
|
||||
public ArrayList<TodoVo> selectAll(Connection conn, int userNo){
|
||||
return todoDao.selectAll(conn, userNo);
|
||||
}
|
||||
|
||||
@Override
|
||||
|
||||
@@ -7,6 +7,8 @@ public class TodoVo{
|
||||
String uDay;
|
||||
String uNpc;
|
||||
String uCheck;
|
||||
String uSub1;
|
||||
String uSub2;
|
||||
|
||||
public int getuNo(){
|
||||
return uNo;
|
||||
@@ -55,4 +57,20 @@ public class TodoVo{
|
||||
public void setuCheck(String uCheck){
|
||||
this.uCheck = uCheck;
|
||||
}
|
||||
|
||||
public String getuSub1(){
|
||||
return uSub1;
|
||||
}
|
||||
|
||||
public void setuSub1(String uSub1){
|
||||
this.uSub1 = uSub1;
|
||||
}
|
||||
|
||||
public String getuSub2(){
|
||||
return uSub2;
|
||||
}
|
||||
|
||||
public void setuSub2(String uSub2){
|
||||
this.uSub2 = uSub2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,10 +8,13 @@ import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.ui.Model;
|
||||
|
||||
import org.springframework.web.bind.annotation.RequestBody;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMethod;
|
||||
import org.springframework.web.bind.annotation.ResponseBody;
|
||||
|
||||
import javax.servlet.http.HttpServletRequest;
|
||||
import javax.servlet.http.HttpSession;
|
||||
import java.sql.Connection;
|
||||
import java.util.ArrayList;
|
||||
import java.util.HashMap;
|
||||
@@ -20,6 +23,7 @@ import java.util.List;
|
||||
@Controller
|
||||
public class TodoController{
|
||||
|
||||
|
||||
TodoService todoService;
|
||||
|
||||
@Autowired
|
||||
@@ -30,14 +34,68 @@ public class TodoController{
|
||||
|
||||
@ResponseBody
|
||||
@RequestMapping(value = "/getTodoData.do")
|
||||
public HashMap<String, Object> getTodoData(Model model){
|
||||
public HashMap<String, Object> getTodoData(HttpServletRequest request, Model model){
|
||||
HttpSession session = request.getSession();
|
||||
HashMap<String, Object> map = new HashMap<String, Object>();
|
||||
|
||||
Connection conn = Dao.getConnection();
|
||||
ArrayList<TodoVo> list = todoService.selectAll(conn);
|
||||
int userNo = (int)session.getAttribute("userNo");
|
||||
ArrayList<TodoVo> list = todoService.selectAll(conn, userNo);
|
||||
HashMap<Integer, Integer> boardMap = new HashMap<Integer, Integer>();
|
||||
int index = 1;
|
||||
for(TodoVo vo : list){
|
||||
boardMap.put(index, vo.getuNo());
|
||||
vo.setuNo(index);
|
||||
++index;
|
||||
}
|
||||
|
||||
session.setAttribute("todoMap", boardMap);
|
||||
|
||||
Dao.close(conn);
|
||||
|
||||
map.put("list", list);
|
||||
|
||||
return map;
|
||||
}
|
||||
|
||||
@ResponseBody
|
||||
@RequestMapping(value = "/todoUpdate.do")
|
||||
public HashMap<String, Object> todoUpdate(HttpServletRequest request,
|
||||
@RequestBody HashMap<String, Object> map,
|
||||
Model model){
|
||||
HashMap<String, Object> returnMap = new HashMap<String, Object>();
|
||||
HttpSession session =request.getSession();
|
||||
HashMap<Integer, Integer> boardMap = (HashMap<Integer, Integer>)session.getAttribute("todoMap");
|
||||
int todoNo = Integer.parseInt((String)map.get("todoNo"));
|
||||
String content = (String)map.get("content");
|
||||
String check = (String)map.get("check");
|
||||
Object o1 = map.get("sub1");
|
||||
Object o2 = map.get("sub2");
|
||||
String sub1 = null;
|
||||
String sub2 = null;
|
||||
if( o1 != null){
|
||||
sub1= o1.toString();
|
||||
}
|
||||
if( o2 != null){
|
||||
sub2= o2.toString();
|
||||
}
|
||||
|
||||
Connection conn = Dao.getConnection();
|
||||
if(!(check.equals("true") || check.equals("false")))
|
||||
{
|
||||
returnMap.put("result", 0);
|
||||
}else{
|
||||
TodoVo vo = new TodoVo();
|
||||
vo.setuNo(boardMap.get(todoNo));
|
||||
vo.setuCheck(check);
|
||||
vo.setuContent(content);
|
||||
vo.setuSub1(sub1);
|
||||
vo.setuSub2(sub2);
|
||||
|
||||
int result = todoService.update(conn, vo);
|
||||
returnMap.put("result", result);
|
||||
}
|
||||
Dao.close(conn);
|
||||
return returnMap;
|
||||
}
|
||||
}
|
||||
|
||||
1
src/main/webapp/WEB-INF/tags/button_leaf.tag
Normal file
1
src/main/webapp/WEB-INF/tags/button_leaf.tag
Normal file
@@ -0,0 +1 @@
|
||||
<%@ tag language="java" pageEncoding="utf-8" %><button class='btnCheck' type='button'><i class='fas fa-leaf leafCheck'></i></button>
|
||||
@@ -1 +1 @@
|
||||
<%@ tag language="java" pageEncoding="utf-8" %><input type='text' class='form-control border-0 w-auto' readonly style='cursor: default; color : #54200c; font-size: 1.3rem'>
|
||||
<%@ tag language="java" pageEncoding="utf-8" %><input type='text' name='content' class='form-control border-0' readonly style='cursor: default; color : #54200c; font-size: 1.3rem'><input class='hiddenClass' type='text' hidden>
|
||||
@@ -19,90 +19,354 @@
|
||||
<script src="${pageContext.request.contextPath}/resources/js/all.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/todo.css">
|
||||
<style>
|
||||
.w-14{
|
||||
width : 6.4em;
|
||||
}
|
||||
|
||||
tr{
|
||||
cursor : pointer;
|
||||
}
|
||||
input[type="text"] {
|
||||
outline : none;
|
||||
}
|
||||
|
||||
#tbodyTodo tr:nth-child(2n-1){
|
||||
background-color : #89caa2;
|
||||
}
|
||||
#tbodyTodo tr:nth-child(2n){
|
||||
background-color : #70b98b;
|
||||
}
|
||||
|
||||
body{
|
||||
background-color: #a3d5a4;
|
||||
font-family: 'Cute Font', sans-serif;
|
||||
font-size : 1.3rem;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
let dataList;
|
||||
$(function(){
|
||||
|
||||
makeTable();
|
||||
$("#btnAddTodo").on("click", AddTodo);
|
||||
});
|
||||
|
||||
function getContentType(content){
|
||||
let newContent = content.replace(' ','');
|
||||
let slashType = newContent.indexOf(('/'));
|
||||
let leftGaulho = newContent.indexOf('(');
|
||||
let rightGaulho = newContent.indexOf(')');
|
||||
//TODO : 슬래시 기준으로 좌우측에 괄호가 있는지 체크해야함
|
||||
//TODO : 완성 아님 아직
|
||||
if( slashType != -1 && leftGaulho != -1 && rightGaulho != -1){
|
||||
return 'stack';
|
||||
}else{
|
||||
return 'normal'
|
||||
}
|
||||
}
|
||||
|
||||
function toggleDel($input){
|
||||
let $del = $input.closest("del");
|
||||
if ($del.get(0) == undefined) {
|
||||
$input.wrap("<del></del>");
|
||||
} else {
|
||||
$input.unwrap("del");
|
||||
}
|
||||
}
|
||||
|
||||
function addDel($input){
|
||||
$input.wrap("<del></del>");
|
||||
}
|
||||
|
||||
function removeDel($input){
|
||||
$input.unwrap("del");
|
||||
}
|
||||
|
||||
|
||||
|
||||
function toggleCheck($button){
|
||||
let $img = $button.find("svg");
|
||||
if($img.hasClass("leafCheck")){
|
||||
$img.removeClass("leafCheck");
|
||||
$img.hasClass("leafHide");
|
||||
$img.hide();
|
||||
|
||||
}else{
|
||||
$img.removeClass("leafHide");
|
||||
$img.addClass("leafCheck");
|
||||
$img.show();
|
||||
}
|
||||
}
|
||||
|
||||
function toggleCheckByEvent(event){
|
||||
let $img = event.data.button.find("svg");
|
||||
if($img.hasClass("leafCheck")){
|
||||
$img.removeClass("leafCheck");
|
||||
$img.hasClass("leafHide");
|
||||
$img.hide();
|
||||
|
||||
}else{
|
||||
$img.removeClass("leafHide");
|
||||
$img.addClass("leafCheck");
|
||||
$img.show();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function addTrEvent($tr){
|
||||
$tr.on("click", function(){
|
||||
let $input = $(this).find("input");
|
||||
|
||||
let $del = $input.closest("del");
|
||||
console.log($del.get(0));
|
||||
if($del.get(0) == undefined) {
|
||||
$input.wrap("<del></del>");
|
||||
}else{
|
||||
$input.unwrap("del");
|
||||
$tr.on("click", function() {
|
||||
let $input = $(this).find("input[name='content']");
|
||||
let $button = $(this).find("button");
|
||||
let content = $input.val();
|
||||
let type = getContentType(content);
|
||||
let sub1;
|
||||
let sub2;
|
||||
if (type == 'normal') {
|
||||
toggleDel($input);
|
||||
toggleCheck($button);
|
||||
} else if (type == 'stack') {
|
||||
let newContent = content;
|
||||
let index = newContent.indexOf('/');
|
||||
let curCount = pickNumber(newContent, index - 1, -1);
|
||||
let maxCount = pickNumber(newContent, index + 1, 1);
|
||||
let beforeContent = newContent.substring(0, findGualho(content, index, -1));
|
||||
let afterContent = newContent.substring(findGualho(content, index, 1) - 1);
|
||||
let $del = $input.closest("del");
|
||||
if (curCount == maxCount) {
|
||||
if ($del.get(0) == undefined) {
|
||||
addDel($input);
|
||||
toggleCheck($button);
|
||||
} else {
|
||||
removeDel($input);
|
||||
toggleCheck($button);
|
||||
curCount = 0;
|
||||
content = beforeContent + " " + curCount + " / " + maxCount + " " + afterContent;
|
||||
$input.val(content);
|
||||
}
|
||||
} else {
|
||||
++curCount;
|
||||
content = beforeContent + " " + curCount + " / " + maxCount + " " + afterContent;
|
||||
$input.val(content);
|
||||
if (curCount == maxCount) {
|
||||
if ($del.get(0) == undefined) {
|
||||
addDel($input);
|
||||
toggleCheck($button);
|
||||
}
|
||||
}
|
||||
}
|
||||
sub1 = curCount;
|
||||
sub2 = maxCount;
|
||||
}
|
||||
let json = {};
|
||||
json.todoNo = $(this).find(".hiddenClass").attr("name");
|
||||
json.content = $input.val();
|
||||
json.check = $button.find("svg").hasClass("leafCheck")+"";
|
||||
json.sub1 = sub1;
|
||||
|
||||
json.sub2 = sub2;
|
||||
|
||||
let parsed = JSON.stringify(json);
|
||||
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "todoUpdate.do",
|
||||
data: parsed,
|
||||
datatype: "json",
|
||||
contentType: "application/json",
|
||||
success: function (data) {
|
||||
|
||||
if( data.result == "1"){
|
||||
|
||||
}else{
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function findGualho(str, point, direction){
|
||||
|
||||
if( direction <= 0 ){
|
||||
for( let i = point; i >= 0 ; --i){
|
||||
let char = str.charAt(i);
|
||||
if( char == '('){
|
||||
|
||||
return i+1;
|
||||
}
|
||||
}
|
||||
}else{
|
||||
for( let i = point; i < str.length; ++i){
|
||||
let char = str.charAt(i);
|
||||
if( char == ')'){
|
||||
|
||||
return i+1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return -1;
|
||||
}
|
||||
|
||||
function pickNumber(str, point, direction){
|
||||
let returnStr = "";
|
||||
if(direction > 0){
|
||||
for( let i = point; i < str.length; ++i){
|
||||
let char = str.charAt(i);
|
||||
if( char == " "){
|
||||
|
||||
}else if( isNumber(char )){
|
||||
returnStr = returnStr.concat(char);
|
||||
}else{
|
||||
break;
|
||||
}
|
||||
}
|
||||
}else{
|
||||
for( let i = point; i >= 0; --i){
|
||||
let char = str.charAt(i);
|
||||
if( char == " ") {
|
||||
}else if( isNumber(char )){
|
||||
returnStr = char.concat(returnStr);
|
||||
}else{
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return returnStr;
|
||||
}
|
||||
|
||||
|
||||
function isNumber(character){
|
||||
let res = /^[0-9]+$/;
|
||||
return res.test(character);
|
||||
}
|
||||
|
||||
function makeTable(){
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "getTodoData.do",
|
||||
datatype: "json",
|
||||
contentType: "application/json",
|
||||
success: function (data) {
|
||||
let $tableBody = $("#tbodyTodo");
|
||||
|
||||
dataList = data.list;
|
||||
$(dataList).each(function(index, item){
|
||||
|
||||
let $tr = $("<tr>");
|
||||
addTrEvent($tr);
|
||||
let $td = $("<td>");
|
||||
$td.addClass("text-center");
|
||||
$tableBody.append($tr);
|
||||
$tr.append($td);
|
||||
$td.html(index+1);
|
||||
|
||||
$td = $("<td>");
|
||||
$td.addClass("text-left");
|
||||
$tr.append($td);
|
||||
let $todoInput = $("<ct:todo_input />");
|
||||
$todoInput.val(item.uContent);
|
||||
|
||||
$todoInput.css("background-color", "rgba(0,0,0,0)");
|
||||
$td.append($todoInput);
|
||||
|
||||
|
||||
|
||||
AddTr(index, item);
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
function AddTr(index, item){
|
||||
let $tableBody = $("#tbodyTodo");
|
||||
let $tr = $("<tr>");
|
||||
|
||||
addTrEvent($tr);
|
||||
let $td = $("<td>");
|
||||
$td.addClass("text-center");
|
||||
$td.css("vertical-align", "middle");
|
||||
$tableBody.append($tr);
|
||||
$tr.append($td);
|
||||
$td.html(index+1);
|
||||
<!-- # 숫자 끝 -->
|
||||
|
||||
<!-- 체크 부분 -->
|
||||
$td = $("<td>");
|
||||
$td.addClass("text-center");
|
||||
$td.css("vertical-align", "middle");
|
||||
let $btnLeaf = $("<ct:button_leaf />");
|
||||
$td.append($btnLeaf);
|
||||
|
||||
let $btnIcon = $btnLeaf.find("i");
|
||||
|
||||
if( item.uCheck == "true"){
|
||||
$btnIcon.removeClass("leafHide");
|
||||
$btnIcon.addClass("leafCheck");
|
||||
}else{
|
||||
$btnIcon.removeClass("leafCheck");
|
||||
$btnIcon.addClass("leafHide");
|
||||
}
|
||||
|
||||
$tr.append($td);
|
||||
<!-- 체크 부분 끝 -->
|
||||
|
||||
<!-- content 부분 -->
|
||||
$td = $("<td>");
|
||||
$td.addClass("text-left");
|
||||
$td.css("vertical-align", "middle");
|
||||
$tr.append($td);
|
||||
let $todoInput = $("<ct:todo_input />");
|
||||
|
||||
let $hiddenInput = $todoInput.closest(".hiddenClass");
|
||||
|
||||
$hiddenInput.attr("name", item.uNo);
|
||||
$hiddenInput.val(item.uNo);
|
||||
|
||||
let newContent = item.uContent;
|
||||
let type = getContentType(newContent);
|
||||
if( type == "stack") {
|
||||
let cIndex = newContent.indexOf('/');
|
||||
let curCount = item.uSub1;
|
||||
let maxCount = item.uSub2;
|
||||
let beforeContent = newContent.substring(0, findGualho(newContent, cIndex, -1));
|
||||
let afterContent = newContent.substring(findGualho(newContent, cIndex, 1) - 1);
|
||||
newContent = beforeContent + " " + curCount + " / " + maxCount + " " + afterContent;
|
||||
$todoInput.val(newContent);
|
||||
}else{
|
||||
$todoInput.val(newContent);
|
||||
}
|
||||
$todoInput.css("background-color", "rgba(0,0,0,0)");
|
||||
$td.append($todoInput);
|
||||
|
||||
let $input = $tr.find("input[name='content']");
|
||||
|
||||
console.log($input.get(0));
|
||||
|
||||
if( item.uCheck == "true"){
|
||||
addDel($input);
|
||||
}
|
||||
<!-- content 끝 -->
|
||||
}
|
||||
|
||||
|
||||
//할일 추가 버튼 눌렀을때 실행되는 함수
|
||||
let $addTodoTr;
|
||||
function AddTodo(){
|
||||
let $tbodyTodo = $("#tbodyTodo");
|
||||
let count = $tbodyTodo.find("tr").length;
|
||||
$addTodoTr = $("<tr>");
|
||||
$tbodyTodo.append($addTodoTr);
|
||||
//숫자 부분
|
||||
|
||||
let $td = $("<td>");
|
||||
$addTodoTr.append($td);
|
||||
$td.html((count+1).toString());
|
||||
|
||||
//체크 박스 부분
|
||||
$td = $("<td>");
|
||||
$addTodoTr.append($td);
|
||||
let $btnLeaf = $("<ct:button_leaf />");
|
||||
$btnLeaf.on("click", { button : $btnLeaf } , toggleCheckByEvent);
|
||||
|
||||
$td.append($btnLeaf);
|
||||
//content 부분
|
||||
$td = $("<td>");
|
||||
$addTodoTr.append($td);
|
||||
|
||||
//입력폼 옆으로 하기위해 div 추가
|
||||
let $divRow = $("<div class='row'>");
|
||||
$td.append($divRow);
|
||||
//할일 부분 입력폼
|
||||
let $divCol = $("<div class='col'>");
|
||||
$divRow.append($divCol);
|
||||
let $input = $("<input type='text' name='ipTodo' class='form-control border-0 inputAddTodoText' placeholder='ex ) 주민에게 인사하기'>");
|
||||
$divCol.append($input);
|
||||
|
||||
//최대치 부분 입력폼
|
||||
$divCol = $("<div class='col'>");
|
||||
$divRow.append($divCol);
|
||||
let $inputMax = $("<input type='number' name='ipMax' class='form-control border-0 inputADdTodoNumber mt-xl-0 mt-sm-2' placeholder='최대치를 입력해라 구리. 안써도 된다 구리.' > ");
|
||||
$divCol.append($inputMax);
|
||||
$input.get(0).focus();
|
||||
|
||||
//저장 버튼
|
||||
$divCol = $("<div class='col d-flex justify-content-end'>");
|
||||
$divRow.append($divCol);
|
||||
let $btnSave = $("<button type='button' class='btn btn-primary' >추가한다 구리</button> ");
|
||||
|
||||
$divCol.append($btnSave);
|
||||
$btnSave.on("click", insertLine);
|
||||
}
|
||||
function insertLine(){
|
||||
let content = $(this).parent().parent().find("input[name='ipTodo']").val();
|
||||
let sub2 = $(this).parent().parent().find("input[name='ipMax']").val();
|
||||
let check = $(this).parents("tr").find("svg").hasClass("leafCheck");
|
||||
|
||||
|
||||
console.log("content : "+content);
|
||||
console.log("sub2 : " + sub2);
|
||||
console.log("check : " + check);
|
||||
|
||||
//controller에 추가
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
@@ -157,13 +421,13 @@
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-12">
|
||||
|
||||
<div id="todo_body" class="p-2 border border-dark">
|
||||
<table id="tbTodo" class="table text-white">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center" scope="col" style="width: 10%; min-width: 4rem">#</th>
|
||||
<th class="text-left" scope="col" style="width: 80%; min-width: 4rem">할 일</th>
|
||||
<th class="text-center" scope="col" style="width: 5%; min-width: 4rem">#</th>
|
||||
<th class="text-center" scope="col" style="width: 10%; min-width: 4rem">체 크</th>
|
||||
<th class="text-left" scope="col" style="width: 85%; min-width: 4rem">할 일</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbodyTodo">
|
||||
@@ -173,6 +437,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-12 d-flex justify-content-center">
|
||||
<button id="btnAddTodo" class="btn btn-primary" type="button">할 일 추가</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,4 +1,44 @@
|
||||
|
||||
.w-14{
|
||||
width : 6.4em;
|
||||
}
|
||||
.tb_vertical_center{
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
tr{
|
||||
cursor : pointer;
|
||||
height : 6rem;
|
||||
padding : 0;
|
||||
margin : 0;
|
||||
}
|
||||
td{
|
||||
padding : 0;
|
||||
margin : 0;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
outline : none;
|
||||
max-width : 20em;
|
||||
overflow : visible;
|
||||
cursor : pointer;
|
||||
}
|
||||
|
||||
#tbodyTodo tr:nth-child(2n-1){
|
||||
background-color : #89caa2;
|
||||
}
|
||||
#tbodyTodo tr:nth-child(2n){
|
||||
background-color : #70b98b;
|
||||
}
|
||||
#tbodyTodo{
|
||||
overflow: hidden;
|
||||
}
|
||||
body{
|
||||
background-color: #a3d5a4;
|
||||
font-family: 'Cute Font', sans-serif;
|
||||
font-size : 1.3rem;
|
||||
}
|
||||
|
||||
.custom-control-label::before{
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
@@ -19,3 +59,36 @@
|
||||
.custom-control-label{
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btnCheck{
|
||||
background-color : white;
|
||||
border : none;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
padding : 0;
|
||||
margin : 0;
|
||||
width: 2.5rem;
|
||||
height : 2.5rem;
|
||||
}
|
||||
|
||||
.btnCheck > .leafCheck{
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
}
|
||||
|
||||
.leafCheck{
|
||||
color : white;
|
||||
background-color : green;
|
||||
}
|
||||
.leafHide{
|
||||
color : transparent;
|
||||
background-color : white;
|
||||
}
|
||||
|
||||
.inputAddTodoNumber{
|
||||
width : 15rem;
|
||||
}
|
||||
|
||||
.inputAddTodoText{
|
||||
width : 40rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user