All solutions

What are you most proud of, and what would you do differently next time?

This was incredibly difficult. The CSS was hard for me in terms of layering the color of the stats container, the image within it, and the records over the image.

The JavaScript was also quite difficult in terms of how to use the specificity of nested arrays to locate content.

Lastly, while I got the project to work, per see, I could not get the values from the JSON file to stay in perpetuity on the DOM - the values flash on the screen when the stat option is selected from the user bar.

What challenges did you encounter, and how did you overcome them?

1. Layering the stat container, stat image, report container, and the report content all as one object.

2. Getting the JSON values to stay in perpetuity in the DOM when a stat option button gets clicked.

What specific areas of your project would you like help with?

Any help is welcome, but mostly I'm hoping to get help with the JSON values staying on the screen when the stat option button gets clicked.

What are you most proud of, and what would you do differently next time?

This project was hard for me but I am very proud of completing it. The most difficult part for me was trying to get the functionality of the email component to test if: A. a proper email was entered B. If not, do not directly go to the success page but instead show the email error message on the main page.

I eventually figured out that it wasn't what I was or was not missing in my code, but rather the order in which the commands were placed which was causing the issue. I always wondered why in some tutorials, some developers will place commands in a specific order but never explain why, and the reason is the same as the cascade in CSS - things have to be placed in a specific order to take effect, or else it is just bloated code and takes up space.

Having learned this lesson, I will make a conscious effort to organize my code based on what I call the "cart before the horse" concept, ensuring I am not calling elements before they are defined or using defined elements outside of their function unless defined as global.

What challenges did you encounter, and how did you overcome them?

As previously mentioned, I found this exercise quite difficult. The organization of the JavaScript to ensure the use of the elements in their proper cascade was one issue, I also ran into styling issues with the email-error element and the checkmark list-icon styling. I am not too familiar with the pseudo codes outside of hover, so the use of "li:before" was a challenge to understand, but from what I gathered, the ":before" and ":after" pseudo-classes allow for developers to insert additional content to an existing element like an image or icon, allowing them to modify the appearance of the defined content -which is how I got the background if the white checkmarks to be the defined tomato color.

For the email error message, I needed to create a validation function to check the value of what the user entered into the DOM input. from there, I needed to check to see if the value contained elements that aren't normally allowed in email addresses like asterisks and dollar signs. If those elements are found, a message requesting a valid email is shown, as well as ensuring there is a clause to catch if there is no email at all and returning a request message to enter an email in the same span.

What specific areas of your project would you like help with?

I appreciate anyone willing to look at my work and provide feedback. All help is welcome!

What are you most proud of, and what would you do differently next time?

So, the instructions clearly stated HTML, CSS, and JavaScript needed to be used to complete this assignment, but I was able to complete it with just CSS and HTML. I do notice there are issues with adjusting the size of the tooltip to the container that could be addressed with JavaScript that I simply have not thought of yet. I'll revisit this assignment and rebuild it by trying to use JavaScript and see if that will help fix these issues.

What challenges did you encounter, and how did you overcome them?

I had issues getting the tooltip to resize and present at the bottom of the container rather than over the share button, but used absolute positioning to get the top, left, and right of the tooltip to stretch across the width of the container, and use z-index to layer the container, tooltip, and share button to be visible/hidden as needed.

What specific areas of your project would you like help with?

All help is welcome but as previously mentioned, I built this without JavaScript and therefore did not complete it according to the directions. Any guidance on how to create a JavaScript-featured solution would be greatly appreciated.

What are you most proud of, and what would you do differently next time?

So... not exactly proud but I did forget to add a component to the project, so a HUGE thanks to @jeangu2002 for pointing that out and allowing me a reason to revisit the project. Next time, I will look through ALL of the included image files to see if there is more than meets the eye with the assignment.

What challenges did you encounter, and how did you overcome them?

The JavaScript on this was harder than I am used to. So far, I know JavaScript by the definitions of most properties, but using them in real-time is still very daunting because I don't know what is going to be the most optimal or using them in conjunction with each other for additional complexity.

