Type to search
Advanced channel search

Практика для кодера

@tasks_by_code

На этом канале будут публиковаться задачи для начинающих программистов. Можно решать на любом языке, делиться своим кодом и достижениями с другими участниками и обсуждать задачи в комментариях. Автор @morph1995

Практика для кодера

14 Oct, 09:15

❗️ Ответ сгенерирован чат-ботом GigaChat

⚙️ Запрос: Как правильно сделать на HTML и CSS чтобы маленькая карточка, размещенная position: absolute относительно большой карточки также уменьшалась пропорционально большой карточке? Я сделал через clamp относительно ширины экрана, но как-то хотелось бы, чтобы обе картинки пропорционально уменьшались.

✔️ Задание: попробовать запустить этот код, проверить всё ли корректно работает, если нет исправить ошибки. При желании предложить свой вариант кода. Практикуемся в современных реалиях.

Чтобы маленькая карточка уменьшалась пропорционально большой карточке при изменении размеров последней, можно использовать CSS-функции calc() и clamp(). Для этого необходимо определить общий размер большой карточки и использовать эти функции для изменения размера маленькой карточки в зависимости от размера большой. Вот пример кода, который может вам помочь:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Example</title>
    <style>
        .big-card {
            width: 60%; /* Ширина большой карточки */
            height: auto; /* Высота автоматически подстраивается под содержимое */
            border: 1px solid #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .small-card {
            background-color: #ddd;
            width: calc(50% - 4px); /* Размер маленькой карточки */
            height: calc(50% - 4px);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="big-card">
        <img src="https://via.placeholder.com/300" alt="Big Card Image">
        <div class="small-card"></div>
    </div>
</body>
</html>


В этом примере:
1. .big-card: Это контейнер для большой карточки. Он имеет фиксированную ширину (например, 60%) и высоту, которая автоматически адаптируется под содержимое.
2. .small-card: Это маленькая карточка внутри большой. Она позиционирована абсолютно относительно .big-card, и её размеры изменяются в зависимости от размеров .big-card.

Таким образом, если вы измените размер .big-card, .small-card будет уменьшаться или увеличиваться пропорционально.
280
Практика для кодера

10 Oct, 17:01

Сегодня я подготовил для вас очень классный макет для практики.

Можно попробовать свои силы и сверстать предложенный макет. Таким образом вы сможете закрепить все изученное, попробовать свои силы и добавить ещё одну работу в портфолио.

Недавно я записал три больших видео урока, они максимально актуальные и научат вас:

1. Верстке сайта по макету из Figma без Dev Mode в бесплатной версии
2. Верстке сайта по макету из Figma используя плагин Inspect Styles
3. Верстке сайта по макету из Pixso

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

💡 Записаться бесплатно

#layout
434
Практика для кодера

25 Sep, 16:53

❗️ Ответ сгенерирован чат-ботом GigaChat

⚙️ Запрос: Напиши программу на языке JavaScript которая будет решать задачу: Дано целое число N и набор из N чисел. Найти номер минимального элемента из данного набора

✔️ Задание: попробовать запустить этот код, проверить всё ли корректно работает, если нет исправить ошибки. При желании предложить свой вариант кода. Практикуемся в современных реалиях.

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

function findMinIndex(arr) {
    // Если массив пустой, возвращаем -1
    if (!arr || arr.length === 0) return -1;
    
    let min = Infinity;
    let index = -1;
    
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] < min) {
            min = arr[i];
            index = i;
        }
    }
    
    return index;
}

// Пример использования функции
const numbers = [4, 6, 9, 7, 8, 1];
console.log("Минимальный элемент: ", numbers[findMinIndex(numbers)]);


### Объяснение кода:

1. Функция `findMinIndex`:
- Принимает массив чисел arr.
- Проверяет, является ли массив пустым или нет. Если да, то сразу возвращает -1, так как индекс отсутствует.
- Затем инициализирует переменную min значением Infinity для удобства сравнения с элементами массива. Переменная index также инициализируется значением -1.

2. В цикле перебираются все элементы массива от 0 до длины массива.
3. Внутри цикла проверяется условие, когда текущий элемент меньше текущего минимума (min). Если это так, обновляются значения min и index.
4. После завершения цикла возвращается значение index, которое указывает на индекс минимального числа в массиве.

Программа проста в использовании и эффективна для малых и средних размеров массивов.
768
Практика для кодера

05 Sep, 06:37

