aziza-moulham-madLibz

madLibz/aziza-moulham/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/aziza-moulham/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/aziza-moulham/index.html

@@ -0,0 +1,32 @@
+<!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>Make your own story!</h1>
+    </header>
+<div class="flex-container">
+    <div class='madLibsEdit'>
+      <h2> Mad-Libs</h2>
+    </div>
+
+    <div class='madLibsPreview'>
+      <h2> Result</h2>
+    </div>
+
+    <script src="do-not-touch.js"></script>
+    <script src="madlibs.js"></script>
+</div>
+  <footer>
+    <span>&copy; Made by: <b>Aziza & Moulham </b></span>
+  </footer>
+
+  </body>
+</html>

madLibz/aziza-moulham/madlibs.js

@@ -0,0 +1,117 @@
+/**
+ * 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/
+*/
+
+
+// parseStory
+function parseStory(rawStory) {
+ 	let story = [];
+	let noun = /n(?=])/;
+	let verb = /v(?=])/;
+	let adjective = /a(?=])/;
+  let splitStory = rawStory.split(" ");
+
+	for (i = 0 ; i < splitStory.length; i++) {
+    let wordArr = splitStory[i];
+    let dots = wordArr[wordArr.length-1]
+    if (dots === ".") {
+      wordArr = wordArr.slice(0, wordArr.length-1)
+    }
+    if (noun.test(wordArr)) {
+    let finalStory = wordArr.replace('[n]','')
+     	story.push({word: finalStory, pos: 'noun'})
+    } else if (verb.test(wordArr)) {
+    let finalStory = wordArr.replace ('[v]', '')
+      story.push({word: finalStory, pos: 'verb'})
+    } else if (adjective.test(wordArr)){
+    let finalStory = wordArr.replace ('[a]', '')
+    	story.push({word: finalStory, pos: 'adjective'})
+    } else {
+      story.push({word: wordArr})  
+    }
+    if (dots === ".") {
+      story.push({word: dots})
+    } 
+  }
+  return story; 
+}
+
+
+getRawStory()
+  .then(parseStory)
+  .then((processedStory) => {
+    console.log(processedStory);
+
+    // Print the editStory and previewStory
+    let editStory = document.querySelector('.madLibsEdit');
+    let previewStory = document.querySelector('.madLibsPreview');
+
+    for (let wordObj of processedStory) {
+      if (!wordObj.pos) {
+        let editStoryText = document.createElement('span');
+        let previewStoryText = document.createElement('span');
+        editStoryText.innerText = `${wordObj.word} `;
+        previewStoryText.innerText = `${wordObj.word} `;
+        editStory.appendChild(editStoryText);
+        previewStory.appendChild(previewStoryText);
+        } 
+        else {
+        let input = document.createElement("input");
+        input.setAttribute('placeholder', wordObj.pos);
+        input.setAttribute('maxlength', 20);
+
+        let review = document.createElement('span');
+        review.innerText = `(${wordObj.pos}) `;
+        editStory.appendChild(input);
+        previewStory.appendChild(review);
+        review.style.color='#ed4924';
+
+        input.oninput = function (){
+          if (input.value) {
+            review.innerText = input.value + ' ';
+          }
+        }
+      }
+    }
+
+    // Event listener for Enter
+    let inputs = document.querySelectorAll("input");
+    for (i = 0; i < inputs.length; i++) {
+      const nextELement = inputs[i + 1];
+      const lastELement = inputs[inputs.length - 1];
+      inputs[i].addEventListener("keypress", (e) => {
+        // if (e.keyCode === 13 && nextELement) {
+        if (e.code === 'Enter' && nextELement) {
+          nextELement.focus();
+        } else {
+          inputs[0].focus();
+        }
+      });
+    }
+});
+

madLibz/aziza-moulham/story.txt

@@ -0,0 +1,5 @@
+People have been coming to the wise[a] man[n] complaining about the same problems[n] every time. One day he told[v] them a joke[n] and everyone roared[v] in laughter[n]. After a couple of minutes. He told them the same joke and only a few of them smiled[v]. When he told the same joke for the third time no one laughed anymore.
+
+The wise[a] man smiled and said[v].
+
+You can’t laugh[v] at the same joke over and over. So why are you always crying about the same problem.

madLibz/aziza-moulham/style.css

@@ -0,0 +1,66 @@
+/**
+* Your CSS goes here.
+*/
+body {
+  background-image: url("cover.jpeg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: 100%;
+}
+header, footer {
+  height: 20%;
+  text-align: center;
+}
+
+h1 {
+  text-align: center;
+  font-family: Snell Roundhand, cursive;
+  margin: 50px;
+  font-size: 40px;
+  color: white;
+}
+
+h2 {
+  text-align: center;
+  font-family: Snell Roundhand, cursive;
+  font-size: 40px;
+}
+
+p {
+  text-align: justify;
+  text-justify: inter-word;
+  padding: 10px;
+}
+
+.flex-container {
+  display: flex;
+  margin: 60px;
+  background-color: hsla(120, 100%, 25%, 0.3);
+  justify-content: space-around;
+    height: 60%;
+}
+
+.flex-container > div {
+  background-color: white;
+  margin: 10px;
+  padding: 20px;
+  text-align: center;
+  font-size: 15px;
+  width: 50%;
+}
+
+footer > span {
+	text-align: center;
+  background-color: gray;
+  margin: 0px;
+  padding: 10px;
+  color: white;
+}
+
+input:focus {
+  background-color: lightblue;
+}
+
+input:placeholder-shown {
+  background-color: rgb(191, 240, 162);
+}