solo-koala-128

Live: Favorite Fonts Website

Chingu Solo Project - Tier 1 - Favorite Fonts

Author

@maknetaRo - Magdalena Rosłaniec

Overview

This app was created in HTML, CSS and vanilla JavaScript. It’s a clone of Google Fonts. The website was created for the Chingu solo project.

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)

Other

• Your repo needs to have a robust README.md
• Make sure that there are no errors in the developer console before submitting

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