Code Monkey home page Code Monkey logo

crud-basics's Introduction

CRUD-Basics

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.

crud-basics's People

Contributors

divyagupta167 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.