brittanyrw / emojiscreen

EmojiScreen is a listing of movies, TV shows and musicals depicted through emojis.

EmojiScreen 📺

A listing of movies, TV shows and musicals depicted through emojis.

Visit emojiscreen.com

Contributing Guidelines 🎁

Below are some guidelines to follow when contributing to this project.

Adding a Movie, TV show or Musical

To add a show or movie to this project, you will need to first check the project in the movies.js, tv.js, or musicals.js files to make sure that the movie or show you would like to add is not already in the project. Once you confirm the item you want to add is not already in the project, open an Issue stating what you would like to add. Once you get approval for the Issue, move on to adding your item to the code.

You will add an Emoji Card inside of the movies.js, tv.js, or musicals.js files in the data folder. Each file is made up of an array (a list) of objects. You will add a new object for your show or movie into the appropriate file. Please note: The musicals.js file is for live musicals (such as Broadway and West End shows). Movie musicals should be added to the movies.js file.

Below is an example of what a show looks like on the website:

In the emoji JavaScript files, each Emoji Card consists of the following object:

{
  title: "Beauty and the Beast",
  emojiImgs: "🏰🥀🎶📚🕰️",
  genres: ["animation", "family", "fantasy"],
  itemLink: "https://www.imdb.com/title/tt0101414/",
  type: "movie",
  year: 1991
}

Required reading:

View the Card Overview for details on each part of the emoji object.

Walkthroughs

Below are detailed walkthroughs on how to add a show or movie to EmojiScreen.

• Add a show or movie via GitHub website (no downloads required)
• Add a show or movie using your local development environment (downloads required, most commonly used way to contribute)

Adding or Updating Features Contributions

• Find an Issue that you would like to complete or create an Issue if you have an idea for a new feature.
• If someone is already assigned an Issue, please move on to another Issue. If the Issue has not been assigned, comment inside of the Issue stating that you would like to work on that item. If you are not assigned to an Issue, your PR will not be accepted for that Issue.
• After you receive confirmation, complete the Issue and submit a Pull Request.

🚨 Wait for confirmation from the maintainers before working on the Issue. If you submit a PR without being assigned an Issue for a feature, your PR will be closed and you will not be assigned the Issue.

If you would like to suggest a new feature, create an Issue and outline what it is you think should be added or updated. This project was created to help beginners, so keep that in mind when suggesting new things. Wait for confirmation before working on the Issue.

⭐️ Important Notes

• The Card Overview includes all of the instructions for adding a show or movie.
• Search the movies.js, tv.js, or musicals.js files and current open pull requests to make sure you are not adding a duplicate.
• Make sure your emojis actually depict the show or movie. Someone should be able to guess what the show or movie is based on the emojis you choose.
• If you are adding multiple items, please include them in one pull request.
• Go through this checklist to make sure you have added everything needed for a show or movie.

Git and GitHub Resources

• Git Handbook
• Additional Git/Github Practice
• Visualizing Git Commands Tool
• Try creating a new branch for your pull request.
• Syncing your Fork

Credits

💖Check out a list of all of the EmojiScreen contributors.

Emoji graphics are by Twitter and are licensed under CC-BY 4.0. Review the Attribution Requirements for more information.

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

emojiscreen's Issues

Add Alice in Wonderland (Movie)

Add Alice in Wonderland to EmojiScreen.

Link: https://www.imdb.com/title/tt0043274/

Add ER (TV Show)

Add ER to Emojiscreen.
Link: https://www.imdb.com/title/tt0108757/

Add Forrest Gump (Movie)

Add Forrest Gump to EmojiScreen.
Link: https://www.imdb.com/title/tt0109830/

Organize the README - Add a link to contributors in the Credit section of the README

Here is the link that you should add: https://github.com/brittanyrw/emojiscreen/graphs/contributors

The README has a lot of examples already for how to add a link. But you can also refer to this Markdown cheat sheet for help: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

Add pagination to the homepage

Add pagination to limit the number of cards that appear on the homepage.

Add a timed game mode

Add a game mode page where users will try to guess as many cards as they can within a specific time limit.

Required:

• Need to add an input that would check the user guess against the emoji card title

Add all of the Avengers series movies and review existing Avengers cards

Make sure that all of the Avengers movies (just the ones titled Avengers, check the Issues for more Marvel movies) have been added to EmojiScreen and review the emojis in existing ones to make sure they make sense/are descriptive enough for people to guess when we have game mode created.

• The Avengers (2012)
 - https://www.imdb.com/title/tt0848228/?ref_=ttls_li_tt
• Avengers: Age of Ultron (2015)
 - https://www.imdb.com/title/tt2395427/?ref_=ttls_li_tt
• Avengers: Infinity War (2018) - https://www.imdb.com/title/tt4154756/?ref_=ttls_li_tt
• Avengers: Endgame (2019) - https://www.imdb.com/title/tt4154796/?ref_=ttls_li_tt

