Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion practice/practice1.js

This file was deleted.

1 change: 0 additions & 1 deletion practice/practice2.js

This file was deleted.

File renamed without changes.
Empty file removed todolist/index.html
Empty file.
104 changes: 104 additions & 0 deletions todolist/practice/practice1.js
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();
15 changes: 15 additions & 0 deletions todolist/practice/practice2.js
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}원이 부과됩니다. 메세지를 보내려면 확인을 눌러주세요.`);
}
Empty file removed todolist/script.js
Empty file.
41 changes: 41 additions & 0 deletions todolist/style.css
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;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

다른 단위들은 상대적인 단위들을 사용하셨네요!! 좋습니다~
그렇다면 font-size도 rem이라는 상대적인 단위를 사용해보는 것이 어떨까요?

transition: background-color 0.3s ease;
}

#todoList {
margin: 5em;
font-size: 20px;
line-height: 2em;
list-style: none;
}
20 changes: 20 additions & 0 deletions todolist/todolist/index.html
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>
113 changes: 113 additions & 0 deletions todolist/todolist/script.js
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);
}
65 changes: 65 additions & 0 deletions todolist/todolist/style.css
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;
}