Skip to content
OverviewSolutions
15
Comments
9

manjubhaskar02

@manjubhaskar02340 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

  • manjubhaskar02•340
    @manjubhaskar02

    Try this one .

    function calculateAge(event) {
      event.preventDefault();

      const birthdateInput = document.getElementById('birthdate');
      const resultElement = document.getElementById('result');


      const birthDate = new Date(birthdateInput.value);
      const currentDate = new Date();

      let years = currentDate.getFullYear() - birthDate.getFullYear();
      let months = currentDate.getMonth() - birthDate.getMonth();
      let days = currentDate.getDate() - birthDate.getDate();

      // Adjust negative months or days
      if (days < 0) {
        months--;
        days += new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).getDate();
      }

      if (months < 0) {
        years--;
        months += 12;
      }

//and display the result.
    Marked as helpful
  • manjubhaskar02•340
    @manjubhaskar02

    The solution is Great!

    It would be much better if you can restore the theme-switcher function.

    Marked as helpful
  • manjubhaskar02•340
    @manjubhaskar02

    Your coding works are great.

    Every project is a visual treat.

  • manjubhaskar02•340
    @manjubhaskar02

    Congratulations
    You have successfully completed the challenge.

    I have a small suggestion that you will find helpful in coming challenges.

    Try to make the body center.

    body {
display:flex;
flex-direction:column;
justify-content:center;
min-height:100vh;
margin:auto;
}
  • manjubhaskar02•340
    @manjubhaskar02

    Congratulations on taking up this challenge!

    I think you can simply put this element..

    This was my code.

    HTML

     <div class="progress-bar">
        <div class="progress">
          <div class="round"></div>
        </div>
      </div>

    CSS

    .progress-bar {
    background-color: var(--Very-Dark-Blue);
    width: 100%;
    height: 18px;
    border-radius: 50px;
    padding: 0px 2px;
}

.progress {
    background-image: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
    width: 75%;
    height: 16px;
    border-radius: 50px;
    position:relative;
    }

.round {
    position: absolute;
    background-color: white;
    width: 15px;
    height: 15px;
    right: 0px;
    border-radius: 100%;
}

    I think just a class round and adding its styling inside the meter element will help you.

    Hoping this would be helpful for you!

    Happy Coding Journey!

  • manjubhaskar02•340
    @manjubhaskar02

    Congratulations on taking up this challenge!

    I have a suggestion that you may find helpful

    You can use the gradient-color like this

    background-image: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));

    Happy Coding Journey!

View more comments