Skip to content
OverviewSolutions
12
Comments
5
P

Jose Monge

@josemongedevCosta Rica340 points

I'm a full stack developer, formerly a firmware developer for networking devices, who loves design and good engineering

I’m currently learning...

Astro, Qwik, Tailwind

Latest solutions

View more solutions

Latest comments

  • P
    Jose Monge•340
    @josemongedevPosted almost 2 years ago

    Hi Theo, good job on this assignment 🎉💪. Don't worry about it too much regarding the hindrances you had, you can always retry the challenge and improve your code.

    Regarding your question:

    • To validate "text" inputs using Javascript, you can use regular expressions to limit the minimum and maximum numbers and set minimum and maximum lengths on the inputs. You can use then the checkValidity, setCustomValidity and reportValidity methods inside javascript to check if the input complies with the previous rules. I'm leaving some links below so you can read them:

    https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation https://www.freecodecamp.org/news/form-validation-with-html5-and-javascript/ https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation

    With frameworks like React there are special libraries like react-hook-form or Formik, that make this easier, but these aren't meant for vanilla JS.

    Although you had some issues with the "number" input, you can also use it and it's better for accessibility reasons, giving the browser a hint of what of kind data it's supposed to go in the input box. I added a way in which you can remove the arrows in the following codepen:

    https://codepen.io/josemongedev/pen/ZEmxNRv

    • Regarding the containers: width defines a specific size for the element while max-width defines the maximum width the element can have, but doesn't set the width size per se. So it bounds the upper limit of the width, but it's free to resize according to the content.

    I'd recommend you to review how flexbox works so that you can better understand the concepts: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    And maybe also you could study css grid which is a nice alternative for many use cases: https://css-tricks.com/snippets/css/complete-guide-grid/

    Also, to understand block, inline and inline-block elements you can visit here: https://www.samanthaming.com/pictorials/css-inline-vs-inlineblock-vs-block/

    These are great sources with images and explanations on how they work.

    Alright hopefully it was helpful, and have fun reading the sources! Remember it takes time at the start, but once you understand the concepts, the rest of learning it's basically reusing them on other exercises and that's how you learn faster. Super easy! 😉

    Marked as helpful
    1
  • P
    Jose Monge•340
    @josemongedevPosted almost 2 years ago

    Very well done. I can notice you put a lot of effort on this, especially with the stylings. I think the fact that you did it all in html, css and vanilla js, without a framework speaks volumes. It's also better to learn it this way when starting to code, since the tools won't be a substitute for the concepts you learn initially. Kudos Natalie!

    Marked as helpful
    1
  • P
    Jose Monge•340
    @josemongedevPosted almost 2 years ago

    Fantastically done! Congrats! By the way, I also like to use Figma, cause those little details consume hours and eyes burn! 😵 I don't really have much feedback, cause you really did a great job overall code-wise. Maybe tidy up the CSS names, like using BEM or such? Also with CSS, using custom classes instead of styling the tags directly (input, article, form,etc). Nice use of semantic tags and also great that you used the ternary operator to render the form and the email confirmation message.Anyway hope you find it useful and have fun with more challenges, keep growing! 🎉

    1
  • P
    Jose Monge•340
    @josemongedevPosted almost 2 years ago

    Well done Wendy! Don't worry, such is the path of the web developer🙏, we all felt annoyed at the start with those things like centering a div 😉 It takes time to learn all the details, but once you get used to it, It'll get much easier.

    I'll give you just some little advice regarding the semantic tags use:

    • Usually main is used as the highest level container for all the other divs and containers, so it's the container that is unique and doesn't contain elements that are repeated across pages like navbars, sidebars, copyright, logos and such.
    • Instead of using main for the h3 and p elements, you could use an article or section tags. Article tags are supposed to be used for content that can be distributed independently from the rest of the site, like precisely this card component. Section is usually to contain a header and paragraph or such combos (title/text), and it's just the section of document. It could also be the section of an article, or of main.
    • For the attribution you could use a footer tag instead, since it's the end and it is supposed to be contain information about the authors, contact or copyright stuff.

    Alright, I hope it was useful! Just keep practicing, you'll get better and better each day! 💪

    Marked as helpful
    1
  • P
    Jose Monge•340
    @josemongedevPosted almost 2 years ago

    Hola Micaela! Vas muy bien💪, ya te falta muy poco para terminarlo!

    Quería darte con tu permiso unas recomendaciones rápidas:

    • En el styled component de Bg en App.js, puedes agregar align-items:center(usando display:flex; claro); para centrarlo verticalmente.

    • En los tamaños de pantalla mobile, puedes quitarle los márgenes y el border-radius al container. Para facilitarte los estilos puedes usar el CSS reset de Andy Bell: https://andy-bell.co.uk/a-modern-css-reset/

    • Para usar las fuentes que trae el diseño originalmente, puedes seguir este video como ayuda: https://www.youtube.com/watch?v=zK-yy6C2Nck

    • Si estás usando VS Code, puedes instalar una extensión que se llama Prettier para darle formato automáticamente a tu código y hacerlo más legible. A mi me gusta ese canal para aprender CSS y otras cosas pero este video es sobre Prettier: https://www.youtube.com/watch?v=8k-b-7rJAeU

    • De igual manera si usas styled components, hay una extensión que se llama "vscode-styled-components" que sirve para escribirlos con syntax highlighting (los colores) y autocompletado.

    En general me parece excelente que estás usando semantic tags, y la distribución del código y la validación de email y el routing al mensaje de éxito funcionan muy bien.

    Ojalá te sea útil! Saludos!

    Marked as helpful
    1