Base Apparel coming soon page with HTML, Sass, and JavaScript

Community feedback

• 

  Corvida Raven•680

  @SheGeeksPosted over 3 years ago

  Hi Riyana! Great work on this challenge.

  For empty :invalid inputs, you may want to look into combining :invalid with another psuedo-class. This article is a helpful reference for accomplishing this: https://www.stefanjudis.com/notes/target-non-empty-but-invalid-input-element-with-css/

  Also want to note that I don't see a mobile image when viewing your work from my phone. Shows on desktop just fine.

  Marked as helpful

  1

  ---

  

  Riyana Gueco•495

  @rnguecoPosted over 3 years ago

  @SheGeeks Thank you! This was a big help.

  As for the mobile image... Yeah, that's my bad 😅 I had set an explicit height to my image div so on mobile devices with wider screens the image is zoomed too much for my liking. So I removed it completely. Probably a bad idea lol but the image does show up for screen widths smaller than 450px.

  0

  

  Corvida Raven•680

  @SheGeeksPosted over 3 years ago

  @rngueco Ah, makes more sense! Explicit heights on divs will do that. I would try setting the height or setting 100% width on the image instead of the div. Typically, the image size will cause the div of the image to grow with it accordingly.

  *Adding a note to take a look at my code for this challenge to see how I setup the mobile image. Hoping it can be helpful for you to get your mobile image back.

  1

  

  Riyana Gueco•495

  @rnguecoPosted over 3 years ago

  @SheGeeks I couldn't set 100% or auto height on the image div actually, because my image is a background image 😅 I really should just turn it into an img element. That'll solve the problem.

  0

  

  Corvida Raven•680

  @SheGeeksPosted over 3 years ago

  @rngueco Could create some problems too. Such is coding. If I remember my solution correctly, I used both, added display: none on the inline img and applied the background-image in my desktop media query to hide the mobile image on desktop and vice versa. Best of both worlds. background-image was more appropriate for what I wanted to accomplish on desktop, but wasn't necessary for mobile. Hope this is helpful!

  1
• 

  Jimmy Sweeney•350

  @sweenejpPosted over 3 years ago

  Nice design! You really matched the solution well.

  I took a little different approach to the validation. I left on the required attribute because I think this keeps the error message from showing up until the user hits the submit button. Then I added an eventlistener with an event type of "invalid". Got help with this from this blog post here: https://daverupert.com/2017/11/happier-html5-forms/

  You can check out my solution here if you'd like: https://github.com/sweenejp/base-apparel-coming-soon-page

  Marked as helpful

  0

  ---

  

  Riyana Gueco•495

  @rnguecoPosted over 3 years ago

  @sweenejp Thanks Jimmy! I will look into this.

  0

  

  Riyana Gueco•495

  @rnguecoPosted over 3 years ago

  @sweenejp This is probably not that important at this type of challenge but required (so is pattern or any HTML input attribute) is easily removable from the HTML by a user, simply by editing the source from DevTool or Inspect. The user can then submit the form, and if the JavaScript validation does not catch this, the empty email field will be submitted to the server.

  If I were to leave on the required attribute, I would still have to check from the JS-side if the input is empty anyway. 🤔

  0