Сегодня я подготовил для вас очень классный макет для практики.

Можно попробовать свои силы и сверстать предложенный макет. Таким образом вы сможете закрепить все изученное, попробовать свои силы и добавить ещё одну работу в портфолио.

Недавно я записал три больших видео урока, они максимально актуальные и научат вас:

1. Верстке сайта по макету из Figma без Dev Mode в бесплатной версии
2. Верстке сайта по макету из Figma используя плагин Inspect Styles
3. Верстке сайта по макету из Pixso

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

💡 Записаться бесплатно

#layout
1,284
Практика для кодера

29 Aug, 07:02

❗️ Ответ сгенерирован чат-ботом GigaChat

⚙️ Запрос: Напиши программу на языке JavaScript которая будет решать задачу: Дан символ C. Вывести два символа, первый из которых предшествует символу C в кодовой таблице, а второй следует за символом C

✔️ Задание: попробовать запустить этот код, проверить всё ли корректно работает, если нет исправить ошибки. При желании предложить свой вариант кода. Практикуемся в современных реалиях.

Для решения этой задачи мы можем использовать метод charCodeAt() для получения кода символа и затем вычислить код символов, которые предшествуют и следуют за данным символом. Вот пример такой программы на JavaScript:

function getPreviousAndNextCharCodes(c) {
    // Получаем код символа c
    var code = c.charCodeAt(0);
    // Вычисляем код предыдущего символа
    var previousCode = code - 1;
    // Вычисляем код следующего символа
    var nextCode = code + 1;
    
    // Преобразуем коды обратно в символы
    return [String.fromCharCode(previousCode), String.fromCharCode(nextCode)];
}

// Пример использования функции
var c = 'C';
var result = getPreviousAndNextCharCodes(c);
console.log(result[0]); // Выведет 'B'
console.log(result[1]); // Выведет 'D'


Этот код определяет функцию getPreviousAndNextCharCodes, которая принимает символ и возвращает массив из двух элементов: первый элемент - символ, который предшествует данному символу в кодовой таблице, а второй элемент - символ, который следует за данным символом. Функция использует метод charCodeAt для получения кода символа, а затем вычисляет коды предыдущего и следующего символов, преобразуя их обратно в символы с помощью String.fromCharCode.
1,074
Практика для кодера

23 Aug, 07:31

❗️ Ответ сгенерирован чат-ботом GPT-4o

⚙️ Запрос: Напиши код решения задачи на языке JavaScript. Условия задачи: Дано целое число N и набор из N прямоугольников, заданных своими сторонами — парами чисел (a, b). Найти максимальный периметр прямоугольника из данного набора

✔️ Задание: попробовать запустить этот код, проверить всё ли корректно работает, если нет исправить ошибки. При желании предложить свой вариант кода. Практикуемся в современных реалиях.

Для решения задачи нахождения максимального периметра прямоугольника из набора, заданного своими сторонами, можно использовать следующий подход на языке JavaScript:

Пройтись по каждому прямоугольнику в наборе.
Для каждого прямоугольника вычислить его периметр.
Сравнить вычисленный периметр с текущим максимальным и обновить максимальный периметр, если текущий больше.
Вот пример кода, который реализует этот алгоритм:
function maxRectanglePerimeter(rectangles) {
    let maxPerimeter = 0;

    for (let i = 0; i < rectangles.length; i++) {
        const [a, b] = rectangles[i];
        const perimeter = 2 * (a + b);
        if (perimeter > maxPerimeter) {
            maxPerimeter = perimeter;
        }
    }

    return maxPerimeter;
}

// Пример использования:
const rectangles = [
    [3, 4],
    [5, 6],
    [7, 8]
];

console.log(maxRectanglePerimeter(rectangles)); // Вывод: 30

В этом коде функция maxRectanglePerimeter принимает массив rectangles, где каждый элемент — это массив из двух чисел, представляющих стороны прямоугольника. Функция возвращает максимальный периметр среди всех прямоугольников.
951
Практика для кодера

15 Aug, 07:10

Задача: Функция для проверки палиндрома

Описание: Напишите функцию isPalindrome(str), которая принимает строку и возвращает true, если строка является палиндромом, и false в противном случае. Палиндром — это слово или фраза, которые читаются одинаково слева направо и справа налево (игнорируя пробелы, знаки препинания и регистр).

Пример решения:

