🍽️ Pop Eats

Background

The world is diverse in many different ways, but one thing that brings us all together, no matter what nation we may come from is food. Food is a comfort that can an entire community to the table, and with the endless varieties of spices, textures and flavors, every region of the world has found ways to perfect their cuisines in their own unique fashion. People from their respective nations have decided as a group what their top dish is and many countries have identified it as their national dish. Pop Eats is an interactive experience where the user will be able to hover over each country and learn what the national dish is for the respective country. The goal for this project is to spread the love of food and curiosity of culture and diversity to others. And to maybe even find a fun new dish to try!

Functionality and MVPs

In Pop_Eats, users will be able to:

• Use the cursor to use a the input to hover over an interactive map of the world
• Click on a country and view the country’s top dish

This project will also include:

• A production README file
• A modal describing how the page should be used

Technologies, Libraries, APIs

This project will use the following technologies:

• D3

• SVG Map

• HTML

• CSS

• JavaScript

  • As the project grows, I’d like to explore additional libraries, APIs, etc. that would potentially make the page more engaging. A stretch goal is to alter the fill of each state in a way that allows the flag colors to appear in each country’s outline.

My timeline is as follows:

• Friday/ Weekend:

  • Draw out a visual map for my desired result including hover features and facts that I want to display. Gather information, from APIs and libraries that are of interest and determine realistic day by day expectations in order to complete and optimize this project. Begin researching countries and laying frameworks.

• Monday/ Tuesday:

  • Build interface/ front end capabilities that engage event listeners, hovering, and overall HTML/ CSS for user visualization. Begin building out the backend.

• Wednesday/Thursday,

  • Finish building out the backend and include the country dishes, and if there is time, flags once hovered over the country.

Credit

• (SVG Map: https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json)

• (National Dish Data: https://raw.githubusercontent.com/samayo/country-json/master/src/country-by-national-dish.json)