Skip to content
OverviewSolutions
16
Comments
7

J Z

@half-ctoRiga, LV290 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • J Z•290
    @half-ctoPosted over 2 years ago

    Hi Leela, great work on completing challenge.

    Regarding media queries, I like to set up a mixin like this one

    @mixin desktop {
    @media screen and (min-width: $desktop-size) {
        @content;
    }
}

    and use it inside element I'm changing, I find it keeps clean structure and is easy to troubleshoot.

    0
  • J Z•290
    @half-ctoPosted over 2 years ago

    Hi DRUEVISUAL! Good job on solving layout for this challenge!

    regarding JS validation - you could solve this with 2 if statements, one that checks for empty input and other that compares input string with regex here is my take

    const email = document.getElementById('email-input');
const submit = document.body.getElementsByClassName('button')[0];
const errorMsg = document.body.getElementsByClassName('error-msg')[0];
const emailRegEx = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

let validateEmail = () => {
    let inputEmail = email.value;

     // clear previous error message
    errorMsg.innerHTML = '';
    errorMsg.style.color = '#FB3E3E'

    //validation
    if (inputEmail === '') {                        
        errorMsg.innerHTML = 'Oops! Please add your email';
    }else if (!emailRegEx.test(inputEmail)){
        errorMsg.innerHTML = 'Oops! Please check your email';
    } else {
        errorMsg.style.color = '#54E6AF'
        errorMsg.innerHTML = 'Thank You!';
    } 
}

submit.onclick = validateEmail;
    1
  • J Z•290
    @half-ctoPosted over 2 years ago

    Great solution. I'm stealing transition trick for breakpoints! 🔥 Also good attention to details!

    Marked as helpful
    1
  • J Z•290
    @half-ctoPosted over 2 years ago

    Hi, AMAN, congratulations on solving this challenge.

    Q1 & Q2 Flex is a good solution for this type of layout since it will adjust to different screens.

    Q3 In this case you could use many solutions, but again I think flex is great way to do this.

    Some other things to consider:

    1. <img> should have alternate text <img src="./assets/illustration-app.png" alt="ilustration of app opened on smartphone"> for improved accessibility more here
    2. Use semantic tags i.e. <main> instead of <div> for main part of page - more here
    3. Try to avoid skipping heading levels - for this layout You could use just one <h1> instead of <h3> - more here
    Marked as helpful
    0
  • J Z•290
    @half-ctoPosted over 2 years ago

    Hi Ijeoma, congrats on finishing this project!

    I'm not sure what is best practice (and Your take works as well), but I can share mine.

    main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #19A1AE;
    background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg);
    background-position: left 50vw top 45vh, right 50vw bottom 45vh;
    background-repeat: no-repeat;
}

    I added both pictures to background and set positions. I like this solution since bg pictures are not interfering with flow of page. Hope this helps!!

    Marked as helpful
    0
  • J Z•290
    @half-ctoPosted over 2 years ago

    Hi Paul, congrats on finishing this project! 🥳 I also found positioning of hero image to be toughest challenge for this project!

    You are almost correct with current implementation of image:

    <picture>
          <source media="(min-width: 1096px)" srcset="./images/image-hero-desktop.png">
          <source media="(min-width: 768px)"  srcset="./images/image-hero-tablet.png">   
          <source media="(max-width: 768px)"  srcset="./images/image-hero-mobile.png">
          <img src="./images/image-hero-mobile.png" alt="">
</picture>

    however you could lose line: <source media="(max-width: 768px)" srcset="./images/image-hero-mobile.png"> since image in <img> tag will be displayed by default. Alternatives are displayed only if matching media queries. Hope this helps!

    Marked as helpful
    1
View more comments