diff --git a/madLibz/aliriza-hafise-recoded-mad-libz-2/README.md b/madLibz/aliriza-hafise-recoded-mad-libz-2/README.md
new file mode 100644
index 0000000..667287d
--- /dev/null
+++ b/madLibz/aliriza-hafise-recoded-mad-libz-2/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).
\ No newline at end of file
diff --git a/madLibz/aliriza-hafise-recoded-mad-libz-2/do-not-touch.js b/madLibz/aliriza-hafise-recoded-mad-libz-2/do-not-touch.js
new file mode 100644
index 0000000..64fde61
--- /dev/null
+++ b/madLibz/aliriza-hafise-recoded-mad-libz-2/do-not-touch.js
@@ -0,0 +1,4 @@
+const getRawStory = () => {
+  return fetch('./story.txt')
+    .then(response => response.text());
+};
diff --git a/madLibz/aliriza-hafise-recoded-mad-libz-2/flamenco.jpg b/madLibz/aliriza-hafise-recoded-mad-libz-2/flamenco.jpg
new file mode 100644
index 0000000..c1eee80
Binary files /dev/null and b/madLibz/aliriza-hafise-recoded-mad-libz-2/flamenco.jpg differ
diff --git a/madLibz/aliriza-hafise-recoded-mad-libz-2/index.html b/madLibz/aliriza-hafise-recoded-mad-libz-2/index.html
new file mode 100644
index 0000000..c761155
--- /dev/null
+++ b/madLibz/aliriza-hafise-recoded-mad-libz-2/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Mad Libs</title>
+    <link href="style.css" rel="stylesheet" type="text/css" />
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet"> 
+  </head>
+
+  <body>
+
+    <audio id="audio" src="music.mp3" loop="loop"></audio>
+
+
+    <div class="wrapper">
+
+      <header>
+        <h1>Baile Flamenco</h1>
+      </header>
+
+      <div class="container">
+        <div class="madLibsEdit"></div>
+        <div class="madLibsPreview"></div>
+      </div>
+  
+    </div>
+
+    <script src="do-not-touch.js"></script>
+    <script src="madlibs.js"></script>
+  </body>
+</html>
diff --git a/madLibz/aliriza-hafise-recoded-mad-libz-2/madlibs.js b/madLibz/aliriza-hafise-recoded-mad-libz-2/madlibs.js
new file mode 100644
index 0000000..71fe5ac
--- /dev/null
+++ b/madLibz/aliriza-hafise-recoded-mad-libz-2/madlibs.js
@@ -0,0 +1,129 @@
+
+// Music code
+
+window.addEventListener("load", function() {
+  document.getElementById("audio").play();
+  console.log("Page is loaded!")
+})
+
+//                                              //                                     //
+
+// The function that parses the story.  
+function parseStory(rawStory) {
+  // Your code here.
+
+  //Create an empty array
+  let copyRawStory = rawStory.slice();
+  let splittedRawStory = copyRawStory.split(" ");
+  const arrOfStory = [];
+
+  //Declare variables regular expressions
+
+  let noun = /\[n\]/;
+  let verb = /\[v\]/;
+  let adjective = /\[a\]/;
+  let name = /\[m\]/;
+
+  //Take the words into the Objects
+
+  for (let i = 0; i < splittedRawStory.length; i++) {
+    let word = splittedRawStory[i];
+    let lastLetter = word[word.length - 1];
+    if (lastLetter === ".") {
+      word = word.slice(0, word.length - 1);
+      //Deleting the the last chracter if it's dot.
+    }
+
+    //Declare object for pushing inside of array of objects
+    const wordObj = {
+      word: word
+    };
+
+    //Push objects into arrOfStory
+    arrOfStory.push(wordObj);
+
+    if (word.match(noun)) {
+      wordObj.word = splittedRawStory[i].replace("[n]", "");
+      wordObj.pos = "noun";
+    } else if (word.match(verb)) {
+      wordObj.word = splittedRawStory[i].replace("[v]", "");
+      wordObj.pos = "verb";
+    } else if (word.match(adjective)) {
+      wordObj.word = splittedRawStory[i].replace("[a]", "");
+      wordObj.pos = "adjective";
+    } else if (word.match(name)) {
+      wordObj.word = splittedRawStory[i].replace("[m]", "");
+      wordObj.pos = "name";
+    }
+    if (lastLetter === ".") {
+      arrOfStory.push({ word: lastLetter });
+    }
+  }
+
+  return arrOfStory;
+}
+
+//                                        //                                              //
+
+// The function that displays the processed story.
+
+function displayTheProcessedStory(processedStory) {
+
+  console.log(processedStory);
+
+  // Select the areas in HTML that we want to display stuff in
+  let madLibsEdit = document.querySelector(".madLibsEdit");
+  let madLibsPreview = document.querySelector(".madLibsPreview");
+
+
+  processedStory.forEach(function(element) {
+    // console.log(element)
+
+    // If there's no pos, then execute the first block of code.
+    if (!element.pos) { 
+      // console.log(element)
+      let editSpan = document.createElement("span");
+      editSpan.innerHTML = element.word + "&nbsp";
+      madLibsEdit.appendChild(editSpan);
+      let prevSpan = document.createElement("span");
+      prevSpan.innerHTML = element.word + "&nbsp";
+      madLibsPreview.appendChild(prevSpan);
+    } 
+    // If there's pos, execute the else block of code, create input and assign the necessary attributes.
+    else {
+      let inputPlace = document.createElement("input");
+      inputPlace.setAttribute("type", "text");
+      inputPlace.setAttribute("maxlength", "20");
+      inputPlace.setAttribute("placeholder", `${element.pos} `);
+
+      // Set some styles for the appearence of inputs
+
+      let inputValPreview = document.createElement("span");
+      let x = document.createTextNode(`${element.pos}`);
+      inputValPreview.appendChild(x);
+      inputValPreview.style.color = "red";
+
+      //Listen the changes on each input and when there's something changed, change the innerHTML of the spans in the page in order to display the changes.
+      inputPlace.addEventListener("input", function () {
+        if (inputPlace.value) {
+          inputValPreview.style.color = "red";
+          inputValPreview.innerHTML = `${inputPlace.value} &nbsp`;
+         
+        }
+        // If there's no content in the inputs, then display this as default.
+         else {
+          inputValPreview.innerText = `(${inputPlace.placeholder})`;
+        }
+      });
+      
+      madLibsEdit.appendChild(inputPlace);
+      madLibsPreview.appendChild(inputValPreview);
+    }
+  });
+}
+
+//                                            //                                          //
+
+getRawStory()
+.then(parseStory)
+.then(displayTheProcessedStory);
\ No newline at end of file
diff --git a/madLibz/aliriza-hafise-recoded-mad-libz-2/music.mp3 b/madLibz/aliriza-hafise-recoded-mad-libz-2/music.mp3
new file mode 100644
index 0000000..ee012e6
Binary files /dev/null and b/madLibz/aliriza-hafise-recoded-mad-libz-2/music.mp3 differ
diff --git a/madLibz/aliriza-hafise-recoded-mad-libz-2/story.txt b/madLibz/aliriza-hafise-recoded-mad-libz-2/story.txt
new file mode 100644
index 0000000..f159676
--- /dev/null
+++ b/madLibz/aliriza-hafise-recoded-mad-libz-2/story.txt
@@ -0,0 +1 @@
+Flamenco, form of song[n], dance, and instrumental mostly[a] guitar music commonly associated with the Andalusian Roma of southern[a] Spain. The roots[n] of flamenco, though somewhat mysterious, seem to lie in the Roma migration from Rajasthan to Spain between the 9th and 14th centuries. These migrants brought with them musical instruments, such as tambourines, bells, and wooden castanets[n], and an extensive[a] repertoire of songs and dances. In Spain[m] they encountered the rich cultures of the Sephardic Jews and the Moors. Their centuries-long cultural intermingling produced[v] the unique art form known as flamenco.
\ No newline at end of file
diff --git a/madLibz/aliriza-hafise-recoded-mad-libz-2/style.css b/madLibz/aliriza-hafise-recoded-mad-libz-2/style.css
new file mode 100644
index 0000000..a1ae36b
--- /dev/null
+++ b/madLibz/aliriza-hafise-recoded-mad-libz-2/style.css
@@ -0,0 +1,104 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  body {
+    background-image: url(flamenco.jpg);
+    background-size: cover;
+    color: white;
+    height: 100vh;
+    font-family: Poppins, sans-serif;
+    font-size: 0.85rem;
+  }
+  
+    header h1 {
+    text-align: left;
+    padding: 4vh 0;
+    padding-left: 50px; 
+    }
+  
+  .wrapper {
+    height: 100vh;
+  }
+  
+  
+  .container { /*önemli*/
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    align-items: left;
+  }
+  
+  
+  
+  .madLibsEdit {
+    width: 45%;
+    margin-bottom: 10vh;
+    padding-left: 50px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    
+  }
+  
+  .madLibsEdit input[type="text"] {
+    background-color: transparent;
+    border: none;
+    color: red;
+    text-align: left;
+    font-size: 1em;
+    width: 50px;
+    outline: none;
+  }
+  
+  .madLibsEdit input[type="text"]::placeholder {
+    color: red;
+    font-size: 12px;
+  }
+  
+  .madLibsPreview {
+    width: 45%;
+    padding-left: 50px;
+    text-align: left;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  
+  .madLibsPreview input[type="text"] {
+    border: none;
+    background-color: transparent;
+    text-align: left;
+    font-size: 15px;
+    width: 50px;
+  }
+  
+  .madLibsPreview input[type="text"]::placeholder {
+    color: red;
+  }
+  
+  .madLibsPreview input[type="text"]:focus {
+    outline: none;
+    border: none;  /*değiştirebiliriz*/
+  }
+  
+  @media (min-width: 1450px) {
+    body {
+      font-size: 17.5px;
+    }
+  }
+  
+  
+  @media (max-width: 768px) {
+    body {
+      height: 100%;
+    }
+  
+    .container {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  
\ No newline at end of file