productSearch

Создай элемент «div» и укажи у него класс «box».

Внутри элемента «div» создай тег «h1» и напиши в него название программы.

Ты можешь использовать вот такое название:

Search for various items in three shops

Добавляем тег «label» после элемента «h1» и пишем туда предложение: Write the name of the device or product. Ты можешь не использовать предложенный текст, а написать свой. Указываем у элемента «label» атрибут «for» со значением «name».

Добавляем тег «input» после предложения в теге «label». Указываем у тега «input» атрибут «id» со значением «name» и атрибут «type» со значением «text».

Добавляем тег «br» после элемента «label».

Добавляем еще один тег «label» после тега «br». Указываем у элемента «label» атрибут «for» со значением «pref». После этого пишем предложение:

Do you want to see the cheapeast variants frist?

Ты можешь не использовать предложенный текст, а написать свой.

Добавляем тег «input» после предложения в теге «label». Указываем у тега «input» атрибут «id» со значением «pref» и атрибут «type» со значением «checkbox».

Добавляем еще один тег «br» после элемента «label».

Добавляем кнопку после тега «br» и пишем ей название «Search». Ты можешь не использовать предложенное название, а придумать свое.

Задай у элемента «body» CSS-свойство «text-align: center»

Обратись к классу «box» и задай у него свойство «padding-top» с каким-нибудь значением.

Задай классу «box» какие-нибудь размеры. PS: не забудь использовать CSS-свойства: width и height

Задай у класса «box» свойство «margin» со значениями: 0px auto

Задай у класса «box» свойство «border» и укажи ему какие-нибудь значения.

Задай у класса «box» свойство «box-shadow» и укажи ему какие-нибудь значения. PS: можешь выбрать вот такие значения: 3px 5px grey

Обратись к элементу «input» задай у него свойство «margin-top» и укажи у него какое-нибудь значение.

Обратись к элементу «button» задай у него свойство «margin-top» и укажи у него какое-нибудь значение.

Создай переменную «btn» и присвой ей выбранный элемент «button».

Создай переменную «h1» и присвой ей выбранный элемент «h1».

Создаем список с именем «shopsLinks»

Вставляем внутрь списка вот такую информацию: "https://onoff.ee/otsi/?s=","https://www.1a.ee/otsing/?q=","https://www.euronics.ee/tooted?query="

Создаем список с именем «shopName»

Вставляем внутрь списка вот такую информацию: "onoff","1a.ee","euronics"

Создаем список с именем «priceDown»

Вставляем внутрь списка вот такую информацию: "#sort_by=price&sort_method=asc&&price=0-1750&onpage=120&list=1","&s=-inStock&s=price_!1",""

Задай действие «click» у элемента «btn». Не забудь воспользоваться методом «addEventListener».

Создай переменную «search» в теле функции элемента «addEventListener» и присвой ей вот такую конструкцию: document.querySelector("#name").value;

Создай переменную «pref» в теле функции элемента «addEventListener» и присвой ей выбранный элемент c id «pref».

Создай if-блок в теле функции элемента «addEventListener» и укажи у него условие: pref.checked. PS: вспомни, что условие мы вставляем в круглые скобочки :)

Создай цикл со счетчиком. Сделай так, чтобы он выполнялся столько же раз, сколько у нас элементов в списке с именем «shopName». Увеличивай переменную цикла на единичку.

Запиши в блок цикла вот такую конструкцию: window.open(shopsLinks[i]+search+priceDown[i],

shopName[i],"_blank");

Создай else-блок

Создай цикл со счетчиком. Сделай так, чтобы он выполнялся столько же раз, сколько у нас элементов в списке с именем «shopName». Увеличивай переменную цикла на единичку.

Запиши в блок цикла вот такую конструкцию: 

window.open(shopsLinks[i]+search,shopName[i],"_blank");