56 - React JS практика - Презентационная и Контейнерная компоненты
Как упаковать Node.js приложение в Docker контейнер за 3 минуты?
В этой статье мы познакомимся с простейшим способом упаковки своeго собственного приложения в Docker контейнер. Учится мы будем на примере крошечного Node.js приложения. Если Вы не знакомы с Node.js - ничего страшного. Ниже Вы найдёте инструкцию по созданию тестового приложения, с которым мы и будем работать. Если Вы у Вас уже есть своё Node.js приложение, которые Вы хотите упаковать в Docker контейнер - следующий раздел Вы можете пропустить. Создание тестового приложения Node.js Перед тем как мы начнём, убедитесь, что у Вас установлена среда разработки Node.js. Скачать её можно на официальном сайте или установить можно напрямую с Homebrew...
Как сделать календарь в JS? В HTML нам поднадобиться всего лишь один div с классом container: <div class="container"></div> Вся оснавная работа будет в js. Сначала необходимо создать функцию, которая будте корректировать дату т.к. в js день недели начинается с воскресенья, а нам привычнее видеть стандарт даты с понедельника: function getDay(date){ let day = date.getDay(); if(day == 0) day = 7 return day-1 } Далее мы прописываем основную функцию: function createCalender(elem, year, month){ elem = document.querySelector(elem) // сюда при вызоые мы будем записывать элимент, в который будет вложен календарь let mon = month - 1 // т.к. js считает январь нулевым месяцем let d = new Date(year, mon) let table = ` <table> <caption>${month}.${year}</caption> //заголовок таблицы <tr> <th>пн</th> <th>вт</th> <th>ср</th> <th>чт</th> <th>пт</th> <th>сб</th> <th>вс</th> </tr> <tr> //не закрываем теги таблицы и tr т.к. затем пропишем циклы, которые будут записывать дни `; for (let i = 0; i<getDay(d); i++){ //пустые ячейки, если месяц начинается не с понедельника table += `<td></td>` } //гениратор дней while (d.getMonth() == mon){ table += '<td>' + d.getDate() + '</td>' if (getDay(d) % 7 == 6){ table += '</tr><tr>' } d.setDate(d.getDate() + 1) } if (getDay(d) != 0){ for (let i = getDay(d); i<7; i++){ //пустые ячейки если месяц заканчивается не воскресеньем table += `<td></td>` } } table += '</tr></table>' // закрываем таблицы elem.innerHTML = table // добавляем код HTML в таблицу } И вызываем функцию, передав в нее параметры (расположение, год, месяц) createCalender('body', 2023, 4) Таблице мы также можем добавить несколько стилей в css: .container { display: flex; flex-wrap: wrap; } table { border-collapse: collapse; margin-bottom: 10px; margin-right: 10px; } caption { padding: 10px 0; background-color: rgb(69, 154, 69); border: 1px solid black; border-bottom: none; } td, th { border: 1px solid black; padding: 8px; text-align: center; font-size: 18px; } th { font-weight: bold; background-color: rgb(47, 112, 47); }