Skip to content
OverviewSolutions
4
Comments
6
P
Erine Natnat
@rinster

All comments

  • golfingtrex•270
    @golfingtrexSubmitted 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
    Erine Natnat•160
    @rinsterPosted 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
  • Erine Natnat•160
    @rinsterPosted 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
  • Erine Natnat•160
    @rinsterPosted 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
  • Erine Natnat•160
    @rinsterPosted 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
  • Erine Natnat•160
    @rinsterPosted 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
  • Erine Natnat•160
    @rinsterPosted 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