├── LICENSE ├── CODEOWNERS ├── favicon.ico ├── readme ├── .DS_Store ├── commit-ui.png ├── pull-request.png ├── emojibop-commit.png ├── emojipages-card.png ├── emojibop-pullrequest.png └── emojipages-screenshot.png ├── README.md ├── .github └── ISSUE_TEMPLATE │ ├── add-a-book-or-play.md │ ├── feature_request.md │ └── bug_report.md ├── genres.md ├── docs ├── github_ui_walkthrough.md ├── local_dev_walkthrough.md └── card_overview.md ├── index.html ├── CODE_OF_CONDUCT.md ├── main.css ├── app.js └── data.js /LICENSE: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @brittanyrw -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brittanyrw/emojipages/HEAD/favicon.ico -------------------------------------------------------------------------------- /readme/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brittanyrw/emojipages/HEAD/readme/.DS_Store -------------------------------------------------------------------------------- /readme/commit-ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brittanyrw/emojipages/HEAD/readme/commit-ui.png -------------------------------------------------------------------------------- /readme/pull-request.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brittanyrw/emojipages/HEAD/readme/pull-request.png -------------------------------------------------------------------------------- /readme/emojibop-commit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brittanyrw/emojipages/HEAD/readme/emojibop-commit.png -------------------------------------------------------------------------------- /readme/emojipages-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brittanyrw/emojipages/HEAD/readme/emojipages-card.png -------------------------------------------------------------------------------- /readme/emojibop-pullrequest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brittanyrw/emojipages/HEAD/readme/emojibop-pullrequest.png -------------------------------------------------------------------------------- /readme/emojipages-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brittanyrw/emojipages/HEAD/readme/emojipages-screenshot.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # EmojiPages 📚 2 | 3 | ## A listing of books and play depicted through emojis. 4 | 5 | [Visit emojipages.com](https://emojipages.com) 6 | 7 | ![Screenshot of Emojipages homepage](readme/emojipages-screenshot.png) 8 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/add-a-book-or-play.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Add a Book or Play 3 | about: Suggest a book or play to be added 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Name of Book or Play** 11 | List the name of the show or movie here 12 | 13 | **Have you confirmed that this has not already been added to the project?** 14 | Check the data.js file, Issues and Pull Requests to make sure you are not adding a duplicate. 15 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /genres.md: -------------------------------------------------------------------------------- 1 | # Genres 2 | 3 | Select genres from the list below. If you would like to add a genre not listed, edit this file with your new genre and include it in your pull request. Add new genres in alphabetical order. 4 | 5 | * action-and-adventure 6 | * adventure 7 | * animals 8 | * autobiography 9 | * biography 10 | * childrens 11 | * classic 12 | * comedy 13 | * comic-book 14 | * crime 15 | * diary 16 | * drama 17 | * dystopian 18 | * fairytale 19 | * fantasy 20 | * feminism 21 | * fiction 22 | * futuristic 23 | * historical-fiction 24 | * horror 25 | * magical-realism 26 | * mystery 27 | * political-thriller 28 | * post-apocalyptic-fiction 29 | * romance 30 | * satire 31 | * science 32 | * science-fiction 33 | * space 34 | * suspense 35 | * thriller 36 | * tragedy 37 | * true-crime 38 | * war 39 | * young-adult 40 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /docs/github_ui_walkthrough.md: -------------------------------------------------------------------------------- 1 | ## GitHub Website 2 | > This is a walkthrough of how to add an `Emoji Card` to this project. 3 | 4 | ### 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. 5 | 6 | 1. Check the [Issues](https://github.com/brittanyrw/emojibops/labels/add%20books) to find a song to add. Find an Issue that has not been assigned to someone and comment inside of that Issue asking to work on it. Make sure the Issue does not have a `needs review` label. This label means that the Issue has been added by someone that is not a maintainer and has not been approved yet. Once the Issue has been assigned to you, continue to the next step. Wait until you are assigned before continuing. If there are no open Issues, please check the project later for new Issues. Only add a card if you are assigned an Issue. 7 | 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. 8 | 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. 9 | 4. Navigate to the `data.js` file in your forked repo by clicking on the file name. 10 | 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. Make sure there is a comma between your object and the object above and below. Refer to [the card overview section](/card_overview.md) for requirements for the different object keys. 11 | 12 | Use the following object as a template: 13 | 14 | ``` 15 | { 16 | title: "The Devil Wears Prada", 17 | author: "Lauren Weisberger", 18 | emojiImgs: "😈👩🏻‍🦳👠👩🏻👗👛", 19 | genres: ["drama", "comedy","romance"], 20 | year: 2003, 21 | itemLink: "https://www.goodreads.com/book/show/5139.The_Devil_Wears_Prada" 22 | } 23 | ``` 24 | 25 | 6. 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. 26 | 27 | ![Screenshot of creating a commit message on the Github website](../readme/commit-ui.png) 28 | 29 | 7. Navigate to the `Pull Request` tab. Click on New `Pull Request`. 30 | 31 | ![Screenshot of a Pull Request on the Github website](../readme/pull-request.png) 32 | 33 | 8. Review your changes and then click `Create Pull Request`. Review the [Pull Request checklist](/docs/card_overview.md#card-pull-request-checklist) to check that you have completed everything for your `Emoji Card`. Then click on `Create Pull Request`. 34 | 9. 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](https://emojipages.com) and you will officially have contributed to the project! 🎉 35 | 36 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | 15 | EmojiPages 16 | 18 | 19 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |
29 |

