Merge branch 'password-generator' of github.com:7JKaushal/Awesome-Jav…

…aScript-Projects into password-generator

assets/css/page_scroll_indicator.css

@@ -0,0 +1,52 @@
+        p{
+            font-size:1.5rem;
+            font-family: 'Nunito Sans', sans-serif;
+        }
+        h2{
+            font-size:3rem;
+            color:#DD1155;
+            font-family: 'Poppins', sans-serif;
+            text-align: center;
+        }
+        h3{
+            font-size:2.5rem;
+            color:#DD1155;
+            font-family: 'Poppins', sans-serif;
+            text-align: center;
+        }
+        body{
+            background-color:#38023B;
+            color:#A288E3;
+        }
+        .container{
+            margin:15%;
+        }
+        .header {
+            position: fixed;
+            top: 0;
+            left:0;
+            height:25%;
+            z-index: 1;
+            width: 100%;
+            background-color: #DD1155;
+        }
+
+        .header h1 {
+            text-align: center;
+            color:white;
+            font-family: 'Poppins', sans-serif;
+            font-size: 3.5rem;
+        }
+
+        .progress-container {
+            width: 100%;
+            height: 15px;
+            background: white;
+            margin-top:2%;
+        }
+
+        .progress-bar {
+            height: 15px;
+            background: #5BC8AF;
+            width: 0%;
+        }

assets/css/scatter_chart.css

@@ -0,0 +1,22 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");
+
+body {
+  font-family: "Poppins", sans-serif;
+  text-align: center;
+}
+
+#data-table {
+  margin: 0 auto;
+}
+
+#data-table td,
+#data-table th {
+  padding: 0.5rem 1rem;
+  width: 20%;
+}
+
+.footer {
+  position: fixed;
+  bottom: 0;
+  right: 10px;
+}

assets/js/page_scroll_indicator.js

@@ -0,0 +1,7 @@
+      window.onscroll = function() {myFunction()};
+        function myFunction() {
+          var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+          var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+          var scrolled = (winScroll / height) * 100;
+          document.getElementById("myBar").style.width = scrolled + "%";
+        }

assets/js/scatter_chart.js

@@ -0,0 +1,59 @@
+const form = document.getElementById("input-form");
+const x = document.getElementById("x");
+const y = document.getElementById("y");
+const table = document.getElementById("data-table");
+const btn = document.getElementById("plot-btn");
+
+var ctx = document.getElementById("myChart").getContext("2d");
+const data = {
+  datasets: [
+    {
+      label: "Scatter Dataset",
+      data: [
+        // {  //example
+        //   x: -10,
+        //   y: 0,
+        // },
+      ],
+      // backgroundColor: "rgb(255, 99, 132)",
+    },
+  ],
+};
+
+var myChart = new Chart(ctx, {
+  type: "scatter",
+  data: data,
+  options: {
+    scales: {
+      x: {
+        type: "linear",
+        position: "bottom",
+      },
+    },
+    responsive: true,
+  },
+});
+
+form.addEventListener("submit", (e) => {
+  e.preventDefault();
+  const row = document.createElement("tr");
+  let color = getRandomColor();
+  data.datasets[0].data.push({ x: x.value, y: y.value });
+  data.datasets[0].backgroundColor = color;
+  row.innerHTML = `<td>${data.datasets[0].data.length}</td><td>${x.value}</td><td>${y.value}</td>`;
+  table.appendChild(row);
+  form.reset();
+  btn.style.backgroundColor = color;
+  myChart.update();
+});
+
+// Returns random color
+function getRandomColor() {
+  let hexDigits = "0123456789ABCDEF";
+  let hexCodeColor = "#";
+
+  for (let i = 0; i < 6; i++) {
+    hexCodeColor += hexDigits[Math.floor(Math.random() * 16)];
+  }
+  return hexCodeColor;
+}

public/Restaurant.html

