Code Monkey home page Code Monkey logo

emojipages's Introduction

EmojiPages πŸ“š

🚧 October 2 Update:

Due to the high volume of activity from Hacktoberfest we are pausing contributions to this project while we review the current backlog of Pull Requests and work on setting additional contribution limits. You will not be able to make any new Pull Requests or Issues at the moment. Please feel free to contribute to other projects on GitHub during this time. Thanks!

If you are working on an Issue, you can work on it in your forked repo and you will be able to create a Pull Request once we open this project again.

A listing of books and play depicted through emojis.

Visit emojipages.com

Screenshot of Emojipages homepage

This project were built to create a fun, judgement free space for those learning Git and Github to practice making pull requests, branches, adding features, and more. πŸ’› πŸ’™ πŸ’œ πŸ’š πŸ’–

Contributing 🎁

Below are instructions for how to contribute to this project. The easiest way to make a contribution is to add an Emoji Card to the website. This card should show a number of emojis that match a book or play.

For other ways to contribute, see the repo Issues under the label 'enhancement'. If you want to work on one of the features but aren't sure where to start, write a comment and I will be happy to help you out or get you started. You are also welcome to suggest other features by adding an Issue.

Contribution Guidlines

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

πŸ›‘ We are limiting contributions per person to 3 additions across EmojiScreen, EmojiBops and EmojiPages. (Updated Oct 1)

  • Please limit yourself to up to 3 additions across the three emoji projects. (Example One: Complete 1 feature, add two movies; Example Two: add three songs; Example Three: add one song, one movie and one book, etc). This is due to the high level of activity on these projects at the moment. We want to make sure many people have a chance to contribute. The limit will be lifted once the activity has died down. πŸ™‚

Check Issues and current Pull Requests before contributing to avoid adding duplicates.

  • If your Pull Request is a duplicate, we will let you know so that you can update it if you like.

If someone has commented inside of the Issue saying they are working on it, that item is reserved for them.

  • Please choose something else to add if someone else has already said they will add something. We will let you know if you accidently add something that someone else is assigned. It is easy to tell if someone is adding something accidently vs if they are ignoring our rules. We will mark Pull Requests as invalid (and therefore it will not count towards Hacktoberfest) if you are purposely creating multiple Pull Requests for Issues that someone else is assigned to or has reserved.

Please limit Pull Requests to adding a book/play, completing an Issue or adding a feature.

  • We are not accepting Pull Requests for things such as white space updates or README.md updates for Hacktoberfest. These types of Pull Requests will be marked as invalid.

Please do not approve or make suggestions on other people's Pull Requests.

  • We do not need additional maintainers at this time. To avoid confusion and incorrect approvals, only maintainers approve Pull Requests.

Please do not create Pull Requests for new features without creating an Issue first.

  • Do not start work on a new feature without getting confirmation from the maintainers via an Issue. We need to approve all new features first. This also goes for Issues that are for features, please wait for confirmation from the maintainers before working on those types of Issues.

If you want to work on one of the Issues to add a book

  • Please comment in the Issue so that others know to not add that book. You do not have to wait for confirmation for Issues adding books or plays before creating a Pull Request. Your comment will just help 'bookmark' the Issue for you to prevent duplicate Pull Requests.

If you want to work on one of the Issues that are labeled with enhancement

  • Please comment in the Issue and wait for confirmation before you start working on it.

Read below for a detailed overview and walkthrough on how to add an Emoji Card to this project. Please read all of the instructions before contributing! First time pull-requests are encouraged and you can make multiple pull requests if you desire. If you run into trouble, feel free to create an Issue!

Table of Contents

Choosing a Book or Play to Add

Here are some links to lists of books and plays in case you're having trouble thinking of something to add!

Book/Play Lists

Card Overview

On the website, each Emoji Card displays 1) images of the emojis, 2) a hint icon that will show the year the book was published (when the user hovers over the question mark) and 3) the name of the book (which appears when the user clicks on a card).

Screenshot of EmojiPages Items

In the data.js file, each Emoji Card consists of the following object:

{
    title: "The Devil Wears Prada",
    author: "Lauren Weisberger",
    emojiImgs: "πŸ˜ˆπŸ‘©πŸ»β€πŸ¦³πŸ‘ πŸ‘©πŸ»πŸ‘—πŸ‘›",
    genres: ["drama", "comedy","romance"],
    year: 2003
}

