Tech Blog

Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, host name, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page’s Document Object Model.

http://exploringjs.com/es6/ch_variables.html#sec_let-const-loop-heads

https://flaviocopes.com/jquery/

Arrow functions (or fat functions)?Arrow functions (or fat functions)

An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.

The key difference, despite being shorter to write, is that arrow functions do not create their own value for ‘this’.

If the function body contains just a single statement, you can omit the brackets and write all on a single line:

const myFunction = () => doSomething()

https://flaviocopes.com/javascript-arrow-functions/

(parameters) => { statements }

Arrow functions and Lexical this

https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4

Template Strings / Template Literals

https://wesbos.com/javascript-template-strings/

Object Destructuring

https://dev.to/sarah_chima/object-destructuring-in-es6-3fm

Adding to Array

[…oldArray, itemToAdd]

https://github.com/airbnb/javascript

Asked in Box onsite interview. With a node.js server on backend.

$().ready(function() {
   $('#add').on('click', addTask);
   $('#tasks').on('click', markComplete);
   // Alternative way
   // var tasksElement = document.getElementById('tasks');
   // tasksElement.addEventListener('click', markComplete);
   //document.getElementById('task-input').onkeydown = function(e){
   $('#task-input').on('keydown', function(e) {
       if(e && e.keyCode == 13){
            addTask();
       }
   });

   function renderTask(result) {
        var checkboxContainerId = 'check' + result.id;
        var taskTextId = 'tasktext-' + result.id;
        if (result.done == '1') {
            checkedState = ' checked ';
        } else {
            checkedState = '';
        }
        taskHtml = '
';
        taskHtml += '';
        taskHtml += '' + result.data + '
';
        $('#tasks').append(taskHtml);
   }

   function taskAdded(result) {
        renderTask(result);
        $('#task-input').val('');
   }

   function renderResults(results) {
        results.forEach(renderTask);
   }

   function addTask(e) {
       url = 'http://localhost:9898/todo/tasks/create';
       inputData = $('#task-input').val();

       if (!inputData) {
           return;
       }
       $.ajax({
           url: url,
           type: "POST",
           data: {data: inputData} ,
           success: taskAdded,
       });
    }

    function markComplete(e) {
        var done;
        if (e.target && e.target.matches("input.task-checkbox")) {
            var taskId = $(e.target).attr('task-id');
            if ($(e.target).is(":checked")) {
                done = "1";
            } else {
                done = "-1";
            }
            var editUrl = 'http://localhost:9898/todo/tasks/' + taskId + '/edit';
            $.ajax({
               url: editUrl,
               type: "POST",
               data: {done: done},
               success: function(result) {
               }
            });
        }
    }

    var getTasksUrl = 'http://localhost:9898/todo/tasks';
    $.ajax({
       url: getTasksUrl,
       type: "GET",
       success: renderResults,
    });
}
);