I used html css and javaScript to complete the challenge

Community feedback

• 

  Prantik•660

  @prantiknoorPosted over 2 years ago

  Your solution is pretty well 😊. I learned some new things from that.

  But I found there something that can be improved.

  First you can use CSS variables. It will make easier to control your code. as example:

  :root {
    --text-color: hsl(217, 12%, 63%);
    --gradient-background: linear-gradient(hsl(213, 19%, 18%), hsl(216, 12%, 8%));
  }
  
  /* then you can use like this */
  .rating-card {
    color: var(--text-color)
  }
  

  Secondly, there is code duplication. you used many common property in both .rating-card & .thank-you-car.

  .rating-card {
    /* These are common properties */
    background: linear-gradient(hsl(213, 19%, 18%), hsl(216, 12%, 8%));
    color: hsl(217, 12%, 63%);
    height: 360px;
    width: 400px;
    padding: 20px;
    border-radius: 15px;
  }
  

  .thank-you-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* These are common properties */
    background: linear-gradient(hsl(213, 19%, 18%), hsl(216, 12%, 8%));
    color: hsl(217, 12%, 63%);
    height: 360px;
    width: 400px;
    padding: 20px;
    border-radius: 15px;
  }
  

  You could create a class like .card with those common properties:

  .card {
    background: linear-gradient(hsl(213, 19%, 18%), hsl(216, 12%, 8%));
    color: hsl(217, 12%, 63%);
    height: 360px;
    width: 400px;
    padding: 20px;
    border-radius: 15px;
  }
  

  Now you can use the .card class & avoid code duplication. as example:

  <div class="container">
  <div class="card rating-card">
      ...
    </div>
  <div class="card thank-you-card hidden">
      ...
    </div>
  </div>
  

  0