Responsible webpage with the usage of history API.

Community feedback

• 

  DYLAN VILLARREAL TOSCANO•150

  @dylanson25Posted over 1 year ago

  Hi Gabriel, I like your solution. In fact, the animation with the numbers is great. Could you please explain it to me?

  Regarding your question about the surface, honestly, I set the same size for the surface image and the planet. I used vw and the rule of three with respect to the size in Figma.

  One point to improve is that the navbar toggler would be cool if it automatically closed the menu when I select a new planet.

  This is my solution, but I think that I can improve it after seeing your solution. https://planets-project.vercel.app/#

  1

  ---

  

  Gabriel Ayres•30

  @gabrielayresdevPosted over 1 year ago

  Hi @dylanson25, I'm glad you liked it! I appreciate the feedback and the tips on how to handle images of different sizes. Regarding the animation of the numbers, I first store the value of the number in a variable and then set the number.innerHTML to 0. After that, I define the rate at which the number will increase as initialValue/100. Then, I call the following function that will add the increment to the displayed value within a setInterval.

     function callback() {
        actualValue += increment;
        item.innerHTML = actualValue.toFixed(1);
  
        if (Math.abs(actualValue) > Math.abs(initialValue)) {
          clearTimeout(interval);
          item.innerHTML = initialValue;
        }
      }
  

  Your solution also turned out very well. Indeed, setting the image values as a fixed size proportional to the screen didn't cause other elements to be pushed around. I'll take a look at your repository to improve my own work.

  Regarding improvements, I don't have much to comment on since your project turned out really well. However, I think you could make some subtle changes, such as adding a "cursor: pointer" to the buttons and including "target="_blank"" in the source links.

  0