From c6be4300ef61553b9561a97ce575aa13ce6fbd73 Mon Sep 17 00:00:00 2001 From: roilev Date: Mon, 6 Mar 2017 18:10:56 -0500 Subject: [PATCH] Final project for class --- index.html | 59 +++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 55 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 178 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..6c1bf3d --- /dev/null +++ b/index.html @@ -0,0 +1,59 @@ + + + + + + + Tasky + + + + + + + +
+ +
+
+ Tasky +
+
+ +
+
+
+
+
+
+ Project Name +
+ +
+
+
+
+
+ +
+
+ +
+
+
+ + + + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..70ad922 --- /dev/null +++ b/script.js @@ -0,0 +1,64 @@ + +$("document").ready(function() { + + //show Date + var date = new Date(); + var day = date.getDate(); + var month = date.getMonth() + 1; + var year = date.getFullYear(); + if (month < 10) month = "0" + month; + if (day < 10) day = "0" + day; + var today = year + "-" + month + "-" + day; + $("#myDate").attr("value", today); + + $("#newProj").on("tap", btnMouseClick); + $(".projects").on("tap", "#newTask", btnNewTask); + $(".projects").on("doubletap", ".projectName", editName); + $(".projects").on("doubletap", ".task", editTask); + // $(".projects").prop("checked", "input[type='checkbox']", checkedTask); //not working + $("#removeTasks").on("tap", checkedTask) + $(".projects").on("drag", ".projectName", removeProj) + + + function btnMouseClick(evt){ + if ($(".project").last().hasClass("col-xs-12")) { + $(".project").last().replaceWith("
Project Name
Project Name
") + } else { + $(".projects").append("
Project Name
") + } + } + function btnNewTask(evt){ + $(this).before("
Add task
") + } + function editName(evt){ + var $div = $(this), isEditable=$div.is('.editable'); + $div.prop('contenteditable',!isEditable).toggleClass('editable') + } + function editTask(evt){ + var $div = $(this), isEditable=$div.is('.editable'); + $div.prop('contenteditable',!isEditable).toggleClass('editable') + } + function checkedTask(evt){ + $(".checkbox input:checked").parentsUntil(".project").detach(); + // } + } + function removeProj(){ + if ($(this).parent().hasClass("col-xs-6")){ + console.log($(this).siblings().parent()) + $(this).siblings().removeClass("col-xs-6") //this line is not working + $(this).siblings().addClass("col-xs-12") //this line is not working + } + $(this).parent().remove(); + } + skygear.config({ + 'endPoint': 'https://tasky.skygeario.com/', // trailing slash is required + 'apiKey': '004f8e16221046a79a827a5040b7547b', + }).then(() => { + console.log('skygear container is now ready for making API calls.'); + }, (error) => { + console.error(error); + }); +}); +// phoneGap (jquery import) +// Full height for rows +// How to store the page diff --git a/style.css b/style.css new file mode 100644 index 0000000..ba4ddac --- /dev/null +++ b/style.css @@ -0,0 +1,55 @@ +body { + display: table; + font-family: 'Source Sans Pro', sans-serif; + padding-top: 20px; + padding-bottom: 20px; + height: 100%; + overflow: auto; +} +#myDate{ + font-family: 'Source Sans Pro', sans-serif; + background-color: rgb(200,200,200); + padding-left: 50px; + text-align: center; + border-style: none; +} +.container{ + height:100%; +} +.projects{ + min-height:78vh; + max-height: 78vh; +} +.row{ + height: 100%; +} +.project{ + height: 100%; + border-style: solid; + border-width: thin; + border-color: rgb(221,221,221); + background-color: rgb(246,246,246); + padding: 10px; +} +.projectName{ + font-family: 'Oswald', sans-serif; + padding-bottom: 5px; + font-size: 18px; + text-align: center; +} +.title{ + font-family: 'Oswald', sans-serif; + background-color: rgb(200,200,200); + text-align: center; + font-size: 22px; + padding-top: 5px; +} +.ui-btn{ + width: 50px; + height: 50px; + text-align: center; + padding: 10px 16px; + font-size: 18px; + line-height: 1.33; + border-radius: 25px; +}