What will I learn today?

1. Make menu hide only on tablet and desktop versions or add input-label to hide JS-function.
2. Fix quirks in Safari: icons have become too small, everything become a mess on a wide screen.
3. Fix a masthead height on resolution wider 640px.
4. Fix an offer body text align for the gift message - now it aligns to center on resolutions less than 570.
5. Build additional pages - hotels, impression, blog.
6. Style the form on impression page.
7. Dive into JS.
8. Implement form validation.

Done

7. Five hours dedicated to work through the 5th day of JS30 challenge. It wasn't hard, but a lot of time I spent trying to get data from Wikipedia. Failed - don't want to learn their API just to get through page parsing exercise. Everything else were about map, reduce, sort, filter.

   Obstacles:

   • can't make XHR to Wiki - they have policy that prohibits direct access.
   • can't read local file in browser - they all have restrictions to access to local data and it's right.

What will I learn today?

1. Make menu hide only on tablet and desktop versions or add input-label to hide JS-function.
2. Fix quirks in Safari: icons have become too small, everything become a mess on a wide screen.
3. Fix a masthead height on resolution wider 640px.
4. Fix an offer body text align for the gift message - now it aligns to center on resolutions less than 570.
5. Build additional pages - hotels, impression, blog.
6. Style the form on impression page.
7. Dive into JS.
8. Implement form validation.

Done

7. Yesterday's JS30 exercise is to implement an analog clock using JS and CSS. The best way to do it is with CSS transform rules. There are two functions: one to sync visual appearance of the clock with current time, another - to animate clock hands movements.

   I move the clock's hands by rotating them with transform-origin: right and transform: rotate(30deg). The second hand rotates every second and the quantum of rotation is 360/60=6deg. The minute hand rotates 6deg every 60 seconds or 1deg every 10sec and the hour hand rotates 30deg every 3600 seconds or 1deg every 120sec.

   Added digits to the clock face. First tried to do it with position: absolute; top: ...px; left: ...px;. Horrible. Found the great article by Hugo Giraudel - http://hugogiraudel.com/2013/04/02/items-on-circle/. I don't have the SASS freedom with JS30 exercises, because there is already prepared html with all styles integrated, so I just took approach from Ana's article (mentioned by Hugo) - https://stackoverflow.com/a/12817454 and applied transformation rotate(${angle}) translate(${half-of-the-parent-width}) rotate(-${angle}); to div.class:nth-of-type() elements of my digits circle.

   Today's assignment was to work with CSS variables via JS. It was easy. Here is short article on CSS variables and how to work with them via JS - https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care. It even has some examples but it's not intresting just to copy-paste everything. When I finished I check Wes Bos approach. It's way better utilizes JS facilities such as this to achieve the true brevity.

What will I learn today?

1. Make menu hide only on tablet and desktop versions or add input-label to hide JS-function.
2. Fix quirks in Safari: icons have became too small, everything become a mess on a wide screen.
3. Fix a masthead height on resolution wider 640px.
4. Fix an offer body text align for the gift message - now it aligns to center on resolutions less than 570.
5. Build additional pages - hotels, impression, blog.
6. Style the form on impression page.
7. Dive into JS.
8. Implement form validation.

Done

7. Started JS30 marathon - https://javascript30.com. First day - a drum machine: implement audio file play on keybord press using already set web-page. My idea: go through element's attributes and play those sound which keyCode equal to key pressed.

   Have found helpfull following tips:

   • on key press event handling - https://stackoverflow.com/a/12578420.
   • on classes addition/removal - https://stackoverflow.com/a/196038.
   • multichannel audio support to prevent sound stuttering when a user press on many keys simultaneously - http://www.storiesinflight.com/html5/audio.html.

   Total time - two hours.

What will I learn today?

1. Make menu hide only on tablet and desktop versions or add input-label to hide JS-function.
2. Fix quirks in Safari: icons have became too small, everything become a mess on a wide screen.
3. Fix a masthead height on resolution wider 640px.
4. Fix an offer body text align for the gift message - now it aligns to center on resolutions less than 570.
5. Build additional pages - hotels, impression, blog.
6. Style the form on impression page.
7. Dive into JS.
8. Implement form validation.

Done

7. Going through FunFunFunction - https://www.youtube.com/watch?v=PIkA60I0dKU - explanation of objects, this, bind in JS. Want to see visually when there are reference to an existing object or to a new object. Recalled that I've already seen something like this but for Python. It lives here - http://pythontutor.com/javascript.html#mode=edit, and it supports JS.

What will I learn today?

1. Make menu hide only on tablet and desktop versions or add input-label to hide JS-function.
2. Fix quirks in Safari: icons have became too small, everything become a mess on a wide screen.
3. Fix a masthead height on resolution wider 640px.
4. Fix an offer body text align for the gift message - now it aligns to center on resolutions less than 570.
5. Build additional pages - hotels, impression, blog.
6. Style the form on impression page.
7. Dive into JS.
8. Implement form validation.

Done

6. Stuck a little with datepick element again. I've added it to the project's review page and I've got an error: The specified value "24-05-2017" does not conform to the required format, "yyyy-MM-dd". Tried to fix it quickly with setting dateFormat property for an element to the value: dateFormat: "dd-mm-yyyy", but still no result.

   But it works if I set the default value: yyyy-mm-dd. And I've found another thing to improve - to implement validation for all fields and especially checking whether the start date is before the end date. Added to TODO.

