All comments

• 

  ypradafah28• 20

  @ypradafah28

  Submitted about 1 year ago

  still unsure with best practice css and javascript. i try to add json in project and some DOM. please be kind to give me feedback. thankyou

  

  Results-summary-component

  2

  30

  

  T•Ø•R•Ü•S• 10

  @T-O-R-U-S

  Posted about 1 year ago

  • Gradient Radience!

  Pro tip: You can replicate the background gradient in the final score panel using a CSS gradient :)

  .my-awesome-gradient {
  /* The first parameter indicates the directionality of the gradient, measured in degrees (as in angles).
  * Here, we use 180˚ to make our gradient point straight down. <from this colour> will be at the top,
  * <to this different one> will be at the bottom. */
  background-image: linear-gradient(180deg, <from this colour>, <to this different one>)
  }
  

  In this specific example, you can use the following CSS rule for the background: background-image: linear-gradient(180deg, hsla(256deg, 72%, 46%, 1), hsla(241deg, 72%, 46%, 0))

  • Did you know that you can use CSS variables to make reused values easier to read?

  body {
  /* Always prefix your CSS variables with two hyphens 👌 */
  --my-cool-colour: hsla(241, 72%, 46%, 0);
  /* Variables can store many properties; I recommend you visit the MDN web docs to find out
  * just what they are capable of */
  --my-cool-font-size: 5000000px; /* My users will have no problem reading this! */
  }
  
  #part-of-the-body {
  /* The variable --my-cool-colour has been inherited from the body, and can now be reused across all elements! */
  /* Make sure to use the var() function to access variables */
  background-color: var(--my-cool-colour)
  }
  

  This feature is particularly helpful when porting over colours and sizes from the style-guide.md file, as it means that you don't need to constantly reference it.

  • Style guidance!

  As has already been stated by another helpful commenter, also make sure to use the style-guide.md; it has a variety of helpful information about the design we're trying to reconstruct.

  Good luck! :)

  1