Code Monkey home page Code Monkey logo

assignment's Introduction

Assignment

Threaded comment widget assignment

How to create the widget?

Step 1: Install required npm packages:

1. Clone the repository
2. Enter the command "npm install" (if nodejs not installed then install it first).

Step 2: Creating back-end: REST API, server and mysql database using nodejs and express framework ,MYSQL workbench and javascript

1. Creating database: Run the file using command 'node database.js' or create manually using MYSQL workbench
2. Create server using nodejs
3. Use express framework to create routes for APIs and store all static files in public directory
4. Sync-mysql is used to perform synchronized operations with MySQL
5. GET: '/fetchComment' => Fetch all the comments from the database ordered by their parent_comment_id.
Note: Default parent_comment_id=0
6. POST: '/addComment' => Adds comment to the database
7. PUT: '/voteUp' => Increments count of up votes up in the database and '/voteDown' => Increments count of vote down in database
8. Functions created:
(1) setId: on clicking Reply button of a specific comment, setId(commentId) function is called and the value of id is set to commentId. So when user enters the new comment then it is stored as a reply to that specific comment.
(2) load_comment(): loads the comments in the index page and shows them in the specified format
(3) voteUp(commentId): Increments count of vote up of comment with id = commentId
(4) voteDown(commentId): Increments count of vote up of comment with id = commentId
9. AJAX is used using plain javascript to support dynamic loading of page content
10. Timestamp is calculated by comparing it with current timestamp and the best choice is selected to display with the comment. eg: 5 seconds ago etc.

Note: Data is send and received in JSON form.

Step 3: Back-end Testing:

REST API are tested using POSTMAN.

Step 4: Creating Front-end: Bootstrap, HTML, CSS and Plain Javascript.

Note: JQuery is only included as a plugin for bootstrap

1. Form included two input elements: (1) User name (2) Comment
2. When user submits the form the validation checks are applied for empty fields
3. Bootstrap panels and buttons are used to display the comments and buttons
4. Font-awesome library used for like and dislike logo
5. Comments are showed in a nested form
6. Users can reply to others' comment by clicking on Reply button of specific comment and then submitting the form at the top of the page
7. Date showed in a style similar to that of Facebook
8. Like and Dislike buttons are included at the bottom of the comment

Note: Easily pluggable into existing website.

assignment's People

Contributors

vinayb21 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.