Hello@MaryUba,
Your solution looks awesome and the logic of your app is easy to follow.
To answer your question, anytime a form is "submitted" it triggers a page refresh by default. In your app, this happens when the button is clicked (the one with the aptly named CSS class of "submit-btn"). The good news is that this is super easy to fix. Simply add the code I've attached below to your form tag:
<form onsubmit="event.preventDefault()">
Alternately, you could do the same thing inside your script.js file in case you want to keep all js in one place:
const element = document.querySelector('form');
element.addEventListener('submit', event => {event.preventDefault()});
Both methods will stop the page from being reloaded when the form is submitted. I personally tend to go for the first one but it all comes down to personal taste.
I'm not sure which part of your JavaScript confuses you, but if I had to guess I would say it's your CalculateDate function. If that is what confuses you then I'm sorry to be the bringer of bad news: working with time confuses all programmers. My only two pieces of advice here are the following:
One, always remember that months in JavaScript are 0-indexed (fancy way of saying they start at 0). What this basically means is that if you were born in November 22, 2003, your JS DOB is (yyyy/mm/dd) 2003/10/22. In JS, you have to always subtract one month. Yes, this is very annoying to keep track of and the root of many bugs.
Two, look for existing libraries. Unless you want a challenge, there's a ton of useful time-related libraries that have been literally time tested.
Overall, I really like your code. It shows that you understand HTML and that you know how to use the DOM. I especially liked you use of "isValid" to keep track of all the possible checks the form had to pass before it could be rendered.
Best of wishes, @TheMcnafaha.
