Skip to content
OverviewSolutions
38
Comments
5
Jo Young
@Jo-cloud85

All comments

  • Jo Young•840
    @Jo-cloud85Posted over 1 year ago

    Hi Izundu,

    Firstly, you are using the wrong project to submit your solution for the Newsletter.

    Pertaining to your question, there is no 100% 'standard' format per se as you can slightly customize it as to which characters you want to exclude in an email.

    But typically if you want to validate an email that does not have these characters: ! # $ % & ‘ * + – / = ? ^ ` . { | } ~

    This is the regex for email: /^\w+([.-]?\w+)@\w+([.-]?\w+)(.\w{2,3})+$/

    And here's one application from w3:

    function ValidateEmail(mail) {
   if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value))
        {return (true)}
   alert("You have entered an invalid email address!")
   return (false)
}

    Here's the link if you want to read it in detail:

    https://www.w3resource.com/javascript/form/email-validation.php#:~:text=To%20get%20a%20valid%20email,%2Frfc3696%23page%2D5%20!

    0
  • Jo Young•840
    @Jo-cloud85Posted over 1 year ago

    One of the fastest ways to center your card will be:

        body {
      background-color: hsl(212, 45%, 89%);
      height: 100vh; //add this
      display: grid; //add this
      place-content: center; //add this
    }

    Also, you should try using margin-top to create the gap between your card and the attribution instead of using multiple <br>

    Marked as helpful
    1
  • Jo Young•840
    @Jo-cloud85Posted over 1 year ago

    Hi mossa

    Nice work! Just a tip to center your card to your screen.

        .bg-cream {
      background-color: var(--primary-cream);
      display: grid; //add this
      place-content: center; //add this
    }
    Marked as helpful
    0
  • soban•50
    @the-sobanSubmitted over 1 year ago

    Hi, built this as my first challenge and really learned a lot. One thing is, the responsiveness is a bit sketchy (you guys can check it on this live site here ), is there any way I could fix that? Suggestions are appreciated .

    Product Details card

    1
    Jo Young•840
    @Jo-cloud85Posted over 1 year ago

    Hi Soban,

    The issue may be because your #container is at a flexible width of 45% of the screen while the .image is at a fixed width of 300px. Thus, once 45% of the screen width goes below a certain width, the image overpowers the screen. In addition, your media screen width only starts at 375px. Thus, when the screen starts to shift between the desktop and phone-size screen, the output becomes distorted. As this is a card exercise, it may not be necessary to create a flexible width but this is just my opinion.

    Anyhow, here are a few steps to quickly solve your issue. At least, it seemed to work on my screen.

    body {
      padding: 0px;
      margin: 0px;
      background-color: hsl(30, 38%, 92%);
      height: 100vh; //add this
      display: grid; //add this to center your whole card
      place-content: center; //add this to center your whole card
}

#container {
      width: 580px; //add this to fix your card. you can modify the size if you want
      height: 430px;  //add this to fix your card. you can modify the size if you want
      display: flex;
      flex-direction: row;
      margin: 60px auto 10px auto;
      border: 1px solid white;
      border-radius: 10px;
      background-color: hsl(0, 0%, 100%);
}

.image { //change to this and remove the rest
      border-radius: 10px 0px 0px 10px;
      flex: 1; //add this so that the image is kept to half the container size
}

@media screen and (max-width: 375px) {
      body { //change to this and remove the rest
        background-color: hsl(30, 38%, 92%); 
      }

      #container { //change to this and remove the rest
        width: 90vw;
        min-height: 545px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 60px auto 0 auto;
      }

      .image { //change to this and remove the rest
        width:100%;
        object-fit: cover;
        padding: 0;
        border-radius: 10px 10px 0px 0px;
        overflow: hidden;
      }

    Lastly, I would recommend going for 480px for your mobile screen max-width as phones like iPhone 12 have a wider width than 375px.

    Hope this will help you. Cheers!

    Marked as helpful
    1
  • visualdennis•8,375
    @visualdennissSubmitted over 1 year ago

    You can find MY ANIMATION TUTORIAL HERE

    🔥 Another challenge with my own custom design on top the original fem design.

    • Landing Page Animation done in gsap.
    • Changing Words Animation done in vanilla JS.
    • Error Animations done in framer-motion (due to exit animations)
    • Input Field Animations done in vanilla CSS.

    For optimum animation experience, recommended viewing dimensions: 1440x800

    • I've built the form using react-hook-form for functions and yup for validation.
    • Modal component built by using Dialog component by headlessui
    • The placeholder text for terms of services generated by ChatGPT (who would have written all that text anw :) )

    It is also responsive for mobile.

    And finally with this submission, i've officially completed all newbie challenges 🔥

    🦊 Smoothly Animated Sign-up Form [Redesign] + [react-hook-form] 🦊

    11
    Jo Young•840
    @Jo-cloud85Posted over 1 year ago

    It is really inspiring for aspiring developer to see pro-developers like yourself pushing boundaries for each challenge, going beyond the basic requirements. This is a really impressive little project by the way! Awesome!

    1