7th Week Homework

 Part 2 Calendar – Right Column DIV

This week's homework is to add a new column to the right side of the previous calendar lesson. The process to create this right column involves inserting a few lines of code into the work from the fourth week. Let's review and inspect this together.

The code in Figure 1, Figure 2 and Figure 3 are from the previous lesson, and it is used to create the left side of the calendar column, resulting in Figure 7 (the last figure on the page).

On the other hand, the code for the remaining figures, numbered 4 to 6, is used to generate the right side of the mini calendar column. It includes numbers for the days and the seven-day names: Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, and Sunday. Please refer to the final result on the last page for clarification.

Fig:1 Left Column Codes on Visual Studio Code




Fig 2 : Left Column Codes on Visual Studio Code 
Fig: 3 Left Column Codes on Visual Studio Code 2

Fig: 4 Right Column Calendar Codes on Visual Studio Code
Fig: 5 Right Column Calendar Codes on Visual Studio Code 
Fig: 6 Right Column Calendar Codes on Visual Studio Code

Fig: 7 Final Result with Two Columns on My Calendar

Comments

Post a Comment

Popular posts from this blog

Image
  11th Week Homework  Part 4 - Build an App with Responsive Features For this 11-week homework assignment, I am excited to delve into the development of a Responsive App or Responsive Web Design App, building upon the code from our previous homework on the Chrome website. Let's explore and create together! To create a Responsive Web Design Application on the Chrome website, utilize the following CSS and HTML codes within the Visual Studio Code. These codes will ensure a responsive layout, seamlessly transitioning from landscape to portrait styles and ensuring that elements are displayed side by side. It is recommended to leverage Developer tools on the website for optimal implementation. The provided codes encompass features such as My Calendars, color options for selecting a favorite color, and a Post-it note to enhance the overall user experience. For clarity, I am attaching a video to elucidate the main points of creating the Responsive Web Design. 
Read more
Image
  9th Week Homework  Part 2 Calendar – Calendar CSS Formatting Regarding the 9th-week homework, there's a requirement to include background text, caret icons on both the left and right sides of the calendar month, enhance the current-day cell with icons and color, insert customize icons on the date, and integrate post-it notes settings from the previous calendar lesson. To assist with this, I've included notes and provided images of the relevant code snippets for your reference. Let's tackle this task together to ensure a comprehensive understanding and successful implementation.  To begin, insert the following codes under the <style> <head> <body> in the existing code from the previous lesson. Ensure to update the year from 2020 to the current year. CSS Setting Code After inserting the initial codes, make adjustments to the CSS settings using the provided codes in Visual Studio Code. Depending on personal preferences, both numbers, font-size, ...
Read more
Image
  10th Week Homework  Part 3 Calendar – Add dialog, color option, and popup (Modal) In this week's assignment, I've upgraded the HTML code for the color selection dialog in My Calendar. The improvements include formatting enhancements for color options, button styles, and the addition of a checkmark feature for selecting personal favorite colors. The overall appearance of the color selection dialog box has been refined, ensuring a polished look with attention to detail, including the presentation of the selection symbol. As a finishing touch, I've inserted a post-it note dialog to enhance the user experience or make notes for anything. Firstly, I will be incorporating dialog codes into the existing HTML from the previous homework assignment. Meanwhile, I will be making adjustments to the data information, such as modifying dates, months, and the overall calendar layout. Dialog codes Dialog codes adjustment Secondly, I will be integrating color-option codes into the ...
Read more