rockettown1/gfont-clone-challenge

Bug fixing and feature addition challenge I give to junior devs at Code Nation

gfont-clone-challenge's Issues

Feature: Showing CSS information

When you click on the red plus symbol, a box should appear from the bottom with the following CSS information:

The import statement to add the font to a CSS file, and the font family information.
eg:

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
font-family: 'Roboto', sans-serif;

This information is available from the Google fonts website.

You can style it however you want, as long as it contains the correct information for each font.

(Optional) Make all text visible

For some of the fonts, there is some overflow in the text area causing a vertical scroll bar (because the text area doesn't fit all the text in it).

Can you make the text reduce in size to ensure that all the text is visible in the text area?

Feature: Change all text simultaneously

When you start typing in one of the text boxes, a button should appear which allows you to apply the text you type to every box.

See the google font's website for a working example:

CSS information should be visible on screen

It should be immediately obvious what a button does (from a user's point of view).

When a user clicks the red plus icon, something should happen on screen.

Present the CSS information either in a pop up, sidebar or overlay. Your choice

Feature: there needs to be at least 10 fonts displayed

At the moment only 4 fonts are shown. Increase that to 10.

You can decide what fonts you use.

There should only be one 'Apply to All' button on the screen

There should only be on "apply to all" button on the screen at any one time.

If I select a font to edit, but then select a 2nd font to edit - the button on the previous font should be removed.

Feature: Add a Navbar to the page

Implement a navbar on the page which contains a search bar.

When you type in the name of a font, it should display only that font box

Red plus icons should only be able to control their own font information.

When you click on a red icon, it should only be able to toggle it's own font information on the screen.

Current situation:
If you click the icon on one font - it will show the css information for that font.
If you then click the icon on a different font - it will close the css information for the previous font.

From a user's point of view - when the red icon is clicked it should show the CSS info for that font (and that is it's only job)