Sometimes i dont get the proper date and when i refresh it and run again , it comes proper. I dont know why it happens, I still guess there is needed more improvement to my present code, need some suggestions
Hello, first of all congratulations for completing the challenge, but I suggest you retake it from here to fix the error you are talking about, for that let me give you some tips.
First, the error that causes the date to sometimes not calculate correctly happens because of this code that is in line 58 of your javascript file
if (inputDay > day) {
day += months[month - 1];
month -= 1;
}
if (inputMonth > month) {
month += 12;
year -= 1;
}
The problem here is that you are changing the value of the variables that contain your current date, so the first calculation that executes these conditions is correct, but the following calculations will be wrong.
For example, today is March 23, 2023, which makes your variables look like this day = 23 month = 5 year = 2023 and if you enter this date into the calculator "DAY = 30" "MONTH = 7" "YEAR = 2000" the result will be correct, but now your variables look like this day = 54 month = 16 year = 2022 and after that if you try to calculate another date the result will be incorrect.
One way to solve this could be to declare new variables at the beginning of your function and use them for the calculation, this way you make sure that the calculation always starts with the correct date, an example of this would be the following.
function handleSubmit(e) {
e.preventDefault();
if (validate()) {
const inputDay = parseInt(dayInp.value);
const inputMonth = parseInt(monthInp.value);
const inputYear = parseInt(yearInp.value);
let calcDay = day;
let calcMonth = month;
let calcYear = year;
if (inputDay > day) {
calcDay += months[month - 1];
calcMonth -= 1;
}
if (inputMonth > month) {
calcMonth += 12;
calcYear -= 1;
}
const d = calcDay - inputDay;
const m = calcMonth - inputMonth;
const y = calcYear - inputYear;
dayOtp.innerHTML = d;
monthOtp.innerHTML = m;
yearOtp.innerHTML = y;
}
}
I hope all this has been helpful, good day and good luck ;D.
I am new to learning JavaScript. This was my attempt at building a working project with basic JS. Any suggestions or advice on how I can improve are welcome!
Hi, first of all congratulations on completing the challenge :D.
And now my javascript suggestions would be:
1° Create variables to avoid repeating selections, for example:
const allRatingBtns = document.querySelectorAll(".rating-btn");
this way if at some point you change the name of the class in your objects you will only have to change the name in your variable instead of having to do it in all your code.
2° When you create variables do not use "var", although it still works it is something that is already obsolete because it causes problems with the new methods, now you use "let" and "const", you use "let" when you want your variable to be able to change value at some point, like this
let rating = 0;
rating = 5;
and you use "const" when you do not want this to be possible, for example if you do this you will get an error,
const rating = 0;
rating = 5;
this is convenient when you use variables that you do not want them to change.
3° And finally I suggest that every time you make a loop with some array you use the new forEach method, it is easier to read, shorter and you don't need to specify the number of cycles since it will repeat the action for each component of the array, the following would be a good example:
const allRatingBtns = document.querySelectorAll(".rating-btn");
allRatingBtns.forEach((btn) => {
btn.addEventListener("click", selectedButtonColor);
});
Very happy because I was able to do this project, but I tried and could not make the buttons have a different color when pressed, I tried to do this with js and I could not, I promise to intensify the studies and correct this in the future, it was a great challenge!
Hi, first of all congratulations on completing this challenge :D.
And about your problem about changing the color of the buttons when they are pressed I think the easiest way to do it is to create a new rule in your CSS file where you select your buttons with the focus pseudoclass and change the background color, something like this.
.numbers button:focus { background-color: var(--orange); }
Insted of this
.numbers button:active { background-color: var(--orange); }
I hope this is helpful.
How did you approach centering the QR code design on the webpage? I implemented it somehow but I'm not sure if I used the right approach.
Question: How did you approach centering the QR code design on the webpage? I implemented it somehow but I'm not sure if I used the right approach.
Answer: I think the way you have done it is fine, the only problem I see is that if you want to resize the "outer-container" you have to resize the QR code manually, so I suggest you change the width of the QR code to 100% to fit its container and add a horizontal padding to the "outer-containerr" to center everything, this way every time you resize the "outer-container" the image will resize too.
Extra tip: If you have done the above, you can remove the "text-box" and add a new style rule to the <p> elements to add a horizontal padding, this way the text will change with the size of the "outer-container" as well.