EmojiPages

30 |
31 |
32 |

A listing of books depicted through emojis. 💖

34 |

Click on the emojis to reveal the book name, year and author!

35 |
36 | 37 | 38 | View Books on Goodreads 39 | 40 |
41 |
42 |
43 |

Want to add to EmojiPages? Head to Github! ✨

45 | Contribute 46 |
47 |
48 |
49 |
50 |
51 | Filter By Genre: 52 |
53 |
54 | 57 |
58 |
59 |
60 |
61 | 64 |
65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies within all project spaces, and it also applies when 49 | an individual is representing the project or its community in public spaces. 50 | Examples of representing a project or community include using an official 51 | project e-mail address, posting via an official social media account, or acting 52 | as an appointed representative at an online or offline event. Representation of 53 | a project may be further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at hello@brittanywalker.io. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /docs/local_dev_walkthrough.md: -------------------------------------------------------------------------------- 1 | ## Local Development 2 | 3 | ### 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. 4 | 5 | ### Required Downloads & Tools 6 | 7 | - 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](https://gitforwindows.org/) is recommended.** 8 | - [Git](https://git-scm.com/downloads) - This is a version control tool. For Windows, this download will include Git Bash. 9 | - A text editor such as [Sublime Text](https://www.sublimetext.com/), [Atom](https://atom.io/), [Visual Studio Code](https://code.visualstudio.com/download), etc. 10 | 11 | ### Local Development Instructions 12 | 13 | 1. Check the [Issues](https://github.com/brittanyrw/emojipages/issues?q=is%3Aopen+is%3Aissue+label%3A%22Add+Book%22) and [Pull Requests](https://github.com/brittanyrw/emojipages/pulls) 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. 14 | 2. Fork this repository. This will create a copy of the repository and create a new repository on your account. 15 | 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. 16 | 4. Download the project to your computer. Click on the `Clone or Download` button. Copy the HTTPS github repo link. 17 | 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`; 18 | 6. After the command has been run, in the terminal, navigate into the EmojiPages project folder: `cd emojipages`. 19 | 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. Make sure there is a comma between your object and the objects above and below. Refer to [the card overview section](/card_overview.md) for requirements for the different object keys. Make sure to save your file after you have made changes. 20 | 21 | Use the following object as a template: 22 | 23 | ``` 24 | { 25 | title: "Matilda", 26 | author: "Roald Dahl", 27 | emojiImgs: "👩‍🏫📚👧🦎🎂✨", 28 | genres: ["children","fantasy"], 29 | year: 1988, 30 | itemLink: "https://www.goodreads.com/book/show/39988.Matilda" 31 | } 32 | ``` 33 | 34 | 8. 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. 35 | 9. 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. 36 | 10. Run `git add -A` to add your changes. 37 | 11. Add a commit message. Run the following command and replace with your book name: `git commit -m "Added 1984 by George Orwell"`. 38 | 12. 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 "you@example.com" with your Github email and "Your name" with your github username: 39 | 40 | `git config --global user.email "you@example.com"` 41 | 42 | `git config --global user.name "Your Name"` 43 | 44 | Then re-run the commit command. Remember to replace with your book or play: `git commit -m "Added 1984 by George Orwell"` 45 | 46 | 13. 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**. 47 | 48 | 14. Go to the Github website and navigate to the `Pull Request` tab. Click on New `Pull Request`. 49 | 50 | ![Screenshot of a Pull Request on the Github website](../readme/pull-request.png) 51 | 52 | 15. 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`. 53 | 16. 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](https://emojipages.com) and you will officially have contributed to the project! 🎉 54 | -------------------------------------------------------------------------------- /docs/card_overview.md: -------------------------------------------------------------------------------- 1 | ## Card Overview 2 | 3 | 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). 4 | 5 | ![Screenshot of EmojiPages Items](../readme/emojipages-card.png) 6 | 7 | In the `data.js` file, each `Emoji Card` consists of the following object: 8 | 9 | ``` 10 | { 11 | title: "The Devil Wears Prada", 12 | author: "Lauren Weisberger", 13 | emojiImgs: "😈👩🏻‍🦳👠👩🏻👗👛", 14 | genres: ["drama", "comedy","romance"], 15 | year: 2003, 16 | itemLink: "https://www.goodreads.com/book/show/5139.The_Devil_Wears_Prada" 17 | } 18 | ``` 19 | 20 | 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. 21 | 22 | ### Title 👍 23 | 24 | Each card must have a title. This should be the full title. 25 | 26 | ``` 27 | { 28 | title: "The Devil Wears Prada", 29 | } 30 | ``` 31 | 32 | ### Author 📚 33 | 34 | Add the author as a string. If there are multiple authors, include them all in one string such as `author: "Author One, Author Two"`. 35 | 36 | ``` 37 | { 38 | author: "Lauren Weisberger", 39 | } 40 | ``` 41 | 42 | ### Emojis 😍 43 | 44 | The emojis should be added to `emojiImgs` as a string. Your emojis should be surrounded by double quotation marks. 45 | 46 | ## **Important Note: Add at least four emojis and a maximum of six emojis for each card** 47 | 48 | ``` 49 | { 50 | emojiImgs: "😈👩🏻‍🦳👠👩🏻👗👛", 51 | } 52 | ``` 53 | 54 | Using JavaScript, the emojis are converted into [Twemoji (Twitter's emoji version)](https://github.com/twitter/twemoji) so that all emojis will be uniform across platforms. And because they are pretty cute. 💖 55 | 56 | Here are a few resources to find emojis to copy: 57 | 58 | - [Twitter Emojis](https://www.piliapp.com/twitter-symbols/) - Shows you what each Twitter emoji looks like. 59 | - [Get Emoji](https://getemoji.com/) and [EmojiCopy](https://www.emojicopy.com/) 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. 60 | - [Emojipedia](https://emojipedia.org/) - A directory of all emojis. 61 | 62 | 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. 63 | 64 | ### Genres 🔍 65 | 66 | 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. 67 | 68 | ``` 69 | { 70 | genres: ["drama", "comedy","romance"], 71 | } 72 | ``` 73 | 74 | Select your genres [from this list of genres](https://github.com/brittanyrw/emojipages/blob/master/genres.md). 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. 75 | 76 | If you need ideas for what genres to select, you can check the Wikipedia page for the book as well as the [Goodreads](https://www.goodreads.com/) page for the book to help you out. 77 | 78 | ### Year 📆 79 | 80 | Specify the year the book was published. This should be a single number with no quotations around the year. 81 | 82 | ``` 83 | { 84 | year: 2003 85 | } 86 | ``` 87 | 88 | ### Link 🔗 89 | 90 | A link to the book on [Good Reads](https://www.goodreads.com) should be added as a string under `itemLink`. It will be used for users to go to that page and know more details about the book. 91 | 92 | ``` 93 | { 94 | itemLink: "https://www.goodreads.com/book/show/5139.The_Devil_Wears_Prada" 95 | } 96 | ``` 97 | 98 | # Card Pull Request Checklist 99 | 100 | Follow the checklist below when working on adding a card. This will help you double check that you have everything you need to have your Pull Request approved. 101 | 102 | - [ ] 🔎 Have searched the `data.js` file and `Pull Requests` to make sure that you are not adding a duplicate. 103 | - [ ] 🖍️ The new books(s) or play(s) have been placed in alphabetical order based on `title` inside of the `data.js` file. 104 | - [ ] 👍 The pull request has a descriptive title (such as `Added Matilda` or `Added all of Jane Austen's books`) 105 | - [ ] 4️⃣ There are at least four emojis listed under `emojiImgs` 106 | - [ ] 6️⃣ There are a maximum of six emojis listed under `emojiImgs`. 107 | - [ ] ⭐ The genres are all inside of square brackets `[ ]` and each are individually wrapped in quotation marks and have a comma between each one. (such as submitting this `"genres": ["fantasy", "children", "adventure"]` and not this `"genres":["fantasy, children, adventure"]`). 108 | - [ ] 💜 The genres used are from this [genre.md](https://github.com/brittanyrw/emojipages/blob/master/genres.md) file. If the genres you want to use are not in this file already, add them in the file in alpabetical order. 109 | - [ ] 📅 There is a single year under `year`. 110 | - [ ] 🔗 There is link to the book on [Good Reads](https://www.goodreads.com) under `itemLink`. 111 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | *, *:before, *:after { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | background-color: #3c3a4a; 7 | padding: 40px; 8 | font-family: 'Open Sans', sans-serif; 9 | margin: 0; 10 | } 11 | .book-links { 12 | display: block; 13 | margin-top: 8px; 14 | } 15 | 16 | .book-links-item { 17 | border: 3px solid #352649; 18 | padding: 8px; 19 | margin-right: 8px; 20 | margin-top: 8px; 21 | color: #352649; 22 | font-weight: 600; 23 | text-decoration: none; 24 | display: inline-block; 25 | } 26 | 27 | .book-links-item i { 28 | background: none; 29 | margin-right: 8px; 30 | font-size: 20px; 31 | color: #3c3a4a; 32 | } 33 | 34 | header { 35 | max-width: 1000px; 36 | margin: 0 auto; 37 | } 38 | 39 | 40 | h1 { 41 | font-family: 'Kreon', serif; 42 | font-size: 72px; 43 | margin: 0; 44 | color: white; 45 | } 46 | 47 | @media screen and (max-width: 667px){ 48 | h1 { 49 | font-size: 50px; 50 | } 51 | } 52 | 53 | header img { 54 | height: 29px; 55 | } 56 | 57 | .heading-content { 58 | display: grid; 59 | grid-template-columns: 1fr; 60 | grid-gap: 20px; 61 | } 62 | 63 | @media screen and (min-width: 662px){ 64 | .heading-content { 65 | grid-template-columns: 2.5fr 1fr; 66 | } 67 | } 68 | 69 | .contribute-callout { 70 | padding: 0 20px 20px 20px; 71 | margin: 20px 0 0 0; 72 | border: 3px solid #F19A98; 73 | } 74 | 75 | .contribute-callout p { 76 | color: white; 77 | text-align: center; 78 | } 79 | 80 | .contribute-callout a { 81 | color: #3c3a4a; 82 | background-color: #F19A98; 83 | padding: 15px; 84 | font-weight: 900; 85 | text-align: center; 86 | text-decoration: none; 87 | text-transform: uppercase; 88 | display: block; 89 | transition: .5s; 90 | } 91 | 92 | .contribute-callout a:hover { 93 | background-color: #F8CB45; 94 | transition: .5s; 95 | } 96 | 97 | .contribute-callout img { 98 | height: 27px; 99 | } 100 | 101 | .header { 102 | background-color: #FEF6ED; 103 | margin: 20px 0 0 0; 104 | border: 1px solid #FEF6ED; 105 | padding: 10px 20px; 106 | } 107 | 108 | h2 { 109 | color: #3c3a4a; 110 | } 111 | 112 | /* Filters styles */ 113 | .filters { 114 | max-width: 1000px; 115 | margin: 20px auto 40px auto; 116 | padding: 10px; 117 | font-size: 25px; 118 | color: white; 119 | display: flex; 120 | flex-flow: row wrap; 121 | align-items: center; 122 | } 123 | 124 | .filters-heading { 125 | padding-right: 5px; 126 | } 127 | 128 | .filters-options { 129 | padding: 0 10px; 130 | position: relative; 131 | } 132 | 133 | .filters-options select { 134 | font-size: 20px; 135 | padding: 5px; 136 | width: 100%; 137 | -webkit-appearance: none; 138 | -moz-appearance: none; 139 | } 140 | 141 | #genre-filter { 142 | border-radius: 0; 143 | border: 0; 144 | padding: 10px 20px; 145 | background-color: white; 146 | position: relative; 147 | } 148 | 149 | .filters-options:after { 150 | font-family: "Font Awesome 5 Free"; 151 | font-weight: 900; 152 | content: "\f0dc"; 153 | display: inline-block; 154 | font-style: normal; 155 | font-variant: normal; 156 | text-rendering: auto; 157 | -webkit-font-smoothing: antialiased; 158 | color: #3c3a4a; 159 | position: absolute; 160 | right: 17px; 161 | top: 8px; 162 | } 163 | 164 | @media screen and (max-width: 460px) { 165 | .filters { 166 | justify-content: center; 167 | } 168 | 169 | .filters-options { 170 | width: 100%; 171 | } 172 | } 173 | 174 | #books { 175 | display: grid; 176 | grid-template-columns: 1fr; 177 | grid-auto-rows: auto; 178 | grid-gap: 30px; 179 | max-width: 1000px; 180 | margin: 30px auto; 181 | grid-template-rows: min-content; 182 | } 183 | 184 | @media screen and (min-width: 425px){ 185 | #books { 186 | grid-template-columns: 1fr 1fr; 187 | } 188 | } 189 | 190 | @media screen and (min-width: 662px){ 191 | #books { 192 | grid-template-columns: 1fr 1fr 1fr; 193 | } 194 | } 195 | 196 | /* @media screen and (min-width: 992px){ 197 | #books { 198 | grid-template-columns: 1fr 1fr 1fr; 199 | } 200 | } */ 201 | 202 | @media screen and (min-width: 992px){ 203 | #books { 204 | grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 205 | } 206 | #books .emoji-card { 207 | max-width: 175px; 208 | } 209 | } 210 | 211 | .emoji-card { 212 | display: inline-block; 213 | text-align: center; 214 | border-radius: 5px; 215 | position: relative; 216 | } 217 | 218 | @media screen and (max-width: 425px){ 219 | .emoji-card { 220 | margin: 0 15%; 221 | } 222 | } 223 | 224 | .emoji-card-wrapper { 225 | position: relative; 226 | } 227 | 228 | 229 | .emoji-images { 230 | box-shadow: 5px 5px 10px rgba(0,0,0,.1); 231 | position: relative; 232 | background-color: white; 233 | padding: 20px 15px 20px 20px; 234 | cursor: pointer; 235 | display: flex; 236 | justify-content: center; 237 | align-items: center; 238 | flex-wrap: wrap; 239 | border-left: 15px solid #F19A98; 240 | min-height: 215px; 241 | } 242 | 243 | .emoji-images:after { 244 | position: absolute; 245 | content: ''; 246 | height: 22px; 247 | width: 29px; 248 | background: #F19A98; 249 | top: -11px; 250 | left: 15px; 251 | z-index: -1; 252 | } 253 | 254 | .emoji-images img { 255 | width: 49px; 256 | margin-right: 5px; 257 | margin-bottom: 10px; 258 | } 259 | 260 | .emoji-images img:last-child { 261 | margin-right: 0; 262 | } 263 | 264 | .emoji-card-title { 265 | box-shadow: 5px 5px 10px rgba(0,0,0,.1); 266 | transition:all .2s; 267 | transition: visibility 0s, height 0s, opacity 0.5s linear; 268 | margin-top: 10px; 269 | margin: 0; 270 | background-color: #e8afae; 271 | border-top: 5px solid #3c3a4a; 272 | } 273 | 274 | .emoji-card:nth-child(2n) .hint, 275 | .emoji-card:nth-child(2n) .emoji-images:after { 276 | background-color: #70D0AB; 277 | } 278 | 279 | .emoji-card:nth-child(2n) .emoji-card-title { 280 | background-color: #9BEAD1; 281 | } 282 | 283 | .emoji-card:nth-child(3n) .hint, 284 | .emoji-card:nth-child(3n) .emoji-images:after { 285 | background-color: #7C62EF; 286 | } 287 | 288 | .emoji-card:nth-child(3n) .emoji-card-title { 289 | background-color: #a797ec; 290 | } 291 | 292 | .emoji-card:nth-child(4n) .hint, 293 | .emoji-card:nth-child(4n) .emoji-images:after { 294 | background-color: #F8CB45; 295 | } 296 | 297 | .emoji-card:nth-child(4n) .emoji-card-title { 298 | background-color: #f7d46e; 299 | } 300 | 301 | .emoji-card:nth-child(2n) .emoji-images{ 302 | border-left: 15px solid #70D0AB; 303 | } 304 | 305 | .emoji-card:nth-child(3n) .emoji-images{ 306 | border-left: 15px solid #7C62EF; 307 | } 308 | 309 | .emoji-card:nth-child(4n) .emoji-images{ 310 | border-left: 15px solid #F8CB45; 311 | } 312 | 313 | 314 | .emoji-card-title h3 { 315 | margin: 0; 316 | } 317 | 318 | .emoji-card-title a { 319 | color: black; 320 | text-decoration: none; 321 | font-size: 16.5px; 322 | font-weight: 700; 323 | } 324 | 325 | .title-content { 326 | padding: 20px; 327 | text-align: left; 328 | cursor: initial; 329 | } 330 | 331 | .title-content h4 { 332 | margin: 5px auto 0 auto; 333 | font-weight: normal; 334 | } 335 | 336 | .hide-card { 337 | opacity: 0; 338 | height: 0; 339 | visibility: hidden; 340 | transition: visibility 0s, opacity 0.5s linear; 341 | padding: 0; 342 | } 343 | 344 | .reveal-card { 345 | opacity: 1; 346 | visibility: visible; 347 | display: block; 348 | } 349 | 350 | .hint-container { 351 | position: absolute; 352 | right: -2px; 353 | top: 2px; 354 | height: 30px; 355 | width: 30px; 356 | overflow: visible; 357 | z-index: 9999; 358 | } 359 | 360 | i { 361 | font-size: 17px; 362 | background-color: white; 363 | border-radius: 50%; 364 | color: #3c3a4a; 365 | } 366 | 367 | .hint-symbol { 368 | background-color: #3c3a4a; 369 | height: 20px; 370 | width: 20px; 371 | border-radius: 50%; 372 | } 373 | 374 | .hint { 375 | opacity: 0; 376 | visibility: hidden; 377 | display: block; 378 | background-color: #F19A98; 379 | color: #3c3a4a; 380 | text-transform: capitalize; 381 | width: 100px; 382 | padding: 3px; 383 | border-radius: 5px; 384 | position: absolute; 385 | left: -82px; 386 | top: -30px; 387 | z-index: -1; 388 | border: 2px solid #3c3a4a; 389 | } 390 | 391 | .hint-reveal { 392 | opacity: 1; 393 | visibility: visible; 394 | } 395 | 396 | footer { 397 | text-align: center; 398 | max-width: 1000px; 399 | margin: auto; 400 | border-top: 1px solid white; 401 | padding-top: 20px; 402 | } 403 | 404 | footer p { 405 | line-height: 26px; 406 | color: white; 407 | font-size: 18px; 408 | } 409 | 410 | footer span { 411 | font-weight: bold; 412 | letter-spacing: 0.5px; 413 | color: #F8CB45; 414 | } 415 | 416 | footer img { 417 | height: 19px; 418 | } 419 | 420 | #message { 421 | display: none; 422 | max-width: 1000px; 423 | margin: auto; 424 | } 425 | 426 | #message p { 427 | color: white; 428 | font-size: 18px; 429 | text-align: center; 430 | } 431 | 432 | /* General modifier for hiding elements */ 433 | .is-hidden { 434 | display: none; 435 | } 436 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | // Create a variable for the container to hold the emoji cards. 3 | var emojiCardContainer = $("#books"); 4 | 5 | // This array will store all the genre filter options 6 | var genreFilters = []; 7 | 8 | // Create a variable for the emoji cards. 9 | var emojiCard = ""; 10 | 11 | // Run the random order function below on the data inside data.js. This will display the cards in a random order on the page every time the page is refreshed. 12 | shuffle(emojiItems); 13 | 14 | // Loop through the data from the data.js file and insert parts of the data into HTML. On each loop, we are appending a new card with the HTML below. 15 | for (var i in emojiItems) { 16 | 17 | // Add the genres to the genre filters array 18 | addFilter(genreFilters, emojiItems[i].genres); 19 | 20 | emojiCard += 21 | "