To add a new card to the website, add a new object in the data.js file. Make sure to separate your new object from existing objects with a comma. Below is an overview of each key in the Emoji Card object. Every key is required.

Title πŸ‘

Each card must have a title. This should be the full title.

{
  title: "The Devil Wears Prada",
}

Author πŸ“š

Add the author as a string. If there are multiple authors, include them all in one string such as author: "Author One, Author Two".

{
  author: "Lauren Weisberger",
}

Emojis 😍

The emojis should be added to emojiImgs as a string. Your emojis should be surrounded by double quotation marks.

Important Note: Add at least four emojis and a maxioum of six emojis for each card

{
  emojiImgs: "πŸ˜ˆπŸ‘©πŸ»β€πŸ¦³πŸ‘ πŸ‘©πŸ»πŸ‘—πŸ‘›",
}

Using JavaScript, the emojis are converted into Twemoji (Twitter's emoji version) so that all emojis will be uniform across platforms. And because they are pretty cute. πŸ’–

Here are a few resources to find emojis to copy:

  • Twitter Emojis - Shows you what each Twitter emoji looks like.
  • Get Emoji and EmojiCopy are tools to copy regular emojis easily from one page. Note: The initial homepage does not display all skin color versions of each emoji so you will need to search in Emojipedia for those.
  • Emojipedia - A directory of all emojis.

Note when you copy these emojis and paste them into your text editor or Github, they will no longer look like the Twitter emojis. But don't worry, Javascript will convert them to the Twitter emojis on the EmojiPages website.

Genres πŸ”

The genres should be added as an array (the square [] brackets indicates an array or list). Separate each genre with a comma and each genre should be wrapped in quotes. There is no limit to the number of genres but try not to add too many.

{
  genres: ["drama", "comedy","romance"],
}

Select your genres from this list of genres. If you want to use a genre that is not on this list, in your pull request please add the genre to the genres.md file.

If you need ideas for what genres to select, you can check the Wikipedia page for the book as well as the Goodreads page for the book to help you out.

Year πŸ“†

Specify the year the book was published. This should be a single number with no quotations around the year.

{
  year: 1994
}

Walkthrough

Follow these instructions to add a card. You can add a card using the Github website user interface or on your local machine. If you do not already have one, create a Github account before proceeding.

If you are already comfortable using Github and Git, feel free to skip the instructions below and make a pull request using whatever method you prefer!

Github UI

This method will use the Github website to contribute to this project. You will not need to download any programs to your computer using these instructions.

  1. Check the Issues and Pull Requests to see if the book you would like to add is listed. If it is not listed as an Issue or Pull Request, continue to the next step. If it is listed as an Issue or Pull Request already, please choose something else to add.
  2. Fork this repository. This will create a copy of the repository and create a new repository on your account. Note: the Fork button is located in the top right area of the repo.
  3. Once the repo is forked, you will be taken to the forked repo. Note: In the top left, the name of the repo should now include your username.
  4. Navigate to the data.js file in your forked repo by clicking on the file name.
  5. Edit the data.js file by clicking on the pencil icon and add a new object for your book or play in alphabetical order. Note: If the title starts with 'The' then use the next word for alphabetical order. Make sure there is a comma between your object and the object above and below. Refer to the card overview above for requirements for the different object keys.

Use the following object as a template:

{
    title: "The Devil Wears Prada",
    author: "Lauren Weisberger",
    emojiImgs: "πŸ˜ˆπŸ‘©πŸ»β€πŸ¦³πŸ‘ πŸ‘©πŸ»πŸ‘—πŸ‘›",
    genres: ["drama", "comedy","romance"],
    year: 2003
}
  1. Once you have completed updating the object for your book, scroll to the bottom of the page and add a commit message. The commit message should be formatted like: Added 1984 or Added all of the Harry Potter books. Click the Commit Changes button to save your changes.

Screenshot of creating a commit message on the Github website

  1. Navigate to the Pull Request tab. Click on New Pull Request.

Screenshot of a Pull Request on the Github website

  1. Review your changes and then click Create Pull Request. Add any additional comments, go through the checklist within the Pull Request and add an Issue number if applicable, then click on Create Pull Request.
  2. Wait for feedback/review of your Pull Request. Your code will be reviewed and if any changes need to be made, we will let you know. Once your pull request is accepted, you will be able to see your card at https://emojipages.com and you will officially have contributed to the project! πŸŽ‰

Local Development

This method will use your local machine to contribute to the project. This will require you to download multiple programs onto your computer. This is the method most programmers use when working on projects.

Required Downloads & Tools

  • Terminal (Mac OS) or Command Prompt. These are installed by default on your computer. Search for the program to open it. For Windows, Git Bash is recommended.
  • Git - This is a version control tool. For Windows, this download will include Git Bash.
  • A text editor such as Sublime Text, Atom, Visual Studio Code, etc.

Local Development Instructions

  1. Check the Issues and Pull Requests to see if the book you would like to add is listed. If it is not listed as an Issue or Pull Request, continue to the next step. If it is listed as an Issue or Pull Request already, please choose something else to add.
  2. Fork this repository. This will create a copy of the repository and create a new repository on your account.
  3. Once the repo is forked, you will be taken to the forked repo. Note: In the top left, the name of the repo should now include your username.
  4. Download the project to your computer. Click on the Clone or Download button. Copy the HTTPS github repo link.
  5. In your terminal, navigate to where you would like to save the project (such as cd Desktop). Run the following command in the terminal, replacing the following link with your copied link: git clone https://github.com/your-username-will-be-here/emojipages.git;
  6. After the command has been run, in the terminal, navigate into the EmojiPages project folder: cd emojipages.
  7. Open the emojipages project in your text editor of choice. Edit the data.js file and add a new object for your book or play in alphabetical order. Note: If the title starts with 'The' then use the next word for alphabetical order.. Make sure there is a comma between your object and the objects above and below. Refer to the card overview above for requirements for the different object keys. Make sure to save your file after you have made changes.

Use the following object as a template:

{
  title: "Matilda",
  author: "Roald Dahl",
  emojiImgs: "πŸ‘©β€πŸ«πŸ“šπŸ‘§πŸ¦ŽπŸŽ‚βœ¨",
  genres: ["children","fantasy"],
  year: 1988
}
  1. If you would like to see what your addition will look like, open the index.html file that is in the emojipages folder in a web browser. The EmojiCards are added in a random order so it may take you a few seconds to find what you added. If you do not see any cards in the browser, this could mean that you have a typo in your data.js file. If that is the case, double check what you have added for missing commas and quotation marks.
  2. Once you are done, go to the terminal and type git status. You should see data.js as modified. If you don't see this, go back and make sure to save your data.js file.
  3. Run git add -A to add your changes.
  4. Add a commit message. Run the following command and replace with your movie or show name: git commit -m "Added 1984 by George Orwell".
  5. If you have never used git on your computer before, you will see a message asking for you to set your email and username. If you do not see that message, continue to the next step. Run the following commands, replacing "[email protected]" with your Github email and "Your name" with your github username:

git config --global user.email "[email protected]"

git config --global user.name "Your Name"

Then re-run the commit command. Remember to replace with your book or play: git commit -m "Added 1984 by George Orwell"

  1. Run git push. If you have not done this before, git push will not run until you login to your Github account. Type in your Github username and password. NOTE: When you type your password, it will not show in the terminal. Press enter after you type your password to continue.

  2. Go to the Github website and navigate to the Pull Request tab. Click on New Pull Request.

Screenshot of a Pull Request on the Github website

  1. Review your changes and then click Create Pull Request. Add any additional comments, go through the checklist within the Pull Request and add an Issue number if applicable, then click on Create Pull Request.
  2. Wait for feedback/review of your Pull Request. Your code will be reviewed and if any changes need to be made, we will let you know. Once your pull request is accepted, you will be able to see your card at https://emojipages.com and you will officially have contributed to the project! πŸŽ‰

Other Resources and Options

Credits

πŸ’–Check out a list of all of the EmojiPages 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.

emojipages's People

Contributors

aaa530 avatar andakawa avatar brittanyrw avatar fang-sandy avatar james-bankston avatar klovering avatar kristenbyers avatar sejlaali avatar timwoo112 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.