Skip to content

Latest commit

 

History

History
63 lines (41 loc) · 2.87 KB

ReadME.md

File metadata and controls

63 lines (41 loc) · 2.87 KB
Raw

Web Application for Posts Display

Overview

This project involves developing a comprehensive web application that showcases posts, user profiles, comments, and includes a navigation system. The application will dynamically fetch data and use a responsive flexbox design to provide an engaging user experience.

Features and Requirements

Posts Display

  • Dynamically load and display posts with details such as ID, title, body, userId, tags, and reaction count.
  • Implement either pagination or infinite scrolling to manage the loading of posts.

Navigation Bar

  • Develop a responsive navigation bar with links to various sections like Home, Posts, etc., which will be visible at the top of all pages.

Home Page

  • The Home page should succinctly describe the application's purpose and offer user instructions.

Posts Page

  • Display a list of posts, with each post featuring:
    • A title
    • Body text
    • Username (hint: consider how to derive the username from the userId)
  • Attach associated comments to their respective posts.

Error Handling and Feedback

  • Implement error handling for network request failures.
  • Provide feedback for empty states or errors to improve user experience.

Technical Requirements

1. HTML

  • Use structured markup for creating posts, user profiles, comments, navigation elements, and a contact form.
    • The contact form must include fields for "Name," "Email," a "Send" button, and a checkmark for "confirm to send."
  • Employ semantic HTML tags throughout the application.

2. CSS

  • Utilize flexbox or grid layouts for responsive design.
  • Apply styling to enhance the visual appeal and usability across different devices.

3. JavaScript

  • Fetch Post Data: Use fetch to retrieve posts from https://dummyjson.com/posts.
  • Fetching Comments: Use fetch to obtain comments from https://dummyjson.com/comments.
  • Displaying Comments: Develop functionality to append comments to the respective post.
  • Fetching User Data: Use fetch to get user profiles from https://dummyjson.com/users.
  • Linking Posts to User Profiles: Integrate functionality where clicking a username in a post displays a modal with the user's profile information from the "users" endpoint.
  • User Objects: Post-fetching, re-organize users into either an object or a class for better management.
  • Validate the Contact Form: Ensure the contact form is validated upon submission:
    • The name field must not contain numbers.
    • The email must include "@" and ".".
    • The checkmark must be checked for the form submission button to be clickable.

Conclusion

This project aims to build a dynamic and responsive web application that enhances user engagement through effective display and management of posts, user profiles, and comments. By adhering to the specified technical requirements, I created a user-friendly and aesthetically pleasing application.