This repository contains the source code for a basic Social Media App that allows users to create, read, update, and delete posts. The application is built using HTML, CSS, and JavaScript and utilizes the Bootstrap framework for styling.
Features Users can write and post messages. Users can view their posted messages in a list. Users can edit their posted messages. Users can delete their posted messages. Installation and Usage To use the application, simply download or clone the repository and open the index.html file in a web browser. The app can be accessed locally without the need for a server.
Usage Instructions Upon opening the application, you will see a text area where you can write your post. Type your message into the text area. Click on the "Post" button to create a new post. Your post will appear in the "Your posts" section below the text area. Each post will have two icons - an edit icon (pencil) and a delete icon (trash bin). Click on the edit icon to edit the post content. The post will be replaced by the original content in the text area, and you can make changes. Click on the delete icon to remove the post from the list. Code Structure The code is structured as follows:
index.html: This is the main HTML file that contains the structure of the application, including the form for creating posts and the list for displaying posts. style.css: This file contains the custom styles for the application, including the layout and colors. main.js: This file contains the JavaScript code responsible for handling user interactions, form validation, and managing posts. Dependencies The application uses the following external dependencies:
Font Awesome: Provides icons for the edit and delete functionalities. Bootstrap: Used for basic styling and responsive layout. How It Works When the user submits the form (clicks on the "Post" button), the JavaScript code performs form validation to ensure that the post is not empty. If the post is valid, the data is stored in an object and added to the list of posts. The list of posts is displayed on the right side of the application, and each post has options for editing and deleting. The edit option allows the user to modify the post content by clicking on the edit icon. The original content appears in the text area for editing. The delete option allows the user to remove a post by clicking on the delete icon.