Skip to content

Commit 3cbc983

Browse files
oskaldevoskaldev
committed
init todo
1 parent db6b1fe commit 3cbc983

File tree

5 files changed

+336
-82
lines changed

5 files changed

+336
-82
lines changed

‎public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<link rel="stylesheet" href="<%= BASE_URL %>style.css">
89
<title><%= htmlWebpackPlugin.options.title %></title>
910
</head>
1011
<body>

‎public/style.css

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css');
2+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
3+
4+
:root {
5+
--primary-color: #e30808;
6+
--secondary-color: #e3e3e3;
7+
--light-color: #f0f0f0;
8+
--reverse-color: #ffffff;
9+
--default-color: #000000;
10+
}
11+
12+
html {
13+
font-size: 62.5%;
14+
}
15+
16+
body {
17+
display: flex;
18+
justify-content: center;
19+
margin: 0;
20+
padding: 6.4rem 1.2rem;
21+
font-family: 'Roboto', sans-serif;
22+
font-size: 1.6rem;
23+
color: var(--default-color);
24+
}
25+
26+
button {
27+
padding: 0;
28+
font: inherit;
29+
background-color: transparent;
30+
border: none;
31+
}
32+
33+
.button {
34+
font-size: 1.6rem;
35+
padding: 0.6rem 1rem;
36+
border-radius: 1.6rem;
37+
}
38+
39+
.button--primary {
40+
color: var(--primary-color);
41+
border: 2px solid var(--primary-color);
42+
}
43+
44+
.button--filled {
45+
padding: 0.8rem 1rem;
46+
color: var(--reverse-color);
47+
background-color: var(--primary-color);
48+
}
49+
50+
.button--primary:hover {
51+
opacity: 0.8;
52+
}
53+
54+
#app {
55+
display: flex;
56+
flex-direction: column;
57+
gap: 3.2rem;
58+
width: 34rem;
59+
}
60+
61+
.app-header {
62+
display: flex;
63+
justify-content: center;
64+
align-items: center;
65+
padding: 1.6rem;
66+
}
67+
68+
.logo {
69+
font-size: 2.4rem;
70+
font-weight: 500;
71+
color: var(--primary-color);
72+
}
73+
74+
.burger {
75+
font-size: 1.9rem;
76+
}
77+
78+
.burger--active {
79+
color: var(--primary-color);
80+
}
81+
82+
.burger:hover {
83+
color: var(--primary-color);
84+
}
85+
86+
.app-filters {
87+
display: flex;
88+
flex-direction: column;
89+
gap: 1.6rem;
90+
}
91+
92+
.text-input {
93+
display: flex;
94+
align-items: center;
95+
padding: 0.8rem 1.6rem;
96+
box-sizing: border-box;
97+
font: inherit;
98+
font-size: 1.6rem;
99+
border: 0.1rem solid var(--light-color);
100+
border-radius: 1.6rem;
101+
}
102+
103+
.text-input--focus {
104+
border: 0.2rem solid var(--primary-color);
105+
}
106+
107+
.text-input .input {
108+
flex-grow: 1;
109+
padding: 0;
110+
border: none;
111+
}
112+
113+
.text-input .input:focus {
114+
outline: none;
115+
}
116+
117+
.text-input--search::after {
118+
content: '\F52A';
119+
font-family: bootstrap-icons !important;
120+
font-size: 1.7rem;
121+
color: var(--primary-color);
122+
}
123+
124+
.toggle-group {
125+
display: grid;
126+
grid-template-columns: repeat(3, 1fr);
127+
box-sizing: border-box;
128+
border: 0.1rem solid var(--light-color);
129+
border-radius: 1.6rem;
130+
}
131+
132+
.toggle-group .button {
133+
font-size: 1.6rem;
134+
}
135+
136+
.toggle-group .button:not(.button--primary):hover {
137+
color: var(--primary-color);
138+
}
139+
140+
.app-main {
141+
display: grid;
142+
gap: 1.6rem;
143+
}
144+
145+
.todo-list {
146+
display: grid;
147+
gap: 1.6rem;
148+
margin: 0;
149+
padding: 0;
150+
list-style: none;
151+
}
152+
153+
.todo-item {
154+
display: grid;
155+
grid-template-columns: 2.4rem 1fr 1.6rem;
156+
align-items: center;
157+
gap: 1.6rem;
158+
padding: 1.6rem 2rem;
159+
border: 0.1rem solid var(--light-color);
160+
border-radius: 1.6rem;
161+
transition: box-shadow 0.2s;
162+
cursor: pointer;
163+
}
164+
165+
.todo-item:hover {
166+
box-shadow: 0px 1px 20px rgb(240 240 240 / 80%);
167+
}
168+
169+
.todo-item__text {
170+
font-weight: 400;
171+
}
172+
173+
.todo-item--high .todo-item__text {
174+
font-weight: 500;
175+
}
176+
177+
.todo-item--low .todo-item__text {
178+
font-weight: 300;
179+
}
180+
181+
.todo-item--done .todo-item__text {
182+
text-decoration: line-through;
183+
}
184+
185+
.todo-item__status {
186+
display: flex;
187+
justify-content: center;
188+
align-items: center;
189+
width: 2.4rem;
190+
height: 2.4rem;
191+
font-size: 2.4rem;
192+
opacity: 0;
193+
transition: opacity 0.2s;
194+
}
195+
196+
.todo-item__status .bi-check2 {
197+
position: relative;
198+
top: 0.1rem;
199+
color: var(--primary-color);
200+
}
201+
202+
.todo-item--done .todo-item__status {
203+
opacity: 1;
204+
}
205+
206+
.todo-item:hover .todo-item__status {
207+
opacity: 1;
208+
}
209+
210+
.todo-item--done .todo-item__status .bi-check2 {
211+
display: block;
212+
}
213+
214+
.todo-item__remove-button {
215+
opacity: 0;
216+
color: var(--secondary-color);
217+
transition: opacity 0.2s;
218+
}
219+
220+
.todo-item:hover .todo-item__remove-button {
221+
opacity: 1;
222+
}
223+
224+
.todo-item__remove-button:hover {
225+
color: var(--primary-color);
226+
}
227+
228+
.add-todo {
229+
display: grid;
230+
gap: 1.6rem;
231+
}
232+
233+
.add-todo__show-form-button {
234+
grid-template-columns: 1fr;
235+
justify-items: center;
236+
padding: 1.2rem 1.4rem;
237+
color: var(--primary-color);
238+
font-size: 1.9rem;
239+
border: 0.1rem solid var(--light-color);
240+
border-radius: 1.6rem;
241+
transition: box-shadow 0.2s;
242+
}
243+
244+
.add-todo__show-form-button:hover {
245+
box-shadow: 0px 1px 20px rgb(240 240 240 / 80%);
246+
}
247+
248+
.add-todo__form {
249+
display: grid;
250+
gap: 1.6rem;
251+
padding: 1.4rem 1.6rem 2rem;
252+
border: 0.1rem solid var(--light-color);
253+
border-radius: 1.6rem;
254+
box-shadow: 0px 1px 20px rgb(240 240 240 / 80%);
255+
}
256+
257+
.add-todo__form .close-button {
258+
justify-self: end;
259+
font-size: 2rem;
260+
}
261+
262+
.add-todo__form .close-button:hover {
263+
color: var(--primary-color);
264+
}
265+
266+
.app-footer {
267+
font-size: 1.4rem;
268+
text-align: center;
269+
color: var(--secondary-color);
270+
}

