Макет для тренировки (keychap)

Перейти к макету 🧑‍💻

#практика | #макет

Задача: Управление списком студентов

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

Дано:
Список студентов представлен в виде массива объектов. Каждый объект содержит имя студента и его оценки по различным предметам. Например:

const students = [
  { name: "Alice", grades: { math: 85, english: 92, history: 78 } },
  { name: "Bob", grades: { math: 90, english: 80, history: 85 } },
  { name: "Charlie", grades: { math: 72, english: 88, history: 95 } },
  { name: "David", grades: { math: 95, english: 91, history: 89 } },
  { name: "Eva", grades: { math: 87, english: 94, history: 76 } },
];

Задание:

1. Функция `getAverageGrade(subject)`**: принимает название предмета (например, `"math"`) и возвращает среднюю оценку по этому предмету для всех студентов.

2. Функция `getTopStudent(subject)`**: принимает название предмета и возвращает имя студента с самой высокой оценкой по этому предмету.

3. Функция getStudentReport(studentName)`**: принимает имя студента и возвращает строку с его средними оценками по всем предметам в формате: `"Alice: math - 85, english - 92, history - 78". Если студент не найден, функция должна вернуть строку "Student not found".

Пример выполнения:
иском студентов

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

Дополнительные условия:
- Постарайтесь сделать код чистым и читаемым.
- Используйте методы массивов, такие как map,Задача: УпЗадача: Упиадача: У


Эта задача помогает закрепить знания о работе с массивами и объектами, а также о методах работы с ними в JavaScript.

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. For...in
2. @supports
3. Атрибут step

Лучшие фронтенд вакансии @job_webdev:
1. JavaScript разработчик
2. HTML-верстальщик
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. UI/UX-Дизайнер
2. Web-дизайнер
3. Дизайнер UX/UI

#лучшеезанеделю

Комбинированные Селекторы в CSS

Читать 👨‍💻

#css | #теория

@layer css

Читать 👨‍💻

#css | #теория

image-rendering

Читать 👨‍💻

#css | #полезности

Макет для тренировки (apple god)

Перейти к макету 🧑‍💻

#практика | #макет

Задача на html и css: Создание Кнопки "Подписаться"

Читать 👨‍💻

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Комбинированные Селекторы в CSS
2. image-rendering
3. Задача на html и css: Создание Кнопки "Подписаться"

Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик
2. Frontend Developer
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. UI/UX Дизайнер
3. Web-дизайнер

#лучшеезанеделю

AR в браузере: Использование WebXR API для создания дополненной реальности на веб-сайтах

Читать 👨‍💻

#полезнаястатья

HTML семантика

Читать 👨‍💻

#html | #теория

<legend>

Добавляет заголовок в <fieldset>, который по умолчанию оформляется браузером как текст, органично вписанный в рамку.

<legend> позволяет описать содержимое <fieldset>, но семантически он не является «представителем» заголовков, хотя выполняет схожую функцию. Он не задаёт иерархию, а лишь характеризует контент внутри «своей» группы — как <label> для соответствующего контрола.

Важно, чтобы <legend> был первым дочерним элементом внутри <fieldset>. Если внутри <fieldset> будет больше одного <legend>, отобразится только первый, все остальные отобразятся как обычные блочные элементы:

Посмотреть пример 👨‍💻

#html | #полезности

Javascript:void(0)

Читать 👨‍💻

#js | #полезности

Задача на JavaScript:

Необходимо создать программу, которая будет переводить заданный текст на "Роботский язык". Роботский язык - это модифицированный алфавит, в котором все гласные буквы заменяются на "о" и после каждой согласной буквы, кроме "р" добавляется "p" . Например, слово "Программирование" будет переведено на "Пррогрромрмроровронроо".

Задача:
Напишите функцию, которая принимает на вход текстовую строку и возвращает этот текст, переведённый на Роботский язык. Убедитесь, что ваша функция учитывает регистр букв, и сохраняет оригинальную пунктуацию и пробелы.

