first uploaded

luhur65 · Jan 16, 2021 · 20471d8 · 20471d8
commit 20471d8
Show file tree

Hide file tree

Showing 5 changed files with 176 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,38 @@
+# Random Word 
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/bb0b322c-cd3d-4c54-8a41-792d559d8f1a/deploy-status)](https://app.netlify.com/sites/random-text/deploys)
+
+Demo 
+[Lihat Demo](https://random-text.netlify.app)
+
+<p>Random Word is a package to create random word animation and generate randomized words based on word data provided by the user.</p>
+
+## How to use
+
+```JavaScript 
+// Config for Random Word
+RandomWord({
+ dataText: [], // Words to be shuffled as animation 
+ htmlElem: '', // The placeholder html tag for text
+ interval: 150, // by default time inteval set to 150
+ timeout: 8000, // by default timeout set to 8000 ( 8 seconds)
+});
+```
+
+here a example to use random word :
+
+```JavaScript 
+
+// call the random word
+
+import RandomWord from "./script/src/main.js";
+
+RandomWord({
+ dataText: ['hai', 'hello'],
+ htmlElem: 'h1',
+});
+
+```
+
+<p> If you want to change or add features of this package please make a pull req on Github so I'll be happy to check your code </p>.
+<p> All of my contact person is on my github account , don't forget to check it</p>
diff --git a/index.html b/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+ <head>
+ <!-- Required meta tags -->
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <!-- Bootstrap CSS -->
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+ integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+
+ <title>Random Game</title>
+
+ <link rel="preconnect" href="https://fonts.gstatic.com">
+ <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
+ <style>
+ body {
+ font-family: 'Nunito', sans-serif;
+ }
+ </style>
+
+ </head>
+
+ <body>
+
+ <main class="container">
+
+ <div class="row my-5">
+ <div class="col-md-12">
+ <div class="card mb-2 border-info border-2">
+ <div class="card-body text-center">
+ <h1 class="display-3">Hello World</h1>
+ </div>
+ </div>
+ <div class="d-grid gap-2">
+ <button type="button" class="play btn-sm btn btn-info" onclick="play()">Play Random</button>
+ <div class="show-alert"></div>
+ </div>
+ </div>
+ </div>
+
+ </main>
+
+ <!-- Bootstrap Bundle with Popper -->
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+ integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous">
+ </script>
+
+ <!-- Main JavaScript -->
+ <script src="index.js"></script>
+
+ </body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,39 @@
+const textH1 = document.querySelector('h1');
+const playButton = document.querySelector('.play');
+const dataText = ['Zonk', 'Apple', 'Banana', 'Papaya', 'Watermelon', 'Zonk', 'Coconuts', 'Pineapple', 'Orange', 'Strawberry', 'Grapes', 'Zonk'];
+
+// ... generate random num by length data
+const getRandomNum = limit => Math.floor(Math.random() * limit);
+
+// ... take text by random num
+const getTextbyRandom = text => text[getRandomNum(text.length)];
+
+// ... show Up alert
+const myCustomAlert = (title, text, type) => `<div class="alert alert-${type} alert-dismissible fade show" role="alert"> <strong>${title}!</strong> ${text} <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>`;
+
+// ... set alert into html
+const getMyCustomAlert = (text, place) => (text == 'Zonk') ? place.innerHTML = myCustomAlert('Sorry', 'Maybe Next time you will get fruit', 'danger') : place.innerHTML = myCustomAlert('Yummy', 'You got ' + text, 'success');
+
+// ... play
+const play = _ => {
+
+ // ... alert bootstrap
+ const showUpAlert = document.querySelector('.show-alert');
+ showUpAlert.innerHTML = "";
+
+ // ... disabled the button when clicked
+ playButton.disabled = true;
+
+ // ... make interval to animation the text 
+ const i = setInterval(function () {
+ textH1.innerHTML = getTextbyRandom(dataText);
+ }, 150);
+
+ // ... stop the interval and activated button
+ setTimeout(function () {
+ clearInterval(i);
+ playButton.disabled = false;
+ getMyCustomAlert(textH1.innerHTML, showUpAlert);
+ }, 8000);
+
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,15 @@
+{
+ "name": "randomwordanimation",
+ "version": "1.0.0",
+ "description": "Random Word is a package to create random word animation and generate randomized words based on word data provided by the user.",
+ "main": "script/src/main.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "keywords": [
+ "randomword",
+ "generate-random-word"
+ ],
+ "author": "@luhur65",
+ "license": "ISC"
+}
diff --git a/script/src/main.js b/script/src/main.js
@@ -0,0 +1,29 @@
+const RandomWord = (config = {
+ dataText: [],
+ htmlElem: '',
+ interval: 150,
+ timeout : 8000
+}) => {
+
+ // get element text
+ const getTextElementHTML = elem => document.querySelector(elem);
+
+ // get random number
+ const getRandomInt = limit => Math.floor(Math.random() * limit);
+
+ // ... take text by random num
+ const getTextbyRandom = AllText => AllText[getRandomInt(AllText.length)];
+
+ // set interval to make animation
+ const i = setInterval(function () {
+ getTextElementHTML(config.htmlElem).innerHTML = getTextbyRandom(config.dataText);
+ }, 150);
+
+ // ... stop the interval 
+ setTimeout(function () {
+ clearInterval(i);
+ }, 8000);
+
+}
+
+export default RandomWord;