Recycled Solution for Rating Card Challenge
Design comparison
Solution retrospective
This project has a lot of research put into it as well as recycled code from codepen. Looking at the project I understood how to make the layout and with the growth from the last challenge I was able to recognize how to get everything centered correctly. However, I was completely lost when it came to how I was going to get the entire layout to change after "submitting" a rating because I am unfamiliar with JavaScript and am very new to learning its capabilities. So, I was able to find this exact challenge published on CodePen and I used it as a template of sorts. By recycling the code from CodePen I was able to see how the elements, styles, and JS functions worked together. I decided to try to change some class names, adjust CSS, and try to match changes inside of the JS script so that I could see exactly what each function was accomplishing. With that approach, I learned how to use java to display a completely different layout and how to create a form layout without creating an actual form. I learned what :focus is in CSS and how it interacts with HTML.
Overall, I looked at this project as an opportunity to use my engineering background and implement a retro-engineering technique to learn about a technology that I know very little of and I truly believe it was the most insightful approach I could take with this challenge. Now I can expand on what I've seen here and use these concepts in future challenges.
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord