2019 Calendar App: Let's Build It!

Name: 2019 Calendar App: Let's Build It!
Rating: 4.3 (52 reviews)

Build a real world web application using HTML, CSS, Javascript, PHP and MySQL.

Created byJesse Caine

Last updated 3/2020

English

What you'll learn

Build a real world web application
Use CSS media queries to make your pages responsive
Use Javascript to create & control the operations of an application

Course content

11 sections • 65 lectures • 7h 41m total length

Reviewing the Final Product3:24
Create a calendar app that supports theme changes, month navigation with arrows or keyboard, color-coded notes with hover text, and persistent data across reloads via a database.
About the App's Appearance0:14
The Tools I'm Using1:34
Set up your development environment with a browser, a code editor, and Zap to run a local server and database using plain HTML, CSS, and JavaScript without frameworks.
Getting the Course Files0:07

Using month_data6:53
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.
Writing the fillInCalendar() Function: Part 18:09
Writing the fillInCalendar() Function: Part 29:26
2020 Update - Fixing Month Data13:40
Writing more Functions7:10
Changing Months on the Calendar9:12
2020 Update - Calendar Navigation5:05
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.
Fixing the Color Problem3:09
Calendar Borders15:28

Embedding Data into the Table Cells7:55
Trigger a Function when Cells are Clicked6:19
Adding post_it objects to post_its array8:03
Writing the Function to Add Notes/Tooltips to Cells5:08
Posting Notes3:42
Editing Notes7:29
Deleting Notes5:38
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.

Requirements

Know Basic HTML, CSS & Javascript

Description

This entire course is one big code along, broken up into byte sized chunks. I start by creating the markup and styling all the pieces. The I use JavaScript to add all the front-end functionality. Then at the end I start using PHP and MySQL to connect to a database to make all of the changes made in the front end persistent, so that the app will remember how it was the last time you used it.

Keep in mind that there may be some technologies used in this course that you aren't used to using. I use Flexbox, AJAX, MySQL, etc. These technologies aren't aren't taught in this course, as that isn't the main objective, for me, these technologies are just a means to an end.

Who this course is for:

Novice web developers who want take there skills to new level by building web applications.

2019 Calendar App: Let's Build It!

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 5min

HTML/CSS - Making the Left Side4 lectures • 28min

HTML/CSS - Making the Calendar4 lectures • 42min

HTML/CSS - Creating the Popups5 lectures • 41min

HTML/CSS - Making the App Responsive4 lectures • 24min

JS - Setting the Current Day Values5 lectures • 23min

JS - Filling the Calendar9 lectures • 1hr 18min

JS - Updating the Theme5 lectures • 40min

JS - Posting Post-it Notes7 lectures • 44min

Final Touches Before PHP6 lectures • 51min

Requirements

Description

Who this course is for: