Merge pull request #333 from atom19-i/lorem-ipsum-generator

JavaScript/README.md

@@ -5,3 +5,5 @@
 | 3    	| [Drum Kit](/JavaScript/Drum_Kit) 	| Play different sounds using JS 	| Kavya K 	|
 | 4   	| [rock-paper-scissor](/JavaScript/rock-paper-scissor) 	| Rock paper Scissor game using react.js	| SarveshLimaye 	|
 | 5     | [covid19-stats](/Javascript/covid19-stats)            | Covid 19 Recent Statistic Data Web App         | KinKusuma |
+| 6     | [lorem-ipsum-generator](/Javascript/lorem-ipsum-generator)      | generates lorem ipsum using JS        | atom19-i |
+| 7     | [mapable](/Javascript/mapable)       | finds best route between two points on map using Mapbox API and JS     | atom19-i |

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)

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;
+  }
+}) ;

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>

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 ;
+  }