Skip to content

Commit 9b4dadc

Browse files
Akash52Akash52
committed
initial setup for javascript dom project
1 parent 79b7583 commit 9b4dadc

21 files changed

Lines changed: 23433 additions & 0 deletions

‎javascript-dom-project/.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["@babel/preset-env"]
3+
}

‎javascript-dom-project/.eslintrc.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es6": true
5+
},
6+
"extends": "eslint:recommended",
7+
"globals": {
8+
"Atomics": "readonly",
9+
"SharedArrayBuffer": "readonly"
10+
},
11+
"parserOptions": {
12+
"ecmaVersion": 2020,
13+
"sourceType": "module"
14+
},
15+
"rules": {
16+
"no-console": "off"
17+
}
18+
}

‎javascript-dom-project/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
dist/*

‎javascript-dom-project/README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<h1 align="center">
2+
<img width="40" valign="bottom" src="https://ultimatecourses.com/static/icons/javascript.svg">
3+
JavaScript DOM: Final Project
4+
</h1>
5+
<h4 align="center">Final Project for the Ultimate Courses <a href="https://ultimatecourses.com/learn/javascript-dom" target="_blank">JavaScript DOM course</a>.</h4>
6+
7+
---
8+
9+
<div align="center">
10+
<a href="https://ultimatecourses.com/courses/javascript" target="_blank"><img width="100%" src="https://ultimatecourses.com/static/banners/ultimate-javascript-leader.svg"></a>
11+
</div>
12+
13+
---
14+
15+
Members, please refer to the [course setup](https://ultimatecourses.com/course/javascript-dom) instructions to get started!

‎javascript-dom-project/assets/css/style.css‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
@font-face {
2+
font-family: 'Geomanist';
3+
src: url('../fonts/geomanist/geomanist-book.eot');
4+
src: url('../fonts/geomanist/geomanist-book.eot?#iefix')
5+
format('embedded-opentype'),
6+
url('../fonts/geomanist/geomanist-book.woff2') format('woff2'),
7+
url('../fonts/geomanist/geomanist-book.woff') format('woff'),
8+
url('../fonts/geomanist/geomanist-book.ttf') format('truetype'),
9+
url('../fonts/geomanist/geomanist-book.svg#geomanist-book') format('svg');
10+
font-weight: normal;
11+
font-style: normal;
12+
}
13+
* {
14+
box-sizing: border-box;
15+
}
16+
html {
17+
font-family: 'Geomanist';
18+
font-size: 14px;
19+
font-weight: normal;
20+
letter-spacing: 0.2px;
21+
color: #545e6f;
22+
-webkit-font-smoothing: antialiased;
23+
-moz-osx-font-smoothing: grayscale;
24+
}
25+
html,
26+
body {
27+
padding: 0;
28+
margin: 0;
29+
}
30+
body {
31+
background: #f1f2f5;
32+
}
33+
.header {
34+
background: #451771;
35+
padding: 20px 25px;
36+
}
37+
.logo {
38+
display: flex;
39+
justify-content: center;
40+
}
41+
.logo-ultimate {
42+
height: 24px;
43+
width: 24px;
44+
background: url('../img/ultimate.svg') no-repeat center center;
45+
background-size: contain;
46+
}
47+
.logo-name {
48+
margin: 0 0 0 14px;
49+
line-height: 24px;
50+
font-size: 1.2rem;
51+
color: #fff;
52+
}
53+
.header-logo img {
54+
height: 100%;
55+
}
56+
#app {
57+
padding: 40px 0;
58+
}
59+
/* Todo Styling */
60+
.todos {
61+
width: 420px;
62+
margin: 0 auto;
63+
background: #fff;
64+
border-radius: 10px;
65+
box-shadow: 0 3px 0 rgba(84, 94, 111, 0.2);
66+
}
67+
.todos-header {
68+
position: relative;
69+
padding: 24px 24px 0 24px;
70+
}
71+
.todos-header div {
72+
color: #777d8c;
73+
display: flex;
74+
}
75+
.todos-header div p {
76+
margin: 0;
77+
}
78+
.todos-title {
79+
margin: 0 0 8px;
80+
font-size: 24px;
81+
letter-spacing: 0.2px;
82+
font-weight: normal;
83+
}
84+
.todos-clear {
85+
outline: 0;
86+
border: 0;
87+
font-family: 'Geomanist';
88+
font-size: 12px;
89+
color: #939aab;
90+
padding: 0 5px;
91+
border-radius: 3px;
92+
cursor: pointer;
93+
border-bottom: 1px solid transparent;
94+
margin-left: auto;
95+
}
96+
.todos-clear:hover {
97+
color: #ff5858;
98+
}
99+
.todos-clear:focus {
100+
color: #ff5858;
101+
border-color: #ff5858;
102+
}
103+
.todos-form {
104+
padding: 22px 24px 18px;
105+
}
106+
.todos-form input {
107+
width: 100%;
108+
border-radius: 4px;
109+
border: 1px solid #dcdfe4;
110+
padding: 12px 14px;
111+
outline: 0;
112+
font-family: 'Geomanist';
113+
font-size: 14px;
114+
color: #545e6f;
115+
}
116+
.todos-form input::placeholder {
117+
color: #777d8c;
118+
}
119+
.todos-form input:focus {
120+
border-color: #24b373;
121+
box-shadow: 0 0 0 3px #cff1e2;
122+
}
123+
.todos-list {
124+
margin: 0;
125+
padding: 0;
126+
list-style: none;
127+
}
128+
.todos-list li {
129+
position: relative;
130+
line-height: 26px;
131+
font-size: 16px;
132+
border-top: 1px solid #dcdfe4;
133+
padding: 8px 24px;
134+
height: 42px;
135+
display: flex;
136+
}
137+
.todos-list li:first-child {
138+
border-top: 1px solid transparent;
139+
}
140+
.todos-list li:last-child input[type='text'] {
141+
border-radius: 0 0 10px 10px;
142+
}
143+
.todos-list li input[type='checkbox'] {
144+
-webkit-appearance: none;
145+
margin: 0;
146+
padding: 0;
147+
border: 1px solid #d2d5da;
148+
background: #fff;
149+
border-radius: 3px;
150+
width: 16px;
151+
height: 16px;
152+
outline: none;
153+
position: relative;
154+
z-index: 2;
155+
top: 3px;
156+
order: 1;
157+
margin-right: 10px;
158+
flex-shrink: 0;
159+
}
160+
.todos-list li input[type='checkbox']:checked {
161+
background: #24b373 url('../img/done.svg') no-repeat center center;
162+
background-size: contain;
163+
border-color: #24b373;
164+
}
165+
.todos-list li input[type='checkbox']:focus {
166+
border-color: #24b373;
167+
box-shadow: 0 0 0 3px #cff1e2;
168+
}
169+
.todos-list li span {
170+
flex-grow: 1;
171+
order: 2;
172+
}
173+
.todos-list li input[type='text'] {
174+
order: 2;
175+
width: 100%;
176+
padding: 0 0 0 50px;
177+
border: none;
178+
outline: 0;
179+
font-family: 'Geomanist';
180+
color: #545e6f;
181+
line-height: 26px;
182+
font-size: 16px;
183+
letter-spacing: 0.2px;
184+
position: absolute;
185+
top: 0;
186+
left: 0;
187+
height: 42px;
188+
border-bottom: 1px solid #d2d5da;
189+
box-shadow: inset 0 1px 3px #d2d5da;
190+
z-index: 1;
191+
}
192+
.todos-list li button {
193+
border-radius: 50%;
194+
width: 24px;
195+
height: 24px;
196+
background: url('../img/delete.svg') no-repeat center center;
197+
background-size: contain;
198+
background-clip: padding-box;
199+
outline: 0;
200+
cursor: pointer;
201+
padding: 0;
202+
border: 1px solid transparent;
203+
margin-left: auto;
204+
order: 3;
205+
flex-shrink: 0;
206+
position: relative;
207+
z-index: 2;
208+
}
209+
.todos-list li button:hover {
210+
background: url('../img/delete-full.svg') no-repeat center center;
211+
background-size: contain;
212+
background-clip: padding-box;
213+
}
214+
.todos-list li button:focus {
215+
background: url('../img/delete-full.svg') no-repeat center center;
216+
background-size: contain;
217+
background-clip: padding-box;
218+
}
219+
.todos-complete span {
220+
text-decoration: line-through;
221+
color: #939aab;
222+
}

‎javascript-dom-project/assets/fonts/geomanist/geomanist-book.eot‎

72.1 KB
Binary file not shown.

0 commit comments

Comments
 (0)