In this activity, we're going to create an application that translates regular English words into Pig Latin.
- can work within existing code to add functionality
- can break down a complex problem to create a desired outcome
- One person on the team accepts the group assignment from GitHub classroom
- Create a team name (team name can be whatever you would like as long as it is work-appropriate)
- Clone the newly created repository
cd
into the repository- Run $
yarn
to install the React dependencies - Create a new branch following the naming instructions described below
- Open the repository in a text editor
- Code!
- $
yarn start
- control + c (stops the server)
- command + t (opens a new terminal tab)
- Is your server running?
- Label your console logs!
- Inspect the page and look for errors in the console tab.
- Always look at the first error message in the list.
- What is the error telling you?
- For words beginning with a vowel, add "way" to the end.
- For words beginning with one or more consonants, move all of the first consecutive consonants to the end, and add "ay".
- If the first consonants include "qu", move the "u" along with the "q". Don't forget about words like "squeal" where "qu" doesn't come first!
- "y" is treated like a vowel in appropriate circumstances.
This is a very difficult problem to solve. Take the time to plan your approach and brainstorm with your team.
This project is going to utilize React for the UI and the JavaScript logic. Existing code inside the React application will provide a UI for the Pig Latin project. Your job is to create the logic. All the code you'll need to write for this app is going to be inside one function in the /src/App.js
file.
To get started, find the myPigLatinCodeHere
function and write your code. Every time you save your updated file, the browser window displaying your app will reload.
Story 1: In order to see English words converted to Pig Latin, as the user of the application, I need to see words beginning with a vowel translated to add "way" to the end.
Branch: vowel-functionality
Acceptance Criteria
- Can type any word that begins with a vowel in the text input (e.g. apple)
- Can hit the submit button
- Can see the words that begin with a vowel translated to Pig Latin and rendered to the page (e.g. appleway)
Story 2: In order to see English words converted to Pig Latin, as the user of the application, I need to see words that have "qu" in the first syllable translated by moving all the consonants and the "u" to the end and adding "ay".
Branch: qu-functionality
Acceptance Criteria
- Can type any word that has a "qu" in the first syllable in the text input (e.g. squeal)
- Can hit the submit button
- Can see the words that have a "qu" in the first syllable translated to Pig Latin and rendered to the page (e.g. ealsquay)
Story 3: In order to see English words converted to Pig Latin, as the user of the application, I need to see words that have no vowels other than "y" translated by moving all the consonants to the end and adding "ay".
Branch: y-functionality
Acceptance Criteria
- Can type any word that has no vowels other than "y" in the text input (e.g. fry)
- Can hit the submit button
- Can see the words that have no vowels other than "y" translated to Pig Latin and rendered to the page (e.g. yfray)
Story 4: In order to see English words converted to Pig Latin, as the user of the application, I need to see words that have one or more consonants translated by moving all the consonants to the end and adding "ay".
Branch: consonant-functionality
Acceptance Criteria
- Can type any word that starts with one or more consonants in the text input (e.g. through)
- Can hit the submit button
- Can see the words that start with one or more consonants translated to Pig Latin and rendered to the page (e.g. oughthray)
- As a user, I can see pleasant stylings on the application.
- As a user, I can input a sentence that includes punctuation.
- As a user, I can input a sentence that includes lower and upper case words.
- As a user, I can see a message if I am not using the application correctly.
- As a developer, I have a well-commented application.
- As a developer, I have a well-written README file with instructions on accessing my repository.
- As a developer, my variables are all named semantically.
- As a developer, I have refactored and efficient code.
- As a developer, I have my application deployed as a live website.
Each team will give a brief (three-minute) presentation of their application. Presenting your project will allow you to practice communication and coding vocabulary. Presentations are not meant to be a judgment of your work or ability as each team will have different weaknesses and strengths. Presentations allow other members of the cohort to appreciate a different approach to solving a complex problem.
- Full team: show off your application's user interface (UI)
- First team member: What was your team's approach to solving this problem? Did the initial approach work out in the end?
- Second team member: What was the hardest thing about this project? What is your biggest takeaway?
- Third team member (if applicable): How did you manage the workflow in a group of three?