Project 1 Feedback

Code Quality - Progressing

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 mostly well-formatted with semantic and sensible naming for the most part throughout.
Code is easy to read and understand.

Areas for Growth:

Both the HTML and CSS validators throw several errors and warnings. Please go through those and fix them using the W3 HTML/CSS validators!
In deployed code, there should be no commented-out code or console.logs(). Please be sure to go through and delete those before submitting projects in the future!
The HTML could make better use of semantic elements. There are a lot of div elements, some of which are super handy, but consider using HTML elements that provide a clue as to their meaning on the page, such as main and section. Here's a great quick guide to semantic HTML elements.
There are several instances in your JavaScript file where you can DRY up your code -- look for instances where you grabbing DOM elements manually and manipulating one at a time, instead of grabbing multiple and manipulating them dynamically.

Technical Requirements - Progressing

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 master branch -- this will keep you from having to worry about breaking the working code, and is a useful development practice to continue.

Areas for Growth:

GitHub repo shows an extensive history of commits, but work on the consistency of your commit message formatting and the descriptiveness of your message. The standard is usually 'present-tense verb + description of what was done' for each and every commit. 'Add feature' is probably a bit too generic. 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 - Progressing

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 colorful and engaging!
Nice use of modals!
App is quite responsiveness to various screen sizes, including mobile device widths.

Areas for Growth

I would steer away from using an alert to deliver user feedback, and instead use some type of DOM manipulation, such as a div overlay or a feedback section in the HTML.
I would continue to build out the design and flow of your application. As we were working together on the app, you remarked a couple of times that there were too many times the user had to click through things to progress, and I agree! Think about how you can automate things and let the user interact easily with your app.
Add a favicon to your site to round out the UI. 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 - Progressing

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.

Areas for Growth:

One bug I noticed is that the first question's answer choice doesn't seem to register as correct until you click it twice. This seems to occur with other questions as well.

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 technologies used, your wireframe, problems/hurdles, and user stories.

Areas for Growth:

Add a screenshot to showcase your design and make your Readme more engaging!
A couple areas in the Readme were missed -- see below.

Project Checklist: (Almost) Complete

[x] A game, built by you, hosted on Github Pages
[ ] Your HTML/CSS should pass the HTML5 Validator and CSS Validator ❌ -- please take a look at this and resolve the errors
[ ] 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). ❌ -- go through and remove the console.logs
[x] 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).
[x] A README.md file that includes the following sections:
- [ ] An embedded screenshot of the app ❌ -- quick fix
- [x] List of the Technologies used
- [ ] Installation instructions ❌ -- quick fix
- [x] Your User stories – who are your users, what do they want and why?
- [x] Your Wireframes – sketches of major views / interfaces in your application
- [x] 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. ❌ -- another easy fix:

Grade: Pass 🎉🎉🎉

Hi Tarsha! I've been meaning to get this more detailed feedback to you for a few days -- thanks for your patience! Great work on building out and completing this project to get it to passing. I know that it took a lot of persistence and determination to finish this project, and you did an excellent job. There are still a couple of items to address to make the code ready for presentation on your GitHub -- please see the checklist items above! Thanks for all your hard work throughout the class and let me know if you have any questions.

Esin,

Thanks for the feedback I will start working to make the game better with your these suggestions and positive feedback. Thank you Tasha

On Sun, Nov 1, 2020 at 3:30 PM Esin Saribudak notifications@github.com wrote:

Project 1 Feedback Code Quality - Progressing

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 mostly well-formatted with semantic and sensible naming for the most part throughout.

Code is easy to read and understand.

Areas for Growth:

Both the HTML and CSS validators throw several errors and warnings. Please go through those and fix them using the W3 HTML/CSS validators!

In deployed code, there should be no commented-out code or console.logs(). Please be sure to go through and delete those before submitting projects in the future!

The HTML could make better use of semantic elements. There are a lot of div elements, some of which are super handy, but consider using HTML elements that provide a clue as to their meaning on the page, such as main and section. Here's a great quick guide https://learn-the-web.algonquindesign.ca/topics/html-semantics-cheat-sheet/ to semantic HTML elements.

There are several instances in your JavaScript file where you can DRY up your code -- look for instances where you grabbing DOM elements manually and manipulating one at a time, instead of grabbing multiple and manipulating them dynamically.

Technical Requirements - Progressing

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 master branch -- this will keep you from having to worry about breaking the working code, and is a useful development practice to continue.

Areas for Growth:

GitHub repo shows an extensive history of commits, but work on the consistency of your commit message formatting and the descriptiveness of your message. The standard is usually 'present-tense verb + description of what was done' for each and every commit. 'Add feature' is probably a bit too generic. For example, 'Add styling to gameboard container' or 'Refactor API call'. This https://chris.beams.io/posts/git-commit/ is my favorite article on how to write good commit messages and why it's an important focus for developers.

Creativity and Interface - Progressing

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 colorful and engaging!

Nice use of modals!

App is quite responsiveness to various screen sizes, including mobile device widths.

Areas for Growth

I would steer away from using an alert to deliver user feedback, and instead use some type of DOM manipulation, such as a div overlay or a feedback section in the HTML.

I would continue to build out the design and flow of your application. As we were working together on the app, you remarked a couple of times that there were too many times the user had to click through things to progress, and I agree! Think about how you can automate things and let the user interact easily with your app.

Add a favicon to your site to round out the UI. This https://favicon.io/ 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 - Progressing

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.

Areas for Growth:

One bug I noticed is that the first question's answer choice doesn't seem to register as correct until you click it twice. This seems to occur with other questions as well.

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 technologies used, your wireframe, problems/hurdles, and user stories.

Areas for Growth:

Add a screenshot to showcase your design and make your Readme more engaging!

A couple areas in the Readme were missed -- see below.

Project Checklist: (Almost) Complete

A game, built by you, hosted on Github Pages

Your HTML/CSS should pass the HTML5 Validator and CSS Validator ❌ -- please take a look at this and resolve the errors

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). ❌ -- go through and remove the console.logs

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 ❌ -- quick fix

List of the Technologies used

Installation instructions ❌ -- quick fix

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. ❌ -- another easy fix:

https://camo.githubusercontent.com/74a5df90daf77c6cd352689d2d54ec7133b7080e/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f5755734f6c534e62506c4537324f75644a732f67697068792e676966 Grade: Pass 🎉🎉🎉

Hi Tarsha! I've been meaning to get this more detailed feedback to you for a few days -- thanks for your patience! Great work on building out and completing this project to get it to passing. I know that it took a lot of persistence and determination to finish this project, and you did an excellent job. There are still a couple of items to address to make the code ready for presentation on your GitHub -- please see the checklist items above! Thanks for all your hard work throughout the class and let me know if you have any questions.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Tarsha1/project-1/issues/1, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARCII63QJE6L72MAVBYNCSTSNXHOLANCNFSM4TGYJZKA .

Tarsha1 / project-1