All comments

• 

  Jhuly B• 20

  @JhulyB

  Submitted almost 2 years ago

  how can i improve the code for responsiveness? What can I do to make the best use of typescript?

  

  Responsive interactive pricing component using Vite, ReactJs and Scss

  #react#sass/scss#vite#typescript

  1

  2

  0

  

  Ting-Huei Chen• 160

  @hejkeikei

  Posted almost 2 years ago

  Hi Jhuly, Nice work! From viewport size 378px to 420px , the footer text wrap to 2 lines, and "pageviews" text is clashed together with your h1. Maybe you can change your media query to adapt the mobile size? I also notice that price didn't change as it should after the yearly billing toggle is on.

  Happy coding🍻

  0
• 

  Raymond Visser• 80

  @Halaszraymond

  Submitted almost 2 years ago

  How to change the image color to purple? I cant get it done, and also the internet doesnt provide me with the answer im looking for

  

  Stats-preview-card-component

  2

  1

  0

  

  Ting-Huei Chen• 160

  @hejkeikei

  Posted almost 2 years ago

  Hi Raymond, For the coloring, you can create a overlay on top of the image and use mix-blend-mode!

  .overlay {
    width: 100%;
    height: 100%;
    background-color: var(--violet);
    opacity: 0.8;
    mix-blend-mode: multiply;
  }
  

  Hope it helps :) For further information you can visit my work

  1

  This comment has received 1 replyShow
• 

  Stephane Jean• 360

  @distephano30

  Submitted almost 2 years ago

  Greeting guys, this is my solution for the form validation challenge. can you take a look and share with me how to improve it specially I need to validate the form after an error without refreshing the page. Your help will be appreciate. Thanks in advance

  

  Intro oomponent with sign up - Javascript

  1

  4

  0

  

  Ting-Huei Chen• 160

  @hejkeikei

  Posted almost 2 years ago

  Hi Stephane, For preventing refresh the page, you can use event.preventDefault(); in your event listener. MDN

  Also, you can use getAttribute() so that you don't have to write things manually. In that case, you can use loop so you won't have to repeat your code:) For example:

  <input type="text" name="fname" id="fname" placeholder="First Name" required/>
  

  then you can do this:

  const fields = document.querySelectorAll("input");
  for(let i=0; i< fields.length-1; i++){
          if(fields[i].value==""){
              fields[i].nextElementSibling.innerHTML=fields[i].getAttribute("placeholder")+" cannot be empty";
              //output =>  First Name cannot be empty
          }else{
             fields[i].nextElementSibling.innerHTML="";
          }
      }
  

  For detail information please see here

  Marked as helpful

  0

  This comment has received 1 replyShow