i couldn't figure out how to display the current month and days of age so i showed instead the total months and days someone lived cant wait to see other people code and figure it out thank you i could finish this up cleanly but im challenging myself to keep everything vanilla js css and html
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.
The solution is Great!
It would be much better if you can restore the theme-switcher function.
This was pretty fun to build and i'm quite happy with how it turned out. 🧸
Your coding works are great.
Every project is a visual treat.
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;
}
Hello There! 👋🏽
Here is my solution for this challenge!
Built Using⚒️ :
Question🙋 :
I am finding it hard to style the white round element on the meter from the design, you could see from my SASS file that I had to comment out some styles for it (check Git edit history better). Do you have any idea on how to do that?
...
Feedbacks on how I can improve my code would be highly appreciated! 🙏🏽
Thank You, and Keep coding! 👨🏽💻
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!
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!
This genuinely gave me SO many headaches. I particularly struggled with creating the progress bar gradient(which I still haven't managed, so if anyone has any advice I'd be really grateful to hear it!) and a lot of the layout. It's probably one of my messier codes so I'd love some advice on neatening it up and better layouts.
Congratulations on taking up this challenge!
I could help you with the part you struggled the most.
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%;
}
Or you can use this one too!
.progress-bar {
background-color: var(--Very-Dark-Blue);
justify-content: flex-start;
border-radius: 100px;
align-items: center;
position: relative;
padding: 0 2px;
display: flex;
height: 18px;
width: 100%;
}
.progress {
border-radius: 100px;
background-image: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
height: 16px;
width: 75%;
position:relative;
}
.round {
position: absolute;
background-color: white;
width: 15px;
height: 15px;
right: 0px;
border-radius: 100%;
}
There may be mistakes as I am a self-learner, you could add to it if you get better suggestions.
Hoping this would be helpful for you!
Happy Coding Journey!
@media (max width: 700px). It is not working when uploading it to Github.
Nice design! but you can add the hovering state for the button element.
button:hover{ background color: dark cyan; }
I did go overboard on this project. I didn't use the provided svg background waves, instead, I built randomly generated waves using javascript. But other than that, this project is very simple, and the only Javascript needed is the form validation. I've already done a simple email validation from my previous FrontendMentor challenge(Base Apparel coming soon page) so I just copy and paste it.
For the randomly generated waves, this script is heavily inspired from a library: Wavyfy by peacepostman. And if you wanna try it, I recommend using Wavyfy instead of mine. Wavyfy has a lot more functionality and mine is a little messy
Also, I did consider users who turned off their animation on their device prefers-reduced-motion: reduce. If you do, it will only generate wave once. And if you are not sure if it's turned off, check the console. I leave a console.log() to see if it's ON or OFF.
If you guys have any suggestion, please don't hesitate to comment. Thaaaanks!
