diff --git a/JavaScript/README.md b/JavaScript/README.md index 19eb000e..b0d6dd20 100644 --- a/JavaScript/README.md +++ b/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 | diff --git a/JavaScript/lorem_ipsum_generator/README.md b/JavaScript/lorem_ipsum_generator/README.md new file mode 100644 index 00000000..c407b3cc --- /dev/null +++ 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) \ No newline at end of file diff --git a/JavaScript/lorem_ipsum_generator/app.js b/JavaScript/lorem_ipsum_generator/app.js new file mode 100644 index 00000000..4ce3e65f --- /dev/null +++ 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= `

${text[random]}

` ; + } else { + let tempText = text.slice(0, value); + tempText = tempText + .map(function (paragraph) { + return `

${paragraph}

` + }) + .join(""); + result.innerHTML = tempText; + } +}) ; \ No newline at end of file diff --git a/JavaScript/lorem_ipsum_generator/index.html b/JavaScript/lorem_ipsum_generator/index.html new file mode 100644 index 00000000..e1a87703 --- /dev/null +++ b/JavaScript/lorem_ipsum_generator/index.html @@ -0,0 +1,29 @@ + + + + + + + Lorem Ipsum + + + + + + + + +
+

Tired of boring lorem ipsum?

+
+ + + +
+
+
+ + + + + \ No newline at end of file diff --git a/JavaScript/lorem_ipsum_generator/style.css b/JavaScript/lorem_ipsum_generator/style.css new file mode 100644 index 00000000..8e77ca96 --- /dev/null +++ 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 ; + } \ No newline at end of file