Fortnite Tracker Submission

[ProxN]

Project Name / Title

FortTrack

Your Name / Title

ProxN

Project Description

An application where users can look on their fortnite stats, Leaderboards.

• https://github.com/ProxN/FortniteTracker

What 3rd Party Web API do you plan to use?

• https://fortnitetracker.com/site-api

Which of the following describes you:

• [x] YouTube Subscriber
• [ ] Twitch Follower
• [ ] Patreon Patron
• [ ] Superchat Donor
• [ ] Streamlabs Donor
• [ ] Coding Garden Moderator

[w3cj]

Looks good, but I'd like you to add a little bit more under the How will users interact with your web site? section.

Not much, but just something like:

1. User will be presented with a landing page
2. The user will enter their fortnite username and click submit.

You can take a look at some of the other open issues to get an idea what other people have done.

Update that and you're ready to start coding!

[w3cj]

How are things so far? Any updates to share?

[ProxN]

Almost done. I'm working on rendering user stats

[ProxN]

here my app: https://fortstats.netlify.com, fortnite user to try : gz_proxn still, need some fixes

[mahendrjy]

I like it. Statistics page looks amazing. I don't think that statistics bar thing is working. Is it ?

You should do

• Increase heading font size. You are using 14px haha. Make it 50px. It's a landing page.
• Add margin bottom - I think 50px will work
• Add margin top - 100px
• Remove heading background color

[w3cj]

Looks great! Would you like some UI / UX feedback or a code review?

[ProxN]

Thank you jakepintu, I did change font size and added a loader. w3cj Yes please if you can review both my design and code and thank you.

[mahendrjy]

Your welcome ProxN

[w3cj]

UI Review

Things I like

• Hover effect on title in navbar
• I like the suggestions provided when clicking in the search box
• Overall design is clean
• Color palette is great
• Full screen background image is a nice touch

Checklist

• [x] Fonts choices are consistent
• [x] Body font is good for reading
  • The stats font is a bit too small for me to read. I have to zoom in to be able to read it.
• [x] Loading indicators are shown when there is background processing (API requests, calculations etc.)
• [x] Page responds nicely to different screen sizes
  • [x] Images resize accordingly
  • [x] Images maintain aspect ratio
  • [x] Columns break at smaller screen sizes

[w3cj]

Code Review Checklist

README

• [x] Readme includes instructions for running the project locally

HTML

• [x] Consistent Indentation
• [x] Includes meta viewport tag for mobile devices
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
• [ ] CSS Links and Font Links are in the head of the document
  • Using Webpack / not applicable
• [x] JavaScript files are linked at the bottom of the page OR at the top with an onload function OR at the top with a defer attribute
• [x] Uses semantic tags where available
  • header, time, main, nav, article, section etc.
  • See this article for more: https://html.com/semantic-markup/
• [x] Title / Header links back to home page
• [x] No extra elements. Only includes the necessary elements to make things work.

JavaScript

• [x] Consistent semicolon usage. Either do or do not. There is no inbetween.
• [x] Consistent quote usage. Either ' or ", don't mix.
• [x] Consistent indentation.
• [x] Reasonable max line length. Wrap / reformat code when it gets too long.
• [x] Variable / Function names are clear and concise.
  • [x] No abbreviations.
• [x] Variable / Function naming convention is consistent.
  • camelCase or PascalCase or snake_case
• [x] Strings used more than once are in a variable.
  • Nice use of a config file
• [x] Functions are as few lines as possible. Code reads like a sentence.
• [x] Function names dictate intent.
• [x] Nested loops avoided where possible.
• [x] Functions take in a reasonable number of parameters. Ideally 3 or less params. Otherwise, use an options object.
• [x] No extra variables.
• [ ] console.logs are removed before deploying
  • In shopView.js there is a console.log

CSS

• [x] Consistent indentation
• [x] Consistent naming convention
  • [x] Uses app specific prefix where necessary
• [x] No duplicate styles. Re-use where applicable.

Code Suggestions

I didn't have time to look through everything, but here are few suggestions:

• In app.js the submit handlers can be cleaned up a bit:

elements.searchForm.addEventListener('submit', e => {
  e.preventDefault();
  const query = searchView.getInput();
  ControlSearch(query);
});
elements.searchNav.addEventListener('submit', e => {
  e.preventDefault();
  const query = searchView.getNavInput();
  ControlSearch(query);
});

Can be cleaned up by making a reusable function:

const addSearchSubmitHandler = (element, getQuery) => {
  element.addEventListener('submit', (e) => {
    e.preventDefault();
    const query = getQuery();
    ControlSearch(query);
  });
};

addSearchSubmitHandler(elements.searchForm, searchView.getInput);
addSearchSubmitHandler(elements.searchNav, searchView.getNavInput);

• The window click handler functions could be combined into a single click handler.

• In searchView.js it might make sense to clean up the renderOverviewStats function by setting the default subtitle and title. Something like this:

const topStats = {
  Wins: true,
  Score: true,
  Kills: true,
};

const renderOverviewStats = (key, value) => {
  let subtitle = 'Total';
  let title = key;
  if (key === 'K/d') {
    title = 'kills';
    subtitle = 'Per Death';
  } else if (key === 'Win%') {
    subtitle = 'Average';
    title = 'Win Rate';
  } else if (!(key in topStats)) {
    title = 'Matches';
    subtitle = 'Played';
  }
  //... more codes here...
};

[ProxN]

Thanks for review.