" + emojiItems[i].year + 22 | "

" + emojiItems[i].emojiImgs + 23 | "
"; 24 | 25 | emojiCard += "
"; 26 | emojiCard += renderTitle(emojiItems[i]); 27 | emojiCard += "

" + emojiItems[i].author + "

"; 28 | 29 | emojiCard += "
"; 30 | } 31 | 32 | // Add the filters from the genres.md file 33 | addFilterFromGenres(genreFilters, initGenreFilter); 34 | 35 | // Append the emoji card variable, which has all of the emoji cards to the initial variable we created that was for the container to hold the cards. 36 | emojiCardContainer.html(emojiCard); 37 | 38 | // Run Twemoji to change all emojis to Twitter emojis. 39 | twemoji.parse(document.body); 40 | 41 | // Add the count of number of shows/movies to the footer. 42 | $("footer span").append(emojiItems.length); 43 | 44 | // Display movies and show in a random order, the random order will refresh on page reload. This function is used above before the cards are rendered on the page. 45 | function shuffle(array) { 46 | var currentIndex = array.length, 47 | temporaryValue, 48 | randomIndex; 49 | 50 | while (currentIndex !== 0) { 51 | randomIndex = Math.floor(Math.random() * currentIndex); 52 | currentIndex -= 1; 53 | temporaryValue = array[currentIndex]; 54 | array[currentIndex] = array[randomIndex]; 55 | array[randomIndex] = temporaryValue; 56 | } 57 | 58 | return array; 59 | } 60 | 61 | /** 62 | * Add a filter option to the passed filter array 63 | * @param {string[]} filterArray The filter array to push the filter in 64 | * @param {string | string[]} filter The filter or filters to add in the array 65 | */ 66 | function addFilter(filterArray, filter) { 67 | // Check that the filterArray is passed and it is an array 68 | if (filterArray && Array.isArray(filterArray)) { 69 | 70 | // Check that the filter is passed 71 | if (typeof filter !== "undefined") { 72 | 73 | // Check if filter is an array or string 74 | if (Array.isArray(filter)) { 75 | // Loop through the filter to add in the filterArray 76 | for (var i = 0, len = filter.length; i < len; i++) { 77 | // Store the filter that will be added 78 | var filterToAdd = filter[i]; 79 | 80 | // Check that the filter is not empty and add it to the filterArray 81 | if (filterToAdd && filterToAdd !== "") { 82 | // Check that the filter array doesnt have the filter to be added 83 | if (!filterArray.includes(filterToAdd)) { 84 | // Add the filter to the filterArray 85 | filterArray.push(filterToAdd); 86 | } 87 | } 88 | } 89 | } else { 90 | // Filter is not an array. Check if it is not an empty string 91 | if (filter !== "") { 92 | // Check that the filter array doesnt have the filter to be added 93 | if (!filterArray.includes(filter)) { 94 | // Add the filter to the filter Array 95 | filterArray.push(filter); 96 | } 97 | } 98 | } 99 | 100 | filterArray.sort(function (a, b) { 101 | return sortAlphabetical(a, b, true); 102 | }); 103 | 104 | } else { 105 | // Else throw an error 106 | throw new Error("addFilter: filter should be passed as an argument"); 107 | } 108 | 109 | } else { 110 | // Else throw an error 111 | throw new Error("addFilter: filterArray should be passed and be an array"); 112 | } 113 | } 114 | 115 | /** 116 | * Render the item's title, it may include a link if `itemLink` is present in the 117 | * item 118 | * 119 | * @param {{title: string, year: int, itemLink: string|undefined}} emojiItem 120 | * 121 | * @returns {string} 122 | */ 123 | function renderTitle(emojiItem) { 124 | var title = "

