-
Notifications
You must be signed in to change notification settings - Fork 4
[투두 리스트 만들기] 심현진 미션 제출합니다. #3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
hxeonxins
wants to merge
22
commits into
insertcourse24:main
Choose a base branch
from
hxeonxins:hxeonxins
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
22 commits
Select commit
Hold shift + click to select a range
a0a4dc4
feat : 미션1 1단계 계산기 기능 구현
hxeonxins da9fbca
feat : 미션1 2단계 함수로 분리하기
hxeonxins 3cc2da0
feat : 미션1 3단계 객체사용
hxeonxins 5ca5099
feat : 미션1 4단계 화살표함수
hxeonxins 063dd1e
feat : 미션2 나만의 예제 만들기
hxeonxins 80c7ef3
feat : 기본 틀 추가
hxeonxins 63b5167
feat : 입력 기본 틀 추가
hxeonxins 6c2ad1a
feat : 입력 기능 추가
hxeonxins 422e2b3
feat : 투두 입력 기능 추가
hxeonxins 5807320
feat : 투두 삭제 기능 추가
hxeonxins 24235ee
feat : 투두 저장 기능 추가
hxeonxins 498dadb
feat : 투두 저장 기능 추가
hxeonxins d539888
feat : 투두 저장 기능 추가
hxeonxins c4edc8f
feat : 수정 기능 추가
hxeonxins e186e78
feat : 스타일 추가
hxeonxins 1d68ffb
chore : 투두 글자 크기 수정
hxeonxins 4b1f1eb
re clone repository
hxeonxins 423db78
refactor : px 단위 rem으로 변경
hxeonxins 5973da5
refactor : 만들어 둔 객체 사용
hxeonxins 52a7b6a
refactor : 공백 구분 부분 수정
hxeonxins 197674c
feat : todoList 스타일 추가
hxeonxins 570c859
feat : 버튼 스타일 추가
hxeonxins File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
File renamed without changes.
Empty file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| // Mission 1 | ||
| // 1단계 - 계산기 만들기 | ||
| let num1 = prompt('첫번째 수를 입력하세요.'); | ||
| const operater = prompt('연산자 (+, -, *, /)를 입력하세요.'); | ||
| let num2 = prompt('두번째 수를 입력하세요.'); | ||
|
|
||
| const intNum1 = parseInt(num1); | ||
| const intNum2 = parseInt(num2); | ||
|
|
||
| if(operater === '+'){ | ||
| alert(`${num1} + ${num2}는 ${intNum1 + intNum2} 입니다.`); | ||
| } else if(operater === '-'){ | ||
| alert(`${num1} - ${num2}는 ${intNum1 - intNum2} 입니다.`); | ||
| } else if(operater === '*'){ | ||
| alert(`${num1} * ${num2}는 ${intNum1 * intNum2} 입니다.`); | ||
| } else if(operater === '/'){ | ||
| if(num2 === 0){ | ||
| alert("0으로는 나눌 수 없습니다."); | ||
| } else { | ||
| alert(`${num1} / ${num2}는 ${intNum1 / intNum2} 입니다.`); | ||
| } | ||
| } | ||
|
|
||
| //2단계 - 함수로 분리하기 | ||
| //입력을 받아서 변수에 저장하는 함수 | ||
| function getInputValues() { | ||
| const num1 = prompt('첫번째 수를 입력하세요.'); | ||
| const operater = prompt('연산자 (+, -, *, /)를 입력하세요.'); | ||
| const num2 = prompt('두번째 수를 입력하세요.'); | ||
| return { | ||
| num1: parseInt(num1), | ||
| num2: parseInt(num2), | ||
| operator: operater | ||
| }; | ||
| } | ||
|
|
||
| //입력값들을 계산해서 alert창으로 띄우는 함수 | ||
| function calculateAndShowResult(num1, num2, operator) { | ||
| if(operator === '+'){ | ||
| alert(`${num1} + ${num2} = ${num1 + num2}`); | ||
| } else if(operator === '-'){ | ||
| alert(`${num1} - ${num2} = ${num1 - num2}`); | ||
| } else if(operator === '*'){ | ||
| alert(`${num1} * ${num2} = ${num1 * num2}`); | ||
| } else if(operator === '/'){ | ||
| if(num2 === 0){ | ||
| alert("0으로 나눌수 없습니다."); | ||
| } else { | ||
| alert(`${num1} / ${num2} = ${num1 / num2}`); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| //프로그램 시작 함수 | ||
| function startProgram() { | ||
| const { num1, num2, operator } = getInputValues(); | ||
| calculateAndShowResult(num1, num2, operator); | ||
| } | ||
| startProgram(); | ||
|
|
||
|
|
||
| //3단계 - 객체 사용해보기 | ||
| const calculate = { | ||
| num1: parseInt(prompt('첫번째 수를 입력하세요.')), | ||
| operator: prompt('연산자 (+, -, *, /)를 입력하세요.'), | ||
| num2: parseInt(prompt('두번째 수를 입력하세요.')), | ||
| } | ||
|
|
||
| function calculateResult() { | ||
| if(calculate.operator === '+'){ | ||
| alert(`${calculate.num1} + ${calculate.num2} = ${calculate.num1 + calculate.num2}`); | ||
| } else if(calculate.operator === '-'){ | ||
| alert(`${calculate.num1} - ${calculate.num2} = ${calculate.num1 - calculate.num2}`); | ||
| } else if(calculate.operator === '*'){ | ||
| alert(`${calculate.num1} * ${calculate.num2} = ${calculate.num1 * calculate.num2}`); | ||
| } else if(calculate.operator === '/'){ | ||
| if(calculate.num2 === 0){ | ||
| alert("0으로 나눌수 없습니다."); | ||
| } else { | ||
| alert(`${calculate.num1} / ${calculate.num2} = ${calculate.num1 / calculate.num2}`); | ||
| } | ||
| } | ||
| } | ||
| calculateResult(); | ||
|
|
||
| //4단계 - 화살표 함수 익히기 | ||
| //위에 만들어둔 calculate 객체 사용 | ||
|
|
||
| const calculateResult2 = () => { | ||
| if(calculate.operator === '+'){ | ||
| alert(`${calculate.num1} + ${calculate.num2} = ${calculate.num1 + calculate.num2}`); | ||
| } else if(calculate.operator === '-'){ | ||
| alert(`${calculate.num1} - ${calculate.num2} = ${calculate.num1 - calculate.num2}`); | ||
| } else if(calculate.operator === '*'){ | ||
| alert(`${calculate.num1} * ${calculate.num2} = ${calculate.num1 * calculate.num2}`); | ||
| } else if(calculate.operator === '/'){ | ||
| if(calculate.num2 === 0){ | ||
| alert("0으로 나눌수 없습니다."); | ||
| } else { | ||
| alert(`${calculate.num1} / ${calculate.num2} = ${calculate.num1 / calculate.num2}`); | ||
| } | ||
| } | ||
| } | ||
| calculateResult2(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| // Mission 2 - 나만의 예제 만들기 | ||
| //Strict Equal 연산자와 조건부 연산자와 삼항 연산자, Double Exclamation Marks 연산자를 모두 한 번씩 이상 사용 | ||
|
|
||
| const inputString = prompt('문장을 입력하세요.(10글자 미만: 10원, 10글자 이상: 글자 당 100원) 공백포함'); | ||
| const length = inputString.length; | ||
| const isEmpty = length === 0; | ||
|
|
||
| if (!!inputString) { | ||
| alert('공백입니다.'); | ||
| } else if (length < 10) { | ||
| alert(`${length}자 입력, 10원이 부과됩니다. 메세지를 보내려면 확인을 눌러주세요.`); | ||
| } else { | ||
| const cost = length * 100; | ||
| alert(`${length}자 입력, ${cost}원이 부과됩니다. 메세지를 보내려면 확인을 눌러주세요.`); | ||
| } |
File renamed without changes.
File renamed without changes.
File renamed without changes.
Empty file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| font-family: Arial, sans-serif; | ||
| background-color: black; | ||
| color: azure; | ||
| } | ||
|
|
||
| .h1Text { | ||
| text-align: center; | ||
| line-height: 10em; | ||
| } | ||
|
|
||
| #todoForm { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| line-height: 10em; | ||
| } | ||
|
|
||
| #taskInput { | ||
| width: 50vw; | ||
| padding: 0.5em; | ||
| border: none; | ||
| border-radius: 5px; | ||
| background-color: #f5f5f5; | ||
| font-size: 20px; | ||
| transition: background-color 0.3s ease; | ||
| } | ||
|
|
||
| #todoList { | ||
| margin: 5em; | ||
| font-size: 20px; | ||
| line-height: 2em; | ||
| list-style: none; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>HJ's Todo-List</title> | ||
| <link rel="stylesheet" href="style.css" type="text/css" /> | ||
| </head> | ||
| <body> | ||
| <h1 class="h1Text">HJ's Todo-List</h1> | ||
| <form action="" id="todoForm"> | ||
| <input type="text" id="taskInput" placeholder="Enter a new todo..." required /> | ||
| </form> | ||
| <ul id="todoList"> | ||
|
|
||
| </ul> | ||
|
|
||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| const todoForm = document.getElementById('todoForm'); | ||
| const todoInput = document.querySelector('#todoForm input'); | ||
| const todoList = document.getElementById('todoList'); | ||
|
|
||
| const TODOS_KEY = 'todos'; | ||
|
|
||
| let todos = []; | ||
|
|
||
| function saveTodos() { | ||
| localStorage.setItem(TODOS_KEY, JSON.stringify(todos)); | ||
| } | ||
|
|
||
| function deleteTodo() { | ||
| const li = event.target.parentElement; | ||
| li.remove(); | ||
| todos = todos.filter((todo) => todo.id !== parseInt(li.id)); | ||
| saveTodos(); | ||
| } | ||
|
|
||
| function toggleTodoCompletion(event) { | ||
| const checkbox = event.target; | ||
| const li = checkbox.parentElement; | ||
| const todo = todos.find((todo) => todo.id === parseInt(li.id)); | ||
| todo.completed = checkbox.checked; | ||
| saveTodos(); | ||
| } | ||
|
|
||
| function paintTodo(newTodo) { | ||
| const li = document.createElement('li'); | ||
| li.id = newTodo.id; | ||
|
|
||
| const checkbox = document.createElement('input'); | ||
| checkbox.type = 'checkbox'; | ||
| checkbox.checked = newTodo.completed || false; // 초기 상태는 완료 여부 반영 | ||
| checkbox.addEventListener('change', toggleTodoCompletion); | ||
|
|
||
| const span = document.createElement('span'); | ||
| span.innerText = newTodo.text; | ||
|
|
||
| const btn = document.createElement('button'); | ||
| btn.innerText = 'X'; | ||
| btn.addEventListener('click', deleteTodo); | ||
|
|
||
| const editBtn = document.createElement('button'); | ||
| editBtn.innerText = '수정'; | ||
| editBtn.addEventListener('click', editTodo); | ||
|
|
||
| li.appendChild(checkbox); | ||
| li.appendChild(span); | ||
| li.appendChild(btn); | ||
| li.appendChild(editBtn); | ||
|
|
||
| todoList.appendChild(li); | ||
| } | ||
|
|
||
| function editTodo(event) { | ||
| const li = event.target.parentElement; | ||
| const todo = todos.find((todo) => todo.id === parseInt(li.id)); | ||
|
|
||
| // 기존의 span 요소를 입력 필드로 교체 | ||
| const span = li.querySelector('span'); | ||
| const input = document.createElement('input'); | ||
| input.type = 'text'; | ||
| input.value = span.innerText; | ||
| input.classList.add('editInput'); | ||
|
|
||
| // 입력 필드가 엔터 키를 누르면 수정 완료 | ||
| input.addEventListener('keypress', function(e) { | ||
| if (e.key === 'Enter') { | ||
| const newText = input.value.trim(); | ||
| if (newText !== '') { | ||
| todo.text = newText; | ||
| span.innerText = newText; | ||
| saveTodos(); | ||
| li.replaceChild(span, input); // 입력 필드를 다시 span으로 교체 | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| // 입력 필드로 교체 | ||
| li.replaceChild(input, span); | ||
|
|
||
| // 입력 필드에 포커스 주기 | ||
| input.focus(); | ||
| } | ||
|
|
||
|
|
||
| function handleTodoSubmit(event) { | ||
| event.preventDefault(); | ||
| const newTodo = todoInput.value.trim(); | ||
| if (newTodo === '') return; // 빈 문자열은 추가하지 않음 | ||
|
|
||
| const newTodoObj = { | ||
| text: newTodo, | ||
| id: Date.now(), | ||
| completed: false // 초기 상태는 미완료 | ||
| }; | ||
| todos.push(newTodoObj); | ||
| paintTodo(newTodoObj); | ||
| saveTodos(); | ||
|
|
||
| todoInput.value = ''; // 입력 필드 초기화 | ||
| } | ||
|
|
||
| todoForm.addEventListener('submit', handleTodoSubmit); | ||
|
|
||
| // 페이지 로드 시 localStorage에서 Todos 불러오기 | ||
| const savedTodos = localStorage.getItem(TODOS_KEY); | ||
| if (savedTodos) { | ||
| const parsedTodos = JSON.parse(savedTodos); | ||
| todos = parsedTodos; | ||
| parsedTodos.forEach(paintTodo); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| font-family: Arial, sans-serif; | ||
| background-color: black; | ||
| color: azure; | ||
| } | ||
|
|
||
| .h1Text { | ||
| text-align: center; | ||
| line-height: 7em; | ||
| font-size: 3rem; | ||
| } | ||
|
|
||
| #todoForm { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| line-height: 10em; | ||
| } | ||
|
|
||
| #taskInput { | ||
| width: 50vw; | ||
| padding: 0.5em; | ||
| border: none; | ||
| border-radius: 5px; | ||
| background-color: #f5f5f5; | ||
| font-size: 2rem; | ||
| transition: background-color 0.3s ease; | ||
| } | ||
|
|
||
| #todoList { | ||
| margin: 5em; | ||
| font-size: 3rem; | ||
| line-height: 2em; | ||
| list-style: none; | ||
| } | ||
|
|
||
| #todoList > li { | ||
| width: 80vw; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| #todoList > li > input[type="checkbox"] { | ||
| width: 2vw; | ||
| height: auto; | ||
| zoom: 3; | ||
| accent-color: purple; | ||
| } | ||
|
|
||
| #todoList > li > button { | ||
| width: 4vw; | ||
| height: 2em; | ||
| margin: 0 2em; | ||
| background-color: #f5f5f5; | ||
| } | ||
|
|
||
| #todoList > li > button:hover { | ||
| background-color: #d3d3d3; | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
다른 단위들은 상대적인 단위들을 사용하셨네요!! 좋습니다~
그렇다면 font-size도 rem이라는 상대적인 단위를 사용해보는 것이 어떨까요?