7. Tried to extract all values from an array and represent them as a list of strings. Tried to get to with arr.toString().replace(',', '\n') and discovered that it replaces only the first occurance of search string. Found an advice to make it with arr.toString().split(',').join('\n').

What will I learn today?

1. Make menu hide only on tablet and desktop versions or add input-label to hide JS-function.
2. Fix quirks in Safari: icons have became too small, everything become a mess on a wide screen.
3. Fix a masthead height on resolution wider 640px.
4. Fix an offer body text align for the gift message - now it aligns to center on resolutions less than 570.
5. Build additional pages - hotels, impression, blog.
6. Style the form on impression page.
7. Dive into JS.

Done

7. Returning to my last question from the day before - why the syntax ++array[element] || 1: I've found the answer here - https://en.wikipedia.org/wiki/Short-circuit_evaluation. It's common aspect of programming and for JS it works like this:

   In loosely typed languages that have more than the two truth-values True and False, short-circuit operators may return the last evaluated subexpression, so that x Sor y and x Sand y are equivalent to if x then x else y and if x then y else x respectively (without evaluating x twice).

   And from another source (http://www.grauw.nl/blog/entry/510) here is more clear explanation:

   ...if the first operand evaluates to false, the second operand is never evaluated because the result would always be false. Similarly, for || if the result of the first operand is true, the second operand is never operated.

   For my question it should be applied as: while we've got undefined for the first part of or we choose the second part of the statement - 1.

Spontaneous. To make an inline code block in rst (reStructuredText) use :code:`something` notation. Look here - https://stackoverflow.com/a/12365251 - for more.

What will I learn today?

1. Make menu hide only on tablet and desktop versions or add input-label to hide JS-function.
2. Fix quirks in Safari: icons have became too small, everything become a mess on a wide screen.
3. Fix a masthead height on resolution wider 640px.
4. Fix an offer body text align for the gift message - now it aligns to center on resolutions less than 570.
5. Build additional pages - hotels, impression, blog.
6. Style the form on impression page.
7. Dive into JS.

Done

6. Combined my project's radio and checkbox elements in a playground - https://codepen.io/alstof/pen/ybQVyE.

   There are two things left on the review page: layout everything according to original design and make it live. The second goal is quite large - I have to implement simple backend - storing feedback as a json file with basic CRUD. As an example or a main candidate for it here is OS project - http://brian.io/lawnchair/.

7. Found great workshops with potential to become an meetup or event. The map is located here - https://nodeschool.io/ru/#functionaljavascript. I came here while trying to implemnt element counter (something like my native SQL syntax - SELECT element, count(*) FROM element_list GROUP BY element;) in ES6 with reduce. It turned out to be easier than I expected but I still haven't got how it works: why undefined value in a named array could be incremented and how or worked the way it did:

   let specieList = creatures.reduce((species, creature) => {
     species[creature.species] = ++species[creature.species] || 1;
     return species;
   }, {});
   

What will I learn today?

1. Make menu hide only on tablet and desktop versions or add input-label to hide JS-function.
2. Fix quirks in Safari: icons have became too small, everything become a mess on a wide screen.
3. Fix a masthead height on resolution wider 640px.
4. Fix an offer body text align for the gift message - now it aligns to center on resolutions less than 570.
5. Build additional pages - hotels, impression, blog.
6. Style the form on impression page.

Done

6. Building a spin for adding/removing guest details on the review page. Needed behavior is clone part of the page DOM or revome it. Here is a playground - https://jsfiddle.net/rrkroxcb/2/ and here is - http://stackoverflow.com/a/34193883 - some explanation. There are two things left: when there is only one guest from left second press on minus button remove the first and only child. And another thing - how to change guest number inside one of the form input.

What will I learn today?

1. Make menu hide only on tablet and desktop versions or add input-label to hide JS-function.
2. Fix quirks in Safari: icons have became too small, everything become a mess on a wide screen.
3. Fix a masthead height on resolution wider 640px.
4. Fix an offer body text align for the gift message - now it aligns to center on resolutions less than 570.
5. Build additional pages - hotels, impression, blog.
6. Style the form on impression page.

Done

Spontaneous. Some about closures in JS - http://stackoverflow.com/a/111111.

6. Still building JS animation for the spin element on review/impression page. Found a funny thing about changing value of input element manually and by buttons - after manual change no buttons work using setAttribute method. Solved using elm.value for assigning an exact value. An explanation is here - http://stackoverflow.com/a/29929977.

What will I learn today?

1. Make menu hide only on tablet and desktop versions or add input-label to hide JS-function.
2. Fix quirks in Safari: icons have became too small, everything become a mess on a wide screen.
3. Fix a masthead height on resolution wider 640px.
4. Fix an offer body text align for the gift message - now it aligns to center on resolutions less than 570.
5. Build additional pages - hotels, impression, blog.
6. Style the form on impression page.

Done

6. Styled radio with :before element of the label. Technique for hiding real input and customizing label is from MDN - https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms.

   Triyng to make spin element - two buttons with plus-minus glyphs and textbox. Made them flexboxes but text input is wider than need to be. The reason - it scales automatically depending on font-size. overflow: hidden for the input element to the rescue.

   On the way to make spin animated by JS and behave naturally - on mousedown starts to raise number inside input element until a user release the button. Have found this resource - http://eloquentjavascript.net/14_event.html, but still has no idea how to handle repeated increase. My common sense says that it should be done with setTimeout or setInterval, but it doesn't work. JS is funny in a way of all this garbage - braces - {}, quotation marks - "". Here is my playground - https://codepen.io/alstof/pen/JNZGBb.