Project 1 Feedback

Code Quality - Performing

Criteria: Is the code well formatted? Are variable and function names semantic and sensible? Is the code easy to read and understand?

Strengths:

• Code is well-formatted with semantic and sensible naming throughout. No console.logs observed.
• Code is easy to read and understand.
• HTML and CSS both pass validators with no errors or major warnings! 💪
• I really like how your JS code is organized into sections and clearly labeled with good use of commenting !

Areas for Growth:

• There are some instances of commented-out code in your JS file. Be sure to remove those from deployed code in the future!
• One area to focus on would be DRY-ing up your JS code. For instance, how could you make your submitGuess function more dynamic, so that it accepts the input value and checks to see if it's anywhere in the word, rather than checking each letter one at a time?
• The HTML looks pretty good in terms of using semantic elements, such as using button elements appropriately, but there is always room to grow! There are a lot of div elements, some of which are super handy for your CSS art, but consider using HTML elements that provide a clue as to their function on the page, such as section. Here's a great quick guide to semantic HTML elements.

Technical Requirements - Performing

Criteria: How does the project stack up to the requirements for this project? Is the developer making use of the material we've covered in a way that makes sense?

Strengths:

• Your application meets all the technical requirements listed below! The app renders in the browser and no errors were observed in the console. Nice job getting your app deployed to GH Pages, and also having a VERY extensive history of commits dating back to the start of your project.
• Great job making use of Git Branches to work on code without affecting the main branch -- this will keep you from having to worry about breaking the working code, and is a useful development practice to continue.
• Amazing job using CSS to illustrate the game play! I'm really impressed.

Areas for Growth:

• GitHub repo shows an extensive history of commits, but work on the consistency of your commit message formatting. The standard is usually 'present-tense verb + description of what was done' for each and every commit. For example, 'Add styling to gameboard container' or 'Refactor API call'. This is my favorite article on how to write good commit messages and why it's an important focus for developers.

Creativity and Interface - Performing

Criteria: Is the application easy to navigate? Does it work well in every major browser? Is it responsive? Does it incorporate modern UI Themes?

Strengths:

• App is very easy to navigate and use. It renders great in Chrome and Safari.
• The UI is so charming, well-designed and mobile-friendly! Nice color scheme and engaging graphics. The flower's face after a wrong guess gets me every time!!!
• Great job using DOM manipulation to deliver user feedback rather than alerts.

Areas for Growth

• For the game instructions, go back and revisit how to implement that modal! That would be a much more polished way to convey instructions rather than the alert.
• Add a favicon to your site to round out the UI and eliminate the 404 error. This is my favorite site for quickly designing and generating favicons.
• Consider adding CSS reset code to remove browsers' default styles. This will make your app look more consistent across different browsers.

Functionality - Performing

Criteria: Does the application work without errors or bugs? Does it present a complete app, where every feature is fully implemented in a way that makes sense?

Strengths:

• The application works without any major errors or bugs.
• Application presents a complete game, with a clear beginning, middle, and end, as well as user feedback and the option to start over.
• Game reset does not manually refresh the page -- instead, DOM manipulation allows the user to start over.

Areas for Growth:

• The only bug I noticed is that users can enter the same letter repeatedly and lose the game. How could you add to the code so that the user can't select the same letter multiple times?
• I'm sure you got really close to making the mystery word dynamic and enterable by the user. Keep working on that and let me know if/how I can help!
• I loved your other ideas for stretch goals and have full faith that you can build those out!

Presentation - Performing

Criteria: Is there adequate documentation? Is the repository well organized and free of clutter?

Strengths:

• The README.md looks great! It includes your screenshot, technologies used, installation instructions, wireframes, challenges, and user stories.
• Nice job using the GH Projects board to organize your tasks for the sprint!

Areas for Growth:

• Consider organizing your images into their own image file to cut down on clutter in the repo. Alternatively, host the files on a service like imgur and use URLs for your image source. That will also cut down on the size of this repository, which was a bit hefty.
• Add your deployed URL to the About section of your GH repo:
  

Project Checklist: (Almost) Complete

• A game, built by you, hosted on Github Pages
• Your HTML/CSS should pass the HTML5 Validator and CSS Validator
• Your JavaScript should be cleanly formatted (use Prettier!) and not contain any console.logs (you can search for them with command + F [or ctrl + F on Windows/Ubuntu] and then remove them or comment them out).
• A git repository hosted on Github with frequent commits dating back to the very beginning of the project (at least one commit is required per day of the project).
• A README.md file that includes the following sections:
  • An embedded screenshot of the app
  • List of the Technologies used
  • Installation instructions
  • Your User stories – who are your users, what do they want and why?
  • Your Wireframes – sketches of major views / interfaces in your application
  • Descriptions of any Unsolved problems or major hurdles you had to overcome
• A link to your hosted project in the URL section of your Github repo. ❌ This is a quick fix, see above!

Grade: Pass 🎉🎉🎉

Gabriel, amazing work on this project! This is truly one of the most visually and artistically creative projects I've seen, and it always delights me when students really dive into CSS. Your code looks great as well, but definitely work on making your JS DRY-er and more dynamic, and getting that user-generated word functionality in place. I'm proud of everything you achieved in a very short sprint -- thank you for all your hard work and dedication to this class. Can't wait to see what you do next for Project 2!