From 9d20bd0bc7078f02519a24b83342e8cdad26ccbb Mon Sep 17 00:00:00 2001 From: krzysiek Date: Thu, 10 Oct 2019 20:37:39 +0200 Subject: [PATCH] Wyjsciowa wersja aplikacji --- css/reset.css | 6 ++ css/style.css | 208 ++++++++++++++++++++++++++++++++++++++++++ icons/add_icon.svg | 9 ++ icons/done_icon.svg | 14 +++ icons/remove_icon.svg | 30 ++++++ index.html | 34 +++++++ js/main.js | 67 ++++++++++++++ 7 files changed, 368 insertions(+) create mode 100644 css/reset.css create mode 100644 css/style.css create mode 100644 icons/add_icon.svg create mode 100644 icons/done_icon.svg create mode 100644 icons/remove_icon.svg create mode 100644 index.html create mode 100644 js/main.js diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..9ae52c0 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,6 @@ +* { + margin:0; + padding:0; + list-style:none; + box-sizing:border-box +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..8506bf5 --- /dev/null +++ b/css/style.css @@ -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; +} \ No newline at end of file diff --git a/icons/add_icon.svg b/icons/add_icon.svg new file mode 100644 index 0000000..59b7d97 --- /dev/null +++ b/icons/add_icon.svg @@ -0,0 +1,9 @@ + + + + + + + \ No newline at end of file diff --git a/icons/done_icon.svg b/icons/done_icon.svg new file mode 100644 index 0000000..4e4d9d1 --- /dev/null +++ b/icons/done_icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + diff --git a/icons/remove_icon.svg b/icons/remove_icon.svg new file mode 100644 index 0000000..0017eb9 --- /dev/null +++ b/icons/remove_icon.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..99c2d57 --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ + + + + + + + TODO Application + + + + +
+ + +
+ +
+ + +

Nieskończone

+ + + +

+ +
+ + + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..ec9491e --- /dev/null +++ b/js/main.js @@ -0,0 +1,67 @@ +// Remove and add icons in SVG format +let removeSVG = ''; + +let completeSVG = ''; + +// 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]); +} \ No newline at end of file