bislara · bislara · Oct 28, 2021 · Oct 22, 2021 · Oct 22, 2021 · Oct 22, 2021
diff --git a/JavaScript/Lorem Ipsum Generator/README.md b/JavaScript/Lorem Ipsum Generator/README.md
@@ -0,0 +1,9 @@
+# lorem-ipsum-generator
+Built using html,css and javascript ; generates random paragraphs and can be give a count to the number of paragraphs to be generated
+
+#here's a screenshot:
+
+[![Screenshot-Lorem-Ipsum.png](https://i.postimg.cc/zfC21Wgg/Screenshot-Lorem-Ipsum.png)](https://postimg.cc/d70j2hns)
+
+#Author
+![atom19-i](https://www.github.com/atom19-i)
diff --git a/JavaScript/Lorem Ipsum Generator/app.js b/JavaScript/Lorem Ipsum Generator/app.js
@@ -0,0 +1,57 @@
+// lorem text
+const text = [
+    `Leverage agile frameworks to provide a robust synopsis for high level
+     overviews. Iterative approaches to corporate strategy foster collaborative
+     thinking to further the overall value proposition. Organically grow the 
+     holistic world view of disruptive innovation via workplace diversity
+     and empowerment.`,
+    `Bring to the table win-win survival strategies to ensure proactive
+     domination. At the end of the day, going forward, a new normal that 
+     has evolved from generation X is on the runway heading towards a 
+     streamlined cloud solution. User generated content in real-time will 
+     have multiple touchpoints for offshoring.`,
+    `Capitalize on low hanging fruit to identify a ballpark value added 
+     activity to beta test. Override the digital divide with additional 
+     clickthroughs from DevOps. Nanotechnology immersion along the 
+     information highway will close the loop on focusing solely on the 
+     bottom line.`,
+    `Podcasting operational change management inside of workflows to 
+     establish a framework. Taking seamless key performance indicators
+     offline to maximise the long tail. Keeping your eye on the ball 
+     while performing a deep dive on the start-up mentality to derive 
+     convergence on cross-platform integration`,
+     `Proactively envisioned multimedia based expertise and cross-media 
+      growth strategies. Seamlessly visualize quality intellectual capital
+      without superior collaboration and idea-sharing. Holistically 
+      pontificate installed base portals after maintainable products`,
+     `Objectively innovate empowered manufactured products whereas parallel
+      platforms. Holisticly predominate extensible testing procedures for 
+      reliable supply chains. Dramatically engage top-line web services 
+      vis-a-vis cutting-edge deliverables`,
+      `Completely synergize resource taxing relationships via premier niche
+      markets. Professionally cultivate one-to-one customer service with 
+      robust ideas. Dynamically innovate resource-leveling customer service 
+      for state of the art customer service.`
+];
+
+const form = document.querySelector(".lorem-form");
+const amount = document.getElementById("amount");
+const result = document.querySelector(".lorem-text");
+
+form.addEventListener("submit", function (e){
+  e.preventDefault();
+  const value = parseInt(amount.value) ; 
+  const random = Math.floor(Math.random() * text.length);
+
+  if(isNaN(value) || value<= 0 || value>7){
+      result.innerHTML= `<p class="result">${text[random]}</p>` ;
+  } else {
+      let tempText = text.slice(0, value);
+      tempText = tempText
+        .map(function (paragraph) {
+          return `<p class="result">${paragraph}</p>`
+      }) 
+      .join("");
+      result.innerHTML = tempText;
+  }
+}) ;
diff --git a/JavaScript/Lorem Ipsum Generator/index.html b/JavaScript/Lorem Ipsum Generator/index.html
@@ -0,0 +1,29 @@
+<!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>Lorem Ipsum</title>
+
+   <!-- styles -->
+    <link rel="stylesheet" href="style.css" />
+    <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=Manrope:wght@300;400;600&display=swap" rel="stylesheet">  
+</head>
+<body>
+    <section class="section-center">
+        <h3>Tired of boring lorem ipsum?</h3>
+        <form class="lorem-form">
+            <label for="amount">Paragraphs: </label>
+            <input type="number" name="amount" id="amount" placeholder="5">
+            <button type="submit" class="btn btn-primary">generate</button>
+        </form>
+        <article class="lorem-text"></article>
+    </section>
+
+    <!-- javascript -->
+    <script src="app.js"></script>  
+</body>
+</html>
diff --git a/JavaScript/Lorem Ipsum Generator/style.css b/JavaScript/Lorem Ipsum Generator/style.css
@@ -0,0 +1,54 @@
+body{
+    background-color:#004643;
+    font-family: 'Manrope', sans-serif;;
+    color: #FAF4D3;
+    text-align: center;
+  }
+
+  h3{
+      padding: 10px;
+      font-size: 1.4em;
+  }
+
+  article{
+      font-family: 'Manrope', sans-serif;
+      text-align: justify;
+      padding: 5px 0 50px 30px;
+      width: 500px;
+      height: 400px;
+      top: 50%;
+      left: 48%;
+      position: absolute;
+      margin-top: -200px;
+      margin-left: -220px;
+  }
+
+  .lorem-form{
+      padding: 10px 30px 50px 50px;
+      font-size: 1em;
+  }
+
+  .btn {
+      color: #fff !important;
+      text-transform: uppercase;
+      text-decoration: none;
+      background: #D1AC00;
+      padding: 8px;
+      border-radius: 5px;
+      display: inline-block;
+      border: none;
+      transition: all 0.4s ease 0s;
+  }
+
+  .btn:hover {
+      background: #0C1618;
+      letter-spacing: 1px;
+      -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
+      -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
+      box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
+      transition: all 0.4s ease 0s;
+  }
+
+  .lorem-text{
+    text-align: justify ;
+  }
diff --git a/JavaScript/Mapable/README.md b/JavaScript/Mapable/README.md
@@ -0,0 +1,9 @@
+**Mapable**
+
+Mapable is map based application built using html, css and javascript along with mapbox API. One can find real time traffic details over the route. it can also find the best route between source point and destination point via cycling, walking or driving.
+
+Here's a screenshot of the application:
+
+![Screenshot](https://user-images.githubusercontent.com/54570007/138435338-8ba24b11-eca8-4ee2-8860-4952834706f3.png)
+
+[Author: ]: https://github.com/atom19-i
diff --git a/JavaScript/Mapable/index.html b/JavaScript/Mapable/index.html
@@ -0,0 +1,27 @@
+<!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">
+    <script src='https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js'></script>
+    <link href='https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css' rel='stylesheet' />
+    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.js"></script>
+    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.css" type="text/css"> 
+<title>Mapable</title>
+<style>
+  body{
+    margin:0 ;
+  }
+  #map{
+    height: 100vh ;
+    width: 100vw ;
+  }
+</style>
+<!-- defer -> so it loads after the body -->
+<script src="script.js" defer></script>
+</head>
+<body>
+    <div id='map'></div>
+</body>
+</html>
diff --git a/JavaScript/Mapable/script.js b/JavaScript/Mapable/script.js
@@ -0,0 +1,34 @@
+mapboxgl.accessToken = 
+ 'pk.eyJ1IjoiYXRvbWljZXJyb3JzIiwiYSI6ImNrdXd3ZGs2NjIxZHUydWxucnB6eXg2MDAifQ.deRMw8xzRpHMT_ScmjZpSw';
+
+navigator.geolocation.getCurrentPosition(successLocation, 
+    errorLocation, {
+        enableHighAccuracy: true
+})
+
+
+function successLocation(position){
+    // in mapbox, longitude is taken before latitude
+    setupMap([position.coords.longitude, position.coords.latitude]) 
+}
+
+function errorLocation(){
+    setupMap([-2.24, 53.48])
+}
+
+function setupMap(center){
+    const map = new mapboxgl.Map({
+        container: 'map',
+        style: 'mapbox://styles/mapbox/streets-v11',
+        center: center,
+        zoom: 15
+    })
+
+    map.addControl(new mapboxgl.NavigationControl());
+
+    var directions = new MapboxDirections({
+        accessToken: mapboxgl.accessToken
+    });
+
+    map.addControl(directions, 'top-left');
+}
diff --git a/JavaScript/lorem_ipsum_generator/README.md b/JavaScript/lorem_ipsum_generator/README.md
@@ -0,0 +1,9 @@
+# lorem-ipsum-generator
+Built using html,css and javascript ; generates random paragraphs and can be give a count to the number of paragraphs to be generated
+
+#here's a screenshot:
+
+[![Screenshot-Lorem-Ipsum.png](https://i.postimg.cc/zfC21Wgg/Screenshot-Lorem-Ipsum.png)](https://postimg.cc/d70j2hns)
+
+#Author
+![atom19-i](https://www.github.com/atom19-i)
diff --git a/JavaScript/lorem_ipsum_generator/app.js b/JavaScript/lorem_ipsum_generator/app.js
@@ -0,0 +1,57 @@
+// lorem text
+const text = [
+    `Leverage agile frameworks to provide a robust synopsis for high level
+     overviews. Iterative approaches to corporate strategy foster collaborative
+     thinking to further the overall value proposition. Organically grow the 
+     holistic world view of disruptive innovation via workplace diversity
+     and empowerment.`,
+    `Bring to the table win-win survival strategies to ensure proactive
+     domination. At the end of the day, going forward, a new normal that 
+     has evolved from generation X is on the runway heading towards a 
+     streamlined cloud solution. User generated content in real-time will 
+     have multiple touchpoints for offshoring.`,
+    `Capitalize on low hanging fruit to identify a ballpark value added 
+     activity to beta test. Override the digital divide with additional 
+     clickthroughs from DevOps. Nanotechnology immersion along the 
+     information highway will close the loop on focusing solely on the 
+     bottom line.`,
+    `Podcasting operational change management inside of workflows to 
+     establish a framework. Taking seamless key performance indicators
+     offline to maximise the long tail. Keeping your eye on the ball 
+     while performing a deep dive on the start-up mentality to derive 
+     convergence on cross-platform integration`,
+     `Proactively envisioned multimedia based expertise and cross-media 
+      growth strategies. Seamlessly visualize quality intellectual capital
+      without superior collaboration and idea-sharing. Holistically 
+      pontificate installed base portals after maintainable products`,
+     `Objectively innovate empowered manufactured products whereas parallel
+      platforms. Holisticly predominate extensible testing procedures for 
+      reliable supply chains. Dramatically engage top-line web services 
+      vis-a-vis cutting-edge deliverables`,
+      `Completely synergize resource taxing relationships via premier niche
+      markets. Professionally cultivate one-to-one customer service with 
+      robust ideas. Dynamically innovate resource-leveling customer service 
+      for state of the art customer service.`
+];
+
+const form = document.querySelector(".lorem-form");
+const amount = document.getElementById("amount");
+const result = document.querySelector(".lorem-text");
+
+form.addEventListener("submit", function (e){
+  e.preventDefault();
+  const value = parseInt(amount.value) ; 
+  const random = Math.floor(Math.random() * text.length);
+
+  if(isNaN(value) || value<= 0 || value>7){
+      result.innerHTML= `<p class="result">${text[random]}</p>` ;
+  } else {
+      let tempText = text.slice(0, value);
+      tempText = tempText
+        .map(function (paragraph) {
+          return `<p class="result">${paragraph}</p>`
+      }) 
+      .join("");
+      result.innerHTML = tempText;
+  }
+}) ;
diff --git a/JavaScript/lorem_ipsum_generator/index.html b/JavaScript/lorem_ipsum_generator/index.html
@@ -0,0 +1,29 @@
+<!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>Lorem Ipsum</title>
+
+   <!-- styles -->
+    <link rel="stylesheet" href="style.css" />
+    <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=Manrope:wght@300;400;600&display=swap" rel="stylesheet">  
+</head>
+<body>
+    <section class="section-center">
+        <h3>Tired of boring lorem ipsum?</h3>
+        <form class="lorem-form">
+            <label for="amount">Paragraphs: </label>
+            <input type="number" name="amount" id="amount" placeholder="5">
+            <button type="submit" class="btn btn-primary">generate</button>
+        </form>
+        <article class="lorem-text"></article>
+    </section>
+
+    <!-- javascript -->
+    <script src="app.js"></script>  
+</body>
+</html>
diff --git a/JavaScript/lorem_ipsum_generator/style.css b/JavaScript/lorem_ipsum_generator/style.css
@@ -0,0 +1,54 @@
+body{
+    background-color:#004643;
+    font-family: 'Manrope', sans-serif;;
+    color: #FAF4D3;
+    text-align: center;
+  }
+
+  h3{
+      padding: 10px;
+      font-size: 1.4em;
+  }
+
+  article{
+      font-family: 'Manrope', sans-serif;
+      text-align: justify;
+      padding: 5px 0 50px 30px;
+      width: 500px;
+      height: 400px;
+      top: 50%;
+      left: 48%;
+      position: absolute;
+      margin-top: -200px;
+      margin-left: -220px;
+  }
+
+  .lorem-form{
+      padding: 10px 30px 50px 50px;
+      font-size: 1em;
+  }
+
+  .btn {
+      color: #fff !important;
+      text-transform: uppercase;
+      text-decoration: none;
+      background: #D1AC00;
+      padding: 8px;
+      border-radius: 5px;
+      display: inline-block;
+      border: none;
+      transition: all 0.4s ease 0s;
+  }
+
+  .btn:hover {
+      background: #0C1618;
+      letter-spacing: 1px;
+      -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
+      -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
+      box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
+      transition: all 0.4s ease 0s;
+  }
+
+  .lorem-text{
+    text-align: justify ;
+  }