function isPalindrome(str) {
    // Удаляем все неалфавитные символы и приводим к нижнему регистру
    const cleanedStr = str.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
    // Сравниваем строку с её перевёрнутой версией
    return cleanedStr === cleanedStr.split('').reverse().join('');
}

// Пример использования
console.log(isPalindrome("A man, a plan, a canal, Panama")); // true
console.log(isPalindrome("Hello, World!")); // false
910
Практика для кодера

15 Aug, 07:05

Задача: Написать функцию, которая принимает массив чисел и возвращает среднее арифметическое этих чисел.

Решение:

function average(numbers) {
  if (numbers.length === 0) return 0;
  
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  
  return sum / numbers.length;
}

// Пример использования:
console.log(average([1, 2, 3, 4, 5])); // Выведет: 3
console.log(average([10, 20, 30])); // Выведет: 20
console.log(average([])); // Выведет: 0
843
Практика для кодера

15 Aug, 07:00

Задача: Функция для вычисления факториала

Описание: Напишите функцию factorial(n), которая принимает число n и возвращает его факториал. Факториал числа n (обозначается как n!) — это произведение всех положительных целых чисел от 1 до n.

Пример решения:

function factorial(n) {
    if (n === 0 || n === 1) {
        return 1;
    }
    return n * factorial(n - 1);
}

// Пример использования
console.log(factorial(5)); // 120
console.log(factorial(0)); // 1
824
Практика для кодера

02 Aug, 09:02

Сегодня я подготовил для вас очень классный макет для практики.

Можно попробовать свои силы и сверстать предложенный макет. Таким образом вы сможете закрепить все изученное, попробовать свои силы и добавить ещё одну работу в портфолио.

Недавно я записал три больших видео урока, они максимально актуальные и научат вас:

1. Верстке сайта по макету из Figma без Dev Mode в бесплатной версии
2. Верстке сайта по макету из Figma используя плагин Inspect Styles
3. Верстке сайта по макету из Pixso

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

💡 Записаться бесплатно

#layout
1,030
Практика для кодера

01 Aug, 12:58

Ниже приведены две простые задачи по JavaScript для начинающих на тему функций.

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

function toUpperCase(str) {
    // Используем метод toUpperCase() для преобразования строки в верхний регистр
    return str.toUpperCase();
}

// Вызов функции
console.log(toUpperCase("hello")); // Выведет "HELLO"


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

function sumArray(arr) {
    let total = 0;
    for (let i = 0; i < arr.length; i++) {
        total += arr[i];
    }
    return total;
}

// Создание массива чисел
const numbers = [1, 2, 3, 4, 5];

// Вызов функции
console.log(sumArray(numbers)); // Выведет 15


Эти задачи предназначены для того, чтобы помочь начинающим разработчикам понять основы работы с функциями в JavaScript.
771
Практика для кодера

26 Jul, 15:42

Ниже приведены три простые задачи по JavaScript для начинающих программистов и примеры их решений.

Задача 1: Вывести приветствие "Привет, мир!" на экран.

// Функция для вывода сообщения на экран
function sayHello() {
    console.log("Привет, мир!"); // Выводим сообщение в консоль
}

// Вызов функции
sayHello();


Задача 2: Создать функцию, которая принимает два числа и возвращает сумму этих чисел.

function addNumbers(num1, num2) {
    return num1 + num2; // Возвращаем сумму двух чисел
}

// Пример использования функции
console.log(addNumbers(10, 20)); // Выведет 30


Задача 3: Написать функцию, которая проверяет, является ли введенное число четным.

// Функция, которая проверяет четность числа
function isEvenNumber(number) {
    if (number % 2 === 0) {
        return true; // Число четное
    } else {
        return false; // Число нечетное
    }
}

// Пример использования функции
let number = 8;
if (isEvenNumber(number)) {
    console.log(`Число ${number} является четным`);
} else {
    console.log(`Число ${number} не является четным`);
}


Эти задачи помогут начинающим программистам освоить основы языка JavaScript, такие как создание функций, работа с переменными и операторами, а также вывод информации в консоль.
889
Практика для кодера

01 Jul, 17:01

Сегодня я подготовил для вас очень классный макет для практики.

Можно попробовать свои силы и сверстать предложенный макет. Таким образом вы сможете закрепить все изученное, попробовать свои силы и добавить ещё одну работу в портфолио.

Недавно я записал три больших видео урока, они максимально актуальные и научат вас:

1. Верстке сайта по макету из Figma без Dev Mode в бесплатной версии
2. Верстке сайта по макету из Figma используя плагин Inspect Styles
3. Верстке сайта по макету из Pixso

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

