Chingu Voyage Pre-Work Solo Project (Tier 1): Favorite Fonts

Overview

This project is a great opportunity to develop a clean and modern webpage. The Favorite Fonts app will be completed across tiers, with each tier adding a new level of complexity. You are currently on the Tier 1 repo. You'll be responsible for coding the HTML, CSS, and JavaScript to get the structure, styling, and some basic functionality up and running.

As you add skills to your developer toolbag you'll be able to come back to this project and add in the Tier 2 and Tier 3 features. Ultimately you'll have a great portfolio piece, and will have implemented a number of common and in-demand features.

No Frameworks, Libraries, or Code Generators May Be Used In This Tier

Instructions

Remember, this project must be completed with vanilla (plain) HTML, CSS, and JavaScript. Do not use front-end frameworks or libraries (JQuery, Bootstrap, etc.).

General instructions for all Pre-Work Projects can also be found in the Chingu Voyage Handbook (URL posted in the #read-me-first channel on Discord).

Requirements

Structure

• Header with minor navigation (Logo and Catalog/Featured/Articles/About link list)
• Nav with Major navigation / page-manipulation (search, custom text, font-size, dark/light mode, grid/list mode, and reset)
• Main section to contain the font cards
• Font cards which display the Font Name, the font creator, the sample text, and an add button
• Footer section with your developer information

Style

• Sample text in each card should be displayed in the corresponding font
• Buttons/links should be evident (make sure the cursor changes, etc.)
• Implement a way to handle overflow from sample text in font cards, as the font size is adjustable

Functionality

• Text typed into the custom text (type something) box should immediately change the sample text displayed in each font card
• The sample text should return to the default sample if the input box (type something) no longer has any input (ex. input == "")
• Font size chooser should have at least four sizes and should immediately change the sample text font size in each font card
• Implement the clickable 'reset' icon on the far right of the major navigation; it should make the page appear as if the user reloaded the page (do not actually reload the page)

Extras (Not Required)

• Include a back-to-top button that allows users to scroll to the top once the top of the page is out of view
• Make your design fully responsive (small/large/portrait/landscape, etc.)
• Implement the light/dark mode toggle buttons
• Implement the change display icon so you can flip between a grid and list layout for the font cards