@@ -46,7 +46,7 @@
                     <h1>Krishna Restaurant</h1>
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                         labore et dolore magna aliqua.</p>
-                    <a href="our-menu" class="btn btn-default">Our Menu</a>
+                    <a href= "#our-menu"  class="btn btn-default">Our Menu</a>
                 </div>
             </div>
         </div>
@@ -399,4 +399,4 @@ <h3>contact us</h3>
     <script src="../assets/js/Restaurant.js"></script>
 </body>
 
-</html>
+</html>

public/linechart.html → public/barchart.html

@@ -19,7 +19,7 @@
     <section class="mt-4">
       <div class="container">
         <div class="text-center">
-          <h2>Line Chart in Vanilla JavaScript</h2>
+          <h2>Bar Chart in Vanilla JavaScript</h2>
         </div>
         <div class="row justify-content-center mt-4">
           <div class="col-md-8 text-center">
@@ -158,7 +158,7 @@ <h5 class="modal-title" id="modal-title">Enter your information</h5>
         }
 
         const barChart = new Chart(chart, {
-          type: "line",
+          type: "bar",
           data: {
             labels: labels,
             datasets: [
@@ -167,7 +167,8 @@ <h5 class="modal-title" id="modal-title">Enter your information</h5>
                 data: values,
                 borderWidth: 2,
                 borderColor: "green",
-                tension: 0.1,
+                hoverBorderWidth: 4,
+                hoverBorderColor: "#000",
               },
             ],
           },

public/page_scroll_indicator.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Page Scroll Indicator</title>
+    <link rel='stylesheet' type='text/css' media='screen' href='../assets/css/page_scroll_indicator.css'>
+   <script src='../assets/js/page_scroll_indicator.js'></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="header">
+        <h1>Page Scroll Indicator</h1>
+        <div class="progress-container">
+          <div class="progress-bar" id="myBar"></div>
+        </div>  
+    </div>
+    <div class="container">
+        <h2>Hey There!</h2>
+        <h3>Scroll Down to see this effect :)</h3>
+        <p>When you scroll down you can see the progress bar moving towards right</p>
+
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
+
+    </div>        
+</body>
+</html>

public/scatter_chart.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <!-- chart.js cdn -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.4.1/dist/chart.min.js"></script>
+    <link rel="stylesheet" href="../assets/css/scatter_chart.css" />
+    <style>
+      canvas#myChart {
+        margin: 3% 10%;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>My Scatter Chart App</h1>
+    <canvas id="myChart" width="400" height="125"></canvas>
+
+    <form id="input-form" on>
+      Enter x:
+      <input type="number" name="x" id="x" required autofocus />
+      Enter y:
+      <input type="number" name="y" id="y" required />
+      <button id="plot-btn" type="submit">Plot</button>
+    </form>
+    <table id="data-table">
+      <tr>
+        <th>Sr. no.</th>
+        <th>x</th>
+        <th>y</th>
+      </tr>
+    </table>
+
+    <div class="footer">
+      <p>Made with ❤️ by Diksha Nigam</p>
+    </div>
+
+    <script src="../assets/js/scatter_chart.js"></script>
+  </body>
+</html>

script.js

@@ -2015,6 +2015,11 @@ let projectData = [
     projectImage: "assets/images/Weather-App.png",
     projectUrl: "public/Weather-App.html",
   },
+  {
+    projectName: "Page Scroll Indicator",
+    projectImage: "assets/images/page_scroll_indicator.png",
+    projectUrl: "public/page_scroll_indicator.html",
+  },
   {
     projectName: "Movie Search App",
     projectImage: "assets/images/Movie-Search-App.png",
@@ -2049,7 +2054,7 @@ let projectData = [
     projectName: "Random Password Generator",
     projectImage: "assets/images/password-generator.jpg",
     projectUrl: "public/password.html",
-  },
+  }
 ];
 
 var projectDetails = projectData.slice(0);