Merge branch 'merge'

CSS/home.css

@@ -129,4 +129,3 @@ a:hover:before {
     color: #777777;
     opacity: 1;
 }
-

assets/todo.css

@@ -0,0 +1,84 @@
+/* nanoscrollbar */
+.nano .pane   { background: #888; }
+.nano .slider { background: #111; }
+
+body {
+    /* Override bootstrap properties */
+    background-color: #ffffff !important;
+    border: 0 !important;
+}
+
+#container{
+    margin: 0 auto;
+    width: 1060px;
+    min-height: 100%;
+    background-color: transparent;
+    border: 0;
+}
+
+#header{
+    font-size: 30px;
+    text-align: center;
+    margin-bottom: 15px;
+    color: #fff;
+}
+
+.task-list{
+    width: 250px;
+    float: left;
+    margin: 0 5px;
+    background-color: #e3e3e3;
+    min-height: 240px;
+    border-radius: 10px;
+    padding-bottom: 15px;
+}
+
+.task-list input, .task-list textarea{
+    width: 240px;
+    margin: 1px 5px;
+}
+
+.task-list input{
+    height: 30px;
+}
+
+.todo-task{
+    border-radius: 5px;
+    background-color: #fff;
+    width: 230px;
+    margin: 5px;
+    padding: 5px;
+}
+
+.task-list input[type="button"]{
+    width: 100px;
+    margin: 5px;
+
+}
+
+.todo-task > .task-header{
+    font-weight: bold;
+}
+
+.todo-task > .task-date{
+    font-size: small;
+    font-style: italic;
+}
+
+.todo-task > .task-description{
+    font-size: smaller;
+}
+
+h3{
+    text-align: center;
+}
+
+#delete-div{
+    display: none;
+    background-color: #fff;
+    border: 3px dotted #000;
+    margin: 10px;
+    height: 75px;
+    line-height: 75px;
+    text-align: center;
+}

assets/todo.js

