From 54472987614e17d238ccb0d7df2d45a0a414736f Mon Sep 17 00:00:00 2001 From: Antonio Rufino Date: Sun, 1 Jan 2023 11:59:15 +0100 Subject: [PATCH 01/24] create main files, add header --- index.css | 19 +++++++++++++++++++ index.html | 20 ++++++++++++++++++++ index.js | 6 ++++++ 3 files changed, 45 insertions(+) create mode 100644 index.css create mode 100644 index.html create mode 100644 index.js diff --git a/index.css b/index.css new file mode 100644 index 0000000..5518c3e --- /dev/null +++ b/index.css @@ -0,0 +1,19 @@ +.header { + display: flex; + justify-content: space-around; + border-bottom: 1px solid black; +} +.header .h1 { + font-size: 2.8em; +} +.header .div { + display: flex; + align-items: center; +} +.header .button { + max-height: 30px; + padding: 10px 5px; + display: inline-flex; + align-items: center; + cursor: pointer; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..4d1f469 --- /dev/null +++ b/index.html @@ -0,0 +1,20 @@ + + + + + + + Js-Calendar + + + + +
+

JS CALENDAR

+
+ +
+
+ + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..0c8b828 --- /dev/null +++ b/index.js @@ -0,0 +1,6 @@ +const addEvent = () => { + +} + +document.getElementById('btnAdd').addEventListener("click", addEvent); + From 0195f6aec5e1ed936b36b862bb6a8f9aaaefcb9f Mon Sep 17 00:00:00 2001 From: Antonio Rufino Date: Sun, 1 Jan 2023 13:01:39 +0100 Subject: [PATCH 02/24] add modal with not final form --- index.css | 136 +++++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 107 ++++++++++++++++++++++++++++++++++------- index.js | 29 ++++++++++-- 3 files changed, 247 insertions(+), 25 deletions(-) diff --git a/index.css b/index.css index 5518c3e..ca27c13 100644 --- a/index.css +++ b/index.css @@ -1,4 +1,21 @@ +:root { + --lightgray: #efefef; + --blue: steelblue; + --white: #fff; + --black: rgba(0, 0, 0, 0.8); + --bounceEasing: cubic-bezier(0.51, 0.92, 0.24, 1.15); +} +* { + padding: 0; + margin: 0; + -ms-box-sizing: content-box; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} + .header { + padding: 20px 0; display: flex; justify-content: space-around; border-bottom: 1px solid black; @@ -7,13 +24,124 @@ font-size: 2.8em; } .header .div { - display: flex; - align-items: center; + display: flex; + align-items: center; } -.header .button { +.header .open-modal { max-height: 30px; padding: 10px 5px; display: inline-flex; align-items: center; cursor: pointer; -} \ No newline at end of file +} + +.calendar { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + font: 16px/1.5 sans-serif; +} + +.modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + background: var(--black); + visibility: hidden; + opacity: 0; + transition: all 0.35s ease-in; +} +.modal-dialog { + position: relative; + max-width: 800px; + max-height: 80vh; + min-width: 20vw; + min-height: 10vh; + border-radius: 5px; + background: var(--white); + overflow: auto; + cursor: default; +} +.modal-dialog > * { + padding: 1rem; +} +.modal-header { + display: flex; + align-items: center; + justify-content: space-between; + font-weight: bolder; + font-size: 2em; +} +.modal-footer { + display: flex; + justify-content: center; +} +.modal-header .modal-close { + font-size: 1.5rem; + cursor: pointer; +} +.modal p + p { + margin-top: 1rem; +} +.modal { + visibility: hidden; + opacity: 0; + transition: all 0.35s ease-in; +} +.modal.is-visible { + visibility: visible; + opacity: 1; +} +[data-animation="slideInOutLeft"] .modal-dialog { + opacity: 0; + transform: translateX(-100%); + transition: all 0.5s var(--bounceEasing); +} +[data-animation="slideInOutLeft"].is-visible .modal-dialog { + opacity: 1; + transform: none; + transition-delay: 0.2s; +} +.modal-content { + display: flex; + flex-direction: column; + align-items: center; +} +.modal-content .form .form-data { + margin-bottom: 10px; + width: 100%; + display: flex; +} +.modal-content .form .form-data .div-label { + min-width: 150px; +} +.modal-content .form .form-data .div-input { + min-width: 150px; +} +.modal-content .form .form-data .div-input input, +.modal-content .form .form-data .div-input select, +.modal-content .form .form-data .div-input textarea { + width: 150px; +} +.modal-content .form .form-data input[type="checkbox"] { + margin-right: 5px; +} +.modal-footer .btn-save, +.modal-footer .btn-cancel { + background-color: rgb(111, 199, 111); + color: white; + border: none; + padding: 5px 15px; + cursor: pointer; +} +.modal-footer .btn-cancel { + background-color: rgb(210, 94, 94); + margin-left: 20px; +} diff --git a/index.html b/index.html index 4d1f469..05128d1 100644 --- a/index.html +++ b/index.html @@ -1,20 +1,93 @@ - - - - - Js-Calendar - - - - -
-

JS CALENDAR

-
- + + + + + Js-Calendar + + + + +
+

JS CALENDAR

+
+ +
+
+ +
+ +
-
- - - \ No newline at end of file + + diff --git a/index.js b/index.js index 0c8b828..4a4fb29 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,27 @@ -const addEvent = () => { - -} -document.getElementById('btnAdd').addEventListener("click", addEvent); +// OPEN MODAL +const isVisible = "is-visible"; +const openModal = document.querySelector("[data-open]"); +openModal.addEventListener("click", function () { + const modalId = this.dataset.open; + document.getElementById(modalId).classList.add(isVisible); +}); + +// CLOSE MODAL +const closeModal = document.querySelectorAll("[data-close]"); +for (const el of closeModal) { + el.addEventListener("click", function() { + this.parentElement.parentElement.parentElement.classList.remove(isVisible); + }); +} +document.addEventListener("click", e => { + if (e.target == document.querySelector(".modal.is-visible")) { + document.querySelector(".modal.is-visible").classList.remove(isVisible); + } +}); +document.addEventListener("keyup", e => { + if (e.key == "Escape" && document.querySelector(".modal.is-visible")) { + document.querySelector(".modal.is-visible").classList.remove(isVisible); + } +}); \ No newline at end of file From 61fe9754d6958d7435d7b8be53f6ffedb18a9ee5 Mon Sep 17 00:00:00 2001 From: Antonio Rufino Date: Sun, 1 Jan 2023 21:06:08 +0100 Subject: [PATCH 03/24] add logic of month selection --- index.css | 102 +++++++++++++++++++++++++++++++--- index.html | 95 +++++++++++++++++++++++-------- index.js | 160 ++++++++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 305 insertions(+), 52 deletions(-) diff --git a/index.css b/index.css index ca27c13..57777e7 100644 --- a/index.css +++ b/index.css @@ -1,3 +1,4 @@ +/* MAIN */ :root { --lightgray: #efefef; --blue: steelblue; @@ -14,6 +15,7 @@ box-sizing: content-box; } +/* HEADER */ .header { padding: 20px 0; display: flex; @@ -28,21 +30,85 @@ align-items: center; } .header .open-modal { - max-height: 30px; - padding: 10px 5px; - display: inline-flex; - align-items: center; + width: 75px; cursor: pointer; + box-shadow: 0px 0px 2px rgb(0, 0, 0); + border: none; + outline: none; + padding: 5px; + border-radius: 5px; + color: rgb(0, 0, 0); } +/* CALENDAR */ .calendar { + margin: 0 auto; + margin-top: 50px; + width: 770px; display: flex; + flex-direction: column; align-items: center; - justify-content: center; - height: 100vh; - font: 16px/1.5 sans-serif; +} +.calendar .display { + width: 100%; + display: flex; + text-align: center; + justify-content: space-between; + font-size: 1.5em; + margin-bottom: 20px; +} +.calendar .display .previous-btn, +.calendar .display .next-btn { + width: 75px; + cursor: pointer; + box-shadow: 0px 0px 2px rgb(0, 0, 0); + border: none; + outline: none; + padding: 5px; + border-radius: 5px; + color: rgb(0, 0, 0); +} +.calendar .display .month-display { + width: 80%; + font-size: 1.2em; +} +.calendar .weekdays { + width: 100%; + display: flex; + color: #247ba0; + text-align: center; +} +.calendar .weekdays .weekday { + width: 100px; + padding: 10px; +} +.calendar .months { + width: 100%; + margin: auto; + display: flex; + flex-wrap: wrap; +} +.calendar .month { + width: 100%; + margin: auto; + display: flex; + flex-wrap: wrap; + justify-content: start; +} +.calendar .months .month .day { + width: 100px; + padding: 10px; + height: 100px; + box-sizing: border-box; + background-color: white; + margin: 5px; + box-shadow: 0px 0px 3px #5c5c5c; + display: flex; + flex-direction: column; + justify-content: space-between; } +/* MODAL */ .modal { position: fixed; top: 0; @@ -143,5 +209,25 @@ } .modal-footer .btn-cancel { background-color: rgb(210, 94, 94); - margin-left: 20px; + margin-left: 20px; +} + +/* FORM */ +#showEndDate { + display: none !important; +} +#showEndDate.is-visible { + display: flex !important; +} +#showExpiration { + display: none !important; +} +#showExpiration.is-visible { + display: block !important; +} +#previousTime { + display: none !important; +} +#previousTime.is-visible { + display: flex !important; } diff --git a/index.html b/index.html index 05128d1..d62e9e9 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,25 @@

JS CALENDAR

+ +
+ +
+ +
+ +
+
Sunday
+
Monday
+
Tuesday
+
Wednesday
+
Thursday
+
Friday
+
Saturday
+
+ +
+