insertcourse24 · winshine0326 · Jul 28, 2024 · Jul 28, 2024 · Jul 28, 2024 · Jul 28, 2024
diff --git a/practice/practice1.js b/practice/practice1.js
@@ -1 +1,30 @@
-// Mission 1
+let num = {
+    a: 0,
+    sign: 0,
+    b: 0
+}
+
+const input = () => {
+    num.a = prompt("첫번째 값 입력")
+    num.sign = prompt("계산 부호")
+    num.b = prompt("두번쨰 값 입력")
+
+    num.a = parseInt(num.a)
+    num.b = parseInt(num.b)
+}
+
+const calc = (a, b, sign) => {
+    if (sign == '+')
+        alert(a + sign + b + '=' + (a + b))
+    else if (sign == '-')
+        alert(a + sign + b + '=' + (a - b))
+    else if (sign == '*')
+        alert(a + sign + b + '=' + (a * b))
+    else if (sign == '/')
+        alert(a + sign + b + '=' + (a / b))
+    else if (sign == '%')
+        alert(a + sign + b + '=' + (a % b))
+}
+
+input()
+calc(num.a, num.b, num.sign)
diff --git a/practice/practice2.js b/practice/practice2.js
@@ -1 +1,20 @@
 // Mission 2
+// 두 사람의 나이를 입력 받고 비교해주는 코드
+let person1
+let person2
+let result
+
+function input(){
+  person1 = prompt('첫번째 사람의 나이')
+  person2 = prompt('두번째 사람의 나이')
+}
+
+input()
+
+result = person1===person2 ? '같다' : ((person1>person2) ? '첫번째가 더 크다' : '두번째가 더 크다' ) //삼항 연산자, Strict Equal 연산자
+// 두 명의 나이가 같다면 result에 같다, 한 쪽이 크면 큰 쪽을 result에 저장.
+
+if(!(!!person1) || !(!!person2)) // Double Exclamation Marks 연산자
+  alert('나이가 입력되야 합니다!') // 만약 person1 혹은 person2에 null값이 입력되면 느낌표 두개 연산자로 false로 변환하여 명확히 걸러줌.
+else
+  alert(result)
diff --git a/todolist/index.html b/todolist/index.html
@@ -0,0 +1,23 @@
+<!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">
+    <link rel="icon" href="https://cdn-icons-png.flaticon.com/512/4345/4345037.png">
+</head>
+
+<body>
+    <div id="TodoContainer">
+        <h2>TodoList</h2>
+        <input type="text" placeholder="해야할 일 추가하기" id="text-container">
+        <button class="submit-button" onclick="addTodolist()">+</button>
+        <ul id="todolist">
+        </ul>
+    </div>
+    <script type="text/javascript" src="script.js"></script>
+</body>
+
+</html>
diff --git a/todolist/script.js b/todolist/script.js
@@ -0,0 +1,44 @@
+function addTodolist() {
+    let swt = true
+    let li = document.createElement('li')
+    let text = document.createElement('span')
+    let btn = document.createElement('button')
+    let delbtn = document.createElement('button')
+
+    delbtn.className = 'delbtn'
+    delbtn.innerHTML = "삭제"
+
+    li.appendChild(btn)
+    li.appendChild(text)
+    li.appendChild(delbtn)
+
+    const todo = document.getElementById('text-container')
+    if (!todo.value)
+        alert("해야할 일을 작성해주세요!")
+    else {
+        text.innerHTML = todo.value //li안에 들어갈 span 태그 안에 텍스트박스 value 값 넣어주기
+        const todolist = document.getElementById('todolist')
+        todolist.appendChild(li) // ul에 li 연결
+        todo.value = '' // 텍스트 박스 비우기
+    }
+    console.log(todolist)
+
+    btn.addEventListener('click', () => {
+        li.style.textDecoration = swt?"line-through":"none"
+        li.style.color = swt?"#a1a1a1":"black"
+        btn.style.backgroundColor = swt?"#e37e8e":"white"
+        swt = !swt
+    }) // 버튼 한번 클릭 시 텍스트에 줄 긋기
+
+    text.addEventListener('dblclick', () => {
+        let newtext = prompt("변경할 내용을 입력해주세요")
+        if(!(!!newtext))
+            alert("잘못된 요청입니다!") // 내용이 비워져있으면 수정x
+        else
+            text.innerHTML = newtext
+    }) // 텍스트 더블클릭 시 내용 수정
+
+    delbtn.addEventListener('click', () => {
+        todolist.removeChild(li)
+    }) // 딜리트 버튼 누를 시 리스트 삭제
+}
diff --git a/todolist/style.css b/todolist/style.css
@@ -0,0 +1,74 @@
+body{
+    background-color: #ffe4e9;
+}
+
+#TodoContainer{
+    background-color: #ffc0cb;
+    width:20rem;
+    margin:0 auto;
+    height: auto;
+    text-align: center;
+    padding: 2em 0;
+    border-radius: 3px;
+}
+
+#text-container{
+    width:70%;
+    height: 2.1em;
+    font-weight: 700;
+    border:none;
+    border-radius: 3px;
+    padding-left: 7px;
+}
+input:focus{
+    outline:none;
+}
+
+h2{
+    margin:0;
+    margin-bottom: 5%;
+}
+
+.submit-button{
+    height: 2rem;
+    width: 2rem;
+    background-color: #f78d9f;
+    border: none;
+    border-radius: 3px;
+}
+
+.submit-button:hover{
+    background-color: #ad606d;
+}
+
+ul{
+    margin: 20px auto;
+    list-style-type: none;
+    padding:0 10px;
+    width:85%;
+    text-align: left;
+}
+
+li{
+    margin: 8px 0;
+    font-weight: 500;
+}
+
+li>button{
+    background-color: #ffffff;
+    width: 1rem;
+    height: 1rem;
+    border: none;
+    border-radius: 2px;
+    margin-right: 5px;
+}
+li>button:hover{
+    background-color: #a6a6a6;
+}
+
+.delbtn{
+    float:right;
+    background-color: rgb(255, 112, 112);
+    height: auto;
+    width: auto;
+}