ziada-derya-mad-libz

madLibz/ziada-derya/README.md

@@ -0,0 +1,59 @@
+# Re:Coded Mad Libz
+
+## What is Mad Libs? 
+See [wikipedia](https://en.wikipedia.org/wiki/Mad_Libs). Yes, I know this section is short, do not skip this, **please read what Mad Libs is or the rest of this will make no sense**. In normal mad libs, you usually just insert the word, but in this version, it's more like a "fill in the blank" of an existing story.
+
+## Instructions
+
+### Collaboration requirements
+Please don't split the code. Write every line of code together. In each group, every person should understand every line of code. See [pair programming](Pair_programming).
+
+### Write a story
+
+In `story.txt`, you'll find a brief story **that you need to replace with your own**. By the way, for the purposes of [parsing](https://en.wikipedia.org/wiki/Parsing), you're only allowed to use periods and commas as grammar.
+
+Confusingly, you should write out the full story, although the "blanks" will be anywhere a grammar part is denoted. The reason for this will be apparent later in some of the extra challenges.
+
+For example:
+* `Louis[n]`: normally it says Louis, but the user should replace it with a *noun*
+* `went[v]`: normally it says went, but the user should replace it with a *verb*
+* `[a]` for adjective...
+
+Note that when you write a story, the period and commas should go after the part of speech, e.g., `Louis[n].` (NOT `Louis.[n]`).
+
+### Code
+
+In this project, you will be using HTML, CSS, and JS in unison in order to create a variant of a Mad Libs game with the story of your choice. 
+
+Below, we discuss the requirements. We use the word "input" to refer to the blanks in the Mad Libs story.
+
+Here is a very, very simple visual example of what it might look like; however, all styling is at your liberty in this project.
+
+### Barebones Example
+![Example](https://i.imgur.com/ZRNvFC7.png)
+
+#### Functional requirements
+
+0. **Parsing the story:** I've already written some code for you that reads in the file `story.txt` into a string. However, you need to process it into a format that will allow you to keep track of "blanks." See `madlibs.js` for further instructions. You will likely want to [read about regular expressions](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/regular-expressions/) (yes, this is extra expected reading :) ). It's possible, but annoying, to do this without regular expressions.
+
+1. **Showing the story:** It should show **two copies** of the story. In one copy ("edit view"),
+all words in the story with blanks (e.g., `Louis[n]`, `went[v]`, ...) are replaced with inputs. This should be in `div.madLibsEdit`. In the second copy ("preview"), it should show the same story, but formatted prettily (without the blanks!). Refer to the example picture above.
+
+2. **Hotkeys:** When the user presses `Enter` in an input, it should move the cursor to the next input in the story.
+
+3. **Constraining user inputs:** An input should be allowed to have a maximum of 20 characters.
+
+4. **Live update:** Whenever the user updates a blank in the edit view, it should update the preview any time a new character is typed (hint: this is handling an event of sorts). The user should **not** have to click a button in order to update the preview.
+
+5. **Story length:** Your story should have at least 10 blanks.
+
+#### Styling requirements
+
+0. **Responsiveness**: When the screen is small, the story should take the full width of the screen. When the screen is larger, as on a computer. Values "small" and "large" are up to you to decide.
+
+1. **Flexbox**: Use at least one flexbox.
+
+2. **Highlighting currently focused input**: There should be three possible styles of inputs (style is a vague word here, they just need to be distinguishable to the user):
+* currently highlighted input (if the user is typing in one)
+* filled out input (the user has already put a word there -- might require JS here ;) )
+* empty input (the user has not already put a word there).

madLibz/ziada-derya/do-not-touch.js

@@ -0,0 +1,9 @@
+/**
+ * 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());
+};

madLibz/ziada-derya/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>repl.it</title>
+    <link href="style.css" rel="stylesheet" type="text/css" />
+  </head>
+
+<body>
+   <header>
+     <h1 class="previewPos">My zoo adventure</h1> 
+   </header>
+      <div class="texts">
+          <div class='madLibsEdit'></div>
+          <div class='madLibsPreview'></div>
+        </div>
+      </div>
+
+      <footer>
+      <h5>MadLibs</h5>
+      </footer>
+
+      <script src="do-not-touch.js"></script>
+      <script src="madlibs.js"></script>
+  </body>
+
+</html>

madLibz/ziada-derya/madlibs.js

@@ -0,0 +1,178 @@
+/**
+ * Complete the implementation of parseStory.
+ * 
+ * parseStory retrieves the story as a single string from story.txt
+ * (I have written this part for you).
+ * 
+ * In your code, you are required (please read this carefully):
+ * - to return a list of objects
+ * - each object should definitely have a field, `word`
+ * - each object should maybe have a field, `pos` (part of speech)
+ * 
+ * So for example, the return value of this for the example story.txt
+ * will be an object that looks like so (note the comma! periods should
+ * be handled in the same way).
+ * 
+ * Input: "Louis[n] went[v] to the store[n], and it was fun[a]."
+ * Output: [
+ *  { word: "Louis", pos: "noun" },
+ *  { word: "went", pos: "verb", },
+ *  { word: "to", },
+ *  { word: "the", },
+ *  { word: "store", pos: "noun" }
+ *  { word: "," }
+ *  ....
+ * 
+ * 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/
+ */
+function parseStory(rawStory) {
+  // Your code here.
+  let splitArr = rawStory.split(" ");
+  console.log(splitArr)
+
+  //getting words that are stick to pos "animal[n]". Blanks in other words
+  // \w is to match any word character
+  // \w+ to select multiple characters of the word before the next character
+  // the first \[ is liteerally match the characters that follow
+  // 
+  // i to make the selction case senstive
+  // | operator is for "or" characters
+  const wordsAndPos = /\w+\[[a|n|v]]/i
+//   //getting words
+  const words = /[^\s]+/i;
+
+  const arrayOfWords = [];
+
+//   // create an object for pos to be reflected (replaced) as blank in the second section of the text (output copy)
+  const posObj = {
+    n: "noun",
+    v: "verb",
+    a: "adjective",
+  }
+
+  for (let i = 0; i < splitArr.length; i++) {
+//     //variable that stores dot or comma
+    let dotOrComma = splitArr[i][splitArr[i].length - 1];
+    // console.log(dotOrComma)
+//     //testing if pos exists in elements of array (splitArr in our case). .test() searches for a match
+    if (wordsAndPos.test(splitArr[i])) {
+//       //searches for a specific string (words and pos in this case). .exec() search for matches and return these matches
+      const result = wordsAndPos.exec(splitArr[i]);
+      // console.log(result)
+//       //cuts off the pos part. the exec() method is returning an array of each wordAndPos element with an index of 0.
+      // console.log(result)
+      let pos = result[0][result[0].length - 2];
+      // console.log (pos)
+//       //push pos to an empty array without the part of speech symbole [a] or [n] or [v]
+      arrayOfWords.push({
+        word: result[0].slice(0, -3),
+        //if n, then noun. if v, then verb. if a, then adjective
+        pos: posObj[pos],
+      });
+//       // console.log(arrayOfWords)
+//       //checks if there is dot or coma at the end of each element of an array
+      if (dotOrComma === "." || dotOrComma === ",") {
+        console.log(dotOrComma)
+        arrayOfWords.push({
+          word: dotOrComma,
+        });
+        // console.log(arrayOfWords)
+      }
+    } 
+//     //checks if there is word among the elements of an array
+    else if (words.test(splitArr[i])) {
+      const result1 = words.exec(splitArr[i]);
+      console.log("test this, too")
+      console.log(result1)
+      arrayOfWords.push({
+        word: result1[0],
+      });
+    }
+  }
+//   //returns an array of words, dot or comma, and pos
+//   // console.log(arrayOfWords)
+  return arrayOfWords;
+}
+
+
+
+
+/**
+ * All your other JavaScript code goes here, inside the function. Don't worry about
+ * the `then` and `async` syntax for now.
+ * 
+ * You'll want to use the results of parseStory() to display the story on the page.
+ */
+getRawStory().then(parseStory).then((processedStory) => {
+  console.log(processedStory);
+    for (let word of processedStory) {
+      //if word has pos
+      if (word.pos) {
+        const input = displayInput(word);
+        const preview = displayPreview(`(${word.pos})`);
+        input.addEventListener("input", (e) => {
+          let inputValue = input.value;
+          //if input does not have value, display in preview pos.
+          if (inputValue === "") {
+            preview.innerHTML = `(${word.pos})`;
+            // preview.style.fontWeight = null;
+          } else {
+            //if input has value, display input in preview
+            preview.innerHTML = inputValue;
+            preview.style.fontWeight = "bold";
+          }
+          if (inputValue) {
+            input.style.backgroundColor = "#deaf00";
+            input.style.color = "white";
+            input.style.fontFamily ="Comic Sans MS, Comic Sans, cursive";
+          } else {
+            input.style.backgroundColor = null;
+          }
+        });
+      } else {
+        //display value of name key in word object
+        displayWord(word.word);
+        displayPreview(word.word);
+      }
+    }
+    //function for enter hotkey
+    function tab(e) {
+      var inputs = document.querySelectorAll("input");
+      for (let i = 0; i < inputs.length; i++) {
+        const nextELement = inputs[i + 1];
+        const lastELement = inputs[inputs.length - 1];
+        inputs[i].addEventListener("keypress", (e) => {
+          if (e.key === "Enter" && nextELement) {
+            e.preventDefault();
+            nextELement.focus();
+          } else if (e.key === "Enter" && lastELement) {
+            inputs[0].focus();
+          }
+        });
+      }
+    }
+    tab();
+    //fucntion for displaying input
+    function displayInput(input) {
+      let inputBox = document.createElement("input");
+      inputBox.setAttribute("type", "text");
+      inputBox.placeholder = input.pos;
+      inputBox.setAttribute("maxlength", "20");
+      document.querySelector(".madLibsEdit").appendChild(inputBox);
+      return inputBox;
+    }
+    //function for displaying words in madLibsEdit
+    function displayWord(word) {
+      let previewWord = document.createElement("p");
+      previewWord.innerText = word;
+      document.querySelector(".madLibsEdit").appendChild(previewWord);
+    }
+    //function for displaying words in madLibsPreview
+    function displayPreview(word) {
+      let previewWord = document.createElement("p");
+      previewWord.innerText = word;
+      document.querySelector(".madLibsPreview").appendChild(previewWord);
+      return previewWord;
+    }
+  });

madLibz/ziada-derya/plan.draw

@@ -0,0 +1 @@
+{"elements":[{"type":"rectangle","version":349,"versionNonce":855444047,"isDeleted":false,"id":"zX4SVekKawMiSPPbt4x38","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":96.45703125,"y":11.11328125,"strokeColor":"#000000","backgroundColor":"transparent","width":587.01171875,"height":254.3515625,"seed":774415137,"groupIds":[],"strokeSharpness":"sharp","boundElementIds":[]},{"id":"KysUUvNPcjMVRmxVC_d6B","type":"text","x":111.40234375,"y":18.287109375,"width":569,"height":240,"angle":0,"strokeColor":"#000000","backgroundColor":"transparent","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"strokeSharpness":"sharp","seed":1811944321,"version":273,"versionNonce":1324008993,"isDeleted":false,"boundElementIds":["5ht5MhlRGOK9xfc0YXrKS","B0qlkw1p6C9-A3B85NOp3","G7TmtIdAA2Bda-vcVtiMn"],"text":"Today I went to the zoo. I saw a(n) hungry[a] tiger[n]\njumping up and down in its tree. He roared[v] loudly[a]\nthrough the large tunnel that led to its scary[a] house[n].\nI got some peanuts and passed them through the cage to\na gigantic gray elephant[n] towering above my head.\nFeeding that animal made me hungry. I went to get a\nhuge[a] scoop of ice cream. It filled my stomach.\nAfterwards I had to run[v] hard[a] to catch our bus.\nWhen I got home I told[v] my mom for a creazy[a]\nday at the zoo.","fontSize":19.21673583984375,"fontFamily":1,"textAlign":"left","verticalAlign":"top","baseline":233},{"id":"5ht5MhlRGOK9xfc0YXrKS","type":"arrow","x":378.8125,"y":266.669921875,"width":222.8125,"height":166.609375,"angle":0,"strokeColor":"#000000","backgroundColor":"transparent","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"strokeSharpness":"round","seed":1312617665,"version":404,"versionNonce":1642857103,"isDeleted":false,"boundElementIds":null,"points":[[0,0],[-193.33203125,64.32421875],[-222.8125,166.609375]],"lastCommittedPoint":[-190.828125,165.546875],"startBinding":{"elementId":"KysUUvNPcjMVRmxVC_d6B","focus":-0.5097270500785153,"gap":8.3828125},"endBinding":null,"startArrowhead":null,"endArrowhead":"arrow"},{"id":"B0qlkw1p6C9-A3B85NOp3","type":"arrow","x":377.96875,"y":268.080078125,"width":3.3359375,"height":163.66796875,"angle":0,"strokeColor":"#000000","backgroundColor":"transparent","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"strokeSharpness":"round","seed":1387074991,"version":241,"versionNonce":79065569,"isDeleted":false,"boundElementIds":null,"points":[[0,0],[3.3359375,163.66796875]],"lastCommittedPoint":null,"startBinding":{"elementId":"KysUUvNPcjMVRmxVC_d6B","focus":0.07171763220337235,"gap":9.79296875},"endBinding":null,"startArrowhead":null,"endArrowhead":"arrow"},{"id":"G7TmtIdAA2Bda-vcVtiMn","type":"arrow","x":382.296875,"y":268.298828125,"width":249.40234375,"height":166.6875,"angle":0,"strokeColor":"#000000","backgroundColor":"transparent","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"strokeSharpness":"round","seed":1099837455,"version":196,"versionNonce":2007993793,"isDeleted":false,"boundElementIds":null,"points":[[0,0],[232.296875,50.8984375],[249.40234375,166.6875]],"lastCommittedPoint":[249.40234375,166.6875],"startBinding":{"elementId":"KysUUvNPcjMVRmxVC_d6B","focus":0.7293806067711132,"gap":10.01171875},"endBinding":null,"startArrowhead":null,"endArrowhead":"arrow"},{"id":"tZCb5jGiqglbi0l59xZBi","type":"text","x":89.60546875,"y":461.830078125,"width":125,"height":50,"angle":0,"strokeColor":"#000000","backgroundColor":"transparent","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"strokeSharpness":"sharp","seed":164151823,"version":91,"versionNonce":1193929423,"isDeleted":false,"boundElementIds":["oiZ9UGO8yiymJ3LAoXM51"],"text":"Normal word:\nToday","fontSize":20,"fontFamily":1,"textAlign":"left","verticalAlign":"top","baseline":43},{"id":"zof4qQ0u0UYIbLDVZuBeZ","type":"text","x":314.6875,"y":461.919921875,"width":135,"height":50,"angle":0,"strokeColor":"#000000","backgroundColor":"transparent","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"strokeSharpness":"sharp","seed":833662927,"version":91,"versionNonce":148516257,"isDeleted":false,"boundElementIds":["HpB91ZQOlK-E5X56sDAmK"],"text":"word with pos\nhungry[a]","fontSize":20,"fontFamily":1,"textAlign":"left","verticalAlign":"top","baseline":43},{"id":"jgHe3_7jq12HfMEqD1JBs","type":"text","x":496.1171875,"y":460.736328125,"width":246,"height":50,"angle":0,"strokeColor":"#000000","backgroundColor":"transparent","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"strokeSharpness":"sharp","seed":58957569,"version":215,"versionNonce":1683960367,"isDeleted":false,"boundElementIds":["hTa3mcJQp8rAiPiMnt0yP"],"text":"words with dot or comma\ncream.","fontSize":20,"fontFamily":1,"textAlign":"left","verticalAlign":"top","baseline":43},{"id":"oiZ9UGO8yiymJ3LAoXM51","type":"arrow","x":129.6796875000001,"y":518.3300781250001,"width":228.94921875,"height":229.91796875,"angle":0,"strokeColor":"#000000","backgroundColor":"transparent","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"strokeSharpness":"round","seed":918161967,"version":307,"versionNonce":1874510607,"isDeleted":false,"boundElementIds":null,"points":[[0,0],[21.5,127.66015625],[228.94921875,229.91796875]],"lastCommittedPoint":[228.94921875,229.91796875],"startBinding":{"elementId":"tZCb5jGiqglbi0l59xZBi","focus":0.41569055381479453,"gap":6.500000000000114},"endBinding":null,"startArrowhead":null,"endArrowhead":"arrow"},{"id":"HpB91ZQOlK-E5X56sDAmK","type":"arrow","x":373.3671875000001,"y":518.8144531250001,"width":2.015625,"height":232.7265625,"angle":0,"strokeColor":"#000000","backgroundColor":"transparent","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"strokeSharpness":"round","seed":61284641,"version":94,"versionNonce":278002017,"isDeleted":false,"boundElementIds":null,"points":[[0,0],[-2.015625,232.7265625]],"lastCommittedPoint":null,"startBinding":{"elementId":"zof4qQ0u0UYIbLDVZuBeZ","focus":0.12617417890821672,"gap":6.894531250000114},"endBinding":null,"startArrowhead":null,"endArrowhead":"arrow"},{"id":"hTa3mcJQp8rAiPiMnt0yP","type":"arrow","x":602.2343750000001,"y":521.7675781250001,"width":216.875,"height":229.8515625,"angle":0,"strokeColor":"#000000","backgroundColor":"transparent","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"strokeSharpness":"round","seed":497952065,"version":143,"versionNonce":1573666913,"isDeleted":false,"boundElementIds":null,"points":[[0,0],[-13.49609375,167.94140625],[-216.875,229.8515625]],"lastCommittedPoint":[-216.875,229.8515625],"startBinding":{"elementId":"jgHe3_7jq12HfMEqD1JBs","focus":0.11189007770051294,"gap":11.031250000000114},"endBinding":null,"startArrowhead":null,"endArrowhead":"arrow"},{"id":"-2S55AlJ2cDUef1FqxkJw","type":"text","x":228.7890625000001,"y":764.6308593750001,"width":317,"height":350,"angle":0,"strokeColor":"#000000","backgroundColor":"transparent","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"strokeSharpness":"sharp","seed":2047315009,"version":278,"versionNonce":1558633871,"isDeleted":false,"boundElementIds":null,"text":"[\n{word: 'tree'},\n{word: 'hungre', pos: 'adjective'},\n{word: '.'},\n.\n.\n.\n.\n{word: 'house', pos: 'noun'},\n{word: 'go', pos: 'verb'},\n.\n.\netc.\n]","fontSize":20,"fontFamily":1,"textAlign":"left","verticalAlign":"top","baseline":343}]}

madLibz/ziada-derya/story.txt

@@ -0,0 +1 @@
+Today, with school we went to the zoo. There, I saw many huge animals[n] jumping and fighting in their cage. They screamed loudly[a] and it was so scary[a]. I got some bananas[n] and fed the monkeys[n], through the cage. The lions[n] were so impressive. It was really scray[v]. At the end of the visit, I was sad[a] that all these animals[n] were imprisoned[v] in their cages. But this crazy[a] day at the zoo was still an amazing[a] experience.