MyLaunch Project Submission

[joshuaferr1s]

MyLaunch

Your Name / Title

Joshua Ferris

Project Description

For those interested in things that happened the day they were born this is perfect! Everyone loves space and so by entering your birthday (or any other date) you can find out if a rocket was launched the day you were born thanks to the Launch Library API

• https://github.com/joshuaferr1s/mylaunch/blob/master/PROJECT_DESCRIPTION.md

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

• Launch Library API

Which of the following describes you:

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

[joshuaferr1s]

Submitted for project description review.

[w3cj]

⭐️⭐️⭐️⭐️⭐️

Awesome!! Project description looks great.

Feel free to get started.

[joshuaferr1s]

Landing page is complete except for actual links to other pages which don't exist yet. Attached are some screenshots.

[joshuaferr1s]

I believe it is complete! Woot! It is available here

[w3cj]

Sweet! Would you like UI feedback or a code review?

[joshuaferr1s]

UI feedback would be good. I just chatted with the API maintainers and they gave me a cool idea for an addition to functionality 😄

[w3cj]

Cool!

Some feedback:

• The date picker is OS specific and is kind of hard to enter a birthday because you have to go back many years. Maybe you can have a dedicated year select, month select and day select?
• Could you possibly show launches a few days / weeks before / after a birthday? It's kind of sad to see that there are no launches on .
• Could you possibly show launches that are on the same month / day but in a different year than the user's birth year? Maybe we will see more results.

[joshuaferr1s]

• Yeah the date picker is my least favorite feature - thinking about making it just a regular input with a mask instead
• That was the feedback I got from the developers in regards to sad news about your birthday. They also told me they are missing a fair amount of historical data so unless you are pretty young you are out of luck. I am thinking of making multiple card lists as a result - your actual birthday (if there was one), your birthday on every year since. To list all since your birthday could lead to a LOT of results but would be cool.

[joshuaferr1s]

I updated the launch date picker UI and functionality on data return.

[w3cj]

I like it! It's a much nicer experience to at least get some result back.

[joshuaferr1s]

Yeah, I like what is has become. Actually useful and functional.

[joshuaferr1s]

Would love a UI/UX and code review :smile:

[w3cj]

UI Review

Things I Like

• Color scheme
• Love the about page. Very succinct.
• Links to video / more info open in a new tab.
• I like the rocket animation during loading
• I can see launches after my birthday if no launch found

Things to improve

• When clicking submit, remove previous results before loading next results.
• When clicking next for pagination, might scroll to the top
• Might have a separate input box for each: year, month, date; as the placeholder disapears after typing starts and the user might forget the order / format

Checklist

• [x] Fonts choices are consistent
• [x] Body font is good for reading
• [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
  • Might mention that we need a static file server, or to open index.html in the browser

HTML

• [x] Consistent Indentation
• [x] Includes meta viewport tag for mobile devices
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
• [x] CSS Links and Font Links are in the head of the document
• [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.
• [ ] Consistent quote usage. Either ' or ", don't mix.
  • Line 26 uses double quotes
• [ ] Consistent indentation.
  • The HTML indentation in the makeRocketElement function is a little off
• [ ] Reasonable max line length. Wrap / reformat code when it gets too long.
  • fetchRocketData has quite a few long lines
  • You might try putting the error message in reusable function to reduce line length
• [x] Variable / Function names are clear and concise.
  • [x] No abbreviations.
• [x] Variable / Function naming convention is consistent.
  • camelCase or PascalCase or snake_case
• [ ] Strings used more than once are in a variable.
  • Error messages can be put into variables
• [ ] Functions are as few lines as possible. Code reads like a sentence.
  • The fetchRocketData could pottentially be split into 1 or 2 functions.
• [ ] Function names dictate intent.
  • fetchRocketData function name is confusing compared with makeRocketFetch, fetchRocketData technically doesn't fetch it handles all the logic. Might think of a better name. @sk1nni in the chat suggests: prepareRocketLauch
• [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.
• [ ] No extra variables.
  • allBirthdayLaunchesPagination is unused.

CSS

• [x] Consistent indentation
• [x] Consistent naming convention
• [x] No duplicate styles. Re-use where applicable.

Suggested Refactor

A possible way to refactor the fetchRocketData function:

const makeRocketFetch = async (startDate, endDate, offset = 0) => {
  const response = await fetch(`${API_URL}${startDate}/${endDate}?limit=${FETCH_LIMIT}&offset=${offset}`);
  const data = await response.json();
  if (data.launches.length <= 0) {
    throw new Error(errorMessages.noLaunchesFoundForDate);
  }

  if (data.status === 'error' && data.msg === 'None found') {
    throw new Error(errorMessages.noLaunchesFoundLookBelow);
  }

  if (data.status === 'error') {
    throw new Error(data.msg);
  }

  if (data.launches.length <= 0) {
    throw new Error(errorMessages.noLaunchesFoundLookBelow);
  }
  return {
    ...data,
    startDate,
    endDate,
  };
};

const errorMessages = {
  noLaunchesFoundLookBelow: 'No launches found for your birthday. Look below however for every launch since your birthday.',
  noLaunchesFoundForDate: 'No launches found for that date.'
};

function getEndDate() {
  const curDate = new Date();
  const [year, month, day] = dateElement.value.split('-');
  const endDate = new Date(curDate.getFullYear(), curDate.getMonth(), curDate.getFullYear() === Number(year) && curDate.getMonth() + 1 === Number(month) ? Number(day) + 1 : Number(day));
  return endDate;
}

function addSearchResultToPage() {
  let nonMatches = 0;
  launchResponse.launches.forEach((launch) => {
    if (getFormattedDate(new Date(launch.net)) !== dateElement.value) {
      if (launchResponse.launches.length === 1) {
        throw new Error(errorMessages.noLaunchesFoundLookBelow);
      } else {
        nonMatches += 1;
        return;
      }
    } else {
      birthdayLaunchesContainer.innerHTML += makeRocketElement(launch);
    }
  });
  if (nonMatches === launchResponse.launches.length) throw new Error(errorMessages.noLaunchesFoundLookBelow);
}

const fetchRocketData = async () => {
  try {
    if (!dateElement.validity.valid) throw new Error(dateElement.validationMessage);
    logoElement.classList.toggle('animate', true);
    const endDate = getEndDate();
    launchResponse = await makeRocketFetch(dateElement.value, getFormattedDate(endDate));
    allLaunchesSince.style.display = '';
    updatePaginationButtons();
    updateDisplayedRockets();
    errorElement.classList.toggle('hidden', true);
    addSearchResultToPage();
  } catch (error) {
    birthdayLaunchesContainer.innerHTML = '';
    errorElement.classList.toggle('hidden', false);
    errorMessageElement.textContent = error.message;
  }
  logoElement.classList.toggle('animate', false);
};

[joshuaferr1s]

Thanks for the review! I have addressed the concerns you raised (hopefully) and updated the pagination display so it is easier on the eyes.