Merge pull request #172 from 1simransaini/simran_branch

Infinite Scrolling Project

Node-JS-Projects/Basic/Infinite-Scrolling/README.md

@@ -0,0 +1,109 @@
+<h1 align='center'><b>💥 Infinite Scrolling 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+<div align="center">
+   <img src="https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white" alt="HTML5" style="margin: 5px;"/>
+   <img src="https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white" alt="CSS3" style="margin: 5px;"/>
+   <img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" alt="JavaScript" style="margin: 5px;"/>
+   <img src="https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB" alt="Express.js" style="margin: 5px;"/>
+   <img src="https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white" alt="NodeJS" style="margin: 5px;"/>
+   <img src="https://img.shields.io/badge/mysql-%2300f.svg?style=for-the-badge&logo=mysql&logoColor=white" alt="MySQL" style="margin: 5px;"/>
+</div>
+
+
+  <!-- ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) -->
+  <!-- ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) -->
+  <!-- ![Bootstrap](https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge&logo=bootstrap&logoColor=white) -->
+  <!-- ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) -->
+  <!-- ![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) -->
+  <!-- ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) -->
+  <!-- ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) -->
+  <!-- ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) -->
+  <!-- ![Web3.js](https://img.shields.io/badge/web3.js-F16822?style=for-the-badge&logo=web3.js&logoColor=white) -->
+   <!--![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB) -->
+  <!-- ![Angular.js](https://img.shields.io/badge/angular.js-%23E23237.svg?style=for-the-badge&logo=angularjs&logoColor=white) -->
+  <!-- ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) -->
+  <!-- ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) -->
+  <!-- ![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D) -->
+  <!-- ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white) -->
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <!-- <p>Add Description of the project</p> -->
+    <p>
+      An infinite scrolling full-stack web application that dynamically loads data from the backend when the scrollbar reaches the bottom of the page. This ensures a seamless and continuous user experience.
+
+  ###   Features:
+- Infinite Scrolling: Continuously loads new content as the user scrolls down, without the need for page refreshes.
+- Responsive Design: Optimized for all devices, providing a consistent user experience on desktops, tablets, and mobile phones.
+- Dynamic Data Loading: Efficiently fetches data from the backend, reducing initial load times and enhancing performance.
+    </p>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<!-- Add steps how to run this project -->
+- Clone the project
+  ```
+    https://github.com/1simransaini/Infinite-Scrolling.git
+  ```
+- Install Dependencies
+- Make a .env file, also make sure to add .env file in the root folder
+- Template of .env file
+```
+  DB_PORT=<Here write your database port number>
+  host=localhost
+  database=<Write your Database name>
+  user=<Write username>
+  password=<password of user>
+  SERVER_PORT=<Write Server Port Number>
+```
+
+- Run as:
+  ```
+    nodemon server/app.js
+  ```
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<!-- add the screenshot of the project (Mandatory) -->
+![Screenshot (14234)](https://github.com/1simransaini/Infinite-Scrolling/assets/91106038/fc31504c-6f04-469c-85c6-c6a35b94eb14)
+
+
+
+<!--## :zap: Working Video 📹-->
+<!-- directly add the link of video (If, possible) -->
+
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Simran Saini</i></b> 👩</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/1simransaini/'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/1simransaini'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 👩</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
+

Node-JS-Projects/Basic/Infinite-Scrolling/client/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Infinite Scrolling</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <section class="post-container"></section>
+    <script src="index.js"></script>
+</body>
+</html>
+<!-- everyting else we are dynamically going to insert using javascript -->

Node-JS-Projects/Basic/Infinite-Scrolling/client/index.js

@@ -0,0 +1,70 @@
+let scrollLock=false;
+
+function getPosts(offset){
+    if(!offset){
+        //offset is after limit loading new posts numbers
+        //if offset is undefined or null we will set it to 0
+        offset=0;
+    }
+    fetch('http://localhost:5000/list?' + 'offset=' +
+    offset)
+    .then(response => response.json())
+    .then(data => loadPostsIntoSection(data));
+}
+
+function loadPostsIntoSection(postsArray){
+    let html = "";
+    postsArray.forEach(function (post){
+        html += `<div class="post-card">`;
+        html += `<header class="post-header">`;
+        html += `<h3>${post.id}. ${post.title}</h3>`;
+        html += `</header>`;
+        html += `<p class="post-body">${post.body}</p>`;
+        html += `</div>`;
+    });
+
+    //LOADING..
+    createLoadingElement();
+
+    //since loading too fast so to slow it down setTimeout
+    setTimeout(function(){
+        document.querySelector('.post-container').
+        insertAdjacentHTML('beforeend',html); //beforeend manne at last insert karne ka
+
+        destroyLoadingElement();     //to destroy loading after inserting
+
+        scrollLock=false;   //to have nos in order and not repeat
+    },1500);
+}
+
+window.onscroll =function(){
+    if(scrollLock) return;
+    //onscroll is event that gets triggered every time you scroll up and down
+    if(this.innerHeight + this.scrollY >= document.
+    body.scrollHeight){ 
+        scrollLock=true;
+        //if this condition is true that means we are near the
+        //bottom and ready to get more data 
+        //or in simple words we can get more data now LOADING..
+
+        //pageYOffset -> scrollY
+        let postsLength= document.querySelectorAll
+        ('.post-card').length;  //this will give us the length of the posts how many total posts are there 
+
+        getPosts(postsLength);
+    }
+}
+
+function createLoadingElement(){
+    let p=document.createElement('p');
+    p.innerText="LOADING.........";
+    p.classList.add('loading-element');
+
+    document.querySelector('.post-container').
+    insertAdjacentElement('beforeend',p);
+}
+
+function destroyLoadingElement(){
+    document.querySelector('.loading-element').remove();
+}
+getPosts();

Node-JS-Projects/Basic/Infinite-Scrolling/client/style.css

@@ -0,0 +1,21 @@
+body{
+    background-color: #343434;
+}
+
+.post-container{
+    background-color: #f7fff7;
+    width: 90%;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+.post-card{
+    background-color: #A2A7A5;
+    box-shadow: 2px 4px 16px 0 rgba(0,0,0,0.2);
+    padding: 5px;
+    margin-top: 15px;
+}
+
+.post-header h3{
+    margin: 0;
+}

Node-JS-Projects/Basic/Infinite-Scrolling/package.json

@@ -0,0 +1,10 @@
+{
+  "dependencies": {
+    "axios": "^1.6.7",
+    "express": "^4.18.2",
+    "mysql2": "^3.9.1"
+  },
+  "scripts": {
+    "start": "node server/app.js"
+  }
+}

Node-JS-Projects/Basic/Infinite-Scrolling/server/app.js

@@ -0,0 +1,54 @@
+const express=require('express');
+const dotenv=require('dotenv');
+const cors=require('cors');
+dotenv.config();
+const { Db ,connection}=require('./db');
+const https = require('https');
+
+const app=express();
+app.use(cors());    // you're telling your Express server to allow cross-origin requests from any origin
+app.use(express.json());
+
+const postsService =require('./postService');
+
+
+app.get('/list', function(request,response){
+    //this helps us to update the no from 1-10 to 11
+    //after 10 otherwise it get started fro 1-10 then again 1-10
+    const offset=request.query.offset;  //now pass offset to promise
+
+    // response.send('Hello World');
+    //will tell how many posts I want from the database
+    // response.json({
+    //     success:true
+    // });
+
+    //THE BELOW LINE RETURN -- Promise { <pending> } in console of vs
+    // console.log(postsService.getPosts());       //this is going to return a promise
+
+    const promise= postsService.getPosts(offset);
+    // data.then(posts => console.log(posts));       //get data and it's an array
+    //now in order to send this back as JSON format we need to 
+    //access the array so data.then changes to below one
+
+    promise.then(posts => response.json(posts));     //now this is showing us arr 1st obj in json if posts[0] now we will se 10 posts as LIMIT 10
+});
+
+app.get('/listCount', function(request,response){
+    //will tell how many posts are stored in the table
+    response.json({
+        success:true
+    });
+});
+
+app.listen(process.env.SERVER_PORT, ()=>{
+    console.log('Server Running')
+});
+
+// app.listen(process.env.PORT, ()=>{
+//     console.log(`Listening to the port ${process.env.PORT}`)
+//     connection.connect(function(err){
+//         if(err) throw err;
+//         console.log("Database is Connected")
+//     });
+// });

Node-JS-Projects/Basic/Infinite-Scrolling/server/db.js

@@ -0,0 +1,32 @@
+var mysql=require('mysql2');
+const dotenv=require('dotenv');
+dotenv.config();
+
+let instance=null;
+
+var connection=mysql.createConnection({
+    user: process.env.user,
+    password: process.env.password,
+    host: process.env.host,
+    port: process.env.DB_PORT,
+    database: process.env.database
+});
+
+// connection.connect(function(err){
+//     if(err){
+//         console.log(err);
+//         return;
+//     }
+//     console.log('Database Connected');
+// });
+
+class Db{
+    static getDbInstance(){
+        return instance ? instance : new Db();
+    }
+    getConnection(){
+        return connection;
+    }
+}
+
+module.exports={Db,connection};

Node-JS-Projects/Basic/Infinite-Scrolling/server/insertPosts.js

@@ -0,0 +1,44 @@
+const axios=require('axios');
+const express=require('express');
+const app=express();
+const { Db ,connection}=require('./db');
+const https = require('https');
+
+async function insertPostsIntoDb(){
+    const dbInstance =  Db.getDbInstance();
+    const connection =  dbInstance.getConnection();
+
+    const response= await axios.get("http://jsonplaceholder.typicode.com/posts");
+
+    const posts=response.data;
+    const postsLength=posts.length;
+
+    let query="INSERT INTO posts (title,body) VALUES ";
+    posts.forEach(function(post,index){
+        query += `("${post.title}","${post.body}")`;
+
+        if(index + 1 !== postsLength){
+            query += ",";
+        }
+    })
+    query += ";";
+    // console.log(query);
+    //with the help of below code I actually was able to push all my api data into the sql
+    connection.query(query, function(error,results){
+        if(error){
+            console.log(error);
+            return;
+        }
+        console.log(results);
+    });
+}
+
+insertPostsIntoDb();
+
+app.listen(process.env.PORT, ()=>{
+    console.log(`Listening to the port ${process.env.PORT}`)
+    connection.connect(function(err){
+        if(err) throw err;
+        console.log("Database is Connected")
+    });
+});

Node-JS-Projects/Basic/Infinite-Scrolling/server/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "server",
+  "version": "1.0.0",
+  "description": "",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Simran Saini",
+  "license": "ISC",
+  "dependencies": {
+    "axios": "^1.6.7",
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.1",
+    "express": "^4.18.2",
+    "mysql": "^2.18.1",
+    "mysql2": "^3.9.1"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.3"
+  }
+}