Stuck a little with the yesterday's problem. The reason - can't add up only those remainder's groups which don't give a divider mutually - I've set an array of 'banned' remainders and try to use it inside Array.prototype.reduce() but it seems like it's not seen inside reduce loop.

The solution for this was quite easy - I added to an array numbers and checked if an element is included with a string equivalent. Added plus sign before an element so it looked like Arr.includes(+num) and everything started to work great.

Today's problem is about properties of dividing integers - https://www.hackerrank.com/challenges/non-divisible-subset.

Sum of which numbers isn't dividable by third number? The brute-force approach is to check each combination of two numbers in a set has O(n^2) complexity. I want it to be better.

Division is an opposite to multiplication and the last is just a compressed version of addition:

9 / 3 = 3 => 3 * 3 = 9 => 3 + 3 + 3 = 9;

If the number isn't dividable by other number it means we have a skewed view of addition:

10 / 3 = 3.333(3) => 3.3(3) * 3 = 10, but let's make it simpler: 3 + 3 + 3 + 1 = 10;

The only thing that changes is the last addendum - we have the remainder now. Let's add some numbers to our 10 and look what'll happen.:

10 + 1 = 11 => 3 + 3 + 3 + (1 + 1) = 11 => 3 + 3 + 3 + 2 = 11;
11 / 3 = 3 remainder 2;

10 + 2 = 12 => 3 + 3 + 3 + (1 + 2) = 12 => 3 + 3 + 3 + 3 = 12;
12 / 3 = 4;

10 + 5 = 15 => 3 + 3 + 3 + (1 + 2) + 3 = 15 => 3 + 3 + 3 + 3 + 3 = 15;

Looks like the remainders of two addendums divided by the third number shouldn't add up to divisable number if we want the sum won't. My approach according to above is to accumulate all numbers in a given set into dictionary using remainder as a key. Then choose the largest groups which remainders sum will not be dividable and sum all such groups together. It will be the answer.

I'm still on the same problem as yesterday - https://www.hackerrank.com/challenges/sherlock-and-squares.

My initial approach was overcomplicated way of thoughts (as usual). The solution was much simpler - just find two square roots of given numbers and round them to ceil and floor respectfully. The difference between calculated roots increaces by one is the answer except the case when both given numbers are equal.

While my attempts to figure out why HR built-in tests were failing I decided to switch to my local test suit. After short analysis of different testing frameworks I stopped on Jasmine - it has everything I need already integrated, opposite to Mocha, where assertion framework should be chosen separately. Jasmine is well documented so to integrate test inside a browser was easy.

It was challenging to implement the test itself - I wanted to generate randomly both boundaries and then knowing what were initial values for calculating powers of two and if I know initials than it's easy to get how many values I have in between. The challenge was to get a random value exluding upper and lower boundaries - MDN advices on random are about inclusive implementations. Finally I've got it by increasing and decreasing low and high limits of squares.

The next problem - https://www.hackerrank.com/challenges/sherlock-and-squares.

My initial approach was based on calculating increments between difference of current and the next square root. The reasoning looked like this:

Let's assume, that we know the sequence of full square difference:

            1, 2, 3, 4,  5,  6,  7,  8,  9...
for the row 1, 4, 9, 16, 25, 36, 49, 64, 81...
it would be   3, 5, 7,  9,  11, 13, 15, 17...
so each time the difference increases by 2.

The formula for it is 2*n - 1, where n is our initial number. Then to solve the problem just get the square root of the first number and find the difference, then check if my second given number within it.

Switched to hackerrank - https://www.hackerrank.com - for a while to practice algorithms and to improve velocity in coding with Javascript, get fluency in it.

There were two problems that I've solved - find the cost of transformation of any 3x3 matrix into a magic square matrix (https://www.hackerrank.com/challenges/magic-square-forming); manipulate given strings symbol by symbol to morph one into another (https://www.hackerrank.com/challenges/append-and-delete).