" + emojiItem.title + " (" + emojiItem.year + ")" + "

"; 125 | 126 | if (emojiItem.itemLink) { 127 | return "" + title + ""; 128 | } 129 | 130 | return title; 131 | } 132 | 133 | /** 134 | * This function will make an ajax request to read the genres.md file and add filters to the genre filters array 135 | */ 136 | function addFilterFromGenres(genreFilters, onComplete) { 137 | $.ajax({ 138 | url: "/genres.md", 139 | dataType: "text", 140 | /** 141 | * This function will run when the ajax request is successfull 142 | * @param {string} res The response from the ajax request 143 | */ 144 | success: function (res) { 145 | // Get the filters array by spliting the text response and filtering the lines that start with an asterisk 146 | var filtersArray = res.split("\n").filter(function (resLine) { 147 | if (/^\*/.test(resLine)) { 148 | return true; 149 | } 150 | }).map(function (filter) { 151 | // Remove the asterisk and the spaces from the filters 152 | return filter.replace(/\*|\s/g, "").toLowerCase(); 153 | }); 154 | 155 | // Add the filters to the genre filters 156 | addFilter(genreFilters, filtersArray); 157 | }, 158 | // This a callback that will be called after the request has been completed 159 | complete: onComplete 160 | }); 161 | } 162 | 163 | /** 164 | * This function will initialize the genre filter options 165 | */ 166 | function initGenreFilter() { 167 | // Get the genre filter element 168 | var genreFilterElement = $("#genre-filter"); 169 | 170 | // Loop through all of the genre filters 171 | for (var i = 0, len = genreFilters.length; i < len; i++) { 172 | // Create a text to display as filters 173 | var text = genreFilters[i].replace(/-/g, " "); 174 | text = text.charAt(0).toUpperCase() + text.slice(1); 175 | 176 | // Add an option to the genre filter element 177 | genreFilterElement.append($("