clean up and call API

BrickMMO · Jul 18, 2024 · 9abb28b · 9abb28b
1 parent 0d5e3ab
commit 9abb28b
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 96 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -6,88 +6,54 @@ body {
 img {
     width: 100%;
 }
-h1 {
-    text-align: center;
+h1 {    
     color: #333;
-    font-size: 28px;
 }
 #header {
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
     border-bottom: 1px solid #ddd;
+    justify-content: center;
+    align-items: center;
 }
 #icon {
     width: 50px;
-    height: 50px;
-    margin-top: 10px;
+    height: auto;
 }
 #main {
     margin: 50px;
 }
-.row {
-    margin-bottom: 15px;
-}
-
 label {
-    margin-bottom: 10px;
     color: #555;
-    font-size: 16px;
 }
 .btn {
-    margin-top: 40px;
-    margin-bottom: 50px;
+    margin: 40px 0;
 }
-input[type='number'] {
+input, select {
     padding: 8px;
-    width: 60px;
-    font-size: 16px;
-}
-#nav ul {
-    text-decoration: none;
-    list-style-type: none;
-    display: flex;
-    justify-content: space-between;
-    padding: 0px 20px;
-}
-#nav li a{
-    margin-left: 20px;
-    font-size: 20px;
-    color: #eb741d;
-    text-decoration: none;
-}
-#nav li a:hover {
-    color: #333;
-}
-input[type='text'] {
-    padding: 8px;
-    width: 430px;
     font-size: 16px;
+    margin-right: 1em;
 }
 button {
     padding: 10px 20px;
     font-size: 16px;
     cursor: pointer;
-    background-color: #eb741d;
+    background-color: #EF5D23;
     color: white;
     border: none;
     border-radius: 4px;
 }
 
 button:hover {
     background-color: #fff;
-    color: #eb741d;
-    border: 1px solid #eb741d;
+    color: #EF5D23;
+    box-shadow:0px 0px 0px 1px #EF5D23 inset;
 }
 
 #output {
-    margin-top: 20px;
     padding: 16px;
     border: 1px solid #ccc;
     background-color: #f9f9f9;
     border-radius: 4px;
-    line-height: 1.6;
-    font-size: 16px;
     color: #333;
 }
 .copyright {

diff --git a/index.html b/index.html
@@ -3,11 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.min.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="./css/styles.css">
     <script src="./js/script.js"></script>
+    <script src="./js/jquery-3.7.1.min.js"></script>
     <title>BrickSum</title>
 </head>
 <body>
@@ -16,27 +15,28 @@
             <img src="./images/Bricksum_Icon.png" alt="Bricksum-icon">
         </div>
         <h1>BrickSum</h1>
-        <nav id="nav">
-            <ul>
-                <li><a href="index.html">Home</a></li>
-                <li><a href="about.html">About</a></li>
-            </ul>
-        </nav>
     </header>
     <main id="main">
+        <p>BrickSum is a unique tool designed for LEGO enthusiasts, content creators, and developers. This tool allows you to create different texts from the chosen option with the given size in the <strong>Number</strong> input.</p>
+
+        <h3>Features</h3>
+        <ol>
+            <li>Generate custom Lorem Ipsum text using LEGO-themed words</li>
+            <li>Specify the number of Words, Sentences, or Paragraphs</li>
+            <li>Easily copy the generated text to your clipboard</li>
+        </ol>
+
         <form name="myform">
-            <div class="row">
-                <label for="usertxt">Input Words:</label>
-                <input type="text" id="usertxt" name="usertxt" />
-            </div> 
-            <div class="row">
-                <label for="numpara">Number of paragraphs:</label>
-                <input type="number" id="numpara" name="numpara" min="1" max="20" value="1" />
-            </div>
-            <div class="row">
-                <label for="numwords">Number of words per paragraph:</label>
-                <input type="number" id="numwords" name="numwords" min="1" max="100" value="10" />
-            </div>
+            <span>
+                <label for="num">Number:</label>
+                <br>
+                <input type="number" id="num" name="form_num" min="1" value="5" />
+            </span>
+            <select name="form_option" id="dropdown">
+                <option value="words">Words</option>
+                <option value="sentences">Sentences</option>
+                <option value="paragraphs">Paragraphs</option>
+            </select>
             <div class="btn">
                 <button type="submit" id="generate-btn">Generate Text <i class="fa fa-plus"></i></button>
                 <button type="button" id="copy-btn">Copy <i class="fa fa-regular fa-copy"></i></button>

diff --git a/js/script.js b/js/script.js
@@ -1,49 +1,45 @@
 window.onload = function() {
-    var formHandle = document.forms.myform;
-    formHandle.onsubmit = processForm;
 
-    var inputElement = document.getElementById('usertxt');
-    var outputDiv = document.getElementById('output');
-    var copyBtn = document.getElementById('copy-btn');
+    let outputDiv = document.getElementById('output');
+    let copyBtn = document.getElementById('copy-btn');
+
+    let formHandle = document.forms.myform;
+    let slctOption = formHandle.form_option;
 
-    // Initialize Tagify on the input element
-    var tagify = new Tagify(inputElement);
+    formHandle.onsubmit = processForm;
 
     function processForm(event) {
-        event.preventDefault(); // Prevent form submission
+        event.preventDefault();
 
-        var inputWords = tagify.value.map(item => item.value); // Get tags as an array of strings
-        var numPara = parseInt(formHandle.numpara.value, 10);
-        var numWords = parseInt(formHandle.numwords.value, 10);
+        let num_search = formHandle.form_num;
+
+        brickMMOLorem(num_search)
 
-        var loremIpsumText = generateLoremText(numPara, numWords, inputWords);
-        outputDiv.innerHTML = loremIpsumText;
     }
 
-    function generateLoremText(numPara, numWords, userWordsArray) {
-        var loremText = '';
-        var words = ["roof", "chimney", "window", "door", "frame", "gate", "ramp", "slide", "ladder", "rail",
-            "handle", "hinge", "bracket", "connector", "clip", "hook", "ring", "hub", "gear", "wheel",
-            "tire", "axle", "shaft", "pin", "bushing", "cam", "pulley", "chain", "belt", "gearbox",
-            "knob", "lever", "switch", "turntable", "socket", "antenna", "mast", "flag", "flap", "wing"
-        ];
-        words = words.concat(userWordsArray);
-
-        for (var i = 0; i < numPara; i++) {
-            var paragraph = '';
-            for (var j = 0; j < numWords; j++) {
-                var randomWord = words[Math.floor(Math.random() * words.length)];
-                paragraph += randomWord + ' ';
+    function brickMMOLorem(num_search){
+
+        let url = `http://local.console.brickmmo.com:7777/api/bricksum/generate/${slctOption.value}/${num_search.value}`; 
+
+        $.ajax({
+            url: url,
+            type: "GET",
+            dataType: "json",
+            success: function(data) {
+                console.log("API response:", data);
+                let textOutput = '<p>'+ data.wordlist.replace(/\r/g, '</p><p>')+ '</p>';
+                outputDiv.innerHTML = textOutput;
+            },
+            error: function(jqXHR, textStatus, errorThrown) {
+                console.error("Error when calling API:", textStatus, errorThrown);
             }
-            loremText += '<p>' + paragraph.trim() + '</p>';
-        }
-        return loremText;
+        });
     }
 
     copyBtn.onclick = function() {
-        var range = document.createRange();
+        let range = document.createRange();
         range.selectNodeContents(outputDiv);
-        var selection = window.getSelection();
+        let selection = window.getSelection();
         selection.removeAllRanges();
         selection.addRange(range);