RescueTime (https://www.rescuetime.com) said that I've spent almost 8 hours. What is this? First three hours I tried to get into approach to magic square solution. First I used Excel in search of some hints on how to calculate it faster. Then I just switched into Octave and started matrix manipulation routines - rotation, flipping, substracting. It showed results so I get back to code editor and implemented all these basic matrix transformations in JS. The final solution was easy when I've got all tools needed. Limit is that the matrix could be only 3x3. The main reason for the limit is that I don't understand quite well how to find all possible matrix rotation and flipping algorithmically. There are some interesting links: how to build an array filled with constants - https://stackoverflow.com/a/13735425; someone's example of rotation of any matrix - http://jsfiddle.net/MrPolywhirl/NH42z/.

And the second problem was much easier to solve - RescueTime showed it took only 1.5 hours.

Too slow...

What is this all about - http://al1s.github.io/posts/plan-and-done-for-may-25-2017/.

Day 18 - sum up time periods in data-* attributes of list items on a page using reduce.

Implemented a function for calculating total time summing arguments passed as a string each. The challenge was in passing list of arguments that I've got from a nodeList object - it continuisly passed to the function as a string, but not a list of arguments or an array. Finally I've filled an array explicitly.

Here is working example - https://al1s.github.io/JavaScript30//index.html.

What is this all about - http://al1s.github.io/posts/plan-and-done-for-may-25-2017/.

Continue day 16. It's quite easy assignment but I'm in a lack of time. Build tons of helper functions.

• getElmCenterPoint() - to get any element center;
• getDistanceToElm() - to calculate distance between a target element and the mouse pointer;
• shiftCoordinates() - to get mouse pointer coordinates taking the element center as a coordinates origin;
• mirrorCoord() - to get coordinates opposite (the kind of oppositeness depends on the function arguments: it could be mirrored around one or another axes, or both) to the mouse pointer.

Here is about paralax effect by Dudley Storey - http://thenewcode.com/1162/Cheap-Parallax-with-JavaScript-and-CSS-Transforms.

Used debounce function to prevent performance degradation. More info on debounce is here - https://css-tricks.com/debouncing-throttling-explained-examples/.

Learned how to work with boxShadow/textShadow style attributes: get - getComputedStyle(elm).textShadow and https://stackoverflow.com/a/17819623, set - https://stackoverflow.com/a/10890994.

Here is working example - https://al1s.github.io/JavaScript30/16%20-%20Mouse%20Move%20Shadow/index.html.

And an appointment on the day 17 is easy one: sorting list excluding articles - a, the, an. My approach was to iterate through articles list and replace every occurence of it in a target string. After it just Array.prototype.sort(). Wes's solution is more elegant.

Here is working example - https://al1s.github.io/JavaScript30/17%20-%20Sort%20Without%20Articles/index.html.

What is this all about - http://al1s.github.io/posts/plan-and-done-for-may-25-2017/.

Still on the day 16. What dimensional properties are available in a browser window? Here are officials by MDN:

• mouseEvent.offsetX, mouseEvent.offsetY - the X and Y coordinates of the mouse pointer relative to the position of the padding edge of the target node;
• mouseEvent.clientX, mouseEvent.clientY - the X and Y coordinates of the mouse pointer in local (DOM content) coordinates.
• mouseEvent.pageX, mouseEvent.pageY - the X and Y coordinates of the mouse pointer relative to the whole document.
• mouseEvent.screenX, mouseEvent.screenY - the X and Y coordinates of the mouse pointer in global (screen) coordinates.
• elm.getBoundingClientRect() - the size of an element and its position relative to the viewport.
• window.innerHeight, window.innerWidth - height and width (in pixels) of the browser window viewport including, if rendered, the horizontal scrollbar. These are dimensions of the page being displayed. Source - https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight;
• window.scrollX, window.scrollY - the number of pixels that the document is currently scrolled horizontally and vertically. https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX;

Here is demo of different dimension aspects and basic paralax helper functions - https://codepen.io/alstof/full/xrEaRB/.

What is this all about - http://al1s.github.io/posts/plan-and-done-for-may-25-2017/.

Day 16 - a paralax effect with text shadow. A user story:

• As a user I want to move a mouse around on a page and see how one of the element's shadow reflect mouse movements, so that the page seems animated and react to my mouse movements;

Ideas:

• if an element in a visible part of the screen - handle the mouse movements;
• the closer the mouse cursor to the element - the shorter the shadow;
• calculate the mouse position relativly to element center, calculate the distance;

What is this all about - http://al1s.github.io/posts/plan-and-done-for-may-25-2017/.

Day 14 - build a menu list. User story:

• As a user I want to add dishes to my plate, one at a time, so that I'll finally have a list of dishes.
• As a user I want to keep this list after page reload, so that it persist window closing and I'll have the same list even after a browser restart.
• As a user I want to mark items in a list and these marks have to persist page reload, so that I'll know what I marked specially before.

Plan:

• use local storage to persist page reload;
• keep all entered values in one list and save it to one item in a browser local storage;
• prevent page reload on form submission;
• consider performance as a first class user requirement;

First of all - my Chrome configuration didn't let me save anything in a local storage. There are one radio and one checkboxe in Advanced config in the Cookies control list which should be considered: Allow Local data to be set and Block third-party cookies and site data unchecked.

What was interesting:

• I've added the handler to checkbox change event during dynamical list item composing - it let do this if you use native interface to add elements to DOM - createElement and appendChild;
• I've implemented remove button for each element added to a list just to make it more valuable. Actually it's a little TODO app, so it should have all expected functions - add/delete items to a list, check items in a list, keep items persistent.
• I've implemented redrawing for only added item - after a user add item the only thing changes on a page - this item added to a list (Wes told about it in a tutorial video, but his code redraw the whole list). It's performance friendly way to work with a DOM.

Link to the page - https://al1s.github.io/JavaScript30/15%20-%20LocalStorage/index.html.