Skip to content
OverviewSolutions
23
Comments
6
P

jimavictor

@jimavictor425 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    jimavictor•425
    @jimavictor

    Hello there! Awesome work with this project. Looking at your solution, I would like to suggest the following for you…

    1. You should use a div instead of an input tag to collect the numbers from the pressed buttons or maybe you can just make the input tag unclickable..
    2. Concerning you three state toggle switch, you can check out this tutorial
    Marked as helpful
  • P
    jimavictor•425
    @jimavictor

    Hello there! Awesome work with this project. Looking at your solution.. You can use flex-box to center your container grid by adding the following code to your body styles in your style.css file:

      display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

    Once again, awesome work! Hope this is helpful!

  • P
    jimavictor•425
    @jimavictor

    Hello Omar!! Nice work on completing this challenge. You really did a great job, especially on the layout. Looking at your solution, i will like to suggest the following to help improve it:

    • add a div with a class of overlay in your image container(the one with a class of img) and add the icon-view.svg image inside of it.
    <div class="img">
    <img src="./images/image-equilibrium.jpg" alt="image-equilibrium" class="img-1">
    <div class="overlay">
      <img src="./images/icon-view.svg" alt="">
    </div>
  </div>
    • add position: relative and align-items: center to your div with class "img" in your style.css file:
      display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
    • add the following styles to your overlay:
    .overlay {
  height: 300px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 20px;
  opacity: 0;
}
.overlay:hover {
  cursor: pointer;
  background-color: hsl(178, 100%, 50%, 0.4);
  opacity: 1;
}
    • add the following styles to your h1 and strong tag(the one with the white class):
    .white:hover {
  cursor: pointer;
}
  • P
    jimavictor•425
    @jimavictor

    Hello there! Awesome work with this project. Looking at your solution, I would like to suggest that you add the second parameter to the fetch method in your script.js file to enable it fetch new advice every time a user clicks the dice button. You could add something like this.. fetch("https://api.adviceslip.com/advice", { cache: "no-cache", }); Hope this was helpful..

    Marked as helpful
  • P
    jimavictor•425
    @jimavictor

    Hello there! You did a great job on this project. Looking at your solution, I noticed you did not add the cursor: pointer; on active states(when a mouse is hovered).. And the UI doesn't really appear fully on screens with width 320px.

    Above all, the design is really great. Keep up the good work. Hope this was helpful!

    Marked as helpful
  • P
    jimavictor•425
    @jimavictor

    It's perfect. You can adjust the space between the text and the button to make it even better but it still looks good without it.