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 My Calendar, complete with an update icon and a checkmark feature for marking one's personal favorite color. For inserting a checkmark code, you may need to use Clippy — CSS clip-path maker (bennettfeely.com) for a suitable style for the color column.

Color-option codes

Color-option codes

Color-option codes

Popup code

   Favorite color-options code

   Favorite color-options code

The result after writing and adjusting rows without the Update bar in the My Calendar code.

The next step involves inserting an Update bar under the color-option column and altering the shape of colors with various styles by adding the following codes in Visual Studio Code.

Update bar code

Color shape style code

                        Checkmark code on favorite color-options

The final result after writing and adjusting rows, color style, sizes, and space arrangement in the
 My Calendar code.

Finally, I will insert the post-it-note codes after the checkmark area in the favorite color, color-options section.

Post-it-note codes

Post-it-note codes

Post-it-note codes

The ultimate result of this week's homework with a video file for reference


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