2019 Calendar App: Let's Build It!

Create a calendar app folder, open it in the editor, add a new index.html (using emmet or manual), and name the build as calendar app build with an h1 heading.

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 default styles, set table borders, padding, and dimensions, center the month controls with flex, and tune font sizes, weights, and hover effects for days.

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.

Make the calendar responsive by adjusting display blocks, margins, padding, fonts, and icon sizes for mobile views, then refine tiles and buttons in portrait themes for further styling.

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.

Develop the updateCurrentDates() function to auto populate the data object with today's date and calendar info, translating numeric month and weekday to names and updating year, month, and day fields.

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 to fill a calendar with the fillInCalendar() function, handling previous, current, and next month days. Loop through td elements to assign day numbers and apply styles.

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.

Write functions to manage the calendar ui by removing and highlighting the current day, detecting the current month versus the calendar month, and setting or removing attributes on the dom.

Implement next and previous month functions to navigate the calendar, wrap month to zero and increment the year, and clean cells when changing months via left/right arrow keys.

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.

Render the favorite color picker and wire the update color data function. Loop through color data to match the clicked name and update the current color when update is pressed.

Implement update color functionality to apply new themes across calendar elements using change color, update color clicked, and get elements by class name color to set background and border colors.

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 how to embed unique day data into every calendar cell by generating a month-year-day id and attaching a post-it note data object to each day, ensuring unique per-day identifiers.

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.

Create a function to append sprites to calendar cells and their tooltips using an id and element. Loop through posts to attach notes, images, and tooltips to the appropriate days.

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 the calendar app code to fix the tooltip cursor bug and remove duplicate logic by extracting common utility functions into main.js, improving maintainability and theme behavior.

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.