Skip to content
OverviewSolutions
9
Comments
3

Ting-Huei Chen

@hejkeikeiCalgary, Canada180 points

Hi! I'm Ting!

I’m currently learning...

- HTML - CSS - JavaScript - Bootstrap - jQuery - D3.js - PHP - MySQL - Python

Latest solutions

View more solutions

Latest comments

  • Ting-Huei Chen•180
    @hejkeikei

    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🍻

    Marked as helpful
  • Ting-Huei Chen•180
    @hejkeikei

    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

  • Ting-Huei Chen•180
    @hejkeikei

    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