brittanyrw / emojibops Goto Github PK
View Code? Open in Web Editor NEWEmojiBops is a listing of songs depicted through emojis.
Home Page: https://emojibops.com
License: Other
EmojiBops is a listing of songs depicted through emojis.
Home Page: https://emojibops.com
License: Other
Add Can You Feel the Love Tonight by Lion King
Song Info: https://en.wikipedia.org/wiki/Can_You_Feel_the_Love_Tonight
Song Info: https://en.wikipedia.org/wiki/Ice_Ice_Baby
Add Diamonds by Rhianna
https://en.wikipedia.org/wiki/Diamonds_(Rihanna_song)
Song Info: https://en.wikipedia.org/wiki/Sk8er_Boi
Song Info: https://en.wikipedia.org/wiki/Black_or_White
Song Info: https://en.wikipedia.org/wiki/Lost_in_Japan
Song Link: https://en.wikipedia.org/wiki/Dancing_Queen
In the top of EmojiBops in the filters section, add a dropdown filter so that users can filter by years. The filter options should be by decades such as 1970s, 1980s, 1990s, 2010s, etc.
If there are no items that match the time period selected, a message should appear saying that no cards match the selected years.
Use the colors and styling currently on the website.
You can use the filters on EmojiScreen as an example of how filters can look, but the design does not have to look exactly like that.
Song Info: https://en.wikipedia.org/wiki/Barbie_Girl
Add E.T. by Katy Perry
Song Info: https://en.wikipedia.org/wiki/E.T._(song)
Add Juice by Lizzo to EmojiBops
Song Info: https://en.wikipedia.org/wiki/Thrift_Shop
Add Waving Through A Window to EmojiBops
Add Hot N Cold by Katy Perry
Song Info: https://en.wikipedia.org/wiki/Hot_n_Cold
Add a button on the homepage that will toggle showing and hiding the song name. This button will allow people to show all names if they just want to browse vs having to click on each card to see the name.
When you click on the button it should toggle, ie if I click and nothing is expanded, everything will expand and then when I click again, everything should hide again.
Wrecking Ball by Miley Cyrus
https://en.wikipedia.org/wiki/Wrecking_Ball_(Miley_Cyrus_song)
Right now the homepage layout is the same as EmojiScreen emojiscreen.com.
Diamonds are a Girls Best Friend by Gentlemen Prefer Blondes
https://en.wikipedia.org/wiki/Diamonds_Are_a_Girl%27s_Best_Friend
Add a search bar (above the emoji cards but below the header) so that users can find specific songs.
Add a timed game mode to EmojiBops. A timed game should allow users to try to guess as many cards as they can in a certain amount of time.
This game should be on a new page.
Here are some suggestions on how to structure this:
Add pagination to the homepage.
Similar to the attached image (design does NOT have to match the image, just showing what I mean by pagination).
In the top of EmojiBops in the filters section, add a dropdown filter so that users can filter by genre. The options for the filter should include all genres in the data.js file and also in the genres.md genre chart. The filter should be able to automatically pull any new genres someone adds to an emoji card in the future.
Use the colors and styling currently on the website.
You can use the filters on EmojiScreen as an example of how filters can look, but the design does not have to look exactly like that.
Song Info: https://en.wikipedia.org/wiki/1985_(song)
Add A Whole New World by Aladdin
Song Info: https://en.wikipedia.org/wiki/A_Whole_New_World
Make sure that EmojiBops is fully accessible.
Add a quiz game mode to EmojiBops. A quiz game should present users with a fixed number of cards and see how many they can guess correctly.
This game should be on a new page.
Here are some suggestions on how to structure this:
Song Link: https://en.wikipedia.org/wiki/Hotline_Bling
Like a Prayer by Madonna
https://en.wikipedia.org/wiki/Like_a_Prayer_(song)
Song Link: https://en.wikipedia.org/wiki/Bye_Bye_Bye
Song Info: https://en.wikipedia.org/wiki/DNA_(BTS_song)
Firework by Katy Perry
https://en.wikipedia.org/wiki/Firework_(song)
Link to other open source projects that I have created.
Add a link to EmojiScreen (https://emojiscreen.com) and EmojiPages (https://emojipages.com) somewhere on the homepage.
Right now it seems like the only logical place is the footer area but open to suggestions. Feel free to add in a quick wireframe or sketch of what you are thinking before you start coding.
Right now, the emoji cards (square with record) are a fixed size. On mobile, they are a little small. Make them larger so that they fill more of the screen on mobile.
This will involve adding a media query in the CSS and adding an additional fixed size or making the sizing more dynamic so that it will change based on the screen size.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.