Add filters so that users filter by genre, year and type

Add dropdown or button filters (which will use genre, year and type in the emoji object data) to the top of the homepage.

The filters should look similar to the attached.

Add all of the Star Wars movies to EmojiScreen and review existing Star Wars cards

Make sure that all of the Star Wars movies have been added to EmojiScreen and review the emojis in existing ones to make sure they make sense/are descriptive enough for people to guess when we have game mode created.

List of Star Wars movies: https://www.imdb.com/list/ls070150896/

Add an expand all cards button to the homepage.

Right now on the homepage, to see the name of the show or movie, the user has to click on the card. Create a button that will allow users to expand or collapse all cards at once.

Add all of the Harry Potter movies to EmojiScreen and review existing Harry Potter cards

Make sure that all of the Harry Potter movies have been added to EmojiScreen and review the emojis in existing ones to make sure they make sense/are descriptive enough for people to guess when we have game mode created.

List of Harry Potter movies: https://www.imdb.com/list/ls022302521/

Add Hercules (Movie)

Add Hercules to EmojiScreen.

Link: https://www.imdb.com/title/tt0119282/

Add all of the Shrek movies and review existing Shrek cards

Make sure that all of the main Shrek movies have been added to EmojiScreen and review the emojis in existing ones to make sure they make sense/are descriptive enough for people to guess when we have game mode created.

List of Shrek movies: https://www.imdb.com/list/ls033913829/

Add Dumbo (Movie)

Add Dumbo to EmojiScreen.

Link: https://www.imdb.com/title/tt0033563/

Add Orange is the New Black (TV)

Add Orange is the New Black to EmojiScreen.

Link: https://www.imdb.com/title/tt2372162/

Add all of the Lord of the Rings movies and review existing Lord of the Rings cards

Make sure that all of the main Lord of the Rings movies have been added to EmojiScreen and review the emojis in existing ones to make sure they make sense/are descriptive enough for people to guess when we have game mode created.

List of Lord of the Rings movies: https://www.imdb.com/list/ls025552264/

Add Dr. Who (TV Show)

Add Dr. Who to EmojiScreen.
Link: https://www.imdb.com/title/tt0436992/

Add Friends (TV Show)

Add Friends to EmojiScreen.
Link: https://www.imdb.com/title/tt0108778/

Add Mean Girls (Movie)

Add Mean Girls to EmojiScreen.

Link: https://www.imdb.com/title/tt0377092/

Add Pinocchio (Movie)

Add Pinocchio to EmojiScreen.

Link: https://www.imdb.com/title/tt0032910/

Add Dreamgirls (Musical)

Add Dreamgirls to EmojiScreen.

Link: http://www.playbill.com/production/dreamgirls-imperial-theatre-vault-0000006038

Organize CSS file

Organize the main.css file and add comments so that it is easy to tell what CSS goes with each section of the website.

Render emojis in random order on homepage

Add a function to the JavaScript that will render the emoji cards randomly. Right now, the cards display in the same order that they show up in data.json

Movie Dates - Find errors in the data.js file

A few movies have the incorrect date listed in the data.js file. Update these dates to the correct ones.

Add all of the Spider-Man movies and review existing Spider-Man cards

Make sure that all of the main Spider-Man movies have been added to EmojiScreen and review the emojis in existing ones to make sure they make sense/are descriptive enough for people to guess when we have game mode created.

List of Spider-Man movies: https://www.imdb.com/list/ls068354783/

Make sure shows and movies have at least three emojis

Go through the data.js file and make sure every movie and show has at least three emojis.

Mobile styling updates

Make sure that the styling looks great on more screen sizes.
For example, here is a screenshot of iPhone 5:

On all screens, the emojis should all fit on one line.

Add a search bar under the filters on the EmojiScreen homepage

Add a search bar so that users can search for specific movies or shows on the homepage.

Add Bring it On (Movie)

Add Bring it on to EmojiScreen.

Link: https://www.imdb.com/title/tt0204946/

Add Hairspray (Musical)

Add Hairspray to EmojiScreen.

Link: http://www.playbill.com/production/hairspray-neil-simon-theatre-vault-0000000844

Organize the README - Show Examples Section

The README is very detailed but very long, let's break out some of the sections into their own markdown (md) files and link that file to the README.md file.

• Create a new file named Examples.md.
• Take the entire 'Movie, TV Show and Musical Examples' section and add it to the new file.
• In the README, add a link to the Examples.md you have created in place of the previous walkthrough section. Also include a sentence explaining what the link is for.
• Bonus: (optional) Add additional resources to help people find a movie, TV or musical to add to the list.

Here is a resource for links in Markdown: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#links
Here is resource for linking Markdown files to each other: https://github.blog/2013-01-31-relative-links-in-markup-files/

