initial commit

edfde542 · Vladislav Rybalko · edfde542 · edfde542 · edfde542 · edfde542
Commit edfde542 authored Jun 05, 2024 by Vladislav Rybalko
Hide whitespace changes
Inline Side-by-side

Showing with 156 additions and 0 deletions

.DS_Store .DS_Store +0 -0

style.css css/style.css +38 -0

index.html index.html +21 -0

main.js js/main.js +97 -0

No files found.
--- a/.DS_Store
+++ b/.DS_Store
--- a/css/style.css
+++ b/css/style.css
+.date-picker {
+    display: none;
+    width: 275px;
+    height: 210px;
+    border: 1px solid black;
+    margin-top: 5px;
+    margin-left: 5px;
+}
+
+.calendarHead {
+    text-align: center;
+    background-color: rgba(128, 128, 128, 0.253);
+    padding: 5px;
+}
+
+.week {
+    margin-top: 5px;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-rows: repeat(1, 1fr);
+}
+.dayOfWeek {
+    border: 1px solid gray;
+    padding: 5px;
+    text-align: center;
+}
+
+.days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+}
+
+.day {
+    text-align: center;
+    padding: 5px;
+}
\ No newline at end of file
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./css/style.css">
+    <title>Document</title>
+</head>
+<body>
+
+    <div id="container">
+        <p>Date: </p>
+        <input class="date-input" value="" readonly type="text">
+    </div>
+    
+
+
+    <script src="./js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
--- a/js/main.js
+++ b/js/main.js
+const days = [ 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс',];
+const months = [ 'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь', ]
+
+
+const container = document.getElementById('container')
+const input = document.getElementsByClassName('date-input')
+
+
+const datePicker = document.createElement('div')
+datePicker.className = 'date-picker'
+container.append(datePicker)
+
+
+input[0].addEventListener('focus', () => {
+    datePicker.style.display = 'block'
+})
+
+let currentDate = new Date()
+const year =  currentDate.getFullYear()
+
+
+const getDaysInMonth = (year, month) => new Date(year, month+1, 0).getDate()
+
+const getFirstDayOfMonth = (year, month) => new Date(year, month, 1).getDay()
+
+
+console.log(getDaysInMonth(year, 5));
+console.log(getFirstDayOfMonth(year, 5));
+
+const monthName = () => months[currentDate.getMonth()]
+
+
+const setWeek = () => {
+    const week = document.createElement('div')
+    for (const day of days) {
+        week.append(`<div class='dayOfWeek'>${day}</div>`)
+    }
+    return week.innerText
+}
+
+const setDays = () => {
+    const days = document.createElement('div')
+    const currentMonth = currentDate.getMonth()
+    const totalDays = getDaysInMonth(year, currentMonth)
+    const firstDay = getFirstDayOfMonth(year, currentMonth)
+    for(let i = 1; i < firstDay; i++) {
+        const dayElement = document.createElement('div')
+        days.appendChild(dayElement)
+    }
+    for (let i = 1; i <= totalDays; i++) {
+        const dayElement = document.createElement('button')
+        dayElement.className = 'day'
+        dayElement.innerText = i
+        days.appendChild(dayElement)
+    }
+    return days.innerHTML
+}
+
+function drawCalendar() {
+    const month = monthName()
+    const week = setWeek()
+    const days = setDays()
+
+    const printCurrentDate = `<div class='calendarHead'>${month} ${year}</div>`
+    const printWeek = `<div class='week'>${week}</div>`
+    const printDays = `<div class='days'>${days}</div>`
+
+    const calendar = `
+        ${printCurrentDate}
+        ${printWeek}
+        ${printDays}
+    `
+    datePicker.innerHTML = calendar
+}
+
+drawCalendar()
+
+
+
+
+const printDate = () => {
+    const datePick = document.getElementsByClassName('day')
+
+    const month = currentDate.getMonth()+1
+
+    for(const day of datePick) {
+        day.addEventListener('click', () => {
+
+            input[0].value = `${year}-${month < 10 ? '0' + month : month}-${day.innerText.length < 2 ? '0' + day.innerText : day.innerText }`
+            datePicker.style.display = 'none'
+            
+        })
+    }
+}
+
+
+printDate()