‎src/App.vue

Lines changed: 65 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,71 @@
11
<template>
2-
<img alt="Vue logo" src="./assets/logo.png">
3-
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
4-
</template>
2+
<header class="app-header">
3+
<span class="logo">TODOS</span>
4+
</header>
5+
6+
<aside class="app-filters">
7+
<section class="toggle-group">
8+
<button class="button button--primary">All</button>
9+
<button class="button">Active</button>
10+
<button class="button">Done</button>
11+
</section>
12+
</aside>
13+
14+
<main class="app-main">
15+
<ul class="todo-list">
16+
<li class="todo-item todo-item--done">
17+
<div class="todo-item__status">
18+
<i class="bi bi-check2"></i>
19+
</div>
20+
<span class="todo-item__text">Learn the basics of Vue</span>
21+
<button class="todo-item__remove-button">
22+
<i class="bi bi-trash3"></i>
23+
</button>
24+
</li>
25+
<li class="todo-item">
26+
<div class="todo-item__status">
27+
<i class="bi bi-check2"></i>
28+
</div>
29+
<span class="todo-item__text">Learn the basics of Typescript</span>
30+
<button class="todo-item__remove-button">
31+
<i class="bi bi-trash3"></i>
32+
</button>
33+
</li>
34+
<li class="todo-item">
35+
<div class="todo-item__status">
36+
<i class="bi bi-check2"></i>
37+
</div>
38+
<span class="todo-item__text">Subscribe to the channel</span>
39+
<button class="todo-item__remove-button">
40+
<i class="bi bi-trash3"></i>
41+
</button>
42+
</li>
43+
</ul>
544

6-
<script lang="ts">
7-
import { defineComponent } from 'vue';
8-
import HelloWorld from './components/HelloWorld.vue';
45+
<section class="add-todo">
46+
<button class="add-todo__show-form-button">
47+
<i class="bi bi-plus-lg"></i>
48+
</button>
49+
<form class="add-todo__form">
50+
<button class="close-button" type="button">
51+
<i class="bi bi-x"></i>
52+
</button>
53+
<div class="text-input text-input--focus">
54+
<input class="input" />
55+
</div>
56+
<button class="button button--filled">Add task</button>
57+
</form>
58+
</section>
59+
</main>
60+
61+
<footer class="app-footer">2 more to do, 1 done</footer>
62+
</template>
963

10-
export default defineComponent({
11-
name: 'App',
12-
components: {
13-
HelloWorld
64+
<script>
65+
export default {
66+
components: {
67+
},
1468
}
15-
});
1669
</script>
1770

18-
<style>
19-
#app {
20-
font-family: Avenir, Helvetica, Arial, sans-serif;
21-
-webkit-font-smoothing: antialiased;
22-
-moz-osx-font-smoothing: grayscale;
23-
text-align: center;
24-
color: #2c3e50;
25-
margin-top: 60px;
26-
}
27-
</style>
71+
<style scoped></style>

‎src/assets/logo.png

-6.69 KB
Binary file not shown.

0 commit comments

Comments
 (0)