louisrli · paywand007 · Aug 23, 2022 · Aug 23, 2022 · Aug 23, 2022
diff --git a/do-not-touch.js b/do-not-touch.js
@@ -1,9 +1,8 @@
 /**
  * DO NOT TOUCH ANY OF THE CODE BELOW HERE.
- * 
+ *
  * Or you will be very sad.
  */
 const getRawStory = () => {
-  return fetch('./story.txt')
-    .then(response => response.text());
-};
+    return fetch('./story.txt').then((response) => response.text())
+}
diff --git a/index.html b/index.html
@@ -1,17 +1,40 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width">
-    <title>repl.it</title>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Sherlock Holmes Mad libs</title>
+    <link rel="icon" type="image/png" href="https://www.pngall.com/wp-content/uploads/4/Sherlock-Holmes-Silhouette-Transparent-File.png" />
     <link href="style.css" rel="stylesheet" type="text/css" />
-  </head>
-  <body>
-    <div class='madLibsEdit'>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
+</head>
+
+<body style="background-color: #b9ccd3">
+    <div class="container">
+        <h1 class="display-3 text-center break-word">
+            ... is Stranger than Fiction
+        </h1>
+
+        <div class="row">
+            <div class="col-10 mx-auto madLibsEdit shadow mb-4 border border-info rounded p-3"></div>
+            <div class="col-10 text-center alert alert-danger d-none m-0" id="alarm"></div>
+        </div>
+        <!-- End of row div-->
+
+        <div class="row">
+            <div class="col-10 mx-auto madLibsPreview bg-success mt-4 border border-info rounded shadow p-3"></div>
+        </div>
+
+        <!-- JS, Popper.js, and jQuery -->
+        <script src="do-not-touch.js"></script>
+        <script src="madlibs.js"></script>
+
+        <div class="row">
+            <footer class="col-7 ml-auto mr-auto pt-5 mt-4 mb-4 border border-info shadow text-center"></footer>
+        </div>
     </div>
-    <div class='madLibsPreview'>
-    </div>
-    <script src="do-not-touch.js"></script>
-    <script src="madlibs.js"></script>
-  </body>
+    <!-- End of container div-->
+</body>
+
 </html>
diff --git a/madlibs.js b/madlibs.js
@@ -26,24 +26,104 @@
  * There are multiple ways to do this, but you may want to use regular expressions.
  * Please go through this lesson: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/regular-expressions/
  */
+//converts the story into a string
 function parseStory(rawStory) {
-  // Your code here.
-  return {}; // This line is currently wrong :)
+    let noun = /\[n\]/
+    let verb = /\[v\]/
+    let adj = /\[a\]/
+    let dot = /[.]/g
+    let comma = /[,] /g
+
+    const storyArray = []
+        //splits string into a bunch of words
+    let splitArray = rawStory.split(' ')
+        //goes through each split string and creates object output-i.e {word:, pos}
+    splitArray.forEach((str) => {
+        if (noun.test(str)) {
+            //creates new object
+            const obj = {}
+            obj['word'] = str.slice(0, str.length - 3) //-3 to delete []
+            obj['pos'] = 'noun'
+            storyArray.push(obj)
+        } else if (verb.test(str)) {
+            const obj = {}
+            obj['word'] = str.slice(0, str.length - 3)
+            obj['pos'] = 'verb'
+            storyArray.push(obj)
+        } else if (adj.test(str)) {
+            const obj = {}
+            obj['word'] = str.slice(0, str.length - 3)
+            obj['pos'] = 'adj'
+            storyArray.push(obj)
+        } else if (dot.test(str)) {
+            const obj = {}
+            obj['word'] = str
+            storyArray.push(obj)
+        } else if (comma.test(str)) {
+            const obj = {}
+            obj['word'] = str
+            storyArray.push(obj)
+        } else {
+            const obj = {}
+            obj['word'] = str
+            storyArray.push(obj)
+        }
+    })
+
+    console.log(storyArray)
+    return storyArray // This line is currently wrong :)
+}
+
+//adding text to edit
+
+function madLibsEdit(story) {
+    let edit = document.querySelector('.madLibsEdit')
+    let p = document.createElement('p')
+    edit.appendChild(p)
+    story.forEach((excerpt) => {
+        if ('pos' in excerpt) {
+            // adding input spaces if pos is detected
+            let input = document.createElement('input')
+            let pos = excerpt.pos
+            input.setAttribute('maxlength', '20')
+            input.setAttribute('class', 'form-control d-inline-flex col-lg-2 mt-1')
+            input.setAttribute('id', 'inputId')
+            input.setAttribute('placeholder', `${pos}`)
+            p.appendChild(input)
+        } else {
+            //turning array indexes into text
+            const words = excerpt.word
+            let text = JSON.stringify(words)
+                // let result=text.join (' ')
+            let result = text.replace(/['"]+/g, '')
+            p.innerHTML += result + ' '
+        }
+    })
+}
+
+function madLibsPreview(story) {
+    let madLibsPreview = document.querySelector('.madLibsPreview')
+    for (let i = 0; i < story.length; i++) {
+        if (story[i].pos) {
+            madLibsPreview.innerHTML =
+                madLibsPreview.innerHTML +
+                ' ' +
+                '<span   id="ouctput' +
+                i +
+                ' ' +
+                story[i].pos +
+                ')>' +
+                '</span>';
+            (' ')
+        } else {
+            madLibsPreview.innerHTML = madLibsPreview.innerHTML + ' ' + story[i].word
+        }
+    }
 }
 
-/**
- * All your other JavaScript code goes here, inside the function. Don't worry about
- * the `then` and `async` syntax for now.
- *
- * NOTE: You should not be writing any code in the global namespace EXCEPT
- * declaring functions. All code should either:
- * 1. Be in a function.
- * 2. Be in .then() below.
- *
- * You'll want to use the results of parseStory() to display the story on the page.
- */
 getRawStory()
-  .then(parseStory)
-  .then((processedStory) => {
-    console.log(processedStory);
-  });
+    .then(parseStory)
+    .then((processedStory) => {
+        madLibsEdit(processedStory)
+        madLibsPreview(processedStory)
+    })
diff --git a/story.txt b/story.txt
@@ -1,3 +1 @@
-Louis[n] went[v] to the store[n], and it was fun[a]. He taught[v] the class[n].
-The abbreviation[n] "n" means[v] noun. We use[v] the letter[n] "v" for verbs.
-And for "a", you can[v] make a good[a] guess.
+Life[n] is infinitely stranger than anything which the mind of man could invent[v] . We would not dare[v] to conceive the things which are really mere commonplaces of existence[n] . If we could fly out of that window[n] hand in hand , hover[v] over this great city[n] , gently[a] remove the roofs[n] , and and peep in at the queer[a] things which are going on , the strange coincidences[n] , the plannings, the cross-purposes , the wonderful[a] chains of events , working[v] through generations , and leading to the most outre results, it would make all fiction[n] with its conventionalities and foreseen conclusions[n] most stale and unprofitable.
diff --git a/style.css b/style.css
@@ -1,3 +1,18 @@
-/**
- * Your CSS goes here.
- */
+.madLibsEdit {
+    background-color: #eee;
+}
+
+.display-3 {
+    text-shadow: 5px 5px 10px #ccc;
+    color: whitesmoke;
+}
+
+body {
+    background-image: url('https://c4.wallpaperflare.com/wallpaper/761/42/416/sherlock-holmes-sherlock-hd-wallpaper-preview.jpg');
+    background-repeat: no-repeat;
+}
+
+footer {
+    color: #000 !important;
+    background-color: #eee;
+}