Skip to content

Commit 31bec53

Browse files
TwinceTwince
Twince
authored and
Twince
committed
v1.0
Trying out Neumorphism design!
1 parent 4e8a866 commit 31bec53

File tree

5 files changed

+350
-1
lines changed

5 files changed

+350
-1
lines changed

‎.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎Css/Style.css

+234
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
@charset 'utf-8';
2+
* {
3+
box-sizing: border-box;
4+
font-family: 'Raleway', sans-serif;
5+
font-family: 'Staatliches', cursive;
6+
}
7+
body {
8+
background-color: #ecf0f3;
9+
}
10+
/* .subtitle {
11+
text-align: center;
12+
font-size: 28px;
13+
padding-top: 14px;
14+
letter-spacing: 0.5px;
15+
margin: 0 auto;
16+
background: linear-gradient(to right, #eea849, #ff3984);
17+
-webkit-background-clip: text;
18+
-webkit-text-fill-color: transparent;
19+
text-shadow:
20+
0px 0px 0px #ecf0f3,
21+
8px 8px 15px #aaeeeeef,
22+
-7px -7px 15px #ffffff;
23+
} */
24+
25+
26+
.Mainframe {
27+
background-color: #ecf0f3;
28+
margin:50px auto;
29+
width: 600px;
30+
height: 840px;
31+
border-radius: 50px;
32+
-webkit-appearance: none;
33+
box-shadow:
34+
13px 13px 20px #cbced1,
35+
-13px -13px 20px #ffffff
36+
}
37+
38+
.title>h2 {
39+
text-align: center;
40+
font-size: 28px;
41+
padding-top: 14px;
42+
letter-spacing: 0.5px;
43+
margin: 40px 50px 50px 30px;
44+
font-size: 100px;
45+
background: linear-gradient(to right, #eea849, #ff3984);
46+
-webkit-background-clip: text;
47+
-webkit-text-fill-color: transparent;
48+
text-shadow:
49+
0px 0px 0px #ecf0f3,
50+
8px 8px 15px #aaeeeeef,
51+
-7px -7px 15px #ffffff;
52+
}
53+
54+
.Mainframe .content {
55+
margin: 20px auto;
56+
width: 75%;
57+
height: 588px;
58+
border-radius: 50px;
59+
box-shadow:
60+
inset 8px 8px 8px hsla(0, 0%, 29%, 0.103),
61+
inset -8px -8px 8px #ffffff;
62+
}
63+
#k-font {
64+
font-family: 'Jua', sans-serif;
65+
}
66+
input[type=text] {
67+
margin: 9% 6.5% 30px 8%;
68+
border: none;
69+
border-radius: 30px;
70+
outline: none;
71+
background: none;
72+
font-size: 18px;
73+
color: #555;
74+
padding: 2% 15% 2% 5%;
75+
text-align: left;
76+
box-shadow:
77+
13px 13px 20px #cbced1,
78+
-13px -13px 20px #ffffff
79+
}
80+
input[type=text]:hover {
81+
margin: 9% 6.5% 30px 8%;
82+
border: none;
83+
border-radius: 10px;
84+
outline: none;
85+
background: none;
86+
font-size: 18px;
87+
color: #555;
88+
padding: 2% 15% 2% 5%;
89+
text-align: left;
90+
box-shadow:
91+
13px 13px 20px #cbced1,
92+
-13px -13px 20px #ffffff;
93+
transition: 0.3s ease-in-out;
94+
}
95+
input[type=text]:focus{
96+
margin: 9% 6.5% 30px 8%;
97+
border: none;
98+
border-radius: 10px;
99+
outline: none;
100+
background: rgba(255, 255, 255, 1);
101+
font-size: 18px;
102+
color: rgb(255, 73, 73);
103+
padding: 2% 15% 2% 5%;
104+
text-align: left;
105+
box-shadow:
106+
inset 13px 13px 20px #e9ecf0,
107+
-13px -13px 20px #ffffff;
108+
transition: 0.3s ease-in-out;
109+
}
110+
111+
112+
input[type=button] {
113+
margin: 0 auto;
114+
padding: 14px 20px;
115+
border-radius: 50%;
116+
border: none;
117+
outline: none;
118+
color: coral;
119+
box-shadow:
120+
13px 13px 20px #cbced1,
121+
-13px -13px 20px #ffffff;
122+
transition: 0.1s ease-in-out;
123+
}
124+
125+
input[type=button]:hover {
126+
margin: 0 auto;
127+
padding: 14px 20px;
128+
border-radius: 12px;
129+
border: none;
130+
outline: none;
131+
color: coral;
132+
box-shadow:
133+
inset 13px 13px 20px #e9ecf0,
134+
-13px -13px 20px #ffffff;
135+
}
136+
137+
138+
139+
span {
140+
font-family: 'Jua', sans-serif;
141+
}
142+
143+
.js-todoList li{
144+
margin-right: 15%;
145+
margin-top: 15px;
146+
padding: 10px;
147+
border-radius: 20px;
148+
box-shadow:
149+
13px 13px 20px #cbced1,
150+
-13px -13px 20px #ffffff
151+
152+
}
153+
.js-todoList span {
154+
margin: 0 0 0 20px;
155+
}
156+
157+
ul {
158+
list-style-type: none;
159+
margin-left: 6px;
160+
font-size: 20px;
161+
}
162+
li button {
163+
border: none;
164+
outline: none;
165+
border-radius: 50%;
166+
padding: 8px 14px;
167+
position: absolute;
168+
left: 63%;
169+
background: none;
170+
box-shadow:
171+
8px 8px 8px hsla(0, 0%, 29%, 0.103),
172+
-8px -8px 8px #ffffff;
173+
cursor: pointer;
174+
}
175+
176+
li button:hover {
177+
transition: 0.07s;
178+
border: none;
179+
outline: none;
180+
border-radius: 50%;
181+
padding: 8px 14px;
182+
color: coral;
183+
background: none;
184+
box-shadow:
185+
inset 8px 8px 8px hsla(0, 0%, 29%, 0.103),
186+
inset -8px -8px 8px #ffffff;
187+
cursor: pointer;
188+
transition: all .3s ease-in-out;
189+
}
190+
191+
li input[type=checkbox] {
192+
-webkit-appearance: none;
193+
width: 13px;
194+
height: 13px;
195+
position: absolute;
196+
left: 59.8%;
197+
background-color: #b8babd;
198+
box-shadow:
199+
5px 5px 10px rgba(0, 0, 0, .2),
200+
-5px -5px 10px rgba(255, 255, 255, 1),
201+
inset 0 0 0 rgba(0, 0, 0, .2),
202+
inset 0 0 0 rgba(255, 255, 255, .2);
203+
border-radius: 50%;
204+
outline: none;
205+
cursor: pointer;
206+
transition: all .2s ease-in-out;
207+
}
208+
209+
li input[type=checkbox]:hover {
210+
background-color: #e06868;
211+
border-radius: 5px;
212+
width: 20px;
213+
height: 13px;
214+
box-shadow:
215+
0 0 0 rgba(0, 0, 0, .2),
216+
0 0 0 rgba(255, 255, 255, 1),
217+
inset 5px 5px 10xp rgba(0, 0, 0, .2),
218+
inset -5px -5px 10px rgba(255, 255, 255, .2);
219+
}
220+
221+
li input[type=checkbox]:checked {
222+
background-color: #686de0;
223+
border-radius: 5px;
224+
width: 20px;
225+
height: 13px;
226+
box-shadow:
227+
0 0 0 rgba(0, 0, 0, .2),
228+
0 0 0 rgba(255, 255, 255, 1),
229+
inset 5px 5px 10xp rgba(0, 0, 0, .2),
230+
inset -5px -5px 10px rgba(255, 255, 255, .2);
231+
}
232+
h3 {
233+
color: rgb(87, 87, 87);
234+
}

