nameGenerator

Fancy names

Начинаем с нашего любимого HTML

Multiple Choice

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

• <h1>

• <p>

• <div>

• <box>

Multiple Choice

После этого нам нужно написать название нашего приложения. Какой тег мы можем для этого использовать?

• <heading 1>

• <li>

• <h1>

• <ul>

Multiple Choice

Отлично, теперь нам нужно создать первое пояснение пользователю. Как текстовый тег мы можем использовать для этого?

• <p>

• <img>

• border

• let

Multiple Choice

Хорошо, потом мы должны создать элемент, в который пользователь сможет записать свое имя. Какой тег поможет нам создать этот элемент?

• <div>

• <input>

• <border-box>

• <placeholder>

Multiple Select

Супер, наш проект становится больше и круче. Дальше нам нужно создать еще одно сообщение пользователю и элемент, в который он может записать другое имя. Какие теги нам помогут выполнить эту работу?

• <p>

• <br>

• <input>

• <span>

• <strong>

Multiple Choice

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

• <createButton>

• btnAll[]

• <btnAll>

• <btn>

• <button>

Multiple Select

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

• <img>

• <h3>

• <ol>

• <frame>

• <h4>

Теперь будем украшать наше приложение!

Для этого переходим к следующей технологии, которая называется ...

Multiple Select

Прекрасно, для начала мы должны поставить все элементы по центру и поменять шрифт у большинства из них. Какому элементу мы должны задать какие-то свойства для получения желаемого результата? PS: в этом задании должно быть три ответа

• body

• text-align:center

• font-size

• font-family

• width

Multiple Select

Теперь поработаем с нашим элементом «div». Для начала зададим ему ширину и высоту. Какие CSS-свойства помогут нам это сделать?

• width

• border-radius

• color

• transform

• height

Multiple Choice

Чтобы наш элемент «div» встал по центру, нужно прописать какую-то конструкцию. Мы ее часто используем на уроках. Попробуй вспомнить что же это могла быть?

• center: allDivs

• div: center

• text-align: center

• margin: 0px auto

Multiple Select

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

• apply-shadow

• border

• box-shadow

• create-border

Украшаем элементы «input»

Задай элементам «input» какую-то величину и ширину, чтобы они выглядели красиво :)

Украшаем элемент «button»

Задай элементу «button» какую-то величину и ширину, чтобы он выглядели красиво. Также попробуй убрать рамочку у этого элемента.

Multiple Select

Здорово, давай попробуем изменить задний фон, цвет букв и размер текста кнопочки. Вспомни, какие свойства могут помочь тебе это сделать. PS: здесь должно быть три ответа

• font-size

• color

• text-color

• background-color

• text-bigger

Прозрачность и большие буквы

Чтобы наша кнопочка выглядела еще стильнее, воспользуемся свойством «text-transform: uppercase» и «opacity: какая-то циферка от 0 до 1».

Multiple Choice

Отлично, теперь можно добавить немного интерактива. Какой псевдокласс мы можем использовать для нашей кнопочки, чтобы при наведении на нее менялся ее цвет заднего фона?

• :active

• :hover

• :visited

• :focus

Добавим нашем приложению немного мозгов ;)

Multiple Choice

Для начала создадим переменную «btn» и присвоим ей выбранный HTML-элемент «button». Какая строчка выполняет все команды, которые нам нужны?

• let btn = document.querySelector("button");

• let btn = document.querySelector("h1");

• let btn = document.querySelector("");

Хочу сам!

Добавляем эту конструкцию в наш файлик «script.js».

Fill in the Blank

После этого нам нужно создать переменную «userInput» и присвоить ей два выбранных элемента «input». Для решения этого задания тебе понадобятся: «input», «let», «userInput», «document.», «querySelectorAll("")»

Хочу сам!

Добавляем эту конструкцию в наш файлик «script.js».

Multiple Choice

Далее нам нужно добавить нашей кнопке действие «click». Вспомним, что кнопку мы нашли, и записали ее расположение в переменную «btn». Какая конструкция поможет нам добавить нашей кнопочке это действие?

• btn.addEventListener("click", function(){}

• button.addEventListener("click", function(){}

• btn.addEventListener("click"{}

Хочу сам!

Добавляем эту конструкцию в наш файлик «script.js».

Multiple Select

Теперь мы будем писать команды, которые должна выполнять кнопочка при нажатии на нее. Для начала создадим две новых переменных «name», «letters» и присвоим им значения, которые ввел пользователь. Посмотрите на варианты и выберите команды, которые нам помогут решить поставленную задачу. PS: здесь должно быть два ответа.

• let letters = userInput.value[0]

• let name = userInput[0].value

• let name = userInput.value

• let letters = userInput[1].value

Хочу сам!

Добавляем эту конструкцию в функцию метода «addEventListener».

Multiple Choice

Отлично, теперь нам нужно создать переменную «randomPos», куда мы будем записывать рандомное значение от 0 до суммы букв в имени пользователя - 1. Какая конструкция поможет нам это сделать?

• let randomPos = Math.floor()

• let randomPos = Math.floor(Math.random()*name.length)

• let randomPos = Math.floor(Math.random())

Хочу сам!

Добавляем эту конструкцию в функцию метода «addEventListener».

Multiple Choice

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

• if/another

• try/catch

• try/except

• if/else

Multiple Choice

Решим небольшую задачку. При каком значении переменной «money» Леша сможет купить себе новый телефон. if(money > 200){console.log("Я могу купить телефон")}

• 100

• 10

• 200

• 201

Multiple Choice

Какой знак мы можем использовать для сравнения двух переменных (age1 и age2) в условии if-блока. Пример: if(age1 какой знак нужно поставить age2){console.log("два одинаковых возраста")}

• ==

• =

• !=

• >=

Хочу сам!

Добавь if-блок в функцию метода «addEventListener». Укажи в круглых скобочках у if условие, если переменная «randomPos» равняется 0.

Poll

Какой метод мы можем использовать, чтобы сделать все наши буквы маленькими в переменной со значением текст. PS: ответ на этот вопрос вы можете не знать ;)

• uppercase

• toUpperCase()

• toLowerCase()

• lowercase

Хочу сам!

Присвойте переменной «name» конструкцию name.toLowerCase().

Poll

Как вы думаете, какой метод мы можем использовать для замены одних символов на другие?

• replace()

• change()

• buguga()

• nothing()

Хочу сам!

Создай переменную «newName» и присвой конструкцию: name.replace(name[randomPos],letters)

Multiple Choice

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

• document.querySelector("h2").innerText

• document.querySelector("h2").changeText

Хочу сам!

Выбери элемент «h2», и измени его текст на переменную «newName».

Хочу сам!

Добавь условие «else» после if-блока.

Хочу сам!

Присвой переменной «letters» конструкцию: letters.toLowerCase()

Хочу сам!

После этого создайте переменную с именем  «newName» в else-блоке. Присвойте этой переменной конструкцию: name.replace(name[randomPos],letters) 

Хочу сам!

После этого выберите элемент  «h2» в else-блоке и воспользуйтесь методом  «innerText». Присвойте этой конструкции переменную «newName»