I also am still pretty new to the idea of local storage, the window object, or the "DOMContentLoaded event which were all concepts I dabbled in with this project to get, store, and set the rating values of objects. that do not share the same HTML. I will be sure to revisit this project in an attempt to spatially recall the methods used to complete the solution.

What specific areas of your project would you like help with?

Another thank you to @jeangu2002 for pointing out what I was missing to have a complete project!

Any/All help is welcome and I loo forward to reading your comments.

Cheers!

What are you most proud of, and what would you do differently next time?

Learning to add a 'forEach' loop to toggle on and off the color highlight function to complete the exercise

What challenges did you encounter, and how did you overcome them?

I used the MDN to figure out how to use the aforementioned "forEach" loop

What specific areas of your project would you like help with?

Any/All help is welcome

What are you most proud of, and what would you do differently next time?

Without the Figma doc it's hard to tell how far the elements are spaced, but learning to use flex properties like justify-content space-evenly makes it easier to semantically organize your content.

What challenges did you encounter, and how did you overcome them?

I tried to use both the mobile image and desktop image elements to change the image based on the viewport size. I tried using the background property and changing the URL from the desktop to the mobile, but it didn't work.

What specific areas of your project would you like help with?

Any help is welcome!

What are you most proud of, and what would you do differently next time?

I decided to go a step above the parameters of the project and added JavaScript to allow for the response adjective and description can change based on the values entered into the four score elements. This choice took the project from being a static page element to being more dynamic based on the data entered.

What challenges did you encounter, and how did you overcome them?

Mostly I ran into issues coming up with unique class names for all of the elements since they both are technically returning numerical values defining score. I broke it down by result score and summary score to keep the clarification and keep the code organized.

What specific areas of your project would you like help with?

Any help or feedback is welcome and I will be sure to apply your recommendations to my next project or a refactoring of this one.

What are you most proud of, and what would you do differently next time?

Understanding the components of JavaScript functions comes easily, but the implementation can be quite difficult for me, This project was a nice reassurance for me to know (for the most part) that I know what I need to do to complete a task, but still could use some help on specifics on when to use what I know.

What challenges did you encounter, and how did you overcome them?

The biggest challenge was getting the toggle images to change with each click. I wrote a function that checks if the toggle button currently includes the icon-plus image and switches it to the icon-minus and vice versa, then added an event listened to each toggle button image to execute the change image function and a high order function, which is a function that takes another function as an argument.

What specific areas of your project would you like help with?

I took the advice of @Bernardo Poggioni and made sure to utilize class specifications to my advantage. I will reserve the use of IDs exclusively for use in JavaScript and other scripting languages in the future. Since this was such a simple project, I referenced all the objects via querySelectors and the class name but I intend to use IDs in the near future when needed.

What are you most proud of, and what would you do differently next time?

I took lessons I learned from the " Social Links" project, allowing me to finish the assignment is half the time.

What challenges did you encounter, and how did you overcome them?

Had issues deciding which object to add the margining to to affect as many elements as possible while keeping code to a minimum.

What specific areas of your project would you like help with?

Any/All help and recommendations are welcome.

What are you most proud of, and what would you do differently next time?

I used the ": root" properties to keep the code DRY.

I Imported the Google fonts into CSS directly instead of embedding the link in HTML which helped improve separation of concerns, the guiding principle behind clean code.

What challenges did you encounter, and how did you overcome them?

To center the content of the social media container, I found that instead of setting the social media container to a flex object and adjusting its justify-content and align-items to center, I decided to do something different by translating the body of the DOM, maintaining a 10% spacing from the top and bottom of the container to keep the element square in the center of the DOM.

Addendum: I took the advice of @Abdul Khalid and modified my code to reflect his recommendations. The container object is now centered as a grid object - way easier. Thanks for the suggestion

What specific areas of your project would you like help with?

Any recommendations on building the project more efficiently or to a higher standard are always welcome. Feel free to contact me at https://leannekeenan.netlify.app

What are you most proud of, and what would you do differently next time?

I will review the download files a little harder to determine the organizational requirements to get the project properly uploaded to netlify faster. For some reason, images within the project within a folder in the primary root folder were made non-renderable, so file reorganization and removal were needed.