Update blog.html

[akshitbansal2005]

Structure:

• HTML Document: The document is well-structured, with a proper doctype declaration and language attribute.
• Head Section: Contains metadata, title, links to stylesheets, and icons, ensuring responsiveness and access to required libraries for icons and styles.

Components:

• Blog Section:

  • Includes a section element with a class and ID for easy styling and JavaScript manipulation.
  • Contains a container for blog cards that showcase individual blog posts, each represented as a div with an image, title, description, and a "Read More" button.

• Blog Cards:

  • Each card is visually distinct and contains key information about the blog post, promoting user engagement.

• Modal Implementation:

  • A modal element is used for displaying detailed blog content when the "Read More" button is clicked.
  • The modal includes a close button and dynamically loads content based on user interaction.

JavaScript Functionality:

• Event Handling:

  • Listens for clicks on the "Read More" buttons and the modal close button, enabling a dynamic user experience.
  • Uses the Fetch API to retrieve blog content from JSON files, ensuring that data is loaded asynchronously without reloading the page.

• Modal Control:

  • Displays the modal when a blog is selected and hides it upon user interaction.
  • Prevents background scrolling when the modal is open to maintain focus on the content.

Accessibility:

• The code includes some accessibility features (like the aria-label on the close button), which is crucial for users relying on screen readers.

Usability:

• The design promotes user interaction and keeps content organized and accessible.
• The modal enhances usability by presenting additional information without navigating away from the current page.

[arushi2610]

Kindly add screenshots/ screen recording for ease of assessment.