What exactly should you make a function for? fetchStockHistory() is one of the main functions of my app. How do I know what should have it's own function? Like, do I make a function just to get the form data, and one to get the next day, and one just to fetch, etc, then call all these functions from fetchStockHistory()? Now I'm thinking fetchStockHistory() should just return a fetch?

In otherwords, I'm asking how to know when to break a function up into smaller functions to call from the bigger function, in this case fetchStockHistory()?

const fetchStockHistory = async (event) => {
    try {
        event.preventDefault();

        // Clear error messages
        document.getElementById('message').textContent = '';

        // Get form props
        const formData = new FormData(event.target);
        const formProps = Object.fromEntries(formData);
        let endDate = formProps.endDate; // 2000-05-01

        // Get the next day - otherwise the fetch will end the day prior
        if (endDate) {
            var nextDay = new Date(endDate); // May 01 2000
            nextDay.setDate(nextDay.getDate() + 1); // May 02 2000

            // Convert to yyyy-mm-dd
            endDate = nextDay.toLocaleDateString('en-CA') // 2000-05-02
        }

        const response = await fetch('https://api.twelvedata.com/time_series?&start_date=' + formProps.startDate + '&end_date=' + endDate + '&symbol=' + formProps.pickStock + '&interval=1day&apikey=**********************')
        if (!response.ok) throw Error('Did not recieve expected data')
        const historyData = await response.json();

        // Set message
        if (historyData.message) {

...(rest of code)