Даниил Емелин

я б так зделал
Если поменять текст то и фон измениться, только шрифт нужно подлючить

Конечно объединить, не надо выдумывать себе геморрой, где это не требуется.
В конце концов, она же тупо фон, а не динамическая буква.

Можно обойтись без ul li.

<nav>
  <a href="#">Home</a>
  <a href="#">About Us</a>
  <a href="/">
    <img src="logo.png" />
  </a>
  <a href="#">Menu</a>
  <a href="#">Blog</a>
  <a href="#">Contacts</a>
</nav>

let obj = { foo: 1, bar: 2 };
let { foo: one, bar: two } = obj;
console.log(one, two);

var obj = { foo: 1, bar: 2 };
var { foo: one, bar: two } = obj;
console.log(one, two);

Всё прекрасно работает, как и должно

const можно заменить на var или let - используется то, что лучше подходит для данной ситуации. А так, да, без ключевого слова переменную объявить нельзя.

"Сверху" она только была объявлена, операция присваивания произошла там, где она и должна происходить.
(5 строка)
Самым очевидным образом ваш код выглядит так

var temp;
let left='левый';
let right='правый';

{
  temp=left;
  left=right;
  right=temp;
}

так у ваших .image размеры 0х0, поэтому вам не кликнуть по ним
а вот $('.wrap').on('click', ... работает

Потому что у Вас img src равняется нулю, т.е. размера у картинки нет, как и самой картинки, если ее добавить то все будет ок, для примера просто поправьте .image на .wrap и все будет работать

сделайте себе 1 раз сборку залейте на гитхаб и клонируйте

yeoman.io
https://habrahabr.ru/post/246349/
https://habrahabr.ru/post/214517/

Телефон я бы оставил картинкой под него можно подложить круглый блок с иконками.
Дальше подключаем js.
И с помощью transform: rotate вращаем блок например при событии скрол колесиком мыши. Только надо учитывать что блок повернется и в итоге иконки перестанут быть перпендикулярны экрану. Их тоже нужно вращать.

Но это все в теория.. Сам я такие штуки вряд ли применял бы, но случаи бывают разные.

Хммм... где-то я уже такое видел....

P.S.: Чисто из профессионального интереса - это тестовое задание или просто макет из какой-то рассылки?

Ну, сходу, я вижу 3 блока.
Блок с телефоном, блок с иконками, блок с текстом

1) Каркас телефона как бекграунд, картинка экрана с паддингами.
2) Бэкграунд кривой, абсолютами или отступами расставленные иконки. Или же Блок Телефона и Иконок один, кривая через ::after
3) Тут вообще надо что-то писать?

К иконкам через дата можно добавить data-img и data-text, и по клику на иконку на банальном джиквери вставлять ее в свои контейнеры, т.е. заменять картинку дисплея и текст

Дык потому, что функция .position() возвращает объект, который содержит только left и top.

Суть геттеров/сеттеров - в создани буфера, который защитит объекты от грубого вмешательства во внутреннюю структуру. Вы как бы создаете свой API для пользования объектом и гарантируете, что если пользоваться им - все пройдет хорошо. Вы заранее планируете свойства переменных и защищаете их от излишнего вмешательства.

В большинстве примеров из реальной жизни - это все лишнее. Подобный уровень проектирования начинает обретать смысл - тогда когда вам понадобится разработать какое-то очень серьезное, отказоустойчивое приложение. Приложение которое будет бросать четкие и понятные ошибки, если будешь пользоваться им неправильно.

Какие проблемы можно предотвратить?
- запись в переменную другого типа данных
- перезапись константы
- затирание/перезапись метода
- чтение не обработанных данных напрямую
- чтения данных без разрешения
- и т.д.

https://learn.javascript.ru/let-const
Область видимости у let ограничена блоком.

При использовании var вы шесть раз перезаписываете одну и ту-же переменную.

Var - объявляет переменную внутри цикла for, потом она исчезает.
Let - объявляет глобальную переменную, которая доступна и вне цикла.
Следовательно, чтобы все хорошо работало, надо использовать let.

P.S. Выводится всегда 4, не так ли?

.icon {
  vertical-align: middle;
}

Пример