‎Js/todo.js

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
const form = document.querySelector('.js-todoForm'),
2+
todoInput = form.querySelector('input'),
3+
todoList = document.querySelector('.js-todoList');
4+
5+
const TODOS_LOCALSTORAGE = 'todos';
6+
7+
let todos = [];
8+
9+
function deleteTodo(event) {
10+
const btn = event.target;
11+
const li = btn.parentNode;
12+
todoList.removeChild(li);
13+
const clearTodos = todos.filter(todo => {
14+
console.log(todo.id, li.id);
15+
return todo.id !== Number(li.id);
16+
});
17+
todos = clearTodos;
18+
setTodos();
19+
}
20+
21+
22+
function setTodos() {
23+
localStorage.setItem('todos', JSON.stringify(todos));
24+
}
25+
26+
27+
function showTodos(value) {
28+
const li = document.createElement('li');
29+
const span = document.createElement('span');
30+
const delBtn = document.createElement('button');
31+
32+
var done = document.createElement("input");
33+
done.setAttribute("type", "checkbox");
34+
35+
const newId = todos.length + 1;
36+
delBtn.innerText = 'X';
37+
delBtn.addEventListener('click', deleteTodo);
38+
span.innerText = value;
39+
li.appendChild(span);
40+
li.id = newId;
41+
// appendChild 태그는 부모엘리먼트의 자식 엘리먼트로 지정
42+
li.appendChild(delBtn);
43+
li.appendChild(done);
44+
todoList.appendChild(li);
45+
const todoOBJ = {
46+
text: value,
47+
id: newId
48+
};
49+
todos.push(todoOBJ);
50+
setTodos();
51+
}
52+
53+
function handleSubmit(event) {
54+
event.preventDefault();
55+
const currentValue = todoInput.value;
56+
showTodos(currentValue);
57+
todoInput.value = '';
58+
}
59+
60+
function loadTodos() {
61+
const loadedTodos = localStorage.getItem(TODOS_LOCALSTORAGE);
62+
if (loadedTodos !== null) {
63+
const parsedTodos = JSON.parse(loadedTodos);
64+
parsedTodos.forEach(todo => showTodos(todo.text));
65+
}
66+
}
67+
68+
function init() {
69+
loadTodos();
70+
form.addEventListener('submit', handleSubmit);
71+
var t = document.getElementById('add');
72+
t.addEventListener('click', handleSubmit);
73+
}
74+
75+
init();

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
# Todo
1+
# Todo
2+

‎TODO_index.html

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="Ko">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
7+
<link rel="stylesheet" href="css/Style.css">
8+
<title>TODO</title>
9+
<style>
10+
/* Einglish */
11+
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,900&family=Staatliches&display=swap');
12+
/* Korean */
13+
@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
14+
</style>
15+
</head>
16+
<body>
17+
<div class="Mainframe">
18+
<div class="title">
19+
<h2>T O D O</h2>
20+
<div class="subtitle">
21+
<!-- <span class="subtitle">2020-6-21</span> -->
22+
<div class="content">
23+
<form class="js-todoForm">
24+
<input type="text" id="k-font" class="input-box" placeholder="클릭하여 목록작성" autocomplete="off">
25+
<input type="button" class="add" value="+" id="add">
26+
</form>
27+
<ul class="js-todoList"></ul>
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
<h3 id="k-font" style="text-align: center">-페이지 넘어가는 기능을 구현중..(현재로썬 8개가 최대)<br>-Local Strage 기능을 지원해요!<br>체크박스 빼구요,,T^T</h3>
35+
<script src="Js/todo.js"></script>
36+
</body>
37+
</html>

0 commit comments

Comments
 (0)