@@ -0,0 +1,235 @@
+/*
+ * @author Shaumik "Dada" Daityari
+ * @copyright December 2013
+ */
+
+/* Some info
+Using newer versions of jQuery and jQuery UI in place of the links given in problem statement
+All data is stored in local storage
+User data is extracted from local storage and saved in variable todo.data
+Otherwise, comments are provided at appropriate places
+*/
+
+var todo = todo || {},
+    data = JSON.parse(localStorage.getItem("todoData"));
+
+data = data || {};
+
+(function(todo, data, $) {
+
+    var defaults = {
+            todoTask: "todo-task",
+            todoHeader: "task-header",
+            todoDate: "task-date",
+            todoDescription: "task-description",
+            taskId: "task-",
+            formId: "todo-form",
+            dataAttribute: "data",
+            deleteDiv: "delete-div"
+        }, codes = {
+            "1" : "#pending",
+            "2" : "#inProgress",
+            "3" : "#completed"
+        };
+
+    todo.init = function (options) {
+
+        options = options || {};
+        options = $.extend({}, defaults, options);
+
+        $.each(data, function (index, params) {
+            generateElement(params);
+        });
+
+        /*generateElement({
+            id: "123",
+            code: "1",
+            title: "asd",
+            date: "22/12/2013",
+            description: "Blah Blah"
+        });*/
+
+        /*removeElement({
+            id: "123",
+            code: "1",
+            title: "asd",
+            date: "22/12/2013",
+            description: "Blah Blah"
+        });*/
+
+        // Adding drop function to each category of task
+        $.each(codes, function (index, value) {
+            $(value).droppable({
+                drop: function (event, ui) {
+                        var element = ui.helper,
+                            css_id = element.attr("id"),
+                            id = css_id.replace(options.taskId, ""),
+                            object = data[id];
+
+                            // Removing old element
+                            removeElement(object);
+
+                            // Changing object code
+                            object.code = index;
+
+                            // Generating new element
+                            generateElement(object);
+
+                            // Updating Local Storage
+                            data[id] = object;
+                            localStorage.setItem("todoData", JSON.stringify(data));
+
+                            // Hiding Delete Area
+                            $("#" + defaults.deleteDiv).hide();
+                    }
+            });
+        });
+
+        // Adding drop function to delete div
+        $("#" + options.deleteDiv).droppable({
+            drop: function(event, ui) {
+                var element = ui.helper,
+                    css_id = element.attr("id"),
+                    id = css_id.replace(options.taskId, ""),
+                    object = data[id];
+
+                // Removing old element
+                removeElement(object);
+
+                // Updating local storage
+                delete data[id];
+                localStorage.setItem("todoData", JSON.stringify(data));
+
+                // Hiding Delete Area
+                $("#" + defaults.deleteDiv).hide();
+            }
+        })
+
+    };
+
+    // Add Task
+    var generateElement = function(params){
+        var parent = $(codes[params.code]),
+            wrapper;
+
+        if (!parent) {
+            return;
+        }
+
+        wrapper = $("<div />", {
+            "class" : defaults.todoTask,
+            "id" : defaults.taskId + params.id,
+            "data" : params.id
+        }).appendTo(parent);
+
+        $("<div />", {
+            "class" : defaults.todoHeader,
+            "text": params.title
+        }).appendTo(wrapper);
+
+        $("<div />", {
+            "class" : defaults.todoDate,
+            "text": params.date
+        }).appendTo(wrapper);
+
+        $("<div />", {
+            "class" : defaults.todoDescription,
+            "text": params.description
+        }).appendTo(wrapper);
+
+	    wrapper.draggable({
+            start: function() {
+                $("#" + defaults.deleteDiv).show();
+            },
+            stop: function() {
+                $("#" + defaults.deleteDiv).hide();
+            },
+	        revert: "invalid",
+	        revertDuration : 200
+        });
+
+    };
+
+    // Remove task
+    var removeElement = function (params) {
+        $("#" + defaults.taskId + params.id).remove();
+    };
+
+    todo.add = function() {
+        var inputs = $("#" + defaults.formId + " :input"),
+            errorMessage = "Title can not be empty",
+            id, title, description, date, tempData;
+
+        if (inputs.length !== 4) {
+            return;
+        }
+
+        title = inputs[0].value;
+        description = inputs[1].value;
+        date = inputs[2].value;
+
+        if (!title) {
+            generateDialog(errorMessage);
+            return;
+        }
+
+        id = new Date().getTime();
+
+        tempData = {
+            id : id,
+            code: "1",
+            title: title,
+            date: date,
+            description: description
+        };
+
+        // Saving element in local storage
+        data[id] = tempData;
+        localStorage.setItem("todoData", JSON.stringify(data));
+
+        // Generate Todo Element
+        generateElement(tempData);
+
+        // Reset Form
+        inputs[0].value = "";
+        inputs[1].value = "";
+        inputs[2].value = "";
+    };
+
+    var generateDialog = function (message) {
+        var responseId = "response-dialog",
+            title = "Message",
+            responseDialog = $("#" + responseId),
+            buttonOptions;
+
+        if (!responseDialog.length) {
+            responseDialog = $("<div />", {
+                    title: title,
+                    id: responseId
+            }).appendTo($("body"));
+        }
+
+        responseDialog.html(message);
+
+        buttonOptions = {
+            "Ok" : function () {
+                responseDialog.dialog("close");
+            }
+        };
+
+	    responseDialog.dialog({
+            autoOpen: true,
+            width: 400,
+            modal: true,
+            closeOnEscape: true,
+            buttons: buttonOptions
+        });
+    };
+
+    todo.clear = function () {
+        data = {};
+        localStorage.setItem("todoData", JSON.stringify(data));
+        $("." + defaults.todoTask).remove();
+    };
+
+})(todo, data, jQuery);

control.js

@@ -0,0 +1,46 @@
+class Mode {
+    constructor(type, placeholder, border, url) {
+        this.type = type;
+        this.placeholder = placeholder;
+        this.border = border;
+        this.url = url;
+    }
+
+    setup() {
+        srch.placeholder = this.placeholder;
+        srch.style.borderBottom = this.border;
+        document.title = this.placeholder;
+    }
+}
+
+const srch = document.querySelector('#srch');
+const srchurl = "https://www.google.com/search?q=";
+const yturl = "https://www.youtube.com/results?search_query=";
+const nurl = "https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=";
+let modeObj;
+
+document.addEventListener('DOMContentLoaded',init);
+
+function init() {
+    modeObj = new Mode('web', 'Google', '4px #efd10e solid',srchurl);
+    modeObj.setup();
+}
+
+function ytmode() {
+    modeObj = new Mode('yt', 'YouTube', '4px #ed4343 solid',yturl);
+    modeObj.setup();
+}
+
+function nmode() {
+    modeObj = new Mode('web', 'Naver', '4px #43c1ef solid',nurl);
+    modeObj.setup();
+}
+
+function openurl(e) {
+    let url = modeObj.url
+    let input = srch.value.trim().replace("+", "%2B").replace("=", "%3D").replace("&", "%26").replace(" ", "+");
+    url = url.concat(input);
+    if (e.keyCode == 13 && input != "") {
+        window.location = url;
+    }
+}