misinkevych.alina

21.09.2019 в 15:16, AlexZaw сказал:

var render = document.querySelector('[data-action="render"]');
var destroy = document.querySelector('[data-action="destroy"]');
var boxes = document.getElementById("boxes");
render.addEventListener("click", getAmount);
destroy.addEventListener("click", destroyBoxes);

function getAmount() {
  var amount = +document.querySelector("#controls input").value;
  createBoxes(amount);
}

function createBoxes(amount) {
  var basicSize = 30;
  var fragment = document.createDocumentFragment();
  for (var i = 0; i < amount; i++) {
    var size = basicSize + i * 10;
    var div = document.createElement("div");
    div.style.cssText = `width: ${size}px; height: ${size}px; background-color: rgba( ${random()} , ${random()} , ${random()} )`;
    fragment.appendChild(div);
  }
  boxes.appendChild(fragment);
}

function destroyBoxes() {
  boxes.innerHTML = "";
}

function random() {
  return Math.floor(Math.random() * 256);
}

 

Решение хорошее но почему вы используете var вместо const или let?

 Пользователь вводит количество элементов в input и нажимает кнопку Создать, после чего рендерится коллекция. При нажатии на кнопку Очистить, коллекция элементов очищается.

Создай функцию createBoxes(amount), которая принимает 1 параметр amount - число. Функция создает столько div, сколько указано в amount и добавляет их в div#boxes.

Каждый созданный div:

• Имеет случайный rgb цвет фона
• Размеры самого первого div - 30px на 30px
• Каждый следующий div после первого, должен быть шире и выше предыдущего на 10px

Создай функцию destroyBoxes(), которая очищает div#boxes.

<div id="controls">
  <input type="number" min="0" max="100" step="1" />
  <button type="button" data-action="render">Создать</button>
  <button type="button" data-action="destroy">Очистить</button>
</div>

<div id="boxes"></div>

const wrap_button = {
  sub: document.querySelector("[data-action='increment']"),
  add: document.querySelector("[data-action='decrement']"),
  span: document.querySelector('#value'),
  wrapper: document.querySelector('#counter '),
};
let counterValue = 0;
const increment = () => {
  counterValue += 1;

  document.getElementById('value').textContent = counterValue;
};

const decrement = () => {
  counterValue -= 1;

  document.getElementById('value').textContent = counterValue;
};
wrap_button.sub.addEventListener('click', increment);
wrap_button.add.addEventListener('click', decrement);

Как вам мой вариант, немного переделала ваш)

<div id="counter">
  <button type="button" data-action="decrement">-1</button>
  <span id="value">0</span>
  <button type="button" data-action="increment">+1</button>
</div>

Счетчик состоит из спана и кнопок, которые должны увеличивать и уменьшать значение счетчика на 1.

• Создай переменную counterValue в которой будет хранится текущее значение счетчика.
• Создай функции increment и decrement для увеличения и уменьшения значения счетчика
• Добавь слушатели кликов на кнопки, вызовы функций и обновление интерфейса

нашла ответ

'use strict';
class StringBuilder {
  constructor(value) {
    this.value = value;
  }

  get val() {
    return this.value;
  }

  set val(value) {
    this.value = value;
  }

  append(str) {
    this.value += str;
  }

  prepend(str) {
    this.value = `${str} ${this.value}`;
  }
  // додає елемент на поч і в кін
  pad(str) {
    // this.value = str + this.value + str;
    this.value = ` ${str} ${this.value} ${str}`;
  }
}

const builder = new StringBuilder('.');
// const value = builder.value();

// console.log(value);

builder.append('^');
console.log(builder.value); // '.^'

builder.prepend('^');
console.log(builder.value); // '^.^'

builder.pad('=');
console.log(builder.value); // '=^.^='

 Не могу понять где у меня ошыбка. нужно написать класс и зделать следуещое: 

• Геттер value - возвращает текущее значение поля _value
• Метод append(str) - получает парметр str (строку) и добавляет ее в конец _value
• Метод prepend(str) - получает парметр str (строку) и добавляет ее в начало value
• Метод pad(str) - получает парметр str (строку) и добавляет ее в начало и в конец _value

• 'use strict';
  class StringBuilder {
    constructor(value) {
      this._value = value;
    }
    get itev() {
      return this._value;
    }
  
    append(str) {
      this._value.push(str);
    }
  
    prepend(str) {
      this._value.unshift(str);
    }
    // додає елемент на поч і в кін
    pad(str) {
      this._value.split(' ');
    }
  }
  
  const builder = new StringBuilder('.');
  
  // const value = builder.value();
  // console.log(this.value);
  
  builder.append('^');
  console.log(builder.value); // '.^'
  
  builder.prepend('^');
  console.log(builder.value); // '^.^'
  
  builder.pad('=');
  console.log(builder.value); // '=^.^='

Спасибо! Помогло

7 часов назад, Switch74 сказал:

зачем вам 'use strict';
что такое this откуда в нем items?
предполагаю что вы пытаетесь добавить/удалить из const inventory
ваш код сплошная ошибка
подумайте что именно вы хотите сделать

Я всегда пишу в строгом режиме. на счет this то его его действительно нужно делать в самом вызове. В этой задаче мне нужно получить конечный результат 

 ['Монорельса', 'Фильтр', 'Аптечка']

['Монорельса', 'Аптечка']

Спасибо за помощь)

Напиши скрипт который просит посетителя ввести число в prompt до тех пор, пока посетитель на нажмет Cancel и каждый раз добавляет введенное значение к общей сумме.

• При загрузке страницы пользователю предлагается в prompt ввести число. Ввод добавляется к значению переменной total.
• Операция ввода числа продолжается до тех пор, пока пользователь не нажмет кнопку Cancel в prompt.
• После того как пользователь прекратил ввод нажав кнопку Cancel, показать alert со строкой 'Общая сумма чисел равна [сумма]'.

🔔 Делать проверку того, что пользователь ввел именно число, а не произвольный набор символов, не нужно. Если хочешь, в случае некорректного ввода, показывай alert с текстом 'Было введено не число, попробуйте еще раз', при этом результат prompt плюсовать к общей сумме не нужно, после чего снова пользователю предлагается ввести число в prompt.

let input;
let total = 0;

13 часов назад, klierik сказал:

Здравствуйте.

Вот простой пример реализации этой задачи:

Большое спасибо! Все получилось!

07.05.2019 в 19:33, ElizavetaSenkova сказал:

Всё, что отображается при наведении положи в div и дай класс hidden. Этот див обязательно вставь первым в li (а потом уже изображение и тд). Потом этот hidden сделай display none. И в конце пропиши, что при наведении на карточку товара отображается спрятанный hidden - типо этого : 

.catalog-item:hover .hidden {

display: block;

}

 

Большое спасибо!

Не могу понять как сделать такой ховер?