This repository contains my solution to the internship challenge for a job application. The challenge was to build a dynamic social media feed with load more functionality using vanilla JavaScript and CSS, without the use of any third-party libraries or frameworks.
- Do not use 3rd party libraries or frameworks.
- The code should be your own and in vanilla JavaScript and your own CSS.
- Do not use JQuery, React, Vue, or any other JS framework.
- Do not use Bootstrap, Material IO, or any other CSS framework.
- JSON Data: The repository includes a file named
data.json
in the same folder as the code. This file contains social media posts with details such as caption, name, date, and image. The information is fetched directly from the file using JavaScript. - Feed Layout: An attractive and responsive social media feed is created using HTML and CSS. The layout is designed to be consistent across different devices.
- Load More Functionality: Users can see more posts by clicking the "Load More" button. Initially, four posts are displayed, and clicking the button reveals four additional posts. This process continues until all the posts are loaded, at which point the "Load More" button is hidden.
- Theme Switching: The user interface design includes a light/dark mode feature. A toggle is placed in the header, allowing users to switch between modes based on their preferences. The theme affects all visual elements, including text, backgrounds, and images, ensuring a consistent viewing experience.
- HTML and CSS are used to structure and style the social media feed.
- An attractive and user-friendly interface is designed for the social media feed, providing a smooth and engaging user experience.
- The design is responsive and adapts well to different devices and screen sizes.
- JavaScript is implemented to integrate the data from the JSON file, fetch the data, and dynamically display it in the feed.
- Performance and loading speed optimizations are implemented for the feed.
- Clean and maintainable code is written, following industry best practices.
You can view the live preview of the project here.
To run the social media feed locally, follow these steps:
-
Clone the repository:
git clone https://github.com/your-username/social-media-feed.git
-
Open the project folder:
cd social-media-feed
-
Open the
index.html
file in your web browser.
The repository has the following structure:
├── index.html
├── reset.css
├── style.css
├── index.js
│
└── data.json
index.html
: The main HTML file that renders the social media feed.reset.css
: The CSS file resetting all the pre-defined styles on the components.style.css
: The CSS file containing the styles for the social media feed.index.js
: The JavaScript file responsible for fetching and displaying the data fromdata.json
.data.json
: The JSON file containing the social media posts data.
Contributions to this project are not accepted as it is a completed challenge for a job application.
This project is licensed under the MIT License.