Leaderboard

https://habrahabr.ru/post/215461/ читай, вникай, разбирайся. Никто вместо тебя думать не будет. Дело не в "добрых" людях, а в том что ты хочешь что бы тебе все сделали бесплатно. На данном ресурсе тебе с радостью помогут в решении проблем, связанных с реализацией. Но саму реализацию вместо тебя делать никто не будет. Зачем тратить время на создание Интернет-магазина для тебя, если это время можно потратить на себя?!

https://jsfiddle.net/Narek_T/srojy7oc/

1. @li4e, см. коммент http://htmlforum.ru/index.php?showtopic=55226#entry369653 2. забудь про DOM. Напиши калькулятор который работает БЕЗ DOM 3. если ты сумеешь правильно написать таковой, то визуализировать его работу труда не составит я тебе предлагаю упростить твой калькулятор до такого let obj = new Calculator();obj.add('7');obj.add('+');obj.add('2');obj.add('fffff'); // должно бросаться исключениеlet result = obj.calculate(); // результат или ошибкаobj.clear();class Calculator { constructor() { // your code here } add(some) { // your code here } clear() { // your code here } calculate() { // your code here }}

Я думаю что не совсем. Хотя твоя функция технически и работает как конструктор, на практике return насколько я знаю никогда не используется. Свойства возвращаемого объекта задаются через this. Сами свойства не обязательно должны быть объектам, а вот в качестве аргумента конструктора как правило используют объекты. То есть в твоей реализации выйдет вот что. function Calculator(obj){ this.el = obj.el; // Элемент с калькулятором this.field = obj.el.querySelector('.field'); // Элемент с экраном калькулятора this.do = ['']; // Массив с действиями калькулятор в формате [1,'+',2] this.math = { // Обьект с операторами '+': function(x,y) {return x + y}, '-': function(x,y) {return x - y}, '×': function(x,y) {return x * y}, '÷': function(x,y) {return x / y} }; this.clear = function() { // Метод для очистки экрана калькулятора this.do = ['']; this.updateField(); }; this.updateField = function () { // Метод для обновления значений на экране калькуляторе var text = ''; for(var i = 0; i < this.do.length;i++){ text += ' ' + (this.do[i] === '' ? (this.do.length-1 !== i ? '0' : '') : this.do[i]); } this.field.innerHTML = text; }; this.pressButton = function (text) { // Метод обрабатывающий нажатие кнопок калькулятора var num = text !== '.' ? parseFloat(text) : '.'; if(text === 'Clear') { // Если нажата кнопка Clear this.clear(); } else if (!isNaN(num) || text === '.') { // Если нажата кнопка с числом или точка var last = this.do[this.do.length-1]; last += last.length === 0 && num === '.' ? '0.' : String(num); var txt = last.split('.'); txt = txt.length > 1 ? String(parseInt(txt[0]))+'.'+txt[1]: parseInt(txt[0]); this.do[this.do.length-1] = txt; this.updateField(); } else { // Если нажата кнопка с оператором if(text === '=' && this.do.length >= 3 && this.do[this.do.length-1] !== '') { var result = parseFloat(this.do[0]); result = isNaN(result) ? 0 : result; this.do.splice(0,1); while(this.do.length > 0) { result = this.math[this.do[0]](result, parseFloat(this.do[1] === '' ? 0 : this.do[1])); this.do.splice(0,2); } this.do = [result]; this.field.innerHTML = result; } else if(text !== '=') { this.do.push(text, ''); this.updateField(); } } }; // Метод инициализации в котором вешается обработчик на клик на калькулятор var $this = this; this.el.onclick = function (event) { var target = event.target; if(target.tagName === 'BUTTON') { $this.pressButton(target.innerHTML); } }}Создание объекта калькулятор. var calc = new Calculator({el: document.querySelector('.calculator')}); Запуск calc.init(); Но один фиг это не то что надо. Так как объекту калькулятор все эти методы, которые ты в него напихал не нужны. Никто не будет запускать calc.updateField() , по этому это свойство должно быть в прототипе. ЗЫ Если где не прав, исправляйте. Сам учусь. ЗЫЫ Калькулятор кстати не правильно работает, попробуй 2+2*2 По ооп и прототипам намного лучше Кантора будет Николас Закас .

Если придерживаться методологии БЭМ, то классами нужно все определять. И стили задавать только классам. У такого подхода масса достоинств: при стилизации элемента обращение происходит только к одному селектору;быстрее рендерится страница;четкая структура файлов для css/js;реиспользование кода в любых частях страницы;понимание, к какому файлу стилей относится данный элемент;разделение классов для стилизации и js;не используется каскад стилей.Это достоинства, приводимые в описаниях данной методологии. От себя я бы добавил еще и то, что при правильном определении имен классов нет необходимости в комментариях, т.к. и так все видно. Для примера возьмем Ваше главное меню: <div id="wrap_menu" class="clearfix"> <ul id="nav"> <li><a href="/"><span class="first">Home</span></a></li> <li><a href="#"><span>Services</span></a></li> <li><a href="#"><span>Support</span></a></li> <li><a href="#"><span>Carrers</span></a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#"><span class="last">Contact</span></a></li> </ul> </div> Смотрим его стилизацию (я сами стили заменил многоточиями, т.к. для понимания сути этого достаточно): #nav { ... } #nav li { ... } #nav li a span { ... } #nav a { ... } #nav .last { ... } и аналогичное меню с заданными классами: <nav class="main-header--nav main-header--mobile"> <ul class="main-menu clearfix"> <li class="main-menu--item"><a class="main-menu--link link" href='#>about</a></li> <li class="main-menu--item"><a class="main-menu--link link" href="#">projects</a></li> <li class="main-menu--item"><a class="main-menu--link link" href="#">gallery</a></li> <li class="main-menu--item"><a class="main-menu--link link" href="#">houses</a></li> <li class="main-menu--item"><a class="main-menu--link link" href="#">general plan</a></li> <li class="main-menu--item"><a class="main-menu--link link" href="#">location</a></li> </ul> </nav> и вариант его стилизации: .main-menu { ... &--item { ... &:last-child { ... } } &--link { ... &:hover { ... } &:active { ... } } } Вопрос: для чего нужен такой уровень вложенности: #nav li a span? Единственное, что приходит в голову - это то, что автору хочется как-то для себя структуризировать CSS файл, чтобы было визуально видно, какому элементу задается стиль. Но ведь этого можно добиться по другому. В моем примере стили описаны четко и понятно и нет никакой вложенности (правда такой вид наблюдается при работе с препроцессором Less, но он очень прост в освоении). Теперь остальные замечания: 1. Зачем использовать <div class="header"> <div id="footer">? Есть же теги <header><footer><nav> и т.д. 2. Зачем использовать такие классы: class="first", class="last" если есть псевдоклассы :first-child, :last-child. 3. Зачем использовать для стилизации идентификаторы? Оставьте их для использования в скриптах.

Как вариант убрать margin-bottom для блока с id=headRight

Символ рубля не везде отображается, например, на iPhone будет квадратик. Можно использовать третий вариант здесь: http://habrahabr.ru/post/207572/