Time tracking dashboard

Community feedback

• 

  Eileen dangelo•1,600

  @EileenpkPosted over 1 year ago

  Hi Decimo,

  Your project looks good, your JS is very readable.

  If you want to change the color of an SVG in a file just to reuse it and have it be for example red instead of white change the fill property in the SVG file.

  To change the color of an SVG on hover you have to:

  Put the SVG code directly into the HTML, if you put the src of the <img> as the SVG file that is in another folder it won't be able to target it

  • Add a class in the beginning tag of the SVG
  • In the CSS the selector should be the class name and then the path
  • The property name should be fill for the background of the SVG and stroke for the outline HTML

  <svg
              aria-labelledby="Facebook"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              class=socialIcon >
               <title id="Facebook" lang="en">Facebook icon</title>
              <path
                fill="#FFF"
                d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"
              />
            </svg>
  

  CSS

   .socialIcon:hover path {
        cursor: pointer;
        fill: var(--second-color);
      }
  

  To make it so when you hover directly on the svg image only the image's hover state is active and its container's isn't use the CSS pointer events property.

  • Set the pointer-events property of the container to none
  • Set it to auto for the SVG image element.

  <div class="container">
    <svg class="image" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" fill="red" />
    </svg>
  </div>
  

  .container {
    background-color: gray;
    height: 200px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    pointer-events: none; /* set pointer-events to none */
  }
  
  .image {
    height: 100px;
    width: 100px;
    pointer-events: auto; /* set pointer-events to auto for the SVG image */
  }
  
  .image:hover {
    fill: blue;
  }
  

  When you hover over an activity(work, play, etc.) I think using the ::before pseudo-element is fine, :hover might be a little simpler but you could go either way.

  I think you did the right thing with the separation of the fetch functions with the way you approached the JS. You have a for loop in both, (loops are slow) if you had put them both into one, when one of the btns were clicked the createActivities text would be running for no reason.

  Hope you found this helpful!

  Let's connect on LinkedIn! - @Eileenpk

  Marked as helpful

  1
• 

  C H A R A N 🎯•2,670

  @0xabdulPosted over 1 year ago

  Hello Developer well congratulations on successfully completed the Time tracking dashboard

  • There is no Accessibility reports but some suggestions for improve your code
  • In Css 🎨 :
  • your Time tracking dashboard is not center aligning so fix them
  • Ex :

  body {
  display:grid;
  place-items:center;
  margin:0;
  height:100vh;
  }
  

  • Now the dashboard is center aligning 🎯
  • I Hope you find the solution and it's useful comment for you . your Time tracking dashboard project is Great Finally Happy Coding Developer

  Marked as helpful

  0