Skip to content
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

Feat/to do 리스트 구현 #1 #7

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
41 changes: 41 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
module.exports = {
'env': {
'browser': true,
'es2021': true
},
'extends': 'eslint:recommended',
'overrides': [
{
'env': {
'node': true
},
'files': [
'.eslintrc.{js,cjs}'
],
'parserOptions': {
'sourceType': 'script'
}
}
],
'parserOptions': {
'ecmaVersion': 'latest'
},
'rules': {
'indent': [
'error',
2
],
'linebreak-style': [
'error',
'unix'
],
'quotes': [
'error',
'single'
],
'semi': [
'error',
'always'
]
}
};
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules/
48 changes: 24 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
# 42gg 프론트엔드 온보딩 1단계

## 공통 조건

- 온보딩 프로젝트는 개인 계정으로 fork하여 진행하고 PR로 제출합니다.
- git / github / code 컨벤션은 42gg notion에 있는 자료를 적극 반영합니다.
- 기본 기능 외 추가 기능, 디자인 구현은 자유입니다.
- 최종 제출품에는 README 작성이 되있어야 합니다.([예시](https://github.com/42organization/42gg.client/blob/main/README.md))

## todo list 만들기

- (필수) Javascript, HTML, CSS
- (필수) todo 생성(Create), 조회(Read) 기능 구현하기 (새로고침 고려 X)
- (필수) todo 완료 상태 체크 기능 구현하기 (정렬은 선택사항)
- (선택) todo 수정(Update), 삭제(Delete) 기능 구현하기 (새로고침 고려 X)
- (선택) 디자인 적용하기
- (선택) 무료로 배포하기

## 참고

- 데이터 관리는 하단의 방식 중 하나 선택하시면 됩니다.
- localstorage
- local server(예. [https://github.com/shal0mdave/todo-api.git](https://github.com/shal0mdave/todo-api.git), lowdb)
- mock api(예. [https://dummyjson.com/](https://dummyjson.com/))
- todo list를 구현하기 위해 필요한 기능들을 미리 생각(그려보고)해보고, 구현해보세요.
- 궁금한 사항은 issue에 등록해주세요.
## 프로젝트 소개

- 42gg 프론트엔드 온보딩 1단계 과제 결과물입니다.
- Javascript, HTML, CSS로 기본적인 todo-list를 구현하였습니다.

## 기능

- todo 생성, 조회, 수정, 삭제 기능을 구현하였습니다.
- 완료 상태 체크 기능을 구현하였습니다.

- 할 일 추가
![todo-list](public/image/todo-list1.png)

- 수정 및 수정 취소
![edit-todo](public/image/todo-list2.png)

- 수정 완료
![complete-editing](public/image/todo-list3.png)

- 삭제
![delete-todo](public/image/todo-list4.png)

- 완료 상태 체크
![check-todo](public/image/todo-list5.png)
20 changes: 20 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>jincpark's To-Do list</title>
</head>
<body>
<div id="app">
<h1>To-Do list</h1>
<form id="todo-form">
<input id="todo-input" type="text" placeholder="할 일을 입력하세요.">
<button type="submit" id="todo-submit" class="todo-submit-button">추가</button>
</form>
<ul id="todo-list">
</div>
<script src="todo.js"></script>
</body>
</html>
Loading