Submitted / Description Under Review

[Christopher-Austin]

Project Name / Title MovieSearch

2 - 3 Sentence Project Description (Elevator Pitch) Search a movie API based on user input. It will return movie poster and description.

What is your motivation for creating this project? I love movies and building something on my own is an exciting idea.

How will users interact with your web site? There will be a search bar that the user can input a movie name. I would like it to be able to check spelling, projected search idea as you type would be cool.

What 3rd Party API(s) will you integrate with? Link to the API documentation here: http://www.omdbapi.com/ Tech Stack I will use Semantic UI. No 3rd Party js libraries. Will you try to implement any stretch features? What will be your process? What project management tool will you use? How often will you commit your code? Daily. How will you test your web site? I will test locally and when deployed I will have co-workers test it on their computers to make sure that it still looks good. How will you design the layout of your website? Will you use a wire framing tool? I will you draw it on paper? I will sketch it on paper, but am learning about wire frames.

Link to repo: https://github.com/Christopher-Austin/Movie-Search/blob/master/Project_Description_Template.md

[w3cj]

Looks good to me! Feel free to get started.

[w3cj]

Any updates to share?

[Christopher-Austin]

I have finished writing it. I am working on deploying to heroku

[Christopher-Austin]

http://moviesearchthing.herokuapp.com/ I am getting Application Error. The build is telling me it is good. 1st deployment and first self made project.

[Christopher-Austin]

site is loading but the API is not responding when a search is made on the site, locally it works fine.

[Christopher-Austin]

I think everything is working now. Should be good for review.

[w3cj]

UI Review

• [ ] Fonts choices are consistent

  • Choose a different font than times new roman.
  • Checkout google fonts and font pairings: https://fonts.google.com/?selection.family=Lora|Roboto&query=robot
    • https://www.reliablepsd.com/ultimate-google-font-pairings/
    • https://fontjoy.com/

• [ ] Loading indicators are shown when there is background processing (API requests, calculations etc.)

  • Did not see a loading message while movie was loading

• [x] Page responds nicely to different screen sizes

  • [x] Images resize accordingly
  • [x] Images maintain aspect ratio
  • [x] Columns break at smaller screen sizes

• You can try picking a color palette to find complementary colors. Something like this: https://coolors.co/048ba8-2e4057-99c24d-ff7f11-ff1b1c

[w3cj]

Code Review Checklist

README

• [ ] Readme includes instructions for running the project locally
  • Add * before each list item in the README to show as a list.

HTML

• [ ] Consistent Indentation
  • There are a few places where nested tags should be indented more.
  • You can try using prettier
• [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
• [ ] Uses semantic tags where available
  • Could use header and main. See this article for more: https://html.com/semantic-markup/
• [ ] Title / Header links back to home page
  • Use an anchor tag instead of click handler with javascript.
  • Anchor tag is better for accessibility
  • You can remove the default anchor tag styles with CSS.
• [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.
  • [ ] 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.
  • API_URL etc.
• [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.