Design comparison
Solution retrospective
Some of my favorite code to write was an entire modal class with custom properties and methods. A message, title, image and button text can be used to create a custom popup using two different methods. The prompt method can be used to prompt the user for input while the confirm method solely serves as a message to the user. Once created, a modal can be passed a function to execute upon a positive event, or another function that execute upon a negative event.
What challenges did you encounter, and how did you overcome them?Later into the implementation stage of development, an issue with CSS was encountered that prevented animating the opacity of a button element with a gradient background. My solution was to render the button positioned absolutely over a div element with the gradient background. Upon hovering, the button's background is transitioned to transparent therefor giving the intended effect.
What specific areas of your project would you like help with?In future projects I would like to get more experience creating mobile friendly designs as well as leveraging existing libraries to solve problems and create seamless applications. In passing, I would appreciate understanding how to vertically align bullet points with their parent text.
Community feedback
- @Alex-Archer-IPosted 6 months ago
Hi! That's a neat solution! I see you host it on your own domain and render modal window dynamically, that's cool =)
I can give you a couple of frontend suggestions.
- Try to add
name
attribute to every input field on theform
. In real projects it'll be important for sending data to the server an for collecting it viaFormData
object. - Every page should contain
main
tag. It's important for the semantic of the page. - You can use
picture
tag to switch images on the different screen sizes.
<picture> <source srcset="mobile.jpg" media="(max-width: 900px)"> <img src="desktop.jpg" alt=""> </picture>
It contains one
img
tag and one or moresource
tags withmedia
conditions and load image accordingly them (orimg
if no one condition is matched).Oh, and you have quite detailed regexp =)
Hope that helps, good luck =)
Marked as helpful1 - Try to add
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