forked from winnicki/todo-app
Wyjsciowa wersja aplikacji
This commit is contained in:
krzysiek
commit
9d20bd0bc7
6
css/reset.css
Normal file
6
css/reset.css
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
* {
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
list-style:none;
|
||||||
|
box-sizing:border-box
|
||||||
|
}
|
||||||
208
css/style.css
Normal file
208
css/style.css
Normal file
@ -0,0 +1,208 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&subset=latin-ext');
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #edf0f1;
|
||||||
|
padding: 80px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body, input, button {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noFill {
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
header{
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 5;
|
||||||
|
padding: 15px;
|
||||||
|
background: #25b99a;
|
||||||
|
box-shadow: 0 2px 4px rgba(44, 62, 80, 0.15);
|
||||||
|
border-bottom-left-radius: 10px;
|
||||||
|
border-bottom-right-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header input{
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 400;
|
||||||
|
text-indent: 18px;
|
||||||
|
padding: 0 60px 0 0;
|
||||||
|
float: left;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 5px 25px 25px 5px;
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header input::-webkit-input-placeholder {
|
||||||
|
color: rgba(255, 255, 255, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
header button{
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
right: 15px;
|
||||||
|
z-index: 2;
|
||||||
|
border-radius: 25px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: none;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header button svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
|
||||||
|
margin: -8px 0 0 -8px;
|
||||||
|
|
||||||
|
fill: #25b99a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container{
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.todo{
|
||||||
|
width: 100%;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.todo li{
|
||||||
|
width: 100%;
|
||||||
|
min-height: 50px;
|
||||||
|
float: left;
|
||||||
|
background: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #444;
|
||||||
|
line-height: 22px;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0px 1px 2px rgba(44, 62, 80, 0.10);
|
||||||
|
margin-bottom: 10px;
|
||||||
|
position: relative;
|
||||||
|
padding: 14px 100px 14px 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.todo li .buttons{
|
||||||
|
width: 100px;
|
||||||
|
height: 50px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.todo li .buttons button{
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
float: left;
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
outline: none;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.todo li .buttons button:last-of-type:before{
|
||||||
|
content: '';
|
||||||
|
width: 1px;
|
||||||
|
height: 30px;
|
||||||
|
background: #edf0f1;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.todo li .buttons button svg{
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin: -11px 0 0 -11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.todo li .buttons button.complete svg{
|
||||||
|
border-radius: 11px;
|
||||||
|
border: 1.5px solid #25b99a;
|
||||||
|
|
||||||
|
transition: 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.todo#completed li .buttons button.complete svg{
|
||||||
|
background: #25b99a;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.todo:not(#completed) li .buttons button.complete:hover svg{
|
||||||
|
background: rgba(37, 185, 154, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.todo:not(#completed) li .buttons button.complete:hover svg .fill{
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.todo#completed li .buttons button.complete svg .fill{
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.todo li .buttons button svg .fill{
|
||||||
|
transition: fill 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.todo li .buttons button.remove svg .fill{
|
||||||
|
fill: #c0cecb;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.todo li .buttons button.remove:hover svg .fill{
|
||||||
|
fill: #e85656;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.todo li .buttons button.complete svg .fill{
|
||||||
|
fill: #25b99a;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.todo#completed:not(:empty){
|
||||||
|
position: relative;
|
||||||
|
padding: 60px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.todo#completed:not(:empty):before{
|
||||||
|
content: '';
|
||||||
|
width: 150px;
|
||||||
|
height: 1px;
|
||||||
|
background: #d8e5e0;
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
left: 50%;
|
||||||
|
margin: 0 0 0 -75px;
|
||||||
|
}
|
||||||
9
icons/add_icon.svg
Normal file
9
icons/add_icon.svg
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path class="fill" d="M16,8c0,0.5-0.5,1-1,1H9v6c0,0.5-0.5,1-1,1s-1-0.5-1-1V9H1C0.5,9,0,8.5,0,8s0.5-1,1-1h6V1c0-0.5,0.5-1,1-1
|
||||||
|
s1,0.5,1,1v6h6C15.5,7,16,7.5,16,8z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 530 B |
14
icons/done_icon.svg
Normal file
14
icons/done_icon.svg
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:none;}
|
||||||
|
.st1{fill:#26B999;}
|
||||||
|
</style>
|
||||||
|
<rect y="0" class="st0" width="22" height="22"/>
|
||||||
|
<g>
|
||||||
|
<path class="st1" d="M9.7,14.4L9.7,14.4c-0.2,0-0.4-0.1-0.5-0.2l-2.7-2.7c-0.3-0.3-0.3-0.8,0-1.1s0.8-0.3,1.1,0l2.1,2.1l4.8-4.8
|
||||||
|
c0.3-0.3,0.8-0.3,1.1,0s0.3,0.8,0,1.1l-5.3,5.3C10.1,14.3,9.9,14.4,9.7,14.4z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 688 B |
30
icons/remove_icon.svg
Normal file
30
icons/remove_icon.svg
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#C0CECB;}
|
||||||
|
</style>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path class="fill" d="M16.1,3.6h-1.9V3.3c0-1.3-1-2.3-2.3-2.3h-1.7C8.9,1,7.8,2,7.8,3.3v0.2H5.9c-1.3,0-2.3,1-2.3,2.3v1.3
|
||||||
|
c0,0.5,0.4,0.9,0.9,1v10.5c0,1.3,1,2.3,2.3,2.3h8.5c1.3,0,2.3-1,2.3-2.3V8.2c0.5-0.1,0.9-0.5,0.9-1V5.9
|
||||||
|
C18.4,4.6,17.4,3.6,16.1,3.6z M9.1,3.3c0-0.6,0.5-1.1,1.1-1.1h1.7c0.6,0,1.1,0.5,1.1,1.1v0.2H9.1V3.3z M16.3,18.7
|
||||||
|
c0,0.6-0.5,1.1-1.1,1.1H6.7c-0.6,0-1.1-0.5-1.1-1.1V8.2h10.6L16.3,18.7L16.3,18.7z M17.2,7H4.8V5.9c0-0.6,0.5-1.1,1.1-1.1h10.2
|
||||||
|
c0.6,0,1.1,0.5,1.1,1.1V7z"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path class="fill" d="M11,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6s0.6,0.3,0.6,0.6v6.8C11.6,17.7,11.4,18,11,18z"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path class="fill" d="M8,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8C7.4,10.2,7.7,10,8,10c0.4,0,0.6,0.3,0.6,0.6v6.8C8.7,17.7,8.4,18,8,18z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path class="fill" d="M14,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6c0.4,0,0.6,0.3,0.6,0.6v6.8
|
||||||
|
C14.6,17.7,14.3,18,14,18z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
34
index.html
Normal file
34
index.html
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>TODO Application</title>
|
||||||
|
<link rel="stylesheet" href="css/reset.css">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<input type="text" placeholder="Wprowadź nazwę zadania" id="item">
|
||||||
|
<button id="add">
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> <g> <path class="fill" d="M16,8c0,0.5-0.5,1-1,1H9v6c0,0.5-0.5,1-1,1s-1-0.5-1-1V9H1C0.5,9,0,8.5,0,8s0.5-1,1-1h6V1c0-0.5,0.5-1,1-1 s1,0.5,1,1v6h6C15.5,7,16,7.5,16,8z"/> </g> </svg>
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<!-- Uncompleted tasks -->
|
||||||
|
<h2>Nieskończone</h2>
|
||||||
|
<ul class="todo" id="todo"></ul>
|
||||||
|
|
||||||
|
<!-- Completed tasks -->
|
||||||
|
<h2></h2>
|
||||||
|
<ul class="todo" id="completed"></ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</html>
|
||||||
67
js/main.js
Normal file
67
js/main.js
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
// Remove and add icons in SVG format
|
||||||
|
let removeSVG = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve"><g><g><path class="fill" d="M16.1,3.6h-1.9V3.3c0-1.3-1-2.3-2.3-2.3h-1.7C8.9,1,7.8,2,7.8,3.3v0.2H5.9c-1.3,0-2.3,1-2.3,2.3v1.3c0,0.5,0.4,0.9,0.9,1v10.5c0,1.3,1,2.3,2.3,2.3h8.5c1.3,0,2.3-1,2.3-2.3V8.2c0.5-0.1,0.9-0.5,0.9-1V5.9C18.4,4.6,17.4,3.6,16.1,3.6z M9.1,3.3c0-0.6,0.5-1.1,1.1-1.1h1.7c0.6,0,1.1,0.5,1.1,1.1v0.2H9.1V3.3z M16.3,18.7c0,0.6-0.5,1.1-1.1,1.1H6.7c-0.6,0-1.1-0.5-1.1-1.1V8.2h10.6L16.3,18.7L16.3,18.7z M17.2,7H4.8V5.9c0-0.6,0.5-1.1,1.1-1.1h10.2c0.6,0,1.1,0.5,1.1,1.1V7z"/></g><g><g><path class="fill" d="M11,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6s0.6,0.3,0.6,0.6v6.8C11.6,17.7,11.4,18,11,18z"/></g><g><path class="fill" d="M8,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8C7.4,10.2,7.7,10,8,10c0.4,0,0.6,0.3,0.6,0.6v6.8C8.7,17.7,8.4,18,8,18z"/></g><g><path class="fill" d="M14,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6c0.4,0,0.6,0.3,0.6,0.6v6.8C14.6,17.7,14.3,18,14,18z"/></g></g></g></svg>';
|
||||||
|
|
||||||
|
let completeSVG = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve"><rect y="0" class="noFill" width="22" height="22"/><g><path class="fill" d="M9.7,14.4L9.7,14.4c-0.2,0-0.4-0.1-0.5-0.2l-2.7-2.7c-0.3-0.3-0.3-0.8,0-1.1s0.8-0.3,1.1,0l2.1,2.1l4.8-4.8c0.3-0.3,0.8-0.3,1.1,0s0.3,0.8,0,1.1l-5.3,5.3C10.1,14.3,9.9,14.4,9.7,14.4z"/></g></svg>';
|
||||||
|
|
||||||
|
// get the value from input field (id="item")
|
||||||
|
//if there is any text inside input field, add that text to the todo list
|
||||||
|
document.getElementById('add').addEventListener('click', function(){
|
||||||
|
let value = document.getElementById('item').value;
|
||||||
|
if(value){
|
||||||
|
addItemTodo(value);
|
||||||
|
document.getElementById('item').value = '';
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function removeItem() {
|
||||||
|
let item = this.parentNode.parentNode;
|
||||||
|
let parent = item.parentNode;
|
||||||
|
|
||||||
|
parent.removeChild(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
function completeItem() {
|
||||||
|
let item = this.parentNode.parentNode;
|
||||||
|
let parent = item.parentNode;
|
||||||
|
|
||||||
|
let id = parent.id;
|
||||||
|
|
||||||
|
// Check if the item should be added to the completed list or to re-added to the todo list
|
||||||
|
let target = (id === 'todo') ? document.getElementById('completed') : document.getElementById('todo');
|
||||||
|
|
||||||
|
parent.removeChild(item);
|
||||||
|
target.insertBefore(item, target.childNodes[0]);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adds a new item to the todo list
|
||||||
|
function addItemTodo(text){
|
||||||
|
|
||||||
|
let list = document.getElementById('todo');
|
||||||
|
|
||||||
|
let item = document.createElement('li');
|
||||||
|
item.innerText = text;
|
||||||
|
|
||||||
|
let buttons = document.createElement('div');
|
||||||
|
buttons.classList.add('buttons');
|
||||||
|
|
||||||
|
let remove = document.createElement('button');
|
||||||
|
remove.classList.add('remove');
|
||||||
|
remove.innerHTML = removeSVG;
|
||||||
|
|
||||||
|
//Add click event for removing the item
|
||||||
|
remove.addEventListener('click', removeItem);
|
||||||
|
|
||||||
|
let complete = document.createElement('button');
|
||||||
|
complete.classList.add('complete');
|
||||||
|
complete.innerHTML = completeSVG;
|
||||||
|
|
||||||
|
//Add click event for completing the item
|
||||||
|
complete.addEventListener('click', completeItem);
|
||||||
|
|
||||||
|
buttons.appendChild(remove);
|
||||||
|
buttons.appendChild(complete);
|
||||||
|
item.appendChild(buttons);
|
||||||
|
|
||||||
|
list.insertBefore(item, list.childNodes[0]);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user