Skip to content

Commit 3197a57

Browse files
mtufailshaikhmtufailshaikh
committed
todo list components
1 parent a542387 commit 3197a57

30 files changed

+11478
-0
lines changed

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"plugins": ["transform-object-rest-spread"]
3+
}

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
.DS_Store
3+
.sass-cache

‎assets/sass/todo.scss

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
// variables
2+
$blue : #4c238a;
3+
$white: #ffffff;
4+
5+
6+
body {
7+
background: $blue;
8+
color: $white;
9+
font-size: 14px;
10+
font-family: 'Arial';
11+
padding: 0;
12+
margin: 0;
13+
14+
main {
15+
padding: 0 3rem;
16+
}
17+
18+
.app {
19+
&__items {
20+
list-style-type: none;
21+
min-width: 200px;
22+
line-height: 16px;
23+
padding: 0;
24+
li {
25+
padding: 5px 0;
26+
button {
27+
background-color: $white;
28+
color: red;
29+
margin-left: 1rem;
30+
display: inline-block;
31+
border: 0px;
32+
border-radius: 50%;
33+
width: 20px;
34+
height: 20px;
35+
cursor: pointer;
36+
}
37+
}
38+
39+
}
40+
&__status {
41+
background: #A5299D;
42+
padding: 20px 15px;
43+
border-radius: 0 0 5px 5px;
44+
margin-bottom: 3rem;
45+
}
46+
}
47+
48+
.boilerform {
49+
background: rgb(229,112,231);
50+
background: -moz-linear-gradient(45deg, rgba(229,112,231,1) 0%, rgba(200,94,199,1) 47%, rgba(168,73,163,1) 100%);
51+
background: -webkit-linear-gradient(45deg, rgba(229,112,231,1) 0%,rgba(200,94,199,1) 47%,rgba(168,73,163,1) 100%);
52+
background: linear-gradient(45deg, rgba(229,112,231,1) 0%,rgba(200,94,199,1) 47%,rgba(168,73,163,1) 100%);
53+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=1 );
54+
padding: 15px;
55+
border-radius: 5px 5px 0 0;
56+
57+
input {
58+
padding: 5px;
59+
height: 30px;
60+
outline: 0;
61+
border: 0;
62+
}
63+
button {
64+
padding: 5px 20px;
65+
height: 40px;
66+
outline: 0;
67+
border: 0;
68+
cursor: pointer;
69+
font-size: 16px;
70+
text-transform: uppercase;
71+
font-weight: bold;
72+
color: $white;
73+
background-color: $blue;
74+
}
75+
}
76+
}

‎dist/css/todo.css

+57
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/todo.css.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/demo/index.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link rel="stylesheet" href="css/global.css" />
8+
<link rel="stylesheet" media="all" href="../css/todo.css" />
9+
<title>Javascript Todo List</title>
10+
</head>
11+
<body>
12+
<main>
13+
<header class="intro">
14+
<h1 class="intro__heading">Javascript Todo list</h1>
15+
<p class="intro__summary">A list of things that you have achieved today. (exmple of state management)</p>
16+
<p class="intro__summary"><b>Note:</b> The data isn't stored, so it will disappear if you reload!</p>
17+
</header>
18+
<section class="app">
19+
<section class="app__input">
20+
<h2 class="app__heading">What you've done</h2>
21+
<div class="js-items" aria-live="polite" aria-label="A list of items you have done"></div>
22+
<form class="[ new-item ] [ boilerform ] [ js-form ]">
23+
<div class="boilerform">
24+
<label for="new-item-field" class="[ new-item__label ] [ c-label ]">Add a new item</label>
25+
<input type="text" class="[ new-item__details ] [ c-input-field ]" id="new-item-field" autocomplete="off" />
26+
<button class="[ c-button ] [ new-item__button ]">Save</button>
27+
</div>
28+
</form>
29+
</section>
30+
<aside class="app__status">
31+
<p role="status" class="visually-hidden">You have done <span class="js-status">1 thing</span> today!</p>
32+
<div class="[ app__decor ]" data-count="6" aria-hidden="true">
33+
<small>You've done</small>
34+
<span>0</span>
35+
<small>things today 😢</small>
36+
</div>
37+
</aside>
38+
</section>
39+
</main>
40+
41+
<div room-listing>adsd</div>
42+
<script type="module" src="../js-components.js"></script>
43+
</body>
44+
</html>

0 commit comments

Comments
 (0)