SPORK.me is a site for reviewing and ranking grocery store items. Users would (theoretically) be able to visit the site to find reviews for their favorite foods and (hopefully) discover new ones! New foods could be added with users later adding their own product photos and reviews. Additionally, a forum would be present on the site for the users to discuss--food and stuff. Some form of social media interactions (following users, being "friends") would also be present. That's how it would work anyway.
What it actually is--is just the front page for a site like that. It pulls some hardcoded product data and dynamically adds that data to two lists. One being "Trending Products", which if the site was real would be products that a majority of users are interacting with over the span of a day/week/month/whatever. The other product list would be "New Products", which would be the most recent items added to the (currently non-existent) database. Towards the bottom of the page you would find currently trending forum topics (currently these are being stolen from the r/GroceryStores subreddit).
- A navigation menu that expands and collapses properly at desktop and mobile sizes, such as by switching between vertical and horizontal styles, or is opened and closed by clicking the “hamburger” icon.
- Use Flexbox or CSS Grid to organize content areas based on mobile or desktop views. Simply applying a basic flex property so that text wraps as you change screen sizes does not count. You must actually rearrange content or perform some more advanced feature. For example, swapping from a single column layout to a two-column layout on a desktop.
- Use “:nth-child” or “nth-of-type” to style a series of elements on your page - for example, change the background color for every other row in a table.
- Create a JavaScript function that performs some form of mathematical operation (calculates something) and displays the result on your page or otherwise uses that value to do something on the site.
- Create and populate a JavaScript array with one or more values and display the contents of some or all of the array on your page.
- Create a Javascript loop that dynamically displays HTML on your page - for example displaying a number of list items <li> based on how many times you loop.
- Create at least 3 variables (var, const, or let), set their values in JavaScript, and display the values somewhere on your page.
- Create one or more JavaScript objects (such as with multiple values contained in { }’s), modify at least one value of that object, and display it on your site.
- Show/hide one or more content areas or elements on your site through clicking a button or some other user interaction - must be done with some JavaScript code.