My study diary

  • Currency Converter

    • Зробити конвертер валют.
  • Working with API

    • Task 1. Зробіть запит до API за посианням https://jsonplaceholder.typicode.com/posts
      Виведіть на документ перші 30 постів із 100 отриманих (показуйте поля title, body та додайте будь-яке зображення на власний розсуд до кожного поста, верстку і стилі також робіть за власним смаком)
  • Trello

    • Зробити аналог додатку Trello за допомогою Drag and Drop.
    • Зробити аналог додатку Trello за допомогою Drag and Drop та бібліотуки Dragula.
  • Football

    • Зробити інтерактивну міні - гру Футбол за допомогою Drag and Drop з виводом рахунку.
  • Map

    • Зробити інтерактивні назви міст при наведенні на регіон.
  • LoginForm

    • Зробити поп-ап авторизації з табами( log in / sign up) за макетом.
  • Objects

    • Task 1. Створіть об'єкт Point, що містить дві властивості: "x" та "y" - координати точки, і метод GetQuadrant, що обчислює, в якому квадранті декартової системі координат знаходиться дана точка. Протестуйте цей об'єкт, змінюючи значення його координат, та повторно викликаючи метод GetQuadrant.
    • Task 2. Створити об'єкт Calculator, який повинен містити методи для розрахунку суми, різниці, добутку та приватного двох чисел. Протестувати цей об'єкт, приймаючи від користувача значення двох операндів та знак операції. Залежно від прийнятого знака операції викликати відповідний метод.
    • Task 3. Створити масив, який зберігатиме у собі інформацію про співробітників підприємства. Кожен елемент масиву - об'єкт, містить властивості: name, sName, age, occupation, та метод show, який виводить всю інформацію про користувача. Реалізувати заповнення масиву користувачем. Після закінчення заповнення – вивести інформацію про співробітників.
    • Task 4. Для попереднього завдання створіть функцію, яка прийматиме масив об'єктів-співробітників, і кожному з об'єктів буде додавати нову властивість "salary", що зберігає зарплату співробітника.
      Зарплата розраховується, виходячи із значення властивості "occupation" таким чином:
      • "director" - 3000;
      • "manager" - 1500;
      • "programmer" - 2000;
      • для решти значень – 1000.
      Після виконання функції – вивести інформацію про співробітників.
    • Task 5. Для завдання 3 створити метод, що дозволяє відсортувати масив співробітників за одним із властивостей: name, sName, age, occupation, salary. Параметр сортування приймається від користувача. Після виконання функції – вивести інформацію про співробітникі
  • Functions

    • Task 1. Створити функцію calculate(operand1, operand2, sign), де operand1 і operand2 – два числа, sign – знак арифметичної операції.
      Функція повинна розраховувати результат операції, з переданого їй знака.
      Функція повинна перевіряти коректність введених чисел та знаку операції.
      Усі аргументи для функції прийняти від користувача.
    • Task 2. Створити функцію, що зводить число до ступеня, число і сам ступінь вводиться користувачем
    • Task 3. Створити гру "Камінь-Ножиці-Папір".
      Вибір комп'ютера визначається рядком:

      var computerChoice = Math.random();
      alert(computerChoice);

      Math.random() видає довільне число у проміжку від 0 до 1, виходячи з цього можна побудувати принцип вибору рішення комп'ютера.
    • Task 4. Напишіть функцію, яка повертає n число Фібоначчі. Для вирішення використовуйте цикл.
  • Arrays

    • Task 1. Зробити власні приклади методів для масивів..
    • Task 2. Створити функцію для знаходження мінімального та максимального елемента масиву getMinAndMax(array).
      Результат повинен виводитись у консоль.
    • Task 3. Визначити елементи масиву та вивести їх значення, індекси яких лежать у вказаній межі. Межу вводить користувач.
    • Task 4. Відсортувати масив на 10 чисел у порядку зростання. Значення приймаються від користувача. Сортування здійснюється методом sort().
    • Task 5. Створити програму, що виконує вставку елемента в масив після елемента, значення якого вкаже користувач. Вихідний масив [12, 56, 76, 23 ,1, 9].
    • Task 6. Необхідно отримати передостанній елемент з масиву month і вивести його на екран.
    • Task 7. Створити два довільні масиви: один масив - улюблена спортивна команда/моделі автомобілів/міста, у другому - кількість гравців у команді/обсяг двигуна/кількість жителів у місті. Об'єднати дані з двох масивів та вивести їх в один рядок.
  • Conditions and loops

    • Task 1. Серед трьох чисел знайти середнє арифметичне. Якщо серед чисел є рівні, вивести повідомлення "Помилка". Числа прийняти від користувача.
    • Task 2. Побудувати прямокутний трикутник, що складається з символу "*".
    • Task 3. Визначити якесь із трьох, введених користувачем, чисел максимальне і вивести його на екран.
    • Task 4. Дано два числа A та B де (A < B).
      Виведіть на екран суму всіх чисел, розташованих у числовому проміжку від А до В.
      Виведіть на екран усі непарні значення, розташовані у числовому проміжку від А до В.
    • Task 5. Вивести на екран ряд чисел Фібоначчі, що складається з n елементів (n прийняти від користувача).
      Числа Фібоначчі - це елементи числової послідовності, в якій кожне наступне число дорівнює сумі двох попередніх.
    • Task 6. Вивести на екран таблицю множення від 0 до 9.
  • Introduction to JS

    • Task 1. За координатами двох точок, які вводить користувач, визначити рівняння прямої, що проходить через ці точки. Загальний вигляд рівняння: y = kx + b; де k = (y1 - y2) / (x1 - x2), b = y2 - k * x2.
    • Task 2. Обміняти значення двох змінних, використовуючи третю (буферну) змінну.
    • Task 3. Оголосіть дві змінні: admin та name. Запишіть у name рядок "Василь". Замініть значення з name на admin. Виведіть admin.
    • Task 4. Отримати від користувача дані: ім'я, прізвище, вік. Обробити їх та вивести на екран.
    • Task 5. Запитайте у користувача його вік, після чого виведіть на екран модальне вікно із запитанням: "Ваш вік ...(введене користувачем число) років?". Далі, залежно від вибору користувача, виводиться модальне вікно з інформацією true або false.
  • Final project HTML|CSS

    • Make up a web page from a mockup (Figma)
  • Practice. Making a simple page with form.

    • Task 1. Make up a web page from a mockup
  • Tables, pseudo-classes, pseudo-elements, rem em, fr, Grid layout.

    • Task 1. Reproduce site section layout using GRID Layout
  • Practice. Navigation.

  • Transition, animation, hover, animate.css

    • Task 1. Make up a web page from a mockup
  • Forms

  • Position, FLEX, icon font

    • Task 1. Making a banner with blocks and icons. Flexbox practice
  • Div, selectors, banner

    • Task 1. Making a simple banner
  • Work with graphic

    • Task 1 - Anchor to top of page.
    • Task 2 - Background without scaling
  • Introduction to HTML

    • Task 1 - Formulas for the properties of degrees
    • Task 2 - Quotes
    • Task 3 - Table of contents