abduallah-zakaria-madlibz

madLibz/abduallah-zakaria/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).c

madLibz/abduallah-zakaria/do-not-touch.js

@@ -0,0 +1,10 @@
+/**
+ * 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/abduallah-zakaria/index.html

@@ -0,0 +1,37 @@
+<html>
+  <head>
+    <title>Mad Libs project</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
+  </head>
+  <body>
+    <h2>Mad Libs Game</h2>
+    <!-- <nav>
+    <input type="checkbox" id="check" />
+      <label for="check" class="checkbtn">
+        <i class="fas fa-bars"></i>
+      </label>
+      <label class="logo">MadLibs</label>
+      <ul>
+        <li><a class="active" href="#"> Home</a></li>
+        <li><a href="#"> About</a></li>
+        <li><a href="#"> Service</a></li>
+        <li><a href="#"> Contant</a></li>
+        <li><a href="#"> Feedback</a></li>
+      </ul>
+    </nav> -->
+
+    <!--  parent -->
+    <div class="contanier">
+      <!--  first chiled -->
+      <div class="madLibsEdit"></div>
+      <!--  second chiled -->
+      <div class="madLibsPreview"></div>
+
+    </div>
+
+    <script src="script.js"></script>
+    <script src="do-not-touch.js"></script>
+    <script src="madlibs.js"></script>
+  </body>
+</html>

madLibz/abduallah-zakaria/madlibs.js

@@ -0,0 +1,174 @@
+/**
+ * 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 requigreen (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) {
+  const obj = {
+    n: 'noun',
+    v: 'verb',
+    a: 'adj'
+  }
+  // split string into array using spaces get comma and dot as word as well 
+  const wordArray = rawStory.split(/(?=[\.,])|[ ]/g)
+  // console.log(wordArray)
+
+  // create an array of word objects by using the output of split method
+  const arrayOfWords = []
+
+  for (element of wordArray) {
+
+    const postTest = /\[[anv]\]/;
+    // check if the element has pos key 
+    if (postTest.test(element)) { // if it is true
+      const postValue = element.match(postTest)[0].charAt(1);
+      // console.log(postValue)
+      // push the words into container  with the pos key and value
+      arrayOfWords.push({ 'word': element.replace(`${element.match(postTest)[0]}`, ""), "pos": obj[postValue] })
+    } else {
+      arrayOfWords.push({ "word": element })
+    }
+  }
+
+  // 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);
+
+  // call divs of class 
+  const madLibsEdit = document.getElementsByClassName('madLibsEdit')[0]
+  const madLibsPreview = document.getElementsByClassName('madLibsPreview')[0]
+
+  for(let i = 0 ; i < processedStory.length ; i++){
+    // create new HTML tags
+    const spanEdit = document.createElement('span')
+    const spanPreview = document.createElement('span')
+
+    // Cheack if Pos is existed in the array 
+    if('pos' in processedStory[i]){
+
+      // if it is existed create input HTML tag
+      const inputPos = document.createElement('input')
+      inputPos.setAttribute('type','text')
+      inputPos.setAttribute('class','replace')
+      inputPos.style.textAlign = 'center' 
+
+      // adding space befor the input box 
+      spanEdit.innerHTML += " "
+      spanPreview.innerHTML += " "
+      // ${processedStory[i].wrod}
+      spanPreview.innerHTML += `[${processedStory[i].pos}]` 
+      // css part 
+      spanPreview.style.color = 'green'
+
+      // adding a placeholder of the word and type
+      // ${processedStory[i].wrod}
+      inputPos.setAttribute(`placeholder` , `[${processedStory[i].pos}]`)
+
+
+      // append spaceing between input word and next word 
+      madLibsEdit.appendChild(spanEdit)
+      madLibsEdit.appendChild(inputPos)
+      madLibsPreview.appendChild(spanPreview)
+
+
+      // create EventListner on to input 
+      // inputPos.addEventListener('oninput' , function(e){
+      //   if(inputPos.value){
+      //     spanPreview.innerHTML = " " + inputPos.value +  " " 
+      //     spanPreview.style.color = 'green'
+
+
+      //   }else{
+      //     spanPreview.innerHTML = `${processedStory[i].word} [${processedStory[i].pos}]`
+      //     spanPreview.style.color = 'green'
+
+      //   }
+
+      // })
+
+      inputPos.oninput = event =>{
+        if(inputPos.value){
+          spanPreview.innerHTML = " " + inputPos.value +  " " 
+          spanPreview.style.color = 'green'
+
+
+        }else{
+          spanPreview.innerHTML = `${processedStory[i].word} [${processedStory[i].pos}]`
+          spanPreview.style.color = 'green'
+
+        }
+      }
+
+    }else{
+
+      if(processedStory[i].word === "," || processedStory[i].word === '.'){
+
+        spanEdit.innerHTML = processedStory[i].word
+        spanPreview.innerHTML = processedStory[i].word
+        madLibsEdit.appendChild(spanEdit)
+        madLibsPreview.appendChild(spanPreview)
+      } 
+      else if((i != 0 ) && (processedStory[i].word != "")){ 
+
+        spanEdit.innerHTML = " "+ processedStory[i].word
+        spanPreview.innerHTML =" "+ processedStory[i].word
+        madLibsEdit.appendChild(spanEdit)
+        madLibsPreview.appendChild(spanPreview)
+
+      }else{
+       // if the object at the begaing of text then add it directly 
+        spanEdit.innerHTML = processedStory[i].word + " "
+        spanPreview.innerHTML = processedStory[i].word +" "
+        madLibsEdit.appendChild(spanEdit)
+        madLibsPreview.appendChild(spanPreview)
+      }
+
+    }
+
+  }
+
+
+
+});

madLibz/abduallah-zakaria/story.txt

@@ -0,0 +1 @@
+Louis[n] went[v] to the store[n], and it was difficult[a] to buy due to the crowds . He thought[v] the store[n] is Empty

madLibz/abduallah-zakaria/style.css

@@ -0,0 +1,96 @@
+* {
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
+  list-style: none;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  /* background-color: #f4f7f6; */
+  background-image: url('https://venngage-wordpress.s3.amazonaws.com/uploads/2018/09/Colorful-Circle-Simple-Background-Image-1.jpg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+ }
+
+h2{
+  text-align: center;
+  margin: 30px auto;
+  color: white;
+  font-size: 60px;
+  font-weight: 300;
+}
+
+
+/* start contanier */
+
+.contanier {
+  /* height: 85vh; */
+  border: 1px solid #1b202159;
+  border-radius: 20px;
+  overflow: hidden;
+  margin: 40px 80px;
+  background-color: #faf3f3;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.madLibsEdit {
+  background-color: #fddbc7;
+  /* width: 100px; */
+  flex: 1;
+  height: 400px;
+  flex-grow: 1;
+  padding: 10px;
+  line-height: 2;
+}
+
+.madLibsPreview {
+  background-color: #e1e5ea;
+  /* width: 100px; */
+    flex: 1;
+  height: 400px;
+  flex-grow: 1;
+  padding: 10px;
+  line-height: 2;
+}
+
+input{
+  border-radius: 5px;
+  border: none;
+  color: white;
+  padding: 5px 10px;
+}
+
+input::placeholder{
+  color: gray;
+}
+
+span{
+  color: rgb(59, 59, 59);
+  font-size: 18px;
+}
+input:focus {
+  background-color: gray;
+}
+input:not(:placeholder-shown) {
+  background-color: green;
+}
+
+@media only screen and (max-width: 922px) {
+  .contanier {
+    flex-direction: column;
+  }
+  .madLibsPreview,
+  .madLibsEdit {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+/* End contanier */