From 3af5032aa94571b49fc231239de705b2df559367 Mon Sep 17 00:00:00 2001 From: Devin Burnette Date: Sun, 28 Aug 2016 18:18:28 +0000 Subject: [PATCH] initial commit --- css/styles.css | 141 +++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 29 ++++++++++ js/script.js | 48 +++++++++++++++++ 3 files changed, 218 insertions(+) create mode 100644 css/styles.css create mode 100644 index.html create mode 100644 js/script.js diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..d3dafe9 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,141 @@ +body { + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + font-family: "Roboto"; + font-size: 20px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body::before { + content: ''; + position: fixed; + z-index: -1; + top: 0; + left: 0; + background: black; + /* IE Fallback */ + width: 100%; + height: 100%; +} + +#main { + background: #16a085; +} + +h1 { + color: white; + text-align: center; +} + +.list { + position: absolute; + width: 360px; + top: 50%; + left: 50%; + margin: -122px 0 100px -180px; + -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); +} + +.list h1 a { + position: absolute; + top: 50%; + right: 20px; + background: #fff; + /* IE Fallback */ + background: rgba(255, 255, 255, 0.15); + width: 24px; + height: 24px; + margin: -12px 0 0 0; + color: #fff; + font-size: 14px; + line-height: 24px; + text-align: center; + text-decoration: none; + -webkit-transition: 0.3s linear; + -moz-transition: 0.3s linear; + -ms-transition: 0.3s linear; + -o-transition: 0.3s linear; + transition: 0.3s linear; +} + +.list h1 a:hover { background: rgba(255, 255, 255, 0.2); } + +.list ul { + list-style: none; + margin: 0; + padding: 0; +} + +.list ul li { + background: #fff; + height: 40px; + color: #666; + line-height: 40px; + padding: 0 20px 0 0; + font-size: 20px; +} + +.list ul li a { + display: inline-block; + width: 0px; + height: 40px; + margin-right: 16px; + color: #2ecc71; + text-align: center; + text-decoration: none; + opacity: 0; + -webkit-transition: 0.2s linear; + -moz-transition: 0.2s linear; + -ms-transition: 0.2s linear; + -o-transition: 0.2s linear; + transition: 0.2s linear; +} + +.list ul li:nth-child(2n) { background: #f7f7f7; } + +.list ul li:hover a { + width: 40px; + opacity: 1; +} + +form { + text-align: center; +} + +#button { + display: none; +} + +#item { + background-color:transparent; + border: none; + color: white; + width: 360px; + text-align: center; + font-size: 20px; +} + +#item:focus { + outline: none; +} + +::-webkit-input-placeholder { + color: white; +} + +:-moz-placeholder { /* Firefox 18- */ + color: white; +} + +::-moz-placeholder { /* Firefox 19+ */ + color: white; +} + +:-ms-input-placeholder { + color: white; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..1d0ec48 --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + + + + +
+

My To Do List

+
+ + +
+ +
+
+
+
+
+
+
+ + + + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..f57e622 --- /dev/null +++ b/js/script.js @@ -0,0 +1,48 @@ +function checkItem(event) { + var item = $('#item').val(); + if ($('ul').length > 0) { + var already_there = $('ul').text().includes(item); + if (already_there === true && item !== '') { + $('#duplicate').dialog({ + height: 50, + width: 500 + }); + return false; + } + } + return true; +} + +$('form').on('submit', function(event) { + if (checkItem(event) === true) { + var item = $('#item').val(); + if (item !== '') { + $('#list').append('
  • ' + item + '
    • '); + } else { + $('#empty').dialog({ + height: 50, + width: 400 + }); + } + event.preventDefault(); + } else { + event.preventDefault(); + } +}); + +function removeItem(obj) { + obj.slideUp(500, function() { + obj.remove(); + }); +} + +function cleanUp(obj) { + var items = $('ul li'); + if (items.length === 1) { + $('#congrats').dialog({ + height: 50, + width: 500 + }); + } + removeItem(obj); +}