Вёрстка сайтов | HTML, CSS, JS
4.87K subscribers
614 photos
1 video
4 files
1.04K links
👋 Привет, друг!

В этом канале я выкладываю структурированные, обучающие уроки и материалы по вёрстке сайтов и фронтенду.
Присоединяйся и начинай учиться!

Связь: @Tigran1963
Download Telegram
JS Вопрос:

С помощью какого ключевого слова мы можем присвоить метод самой функции-классу, а не её "prototype"?
Anonymous Quiz
13%
public
23%
get
27%
set
26%
static
11%
Посмотреть ответы
Задача: Напиши функцию limitedParallel(promises, limit), которая выполняет limit промисов одновременно, а остальные ставит в очередь.

Пример использования:
const tasks = [
() => new Promise(res => setTimeout(() => res('A'), 1000)),
() => new Promise(res => setTimeout(() => res('B'), 500)),
() => new Promise(res => setTimeout(() => res('C'), 800)),
() => new Promise(res => setTimeout(() => res('D'), 300))
];
limitedParallel(tasks, 2).then(console.log);
// Промисы выполняются не больше чем по 2 за раз


#домашка
input[type=range] слайдер на чистом css

Смотреть на codepen 🧑‍💻

#практика
Задача: Количество цифр в числе

Напишите функцию, которая получает на вход целое число и возвращает количество его цифр.

Дополнительно:
Реализуйте два варианта решения:
С использованием строк
Без использования строк

Примеры:
console.log(countDigits(1234567)); // 7
console.log(countDigits(-987654)); // 6
console.log(countDigits(0)); // 1

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

#домашка
Как сделать обводку для текста?

Воспользуемся этим кодом:
<div class="text">Текст с обводкой.</div>


.text {
font-size: 16px;
-webkit-text-stroke: 1px red;
-webkit-text-fill-color: transparent;
}


Данный способ не работает в IE. Для него нам следует задать тексту тени
.text {
font-size: 16px;
color: #fff;
text-shadow:
-0 -1px 0 #000000,
0 -1px 0 #000000,
-0 1px 0 #000000,
0 1px 0 #000000,
-1px -0 0 #000000,
1px -0 0 #000000,
-1px 0 0 #000000,
1px 0 0 #000000,
-1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000,
1px 1px 0 #000000,
-1px -1px 0 #000000,
1px -1px 0 #000000,
-1px 1px 0 #000000,
1px 1px 0 #000000;
}


#полезности
JS Вопрос:

let bigint = 1n; console.log( +bigint );
Anonymous Quiz
10%
1
24%
1n
15%
1000000
28%
Error
23%
Посмотреть ответы
Задача: Количество отличников и двоечников

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

Определите, сколько учеников сдали (оценка ≥ 3) и не сдали (оценка < 3) экзамен в каждом классе.
Оцените результативность класса по следующим критериям:
Если 95% и больше учеников получили 4 или 5 — результативность "Отличная".
Если менее 30% учеников получили 4 или 5 — результативность "Плохая".
В остальных случаях результативность "Средняя".
Реализуйте возможность менять пороги процентных значений результативности.

Пример входных данных:
const scores = [
[2, 4, 4, 5, 2, 3, 3, 1, 1],
[3, 4, 2, 3, 3, 1, 5, 2, 4],
[5, 3, 3, 4, 3, 2, 3, 5],
[4, 2, 2, 4, 2]
];

Ожидаемый вывод:
Класс 1: Сдавших — X, Не сдавших — Y, Результативность — "Средняя"
Класс 2: Сдавших — X, Не сдавших — Y, Результативность — "Плохая"


#домашка
HTML Вопрос:

Какой тег показывает свое содержимое, если браузер не поддерживает работу со скриптами?
Anonymous Quiz
7%
<base>
9%
<output>
57%
<noscript>
8%
<notscript>
19%
Посмотреть ответы
Задача: Обработка списка URL

У вас есть список URL, которые нужно загрузить, и в каждом из них содержится JSON-объект. Ваша задача — написать функцию, которая:
Загружает все URL параллельно.
Собирает все данные в массив.
Обрабатывает данные (например, суммирует определённые поля).
Возвращает результат.
При этом необходимо обработать ошибки так, чтобы загрузка оставшихся данных не останавливалась, если один из запросов завершится с ошибкой.

Пример входных данных:
const urls = [
'https://api.example.com/data1',
'https://api.example.com/data2',
'https://api.example.com/data3',
];

Пример результата:
{
total: 42
}

Шаблон кода:
async function fetchData(urls) {
// Ваш код здесь
}
// Пример вызова функции
fetchData(urls).then(result => {
console.log(result); // Ожидаемый результат
}).catch(error => {
console.error(error); // Обработка ошибки
});


Подсказки:
- Используйте fetch для загрузки данных по URL.
- Используйте Promise.allSettled для обработки всех промисов, независимо от их завершения.
- Обработайте результаты так, чтобы проигнорировать ошибки и работать только с успешно загруженными данными.

#домашка