All comments

• 

  golfingtrex• 270

  @golfingtrex

  Submitted over 1 year ago

  I tried to make my HTML as semantic as I could and not just spam divs. Please let me know if there are any noobie mistakes or optimizations I can do in either my HTML or my CSS. Thank you!

  

  QR Code Initial Challenge

  1

  50

  

  P

  Erine Natnat• 160

  @rinster

  Posted over 1 year ago

  Hi! Amazing job on completing this!

  To make this accessible, you'll need to wrap your .container element with semantic HTML tags <main></main>

  Also, all images should have the alt attribute filled in so screen readers are able to describe images.

  A great resource on semantic elements can be found here: https://www.w3schools.com/html/html5_semantic_elements.asp If you'd like to deepen your knowledge of accessibility, Udacity offers a free web accessibility course: https://www.udacity.com/course/web-accessibility--ud891

  0

  This comment has received 1 replyShow
• 

  Thejaswini• 20

  @Tejashwini06

  Submitted over 1 year ago

  

  2nd attempt QR Code Responsive page

  1

  60

  

  P

  Erine Natnat• 160

  @rinster

  Posted over 1 year ago

  Hi, your code is almost there! For correctly sourcing the image, you'll need to have an understanding of file paths in the browser. Generally, browsers use forward / slashes as opposed to Windows OS which uses backward slashes \.

  As such, given the location of your file, your src should be as follows:

  src="./image-qr-code.png"
  

  Here is a good resource on file paths: https://www.javatpoint.com/html-file-path Happy Coding!

  Marked as helpful

  0
• 

  MarvellousObiwulu• 10

  @MarvellousObiwulu

  Submitted over 1 year ago

  

  Not Responsive

  1

  40

  

  P

  Erine Natnat• 160

  @rinster

  Posted over 1 year ago

  Hi! Great job on completing this! You're almost there :) A great way to make this responsive is to remove all of the margins on your qr-text class and use Flexbox.

  You'll want to add flex properties to the parent container of your qr-text class. In your case the body like so:

  body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  }
  
  This should keep your card nice and centered.
  

  0

  This comment has received 1 replyShow
• 

  GrdevPro• 20

  @GrdevPro

  Submitted over 1 year ago

  I did have some difficulties on align text under QRcode

  

  QR-code-component

  3

  30

  

  P

  Erine Natnat• 160

  @rinster

  Posted over 1 year ago

  Hi! Great job on this! The text alignment looks great. A couple of things:

  It looks like the image wasn't uploaded to your host. Once that's uploaded, the image should show :)

  A small adjustment to your css makes the QR centered on mobile and tablet:

  div.bg_blue{
      display: flex;
      justify-content: center;
      align-items: center;
      background-color:  hsl(212, 45%, 89%);
      /* width: 1440px; */ 
      height: 100vh;  
      margin: 150px auto;
  }
  

  Marked as helpful

  0
• 

  Akash verma• 90

  @lusifer65

  Submitted over 1 year ago

  please suggest for better practices. how I improve my code and coding style.

  

  api call and center item by Grid

  2

  60

  

  P

  Erine Natnat• 160

  @rinster

  Posted over 1 year ago

  Great job on completing the challenge!

  Alternatively, you can switch what svgs/imgs to be shown on the screen using media queries. Add the classes to the html element and add another media query break point for desktop. The below is for mobile:

  @media screen and (max-width: 374px) {
    .desktop {
      display: none; // hide it
    }
    .mobile {
      display: block; // show it
    }
  }
  

  I also recommend disabling :hover on mobile device view. This is the general practice since you can't hover on a mobile device. A code sample below:

  @media(hover: hover) {
    button:hover {
      color: hsl(150, 100%, 66%);
      box-shadow: 0px 0px 26px rgba(82, 255, 168, .9);
      padding: 20px;
    }
  }
  /**Remove hover on mobile screens*/
  @media(hover: none) {
    button:hover, button:active {border: 1px solid rgba(82, 255, 168, .9)}
  }
  

  Marked as helpful

  0
• 

  Deivisson Lisboa• 190

  @DeivissonLisboa

  Submitted over 1 year ago

  I had some difficulties implementing error handling for incorrect input. If anyone has any suggestions or tips for improving my error handling, I would greatly appreciate it.

  

  Age Calculator App using BEM methodology

  1

  60

  

  P

  Erine Natnat• 160

  @rinster

  Posted over 1 year ago

  Amazing job on the animation and in vanilla JS too! I did mines in Vue.js and used Moment.JS library to handle the date logic.

  For handling errors, I recommend having a global object to hold your error states and update it accordingly:

  const errors = {
  	'errorsPresent' : 'false',
  	'dayError': "",
  	'monthError': "",
  	'yearError': ""
  }
  

  I use an errorsPresent key so I don't have to check the entire object. A sample validation logic can look like this:

  
  // Year
  let currentYear =  new  Date().getFullYear();
  if (yearInput === "") {
  	errors.yearError = "This field is required";
  	errors.errorsPresent = true;
  } else if (isNaN(Number(yearInput))) {
  	errors.yearError = "Must be a valid year";
  	errors.errorsPresent = true;
  } else if (Number(yearInput) > currentYear) {
  	errors.yearError = "Must be in the past";
  	errors.errorsPresent = true;
  }
  

  So if errors.errorsPresent === true you can update the DOM by inserting css style classes and the error messages from your errors object.

  .is-danger--border {
  	border: 1px solid hsl(0, 100%, 67%);
  }
  
  .is-danger--text {
  	color: hsl(0, 100%, 67%);
  }
  

  Don't forget to clear your error states and messages if the user updates the date again. Hope this helps :)

  Marked as helpful

  1

  This comment has received 1 replyShow