2019 Calendar App: Let's Build It!

Write the left side markup for the 2019 calendar app, including headings and divs with IDs for app name landscape, year, current day, date class, and a theme button.

Create reusable styles for the 2019 calendar app by importing google fonts, defining classes for buttons with border radius, text alignment, and cursor defaults, plus color themes.

Apply left side styling with a 34 percent width and view-height-based font sizes and padding for responsive current day information, including targeted h2 and hover effects.

Write and structure calendar markup by building a table with thead and tbody, adding a header, year and month labels, responsive portrait controls, and a change theme button.

Style the calendar with Font Awesome icons for left and right navigation, fine-tune cells with css for spacing and hover transitions, and prepare notes and tooltips for the current day.

Style calendar day cells and notes, implement hover tooltips, and prepare note images with alt text. Learn to adjust image sizing, vertical alignment, and whitespace behavior with CSS.

Develop a modal pop-up with a darkened background, style it for the calendar, scaffold csx files, and prepare a noninteractive prototype for later usability.

Create the theme markup for a modal color picker with twelve color options and inline background color previews, using divs with class color option and color previews.

Learn to style a theme popup using flex layout, border radius, and calc-based font sizing, with color options and upcoming hover effects plus a checkmark icon.

Style the theme popup with font awesome icons, assign a checkmark class, adjust hover, margins, padding, and font sizes, and manage visibility of the favorite color option.

Create and style the create note popup for the 2019 calendar app. Learn to apply ID and class attributes, font settings, button styles, hover effects, and responsive portrait layout.

Learn to implement responsive portrait and landscape styles with a media query, disable hover tooltips on portrait mode, and organize CSX/CSSX code for a touch-friendly calendar interface.

Style the popup for mobile by setting width to 75vw, adjusting padding, borders, and color options. Use flex wrapping for automatic line breaks in portrait mode.

Finish updating the current dates function for the 2019 calendar app using document.getElementById and innerHTML. Translate numbers to month names and weekdays, and implement ordinal indicators for dates.

Implement ordinal date indicators in a calendar app by handling first, second, third, and general days with st, nd, rd, and th suffixes, plus minor ui adjustments.

Translate day and month numbers to strings with a switch statement, mapping 0 to Sunday and January to its name, validating the function and updating the data.

Create an updateCalendarDates function that runs on app start, updates year and month displays from data.calendar, translates the month name, and initializes with a start function before building the calendar.

Build an automatic calendar with JavaScript by populating previous, current, and next months through a three-phase process, using a month data array with month indices, days, start dates, and year.

Develop and link the fillInCalendar() function, update calendar dates when months or years change, and track the previous month index and current month index for accurate calendar rendering.

Learn how to fix the 2020 calendar app month navigation by generating month data automatically with a generate month data function, calculating starting days and days per month for years.

update to calendar navigation implements robust next and previous month logic using data-driven year bounds and array access, enabling proper year transitions and leap year handling for future dates.

Clean up the calendar cells by removing the color class from day elements and looping through days to ensure clean borders, preparing for CSX styling and a small JavaScript tweak.

Learn how to style a calendar table with borders and colors using CSS classes, including color-based borders, previous-month last-day styling, and dynamic border adjustments.

Develop a color-themed feature by wiring a click to trigger a themed modal using color_data, storing current and off colors, and planning simple fade animations for the modal.

Learn to trigger a modal with fade in and fade out animations using keyframes and event listeners to open, update, and close the modal.

Add check marks to the current color in the 2019 calendar app by updating the color name, looping over color previews, and removing all check marks before adding new ones.

Learn to trigger a function when calendar cells are clicked by wiring on-click handlers, assigning unique day identifiers, and updating day post-it notes with data-id attributes.

Add post_it objects to the post_its array, including id, color, and note, to render on the calendar and handle new versus existing notes using the current post it id.

Post notes to the calendar and update the display instantly using the element's ID, attributes, and classList; implement getRandom to pick a color from 1–6.

Learn to edit notes in the 2019 calendar app by checking if a day has a note, handling new versus existing notes, and updating on day click.

Fix the calendar bug by correcting the month index, then implement delete notes: clear the text area, remove the existing post, update the calendar, and hide the modal.

Clean up the index with light refactoring and style tweaks, remove unused scripts, and enable remember folds to preserve collapsed panels between sessions.

Refactor the 2019 calendar app by correcting the 'calendar' misspelling across files, using find and replace and F3 to update links, routes, and file names, ensuring the UI remains functional.

Refactor a calendar UI by extracting repetitive code into a reusable function, reducing duplication and clarifying month data handling for current, previous, and next months.

Explore restyling the calendar app by tweaking layout with clip path triangles, responsive landscape adjustments, color themes, and a background 2019 calendar text, while hiding it in portrait.