insertcourse24 · GAMZAMANDU · Jul 29, 2024 · Jul 29, 2024 · Jul 29, 2024 · Jul 29, 2024
diff --git a/practice/practice1.js b/practice/practice1.js
@@ -1 +1,32 @@
 // Mission 1
+const getInput = () => {
+    let firstInput = parseInt(prompt(" 첫번째 숫자를 입력하세요."));
+    let mark = prompt("기호를 입력하세요.");
+    let secondInput = parseInt(prompt(" 두번째 숫자를 입력하세요."));
+
+    return {firstInput, mark, secondInput};
+}
+
+const calculate = ({firstInput, mark, secondInput}) => {
+    let result;
+    switch(mark){
+        case '+':
+            result = firstInput+secondInput;
+            break;
+        case '-':
+            result = firstInput-secondInput;
+            break;
+        case '/':
+            result = firstInput/secondInput;
+            break;
+        case '*':
+            result = firstInput*secondInput;
+            break;
+        default:
+            alert('잘못된 기호입니다.')
+            return;
+    }
+    alert(`${firstInput} ${mark} ${secondInput} = ${result}`);
+}
+
+calculate(getInput());
diff --git a/practice/practice2.js b/practice/practice2.js
@@ -1 +1,9 @@
 // Mission 2
+
+//숫자의 크기, 짝수 홀수 여부를 판단하는 예제
+const num = parseInt(prompt("숫자를 입력해주세요"));
+const realValue = !!num;
+const evenNum = num % 2;
+
+console.log(realValue ? (num > 10 ? "숫자가 10보다 큼" : "숫자가 10 이하") : "숫자가 0");
+console.log(!evenNum ? "짝수" : "홀수");
diff --git a/todolist/component/todoblock.js b/todolist/component/todoblock.js
@@ -0,0 +1,84 @@
+class TodoBlock extends HTMLElement {
+  static get observedAttributes() {
+    return ['title', 'date'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.render();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+        <style>
+        .list-block {
+          display: flex;
+          border-top: 1px solid #dedddd;
+          padding: 14px 12px;
+          max-width: 600px;
+          height : 60px;
+          box-sizing: border-box;
+          justify-content: space-between;
+        }
+        .text-content button {
+          height: 20px;
+          width: 20px;
+          padding: 0px;
+          border: 1px solid #d2d2d2;
+          border-radius: 100%;
+          background-color: white;
+          color:white;
+          cursor: pointer;
+        }
+
+        .text-content button:hover {
+          border: 1px solid #d2d2d2;
+          background-color: #ececec;
+        }
+
+        .text-content{
+          display: flex;
+        }
+
+        .text-content div {
+          margin-left: 8px;
+        }
+        .text-content h6 {
+          margin: 0;
+          font-size: 1em;
+          font-weight: 500;
+        }
+        .text-content p {
+          font-size: 0.8em;
+          margin-top: 2px;
+          color: #666;
+        }
+        .delete {
+            text-decoration: underline;
+            margin: auto 0px;
+            cursor: pointer;
+        }
+  </style>
+  <div class="todo-block list-block">
+    <div class="text-content">
+      <button onclick='successCheck(this)'></button>
+        <div>
+          <h6 onclick="editTodo(this)">${this.getAttribute('title') || '타이틀'}</h6>
+          <p>${this.getAttribute('date') || '날짜 000월'}</p>
+        </div>
+    </div>
+    <p class="delete" onclick="deleteTodo(event)">삭제</p>
+  </div>
+    `;
+  }
+}
+
+customElements.define('todo-block', TodoBlock);
diff --git a/todolist/index.html b/todolist/index.html
@@ -0,0 +1,30 @@
+<!-- TODO: 일정 추가, 삭제, 수정, 계획 성공 여부 -->
+
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TODOLIST</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <main>
+      <h1>TODOLIST</h1>
+      <section id="view-list">
+        <div id="todo-section"></div>
+        <button class="create-btn" onclick="isShowCreateTodo(this)">
+          + 작업추가
+        </button>
+        <div class="create-todo" id="create-todo-div">
+          <label for="create-title-name">TODO: </label>
+          <input type="text" id="create-title-name" />
+          <button onclick="createTodo()">등록</button>
+        </div>
+      </section>
+    </main>
+
+    <script src="component/todoblock.js"></script>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/todolist/script.js b/todolist/script.js
@@ -0,0 +1,58 @@
+const todoSection = document.getElementById('todo-section');
+
+/**
+ * 계획추가하기 함수
+ */
+function createTodo(){
+    const todo = document.getElementById('create-title-name');
+    if(!!todo.value){
+        const todoBlock = document.createElement('todo-block');
+        let today = new Date();
+
+        todoBlock.title = todo.value;
+        todoBlock.setAttribute('date', today.toLocaleString());;
+        todoSection.appendChild(todoBlock);
+
+        // createTodoDiv.classList.remove('show');
+
+    }
+    else{
+        alert("빈 내용은 추가할 수 없어요")
+    }
+}
+
+/**
+ * 계획성공여부
+ */
+function successCheck(element){ 
+    element.style.backgroundColor = '#ff701d';
+    element.style.borderColor = '#dc6e32';
+    element.innerHTML = `<svg width="14" height="14" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: translateY(-2px);"><path d="M11 5L6 10L3 7" stroke="white" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter"/></svg>`;
+}
+
+let createTodoBtn = true; 
+const createTodoDiv = document.getElementById('create-todo-div');
+
+/**
+ * 작업추가하기, 작업접기가 토글되면서 createTODO창이 토글
+ */
+function isShowCreateTodo(element){
+    createTodoDiv.style.display = 'flex';
+    element.innerText = createTodoBtn ? '- 작업접기' : '+ 작업추가';
+    createTodoDiv.classList.toggle('show', createTodoBtn);
+    createTodoBtn = !createTodoBtn;
+}
+
+/**
+ * 작업수정하기
+ */
+function editTodo(element){
+    element.innerText = prompt("변경할 내용을 적어주세요",element.innerText);
+}
+
+/*
+* 작업삭제하기
+*/
+function deleteTodo(e){
+    e.target.parentElement.remove();
+}
diff --git a/todolist/style.css b/todolist/style.css
@@ -0,0 +1,65 @@
+* {
+    margin: 0px;
+    padding: 0px;
+}
+
+body {
+    width: 100vw;
+    height: 100vh;
+    background-color: #181717;
+}
+
+main {
+    margin: 0px auto;
+    max-width: 600px;
+    background-color: #fff;
+    min-height: 100vh;
+    padding: 50px;
+}
+
+.create-btn {
+    border: none;
+    background-color: #fff;
+    padding: 4px 10px;
+    border-radius: 10px;
+    color: #ff701d;
+    cursor: pointer !important;
+}
+
+.create-todo {
+    display: flex;
+    max-width: 230px;
+    margin-left: 10px;
+    padding: 8px 10px;
+    border: 1px solid #E3E3E3;
+    border-radius: 4px;
+    justify-content: space-evenly;
+    align-items: center;
+    opacity: 0;
+    transform: translateY(5px);
+    transition: opacity 0.1s ease-out;
+}
+
+#create-todo-div.show {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.create-todo > label {
+    font-size: 1em;
+}
+
+.create-todo > button {
+    border: none;
+    border-radius: 2px ;
+    background-color: #ff701d;
+    color: #fff;
+    padding: 5px;
+    line-height: 8px;
+    font-size: 8px;
+    box-sizing: border-box;
+}
+
+h1 {
+    padding-bottom: 10px;
+}