Frontend + Сайт

Select

<select> - элемент содержащий меню опций <option> или меню групп опций <optgroup>. Имеет схожие с <input> атрибуты, а также атрибуты multiple и size. Обычно select располагается внутри тега <form> или связывается с ним атрибутом form.

<form action="">
<select name="some_list"></select>
</form>

<option> - тег, который используется для определения пункта списка внутри тега <select>, но также его можно встретить и в тегах. Атрибуты: selected - позволяет пред-выбрать элемент. disabled - работает как всегда. и другие.

<form action="">
<label for="select">Select item</label>
<select name="list" id="select">
<option value="item-1">Item #1</option>
<option value="item-2">Item #2</option>
<option value="item-3">Item #3</option>
<option value="item-4">Item #4</option>
</select>
</form>

<optgroup> - позволяет группировать опции внутри <select>. Имеет атрибуты - name и disabled. name - задает имя группы. disabled - исключает возможность выбора элементов из группы. label - Задает имя группы которое видно пользователю.

<form action="">
<label for="select2">Select item</label>
<select name="list" id="select2">
<optgroup label="Veggie">
<option value="item-1" selected>Mushrooms</option>
<option value="item-2">Carrot</option>
</optgroup>
<optgroup label="Meat" disabled>
<option value="item-3">Pork</option>
<option value="item-4">Chicken</option>
</optgroup>
</select>
</form>

Атрибут multiple тега <select> позволяет выбирать не один, а сразу несколько <option> если зажата клавиша CTRL (для windows или linux) или COMMAND (для macOS)

<form action="">
<label for="select3">Select item</label>
<select name="list" id="select3" multiple>
<optgroup label="Veggie">
<option value="item-1" selected>Mushrooms</option>
<option value="item-2">Carrot</option>
</optgroup>
<optgroup label="Meat" disabled>
<option value="item-3">Pork</option>
<option value="item-4">Chicken</option>
</optgroup>
</select>
</form>

Textarea

<textarea> - позволяет добавить поле для ввода большого количества текста, обычно располагается внутри тега <form>. Имеет атрибуты схожие с <input>, а также cols и rows.

cols - определяет ширину <textarea>

rows - определяет высоту <textarea>

<form action="">
<label for="message">Your massage</label>
<textarea
name="user_message"
id="message"
cols="30"
rows="10"
placeholder="Your message..."
></textarea>
</form>

У тега <textarea> нет атрибута value, а если вы ходите установить ему какое-то значение по-умолчанию, нужно писать его между открывающим и закрывающим тегами.

<form action="">
<label for="message2">Your massage</label>
<textarea
name="user_message"
id="message2"
cols="30"
rows="10"
placeholder="Your message..."
>Some predefined data goes here</textarea>
</form>

Файлы с урока

select

textarea

P.S. Подписывайся на мой youtube и telegram каналы чтобы получать больше контента )

Имена переменных

При именовании переменных нам нужно придерживаться определенных правил:

1. Имя переменной должно содержать только буквы, цифры или символы $ и _.

let user = 'John';
let $user = 'Alice';
let _user = 'Pete';
let user2 = 'Antony';
let u2s3e4r = 'Alex'; // Так лучше не делать, но это будет работать

2. Первый символ в имени не должен быть цифрой.

let 10user = 'Nick'; // Ошибка!

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

let mentor = 'John Doe'; // Good
let ментор = 'Alice Cooper'; // Bad

4. Имя переменной должно отражать смысл того что она хранит.

let age = 20;
let color = 'red';
let sum = 10 + 10;
let salary = '0$';

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

Например:

let snake_case = 'Слов пишутся без пробелов, вместо пробела используется символ _';

let PascalCase = 'Слова пишутся без пробелов и все с большой буквы';

let camelCase = 'Слова пишутся без пробелов, начиная со второго слова все пишутся с большой буквы';

let kebab-case = 'Слов пишутся без пробелов, вместо пробела используется символ -';

В JS вызывает ошибки так как символ '-' не разрешен для использования в именах переменных, также kebab-case еще называю шашлычным регистром. При написании кода на JavaScript мы в основном используем camelCase.

let userAge = 20;
let userFirstName = 'John';
let userLastName = 'Doe';
let userFullName = userFirstName + ' ' + userLastName;
let userSuperLongVariableName = 'Value';

Константы

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

const API_URL = 'https://api.url/posts';
const DATABASE_NAME = 'junjun_db';
const COLOR_WHITE = '#ffffff';
const COLOR_BLACK = '#000000';

Для получения более полной информации рекомендую посмотреть соответствующий урок прикрепленный в самом начале материала.

Вот ссылочка на урок

P.S. Больше уроков у меня на канале

<hr>  <!-- Вариант 1 -->
<hr />  <!-- Вариант 2 -->
<br>  <!-- Вариант 1 -->
<br />  <!-- Вариант 2 -->

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

<section>
<h2>Some another title</h2>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab
excepturi incidunt maxime odio sint? Commodi cupiditate modi nesciunt
pariatur tempore?
</p>
</section>

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

<ul>
<li>Lorem ipsum.</li>
<li>At, maxime!</li>
<li>Dolores, recusandae.</li>
</ul>

В некоторых случаях вложенность является обязательной частью разметки текста. В примере выше, браузер не сможет интерпретировать теги <li> и их внутренний контент правильным образом, если теги <li> не будут вложены внутрь тега <ul>.

Насчёт ошибки токена хз, не думаю , что её вызвал заказ до 11 утра, но всё может быть. К слову эта ошибка не помешала добавлению заказа в БД и оплата действительно прошла успешно.