All comments

• 

  TsuneWeb• 260

  @TSune-web

  Submitted about 2 years ago

  Hi, Frontend Mentor community! 👋

  For this challenge, I struggled to figure out how to read the local JSON file provided with vanilla JS. If you have a cool trick for this, I'm happy to hear that!

  Happy coding! ☕️

  

  Expenses chart component with sass

  1

  50

  

  Sylvain• 50

  @sylverdrag

  Posted about 2 years ago

  Looks good, but there are couple issues:

  1. The bar highlighted doesn't match the current day. You can fix it with something like this:

  function highlight_day(){
      const d = new Date();
      let day = d.getDay();
      let bar = ".bar:nth-child("+day+")";
      $(bar).css("background", "hsl(186, 34%, 60%)");
  }
  

  1. The barHeight can be too high depending on the data. For instance, if the client spends $900, your code would set the barHeight at 1350% which would of course not fit in the widget. You can fix that by finding the biggest amount and working out the proportion so that all bars will fit in the space.

  For instance:

   var fraction = maxAmount / 100;
   let barHeight = stat.amount /fraction;
   bar.style.height = barHeight + "%";
  

  Marked as helpful

  1

  This comment has received 3 repliesShow
• 

  Justin Vera• 270

  @justinnvera

  Submitted about 2 years ago

  How can I improve my CSS positioning?

  

  Product Preview Component | CSS Flexbox

  2

  30

  

  Sylvain• 50

  @sylverdrag

  Posted about 2 years ago

  Some suggestions:

  1. border-radius: You have border-radius in "main", and then you realized this didn't work as expected, so you added a border radius to the image as well. You can avoid doing that using "overflow: hidden;" on "main". This hides everything which goes beyond the area of "main"

  2. letter-spacing and small caps: Instead of spacing capital letters manually in "P E R F U M E", you can use CSS to get better control: font-variant: small-caps; letter-spacing: 0.2rem; This gives you a better control on the spacing, and it is more SEO friendly ("perfume" is a keyword, P E R... is a sequence of individual letters).

  3. You can declare only one type of display per element. If you declare more, only the last one applies: main .checkout button { display: block; display: flex; is the same as main .checkout button { display: flex;

  4. The original is split half-half between image and text. You can do that by assigning 50% to your ".hero-image-container" and adjust ".text" to include the padding (so about 45%). A better way to do it is to give the main container a width in rem and split it in half for the image and the text, that way it will scale, but you can also get the proportion exactly right.

  Anyway, good job on your first solution. I hope this helps.

  1

  This comment has received 2 repliesShow
• 

  nikhil149• 50

  @nikhil149

  Submitted about 2 years ago

  Unable to design circle Icons on top container. Can anyone help on that.

  

  ExpenseChart Component

  3

  40

  

  Sylvain• 50

  @sylverdrag

  Posted about 2 years ago

  The "circles" is in fact a logo picture which you can find in the images provided.

  Alternatively, you can draw the logo fairly easily with a couple divs, a border radius of 50% to turn the div in a circle, z-index to put one on top of the other, and a bit of positioning.

  0