Add Buffy the Vampire Slayer (TV)

Add Buffy the Vampire Slayer to EmojiScreen.

Link: https://www.imdb.com/title/tt0118276/

Accessibility Updates

Update HTML to make cards accessible

Reorganize the app file structure so that all shows/movies are not in one JSON file

Right now, all of the data is pulling from one file data.json. As more items are added, this could end up being a very large file. Should think about ways to break out the data into multiple files.

Changing this could also help with avoiding conflicts.

Some ideas:

• Create folders for movies, tv and musicals. Inside each folder have a JSON file.

• Create folders for movies, tv and musicals. Inside each folder, have each individual show be a separate file.

Add Bambi (Movie)

Add Bambi to EmojiScreen.

Link: https://www.imdb.com/title/tt0034492/

Add Law and Order (TV Show)

Add Law and Order to EmojiScreen.
Link: https://www.imdb.com/title/tt0098844/

Add all of the Toy Story movies and review existing Toy Story cards

Make sure that all of the main Toy Story movies have been added to EmojiScreen and review the emojis in existing ones to make sure they make sense/are descriptive enough for people to guess when we have game mode created.

List of Toy Story movies: https://www.imdb.com/list/ls031270247/

Organize the README - Resources Section

The README is very detailed but very long, let's break out some of the sections into their own markdown (md) files and link that file to the README.md file.

• Create a new file named Resources.md.
• Take the entire 'Resources & Opinions' section and add it to the new file.
• In the README, add a link to the Resources.md you have created in place of the previous walkthrough section. Also include a sentence explaining what the link is for.
• Bonus: (optional) Add additional Git and Github resources to this file.

Here is a resource for links in Markdown: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#links
Here is resource for linking Markdown files to each other: https://github.blog/2013-01-31-relative-links-in-markup-files/

Add the Office (TV)

Add the Office to EmojiScreen.

Link: https://www.imdb.com/title/tt0386676/

Add High School Musical (Movie)

Add High School Musical to EmojiScreen.

Link: https://www.imdb.com/title/tt0475293/

Add Harry Potter and the Goblet of Fire

Add The Little Mermaid (Movie)

Add The Little Mermaid to EmojiScreen.

Link: https://www.imdb.com/title/tt0097757

Add a button to toggle between light and dark theme

Add a button (probably in the top right of the page) that will toggle on a dark and light theme.

If you are updating the CSS/styling, make sure that the dark theme works with dark-colored emojis.

Add all of the Pirates of the Caribbean movies and review existing Pirates of the Caribbean cards

Make sure that all of the main Pirates of the Caribbean movies have been added to EmojiScreen and review the emojis in existing ones to make sure they make sense/are descriptive enough for people to guess when we have game mode created.

List of Pirates of the Caribbean movies: https://www.imdb.com/list/ls023657263/

Add Cinderella (Movie)

Add Cinderella to EmojiScreen.

Link: https://www.imdb.com/title/tt0042332/

Add a quiz game mode

Add a game mode where users will try to guess emoji cards within a certain number. Such as how many can they guess out of 20.

Add Supernatural (TV)

Add Supernatural to EmojiScreen.

Link: https://www.imdb.com/title/tt0460681/

Add difficulty for each card in data.json

For game mode, we should allow for users to chose various difficulty levels.
Inside of the data.json file, we need to add a new item to each object called difficulty, which should be a string.

See example:

{
 "title":"A Star is Born",
 "emojiImgs":"🎤👩👨🎸⭐",
 "genres":[
  "action",
  "comedy",
  "musical"
 ],
 "type":"movie",
 "year":1994,
 "difficulty": "medium"
}

Come up with a criteria for difficulty. It could be, if there are 4 or more emojis, it is easy. If there are three it is medium and if there are one or two it is hard. Or it could be some other criteria. Feel free to run it by me here in the issue before you update code if you would like.

Add difficulty to the current items in the data.json file based on your criteria once that is figured out. And then add a section in the README under Card Overview that explains what difficulty is and what the criteria is.

Add all of the Hunger Games movies and review existing Hunger Games cards

Make sure that all of the main Hunger Games movies have been added to EmojiScreen and review the emojis in existing ones to make sure they make sense/are descriptive enough for people to guess when we have game mode created.

List of Hunger Games movies: https://www.imdb.com/list/ls079078551/

Organize the README - Walkthrough Section

The README is very detailed but very long, let's break out some of the sections into their own markdown (md) files and link that file to the README.md file.

• Create a new file named Walkthrough.md.
• Take the entire 'Walkthrough' section and add it to the new file.
• In the README, add a link to the Walkthrough.md you have created in place of the previous walkthrough section. Also include a sentence explaining what the link is for.

Here is a resource for links in Markdown: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#links
Here is resource for linking Markdown files to each other: https://github.blog/2013-01-31-relative-links-in-markup-files/