# 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).
## Presentation
Your demo will be 10 minutes. We will time it. It's not meant to be a high pressure situation but we want to make sure that everyone has time to demo in the allocated time.

## Requirements
Please read these instructions and prepare some thoughts on these for your demo.

\* Show us your story and your work. We will go through this quickly, the idea is that the chat will just suggest words and parts of speech while you type them, then Halit will take a screenshot that we can save as part of our class archives.
\* Each member will speak briefly about one part of the code, maximum of 1 minute per person. Remember the requirement that every member must be able to to explain any part of the code. Please think about what you want to say beforehand, usually people make it up as they go and it takes too long. I will cut you off if it goes longer than a minute, for the sake of having everyone present.
\* What were the three hardest problems that you faced? One person answers this.
\* Reflection: all of the members must speak about what stood out to them about their learnings from the project. It can be abstract ("I learned how to better find my mistakes") or concrete ("I learned more about the DOM.").
\* Reflection: what do you think is the difference between working on a project and working on small exercises?
Re:코딩된 매드 리브즈## 매드 리브란 무엇인가요? 위키백과](https://en.wikipedia.org/wiki/Mad\_Libs)를 참조하세요. 예, 이 섹션이 짧다는 것을 알고 있으니 건너뛰지 마시고 \*\*매드 립스가 무엇인지 읽어보시길 바랍니다\*\* 그렇지 않으면 나머지 내용은 의미가 없습니다\*\*. 보통의 매드 립에서는 단어를 삽입하는 것이 보통이지만, 이 버전에서는 기존 스토리의 "빈칸 채우기"와 비슷합니다.## 지침### 공동 작업 요구 사항코드를 쪼개지 마세요. 모든 코드 줄을 함께 작성하세요. 각 그룹에서는 모든 사람이 모든 코드 줄을 이해해야 합니다. 페어 프로그래밍](페어\_프로그래밍)을 참조하세요.### 스토리 작성하기story.txt`에는 간단한 스토리 \*\*가 있는데, 이 스토리를 자신의 것으로 바꾸면 됩니다\*\*. 참고로, [파싱](https://en.wikipedia.org/wiki/Parsing)의 목적상 문법은 마침표와 쉼표만 사용할 수 있습니다.혼동하기 쉽지만, 문법 부분이 표시된 곳에는 "공백"이 있지만 전체 내용을 작성해야 합니다. 그 이유는 나중에 몇 가지 추가 도전 과제에서 분명하게 드러날 것입니다.예를 들어\* `루이[n]`: 일반적으로 루이라고 표시되지만 사용자는 \*명사\*로 바꿔야 합니다.\* `went[v]`: 일반적으로는 갔지만 사용자가 \*동사\*로 바꿔야 합니다.형용사...의 경우 \* `[a]`로 바꿔야 합니다.스토리를 작성할 때 마침표와 쉼표는 품사 뒤에 와야 합니다(예: `루이[n].` (`루이.[n]`가 아님)).### 코드이 프로젝트에서는 HTML, CSS, JS를 함께 사용하여 원하는 스토리를 가진 매드 리브스 게임의 변형을 만들 것입니다. 아래에서는 요구 사항에 대해 설명합니다. 여기서는 "입력"이라는 단어를 사용하여 매드 리브스 스토리의 빈칸을 가리킵니다.다음은 아주 간단한 시각적 예시이지만, 이 프로젝트에서 모든 스타일링은 여러분의 자유입니다.### 베어본 예시![예시](https://i.imgur.com/ZRNvFC7.png)#### 기능 요구 사항0. \*\*스토리 파싱하기:\*\*\* 이미 `story.txt` 파일을 문자열로 읽어들이는 코드를 작성했습니다. 하지만 "공백"을 추적할 수 있는 형식으로 처리해야 합니다. 자세한 지침은 `madlibs.js`를 참조하세요. 정규 표현식에 대해 읽기](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/regular-expressions/)를 참조하세요(예, 이것은 예상되는 추가 읽기입니다 :) ). 정규식을 사용하지 않고 이 작업을 수행하는 것도 가능하지만 번거롭습니다.1. \*\*스토리 표시: \*\* 스토리의 \*\*두 개의 사본\*\*이 표시되어야 합니다. 한 사본("보기 편집")에서,스토리에서 공백이 있는 모든 단어(예: `Louis[n]`, `went[v]`, ...)가 입력으로 대체됩니다. 이것은 `div.madLibsEdit`에 있어야 합니다. 두 번째 복사본("미리보기")에는 동일한 스토리가 표시되어야 하지만 형식이 예쁘게 지정되어야 합니다(공백 없이!). 위의 예시 그림을 참조하세요.2. \*\*핫키:\*\* 사용자가 입력에서 `Enter`를 누르면 커서가 스토리의 다음 입력으로 이동해야 합니다.3. \*\*사용자 입력 제한:\*\* 입력은 최대 20자까지만 허용해야 합니다.4. \*\*라이브 업데이트:\*\* 사용자가 편집 보기에서 공백을 업데이트할 때마다 새 문자를 입력할 때마다 미리보기를 업데이트해야 합니다(힌트: 일종의 이벤트를 처리하는 것입니다). 사용자가 미리보기를 업데이트하기 위해 버튼을 클릭할 필요가 없어야 \*\*\* 합니다.5. \*\*스토리 길이:\*\*\* 스토리에 공백이 10개 이상 있어야 합니다.#### 스타일링 요구 사항0. \*\*Responsiveness\*\*: 화면이 작은 경우 스토리는 화면의 전체 너비를 차지해야 합니다. 컴퓨터에서와 같이 화면이 큰 경우. "작은" 및 "큰" 값은 사용자가 결정할 수 있습니다.1. \*\*플렉스박스\*\*: 플렉스박스를 하나 이상 사용합니다.2. \*\*현재 초점이 맞춰진 입력 강조\*\*: 입력 스타일은 세 가지가 가능해야 합니다(여기서 스타일은 모호한 단어이므로 사용자가 구분할 수 있어야 합니다):\* 현재 강조 표시된 입력(사용자가 입력 중인 경우)\* 채워진 입력(사용자가 이미 단어를 입력한 경우 - 여기에는 JS가 필요할 수 있음)\* 빈 입력(사용자가 아직 단어를 입력하지 않은 경우).## 프레젠테이션데모 시간은 10분입니다. 시간을 정하겠습니다. 긴박한 상황은 아니지만 모든 사람이 할당된 시간 내에 데모할 시간을 확보할 수 있도록 하려고 합니다.## 요구 사항이 지침을 읽고 데모를 위해 이에 대한 생각을 준비해 주세요.\* 여러분의 이야기와 작품을 보여주세요. 여러분이 입력하는 동안 채팅에서 단어와 품사를 제안하고 Halit이 스크린샷을 찍어 수업 아카이브의 일부로 저장하는 방식으로 빠르게 진행할 것입니다.\* 각 멤버는 코드의 한 부분에 대해 한 사람당 최대 1분까지 간략하게 말할 수 있습니다. 모든 멤버가 코드의 모든 부분을 설명할 수 있어야 한다는 요구 사항을 기억하세요. 보통 사람들이 즉흥적으로 만들어서 시간이 너무 오래 걸리는 경우가 많으니, 하고 싶은 말을 미리 생각해 주세요. 모든 사람이 참석할 수 있도록 1분 이상 길어지면 중간에 끊겠습니다.\* 가장 어려웠던 세 가지 문제는 무엇이었나요? 한 사람이 대답합니다.\* Refl