Mobile First | Some fixed but some of these can't understand

Hi @BBualdo, regarding the first question, the reason why you can't directly use the value of an input in JavaScript via a global variable like for example: const startingDay = document.querySelector('.js-day-input').value, and expecting the value to be automatically updated in other functions may be related to when that line of code is executed.

When you define startingDay using document.querySelector('.js-day-input').value, you are actually storing the current value of the input at that moment in the startingDay variable. However, if the value of the input changes later (for example, due to user interaction), the startingDay variable will not automatically update to reflect that change.

In the second question it seems that you are referring to the section where you check if the entered date is in the past. To handle this case along with other errors, you can bundle all error checks into a single function (like lookForErrors) and then, within this function, call calculateDates only if all errors are hidden. This will ensure that all error checks are done before doing the calculations and animation.

To resolve the button background image, you need to fix the url to: url(../assets/images/icon-arrow.svg), and you don't need to use the url twice, if you're trying to thicken the white border of the image, you can edit the svg image with the text editor and change the stroke-width="2" property to a larger number, e.g. stroke-width="3",

As for how you could make your code cleaner, here are some suggestions:

• Instead of repeating the same code to show errors and apply styles on error, you can create a function that takes care of this, which will make your code cleaner and easier to maintain, for example:

function displayError(input, errorElement, errorMessage, label) {
  errorElement.innerHTML = errorMessage;
  errorElement.classList.remove("hidden");
  input.classList.add("input-error");
  label.classList.add("label-error");
}

function clearError(input, errorElement, label) {
  errorElement.classList.add("hidden");
  input.classList.remove("input-error");
  label.classList.remove("label-error");
}

And you would use these functions like this:

Display error: displayError(startingDay, dayError, 'This field is required', dayLabel);

Clear Error:clearError(startingDay, dayError, dayLabel);

To check if it is a valid date you could use an auxiliary function like for example:

function isValidDate (date) => {
  const [year, month, day] = date.split("-").map(Number);
  const dateObj = new Date(year, month - 1, day);

  return (
    dateObj.getFullYear() === year &&
    dateObj.getMonth() + 1 === month &&
    dateObj.getDate() === day
  );
};

1. The function takes a text string as an argument, which represents a date in the format "YYYY-MM-DD".
2. date.split("-").map(Number) splits the date string into three parts separated by hyphens ("-"). Each part represents the year, month, and day of the date. The Number function is then applied to each of these parts to convert the strings to numeric values.
3. The line const dateObj = new Date(year, month - 1, day); creates a date object using the numeric values extracted from the date string. The subtraction of 1 from the month value is because in the JavaScript Date class, months are indexed from 0 (January is 0, February is 1, etc.).
4. Then, three checks are performed to determine if the date is valid:

In this case if we pass a date that does not exist, for example:

isValidDate("2022-02-29") //Returns false
//the function will do this
function isValidDate (date) {
  const [year, month, day] = date.split("-").map(Number);
  //[2022, 02, 29]

  const dateObj = new Date(year, month - 1, day);
  //Being a date that is not valid because February had 28 days in that year, the result of dateObj will be: Date: "2022-03-01T05:00:00.000Z"

  //When performing the validations we will have to coincide in the year but not in the month so it would return false
  return (
    dateObj.getFullYear() === year &&
    dateObj.getMonth() + 1 === month &&
    dateObj.getDate() === day
  );
};

For animations you can use the requestAnimationFrame method to perform the animation instead of using setInterval, which will provide finer control over the animation, you can do it in the following way:

function calculateAnimation() {
  // Select all <span> elements
  let valueDisplays = document.querySelectorAll("span");

  // Define a function to animate the value change
  function animateValue(displayElement, start, end, duration) {
    const startTime = performance.now();

    // Define a function to update the animated value
    function updateValue(currentTime) {
      const elapsedTime = currentTime - startTime;
      const progress = Math.min(elapsedTime / duration, 1);

      // Calculate the animated value based on progress
      const animatedValue = Math.round(start + progress * (end - start));

      // Update the displayed value
      displayElement.textContent = animatedValue;

      // If animation is not complete, request the next animation frame
      if (progress < 1) {
        requestAnimationFrame(updateValue);
      }
    }

    // Start the animation by requesting the first animation frame
    requestAnimationFrame(updateValue);
  }

  // Iterate through each <span> element and animate its value change
  valueDisplays.forEach((valueDisplay) => {
    const startValue = 0;
    const endValue = parseInt(valueDisplay.innerHTML);
    const animationDuration = 1000; // Duration in milliseconds

    // Initiate the animation for the current value display
    animateValue(valueDisplay, startValue, endValue, animationDuration);
  });
}

and you would call this function at the end of calculateDates():

function calculateDates() {
  // Rest of the code....

  calculateAnimation();
  // animation
}

These are just some recommendations, I hope they help you to continue improving.