Пример использования:

console.log(robotLanguage("Программирование")); // выводит "Пррогрромрмроровронроо"
console.log(robotLanguage("Привет, мир!")); // выводит "Прровротр, мрор!"

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. AR в браузере
2. Javascript:void(0)
3. <legend>

Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. JavaScript Developer
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. Помощник/ученик Web-дизайнера UX/UI (Junior)
3. UX/UI designer

#лучшеезанеделю

Как использовать звук на сайтах

Читать 👨‍💻

#полезнаястатья

Эффективная работа с тенями и светом в CSS: Добавляем глубину и реалистичность интерфейсу

Привет! Сегодня мы поговорим о том, как можно добавить глубину и реалистичность вашим веб-интерфейсам с помощью теней и света в CSS. Тени — это не просто эффект для создания объема, но и мощный инструмент для улучшения восприятия дизайна. В этом посте мы обсудим, как правильно использовать тени и световые эффекты, чтобы интерфейсы выглядели профессионально и стильно.

Зачем нужны тени в интерфейсе?
Тени помогают:
1. Создавать объем — Тени могут выделять элементы на странице, делая их визуально "поднятыми" над фоном.
2. Улучшать читаемость — Легкие тени на текстах помогают улучшить контраст и восприятие.
3. Добавлять акценты — С помощью теней можно выделить важные кнопки или элементы интерфейса.

Основные CSS-свойства для работы с тенями
1. `box-shadow` — для добавления тени вокруг элементов.
Пример простого использования:

   .box {
       box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
   }
   

2. `text-shadow` — для добавления теней к тексту.
Пример применения к заголовкам:

   h1 {
       text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
   }
   

Как создать реалистичные тени?

1. Мягкость и прозрачность
Тени не должны быть слишком резкими или плотными. Используйте мягкие градиенты и полупрозрачные цвета для более естественного эффекта. Например, вместо черного цвета, используйте что-то вроде rgba(0, 0, 0, 0.2).

2. Используйте несколько слоев
Для создания более сложных и реалистичных теней можно комбинировать несколько теней в одном элементе. Например:

   .box {
       box-shadow: 
           2px 2px 5px rgba(0, 0, 0, 0.2),
           5px 5px 10px rgba(0, 0, 0, 0.1);
   }
   

3. Правильное направление света
Выберите одно основное направление "света" для всего интерфейса. Например, если свет падает сверху слева, тени должны быть направлены вниз вправо. Это создаст гармонию и реалистичность интерфейса.

Работа со светом: Как добавить "сияние" элементам

1. Использование градиентов
Градиенты могут имитировать свет, падающий на элементы. Например, вертикальный градиент может сделать объект выглядящим более объемным:

   .button {
       background: linear-gradient(to bottom, #fff, #e0e0e0);
   }
   

2. Сияние с помощью `filter`
Используйте свойство filter: drop-shadow() для создания более сложных световых и теневых эффектов:

   .box {
       filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.4));
   }
   

3. Эффект "внутреннего света"
С помощью box-shadow можно создать эффект внутреннего свечения:

   .element {
       box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
   }
   

Советы для создания идеальных теней и света

- Контраст: Тени должны быть достаточно заметными, чтобы выделять элементы, но не чрезмерными.
- Цвет тени: Избегайте черных теней. Используйте цвет, который слегка отличается от основного фона.
- Анимация: Используйте плавные переходы для появления и исчезновения теней, чтобы интерфейс казался более "живым":

   .box {
       transition: box-shadow 0.3s ease;
   }
   

Заключение
Тени и свет — это мощные инструменты для создания глубины и реалистичности в вашем интерфейсе. Экспериментируйте с размерами, прозрачностью и направлением теней, чтобы сделать ваш дизайн более современным и выразительным. Помните, что в веб-дизайне важно чувствовать баланс и не перегружать интерфейс, сохраняя его чистым и интуитивным.

#какэтосделать