My newest project. Feedback please!

Code Feedback
1

I have finished building my app to help anyone find the best font for their next project! You can cycle through all the fonts, select the weight and size, type anything you want to preview the text (updated in real time) and then if you like the font you can get it with the click of a button!

Font Me Up

Please mess around with my creation and give me all the feedback you can!

One day I want to be able to use an API from google fonts to create a more streamlined version where i don’t hardcode everything myself. But i dont understand fetch and that stuff yet so its a work in progress on that one

1 Like
2

I like it! maybe you can make it so that clicking get font button will have font pre-selected with correct font-weight.

3

Technically the link takes you to the page where you can select any and all weights you please. But I’ll look into it thank you for the feedback!

4

Any more feedback is very welcome

5

Pretty cool project!! I would prefer to make the output section’s height to match the text within it because it is kinda big and takes up quite a bit of space.
the background is a bit too dark and doesn’t really match with the other stuff.

6

There is a button to engage day mode at the top of the screen!

7

The three section headers should be highlighted somehow to offset them as not actually being one of the selectable fonts.

8

What are you viewing the page on? The 3 categories should be highlighted different colours on a computer. On my iPhone they aren’t but I’m not sure how to change the select menu colours for an iPhone if anyone has any knowledge

9

I’m on a MacBook Pro, Sierra with latest Chrome

Edit:
So I tried it with Firefox and Safari too. Firefox is the only one where I see the categories highlighted by color.
But problem with being able to select those three headers prevails across all three browsers.

10

An enhancement you can think about incorporating.

If I click on the ‘Get this font’ button w/out having selected anything I still get a pop-up that says “Nice Choice!” etc. Of course when click the Get Font button I get your 404 page. Think about possibly checking to see that at a minimum the Select a Font field is filled in prior to activating the ‘Get this Font’ button.

Edit:
Btw, I failed to mention that this is pretty cool. A good project that you thought of to challenge yourself. And one that will go through multiple versions and releases as your learning progresses.
I posted something similar for a project I’ve been working on. It shows the three stages it’s gone through so far and I mentioned the enhancement I have in mind for the next.

I didn’t look to see if google fonts has an API that you can use or if you’ll have to use fetch but it’s cool that you’re already looking forward. Keep it up.

11

Thanks for all the feedback! I will begin diving into solutions for those. The one about the color not showing up is very weird. I am using bootstrap 4 as the front end framework so it should work across all browsers. I will look into that as well

12

Not sure if you’ve used Bootstrap 3 previously and are now using 4 so I’ll mention that they’ve changed some class names from 3 to 4. Especially the nav. If you’re using 4 as you say but still using a call from 3 you won’t get what you expect.

One thing I had done for myself when I was first playing with (trying to learn) Bootstrap was to make a few pages. I started with 3 because v4 was just in beta. I then tried creating those pages with the beta and damn, so many things were broken until I went in and read the docs and discovered the class name changes.

Keep us posted with your progress.

13

@Roma I have been trying to come to a solution for your idea. Here is what I have come up with, though it doesn’t work so I need advice

$button.on(‘click’, function (event) {
let fontValue = $font.val().toLowerCase();

    if (fontValue === 0 || 1 || 2 || 3) {
        alert("No Font Selected");
        $('#fontInfoModal').modal('hide');
    } else {
        $('#fontInfoModal').modal('show');
    }
});

I gave the font categories a value of 0 through 3. If the current value of the font when you click the first button is one of these numbers, it should alert you and stop the modal pop-up. if the value is not 0 through 3, the modal should show and the program will continue as before.

Do you see anything wrong with this code? To my eyes it should work

Thanks

14

I’m still learning myself but I think your if statement should be;
(fontValue === 0 || fontValue === 1 || fontValue === 2 || fontValue === 3)

15

Ya you are correct! I’m trying too hard to rush through everything. I need to slow down and think sometimes haha

1 Like
16

@Roma Alright I have coded it, loaded it up and its done! I went with a different solution in the end. I decided to change the data-target of the button to a separate modal window based on the current font value. This is what I went with

$button.on(‘click’, function (e) {
let fontValue = $font.val().toLowerCase();

    if (fontValue === "select font" || fontValue === "serif fonts" || fontValue === "sans fonts" || fontValue === "display fonts") {
        $button.attr('data-target', '#fontInfoModalFail');
    } else {
        $button.attr('data-target', '#fontInfoModal');
    }
});

Check it out and play around with it

http://fontmeup.surge.sh/

Having a blast figuring out all these issues

17

@gogocodesmedia I like this solution better. Nice job

18

Yes, there’s an API for Google Fonts, see Developer API  |  Google Fonts  |  Google for Developers. Google’s actually got 231 APIs.

19

4 stars, Simple and Creative.