ExploreMars Project Submission

[KaungKZ]

Project Name / Title

ExploreMars

Your Name / Title

Kaung Khant Zaw

Project Description

ExploreMars will let the users know the temperatures, Mars planet summary and random rover images on mars by selecting three different options.

• Link to your github repo / project description file:
  https://github.com/KaungKZ/ExploreMars

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

NASA and wiki API

• Link to the API documentation here:

https://www.mediawiki.org/wiki/API:Main_page
https://api.nasa.gov/

Which of the following describes you:

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

[KaungKZ]

Submitted for review. I will start to work on the project as soon as description and everything else is okay.

[w3cj]

Looks great. I really like the figma mockups too! Feel free to get started.

[KaungKZ]

Finished coding landing page (responsive).

https://exploremars.netlify.com/

Some UI designs will not work if you open in microsoft edge, uc browser or safari (not tested yet) as some codes are only supported by specific browsers right now and not 100 % ready and tested yet.

[w3cj]

Looking good! I like the font choice.

[KaungKZ]

Thanks !

[KaungKZ]

Just finished 80% of the project. Pretty much all are responsive and clickable. I would love to get some UI design and other needs to fix. Need to get done with go back to home button design, drop down list design and position and rovers images detail.
You can view the website live here

https://exploremars.netlify.com/

Question
When I test the website on my mobile chrome browser, the background images are not loading even after the data are displayed. They only display when I enter the website again after few seconds later. (the size of images are already reduced and not more than 100kb). But when I try testing with other browsers, the background images load. I don't know it's happening only to my mobile browser or my code error.

This is the first api project I've made, my codes might be messy and really long for you and I don't know how to split those js codes into multiple files yet. I hope you understand.

[mahendrjy]

I loved it. It's amazing.

Answer

It's working for me on my mobile chrome browser.

Solution

JavaScript Modules: From IIFEs to CommonJS to ES6 Modules by Tyler McGinnis

If it doesn't help, tell me, I will refactor your code and I will leave comments, so you can understand how it's working

[KaungKZ]

Thanks, I'll check it out.

[KaungKZ]

Project finished.

https://exploremars.netlify.com/

Let me know if you have any thoughts and suggestions to improve. I will try to improve the back to home button for mobile devices in the future.

[w3cj]

UI Review

• Fonts choices are consistent
• Body font is good for reading
• Loading indicators are shown when there is background processing (API requests, calculations etc.)
  • No loading indicator while loading about mars info
• Page responds nicely to different screen sizes
  • Images resize accordingly
    • Images maintain aspect ratio
  • Columns break at smaller screen sizes

[w3cj]

Code Review Checklist

README

• Readme includes instructions for running the project locally
  • There are no instructions for compiling the sass files.

HTML

• Consistent Indentation
• 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
• 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
• Uses semantic tags where available
  • Could use header tag.
  • Could use section / h1 for the landing page info
• Title / Header links back to home page
• No extra elements. Only includes the necessary elements to make things work.
  • There are quite a few extra divs. Could most likely get the same layout with less nested divs.

JavaScript

• Consistent semicolon usage. Either do or do not. There is no inbetween.
• Consistent quote usage. Either ' or ", don't mix.
• Consistent indentation.
• Reasonable max line length. Wrap / reformat code when it gets too long.
• Variable / Function names are clear and concise.
  • No abbreviations.
• Variable / Function naming convention is consistent.
  • camelCase or PascalCase or snake_case
• Strings used more than once are in a variable.
  • API_URL etc.
• Functions are as few lines as possible. Code reads like a sentence.
  • There are a few places with extra variables.
  • A few places where the code could be extracted to a re-usable function.
• Function names dictate intent.
• Nested loops avoided where possible.
• Functions take in a reasonable number of parameters. Ideally 3 or less params. Otherwise, use an options object.
• No extra variables.

CSS

• Consistent indentation
• Consistent naming convention
  • Uses app specific prefix where necessary
• No duplicate styles. Re-use where applicable.
  • Could benefit from a base css file with variables and imports with overrides in the app / main files.