productSearch

productSearch

Multiple Choice

При помощи какой технологии мы можем создать структуру нашему сайту?

• CSS

• C++

• JS

• HTML

Воспользуемся HTML :)

Multiple Choice

При помощи какого тега мы можем создать контейнер-коробку на нашем сайте?

• <div>

• <container>

• <boxer>

• <ul>

Multiple Choice

Какой атрибут мы должны использовать, чтобы задать класс HTML-элементу?

• id

• class

• for

• href

Попробуй сам!

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

Попробуй сам!

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

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

Search for various items in three shops

Multiple Choice

Какой тег мы можем использовать для добавления подписей к элементам «input»?

• <des>

• <description>

• <label>

• <ol>

Попробуй сам!

Добавляем тег «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». Ты можешь не использовать предложенное название, а придумать свое.

А теперь украшаем наше приложение

Multiple Choice

Какое CSS-свойство поможет нам сдвинуть все строчные HTML-элементы в центр?

• font-weight

• text-transform

• text-decoration

• text-align

Multiple Choice

Какому HTML-элементу мы можем применить свойство «text-align: center», чтобы все строчные HTML-элементы были по центру?

• h1

• body

• input

• button

Попробуй сам!

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

Multiple Choice

Что делает CSS-свойство «padding»?

• Задает внутренние отступы

• Задает внешние отступы от других элементов

• Задает другой размер текста

• Меняет задний фон элемента

Multiple Choice

При помощи какого символа мы можем обращаться к классу в CSS?

• .

• //

• #

• $

Попробуй сам!

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

Multiple Select

С помощью каких CSS-конструкций мы можем задать блочному элементу высоту 250px, а ширину 500px

• height: 250px

• width: 500px

• box-size: 250px 500px

• margin:0px auto

Попробуй сам!

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

Multiple Choice

Какую конструкцию мы можем использовать, чтобы наш блочный элемент встал в центр?

• text-align: center

• centrelize: 1

• center-element: 100%

• margin: 0px auto

Попробуй сам!

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

Попробуй сам!

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

Попробуй сам!

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

Попробуй сам!

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

Попробуй сам!

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

Создаем мозг для нашей программы

Попробуй сам!

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

Попробуй сам!

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

Multiple Choice

Какой тип данных мы можем использовать для записи больше чем одного элемента?

• список

• переменную

• константу

Multiple Choice

Какой порядковый номер (индекс) будет у элемента 2 в этой конструкции: [1,100,2,1000,5000]

• 101

• 2

• 99

• 110

Fill in the Blank

Попробуй сам(а) создать список c названием «fruits» и заполнить его вот такими названиями: "apple","orange","banana". PS: тебе понадобятся вот такие элементы: let, fruits, =, [], "apple","orange","banana".

Попробуй сам!

Создаем список с именем «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",""

Multiple Choice

При помощи какой конструкции мы можем задать действие «click» кнопке?

• addEventListener("click", function(){

  })

• addeventListener("click", function(){

  })

• addeventlistener("click", function(){

  })

• addeventListener("click", {

  })

Попробуй сам!

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

Multiple Choice

Если мы выбрали элемент «input» в переменную «inp», то какую конструкцию мы можем использовать для получения значения, которое пользователь введет в этот элемент?

• inp.getText

• inp.number

• inp.value

• inp.innerText

Попробуй сам!

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

Попробуй сам!

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

Multiple Choice

При помощи какой конструкции мы можем создать условие в программировании?

• condition

• solution

• if/else

• div

Попробуй сам!

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

Multiple Choice

Для чего нам нужно циклы?

• Чтобы были

• Чтобы повторять какие-то действие какое-то количество раз

• Чтобы усложнить наш код

• Чтобы показать всем какой у тебя красивый код

Multiple Choice

Какое ключевое слово мы можем использовать для создания цикла со счетчиком?

• for

• let

• const

• ul

Multiple Choice

Для чего нам нужно условие в цикле со счётчиком?

• Чтобы убыстрить работу нашей программы

• Чтобы программа выглядела солидней

• Чтобы было сложно понять, что ты написал

• Чтобы цикл не был бесконечным

Попробуй сам!

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

Poll

Как ты думаешь при помощи какого метода мы можем открыть какую-нибудь ссылку в JS?

• open

• create

• deliver

• opener

Попробуй сам!

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

shopName[i],"_blank");

Попробуй сам!

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

Попробуй сам!

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

Попробуй сам!

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

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