💡 Записаться бесплатно

#layout
1,221
Практика для кодера

28 Jun, 07:40

Задача: Получить последовательность десятичных цифр числа 2 в степени 100.

Задача: Известны данные о мощности двигателя (в лошадиных силах – л. с.) и стоимости 30 марок легковых автомобилей. Напечатать стоимость каждого из автомобилей, у которых мощность двигателя не превышает 80 л. с.

Задача: Известны данные о численности населения (в миллионах жителей) и площади (в тысячах квадратных километров) 28 государств. Определить общую численность населения в «маленьких» государствах (чья площадь не превышает А тысяч квадратных километров).
1,105
Практика для кодера

01 Jun, 08:58

Сегодня я подготовил для вас очень классный макет для практики.

Можно попробовать свои силы и сверстать предложенный макет. Таким образом вы сможете закрепить все изученное, попробовать свои силы и добавить ещё одну работу в портфолио.

Недавно я записал три больших видео урока, они максимально актуальные и научат вас:

1. Верстке сайта по макету из Figma без Dev Mode в бесплатной версии
2. Верстке сайта по макету из Figma используя плагин Inspect Styles
3. Верстке сайта по макету из Pixso

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

💡 Записаться бесплатно

#layout
1,764
Практика для кодера

16 May, 11:24

Задача: Известно количество мячей, забитых футбольной командой за каждую игру в двух чемпионатах, которое хранится в двух массивах. В каждом из чемпионатов команда сыграла 26 игр. Найти общее количество мячей, забитых командой в двух чемпионатах.

Задача: Найти количество различных элементов в массиве.

Задача: В массиве из 20 целых чисел имеются только два одинаковых элемента. Найти их.
1,690
Практика для кодера

04 May, 08:48

Сегодня я подготовил для вас очень классный макет для практики.

Можно попробовать свои силы и сверстать предложенный макет. Таким образом вы сможете закрепить все изученное, попробовать свои силы и добавить ещё одну работу в портфолио.

Недавно я записал три больших видео урока, они максимально актуальные и научат вас:

1. Верстке сайта по макету из Figma без Dev Mode в бесплатной версии
2. Верстке сайта по макету из Figma используя плагин Inspect Styles
3. Верстке сайта по макету из Pixso

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

💡 Записаться бесплатно

#layout
1,808
Практика для кодера

25 Apr, 10:41

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

Задача: Известны оценки по информатике каждого из 22 учеников класса. Определите количество «пятерок».

Задача: Все отрицательные элементы исходного массива замените на их абсолютную величину.

P.S. Если задачи кажутся слишком скучными, неинтересными, простыми или с сильным уклоном в математику, то просто добавьте себе цель сделать графический интерфейс, придумайте функционал, отображайте, графики, таблицы, картинки с результатом. Сделайте интерактивное приложение, даже из простой задачи можно придумать что-то интересное. Просто проявите фантазию, включите творческий подход. Будьте креативны.
1,320
Практика для кодера

18 Apr, 13:58

Задача: Имеется информация о количестве осадков, выпавших за каждый день месяца, и о температуре воздуха в эти дни. Определить, какое количество осадков выпало в виде снега и какое – в виде дождя. (Считать, что идет дождь, если температура воздуха выше 0 °С.)

Задача: Известны данные о вместимости (в гигабайтах) и стоимости (в рублях) каждого из 22 типов жестких магнитных дисков (винчестеров). Напечатать вместимость тех винчестеров, которые стоят больше s рублей.

Задача: Фирме принадлежат два магазина. Известна стоимость товаров, проданных в каждом магазине за каждый день в июле и августе, которая хранится в двух массивах. Получить общую стоимость проданных фирмой товаров за два месяца.
1,228
Практика для кодера

01 Apr, 11:41

Сегодня я подготовил для вас очень классный макет для практики.

Можно попробовать свои силы и сверстать предложенный макет. Таким образом вы сможете закрепить все изученное, попробовать свои силы и добавить ещё одну работу в портфолио.

Недавно я записал три больших видео урока, они максимально актуальные и научат вас:

1. Верстке сайта по макету из Figma без Dev Mode в бесплатной версии
2. Верстке сайта по макету из Figma используя плагин Inspect Styles
3. Верстке сайта по макету из Pixso

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

💡 Записаться бесплатно

#layout
1,518

2024 All Right Reserved