Javascript Exercise

Javascript Exercise

No1.

Write a function That multipliesByTwo that takes a number as a parameter and returns the result of multiplying it by 2. Use a callback function to print the result.

function multiplyByTwo(number, callback) {
  var result = number * 2;
  callback(result);
}
function printResult(result) {
  console.log("The result is: " + result);
}
// Example usage
var number = 5;
multiplyByTwo(number, printResult);

No2.

Write an array of numbers. Write a function filterEvenNumbers that takes an array and a callback function as parameters. The callback function should return true if a number is even and false otherwise. Use the callback function to filter out the even numbers from the array and return a new array.

function filterEvenNumbers(array, callback) {
    var filteredArray = [];
    for (var i = 0; i < array.length; i++) {
      if (callback(array[i])) {
        filteredArray.push(array[i]);
      }
    }
    return filteredArray;
  }
  function isEven(number) {
    return number % 2 === 0;
  }

  // Example usage
  var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  var evenNumbers = filterEvenNumbers(numbers, isEven);
  console.log(evenNumbers);

No3.

Write a function to calculate Sum that takes two numbers and a callback function as parameters. The callback function should return the sum of the two numbers. Use the callback function to calculate the sum and print it.

function calculateSum(num1, num2, callback) {
    var sum = callback(num1, num2);
    console.log("The sum is: " + sum);
  }
  function addNumbers(num1, num2) {
    return num1 + num2;
  }
  // Example usage
  var number1 = 5;
  var number2 = 10;
  calculateSum(number1, number2, addNumbers);

No4.

Create an array of strings. Write a function convertToUpperCase that takes an array and a callback function as parameters. The callback function should convert each string in the array to uppercase and return the updated array. Use the callback function to convert the strings and print the updated array.

function convertToUpperCase(array, callback) {
    var updatedArray = [];
    for (var i = 0; i < array.length; i++) {
      var convertedString = callback(array[i]);
      updatedArray.push(convertedString);
    }
    return updatedArray;
  }
  function toUpperCase(string) {
    return string.toUpperCase();
  }
  // Example usage
  var strings = ["hello", "world", "! LOVE !"];
  var uppercasedStrings = convertToUpperCase(strings, toUpperCase);
  console.log(uppercasedStrings);

No5.

Write a function doMathOperation that takes two numbers and a callback function as parameters. The callback function should perform a mathematical operation (e.g., addition, subtraction, multiplication) on the two numbers and return the result. Use the callback function to perform different operations and print the results.

function doMathOperation(num1, num2, callback) {
    var result = callback(num1, num2);
    console.log("The result is: " + result);
  }
  function addNumbers(num1, num2) {
    return num1 + num2;
  }
  function subtractNumbers(num1, num2) {
    return num1 - num2;
  }
  function multiplyNumbers(num1, num2) {
    return num1 * num2;
  }

  // Example usage
  var number1 = 5;
  var number2 = 10;

  doMathOperation(number1, number2, addNumbers);      
  doMathOperation(number1, number2, subtractNumbers); 
  doMathOperation(number1, number2, multiplyNumbers);

No6.

Write a function that fetchData that returns a promise. The promise should resolve after a random delay (between 1 and 5 seconds) with a random number. Use setTimeout and the resolve function of the promise to accomplish this.

//   Promise
function fetchData() {
    return new Promise((resolve, reject) => {
      const delay = Math.floor(Math.random() * 5000) + 1000; 
      setTimeout(() => {
        const randomNumber = Math.random(); 
        resolve(randomNumber); 
      }, delay);
    });
  }
  // Example usage
  fetchData()
    .then((data) => {
      console.log("Fetched data:", data);
    })
    .catch((error) => {
      console.error("Error fetching data:", error);
    });

No7.

Create an array of URLs. Write a function fetchMultipleData that takes an array of URLs as a parameter and returns an array of promises. Each promise should fetch data from a corresponding URL. Use Promise.all to handle the array of promises and return the resolved data.

  function fetchMultipleData(links) {
        var promises = [];
        for (var i = 0; i < links.length; i++) {
          var promise = fetch(links
            [i]).then((response) => response.json());
          promises.push(promise);
        }
        return Promise.all(promises);
      }
      // Example usage
      var links = [
        "https://api.example.com/data1",
        "https://api.example.com/data2",
    "https://api.example.com/data3",
    ];
    fetchMultipleData(links)
    .then((data) => {
        console.log("Fetched data:", data);
    })
    .catch((error) => {
        console.error("Error fetching data:", error);
    });

No8.

Write a function checkNumber that takes a number as a parameter and returns a promise. The promise should resolve if the number is even and reject with an error message if the number is odd. Use the resolve and reject functions of the promise to accomplish this.

    function checkNumber(number) {
      return new Promise((resolve, reject) => {
        if (number % 2 === 0) {
          resolve(`${number} is even.`);
        } else {
          reject(new Error(`${number} is odd.`));
        }
      });
    };

No9.

Create a function uploadFile that takes a file object and returns a promise. The promise should simulate uploading the file by resolving after a random delay (between 1 and 10 seconds) with a success message. Use setTimeout and the resolve function of the promise to accomplish this.

function uploadFile(file) {
      return new Promise((resolve, reject) => {
        // Simulate random delay between 1 and 10 seconds
        const randomDelay = Math.floor(Math.random() * 10000) + 1000;
        setTimeout(() => {
          resolve(`File "${file.name}" uploaded successfully.`);
        }, randomDelay);
      });
    };

No10.

Write a function waitForUserInput that returns a promise. The promise should resolve when the user clicks a button on the webpage. Use an event listener and the resolve function of the promise to accomplish this.

  function waitForUserInput() {
    return new Promise((resolve) => {
      const button = document.getElementById('myButton'); // Replace 'myButton' with the ID of your button element
      const clickHandler = () => {
        button.removeEventListener('click', clickHandler); // Remove the event listener to prevent multiple resolutions
        resolve();
      };
      button.addEventListener('click', clickHandler);
    });
  }

  waitForUserInput()
  .then(() => {
    console.log('Button clicked!'); // This message will be displayed when the user clicks the button.
  });

No11.

Write a function getData that returns a promise. The promise should resolve with a random number after a random delay (between 1 and 5 seconds). Use setTimeout and the resolve function of the promise to accomplish this. Call the getData function and use .then to handle the resolved value and print it.

  function getData() {
    return new Promise((resolve) => {
      const randomNumber = Math.random(); // Generating a random number between 0 and 1
      // Simulate random delay between 1 and 5 seconds
      const randomDelay = Math.floor(Math.random() * 5000) + 1000;
      setTimeout(() => {
        resolve(randomNumber);
      }, randomDelay);
    });
  }
  // Calling the getData function and using .then to handle the resolved value and print it
  getData()
    .then((result) => {
      console.log('Resolved number:', result);
    })
    .catch((error) => {
      console.error('Error occurred:', error);
    });

No12.

Write a function multiplyByTwo that takes a number as a parameter and returns a promise. The promise should resolve with the result of multiplying the number by 2. Call the multiplyByTwo function and use .then to handle the resolved value and print it.

function multiplyByTwo(number) {
      return new Promise((resolve, reject) => {
        if (typeof number === 'number') {
          resolve(number * 2);
        } else {
          reject(new Error('Input is not a number'));
        }
      });
    }
    // Calling multiplyByTwo and using .then to handle the resolved value
    multiplyByTwo(5)
      .then(result => {
        console.log('Result:', result);
      })
      .catch(error => {
        console.error('Error:', error.message);
      });

No13.

Create an array of numbers. Write a function sumNumbers that takes an array and returns a promise. The promise should resolve with the sum of the numbers in the array. Use .then to handle the resolved value and print it.

function sumNumbers(numbersArray) {
        return new Promise((resolve, reject) => {
          if (!Array.isArray(numbersArray)) {
            reject(new Error('Input is not an array'));
            return;
          }
          const isAllNumbers = numbersArray.every(num => typeof num === 'number');
          if (!isAllNumbers) {
            reject(new Error('Array contains non-numeric elements'));
            return;
          }
          const sum = numbersArray.reduce((acc, num) => acc + num, 0);
          resolve(sum);
        });
      }
      // Example array of numbers
      const nmbers = [1, 2, 3, 4, 5];
      // Calling sumNumbers and using .then to handle the resolved value
      sumNumbers(nmbers)
        .then(sum => {
          console.log('Sum:', sum);
        })
        .catch(error => {
          console.error('Error:', error.message);
        });

No14.

Write a function fetchData that returns a promise. The promise should resolve with a random name after a random delay (between 1 and 3 seconds). Use setTimeout and the resolve function of the promise to accomplish this. Call the fetchData function and use .then to handle the resolved value and print it.

 function fetchData() {
          const names = ['Alice', 'Bob', 'Charlie', 'David', 'Eva', 'Frank', 'Grace', 'Hannah'];
          return new Promise((resolve, reject) => {
            const randomDelay = Math.floor(Math.random() * 2000) + 1000; // Random delay between 1 and 3 seconds (in milliseconds)
            const randomIndex = Math.floor(Math.random() * names.length);
            const randomName = names[randomIndex];
            setTimeout(() => {
              resolve(randomName);
            }, randomDelay);
          });
        }
        // Calling fetchData and using .then to handle the resolved value
        fetchData()
          .then(randomName => {
            console.log('Random Name:', randomName);
          })
          .catch(error => {
            console.error("Error:");
          });

No15.

Write a function getUserData that returns a promise. The promise should resolve with user data after a random delay (between 1 and 5 seconds). Use setTimeout and the resolve function of the promise to accomplish this. Call the getUserData function and use .then to handle the resolved value and print it.

function getUserData() {
            // Simulated user data (replace this with your actual user data retrieval logic)
            const user = {
              id: 123,
              name: 'John Doe',
              email: 'john.doe@example.com',
              age: 30,
              address: '123 Main Street',
            };
            return new Promise((resolve, reject) => {
              const randomDelay = Math.floor(Math.random() * 4000) + 1000; // Random delay between 1 and 5 seconds (in milliseconds)
              setTimeout(() => {
                resolve(user);
              }, randomDelay);
            });
          }
          // Calling getUserData and using .then to handle the resolved value
          getUserData()
            .then(userData => {
              console.log('User Data:', userData);
            })
            .catch(error => {
              console.error('Error:', error.message);
            });
Async/Wait:

No16.

Write an async function fetchData that fetches data from an API using the fetch function. The function should wait for the API response and return the parsed JSON data. Call the fetchData function and use await to handle the returned data and print it.

 async function fetchData() {
              const apiUrl = 'https://api.example.com/data'; // Replace this with the actual API endpoint URL
              try {
                const response = await fetch(apiUrl);
                if (!response.ok) {
                  throw new Error('Failed to fetch data from the API');
                }
                const data = await response.json();
                return data;
              } catch (error) {
                throw new Error('An error occurred while fetching data: ' + error.message);
              }
            }
            // Calling fetchData and using await to handle the returned data
            async function printData() {
              try {
                const data = await fetchData();
                console.log('Fetched Data:', data);
              } catch (error) {
                console.error('Error:', error.message);
              }
            }
            // Call the printData function to initiate the fetching process
            printData();

No17.

Create an array of URLs. Write an async function fetchMultipleData that takes an array of URLs as a parameter and fetches data from each URL using the fetch function. The function should wait for all the API responses and return the parsed JSON data. Call the fetchMultipleData function and use await to handle the returned data and print it.

async function fetchMultipleData(urls) {
              try {
                const responses = await Promise.all(urls.map(url => fetch(urls)));
                const dataArray = await Promise.all(responses.map(response => {
                  if (!response.ok) {
                    throw new Error('Failed to fetch data from the API');
                  }
                  return response.json();
                }));
                return dataArray;
              } catch (error) {
                throw new Error(`An error occurred while fetching data: ${error.message}`);
              }
            }     
            // Example array of URLs
            const urls = [
              'https://api.example.com/data/1',
              'https://api.example.com/data/2',
              'https://api.example.com/data/3',
            ];
            // Calling fetchMultipleData and using await to handle the returned data
            async function printData() {
              try {
                const data = await fetchMultipleData(urls);
                console.log('Fetched Data:', data);
              } catch (error) {
                console.error("Error:".message);
              }
            } 
            // Call the printData function to initiate the fetching process
            printData();

No18.

Write an async function calculateSum that takes two numbers as parameters and returns their sum after a delay of 2 seconds. Call the calculateSum function and use await to get the sum and print it.

async function calculateSum(num1, num2) {
            return new Promise((resolve) => {
              setTimeout(() => {
                const sum = num1 + num2;
                resolve(sum);
              }, 2000); // Delay of 2 seconds (2000 milliseconds)
            });
          }    
          // Calling calculateSum and using await to get the sum and print it
          async function printSum() {
            try {
              const sum = await calculateSum(5, 10);
              console.log('Sum:', sum);
            } catch (error) {
              console.error('Error:', error.message);
            }
          }
          // Call the printSum function to initiate the calculation and printing process
          printSum();

No19.

Write an async function getUserData that simulates fetching user data from a server. The function should wait for the data to be fetched and return the user object. Use setTimeout and await to accomplish this. Call the getUserData function and use await to handle the returned user data and print it.

async function getUserData() {
            return new Promise((resolve) => {
              // Simulated user data (replace this with your actual user data retrieval logic)
              const user = {
                id: 123,
                name: 'John Doe',
                email: 'john.doe@example.com',
                age: 30,
                address: '123 Main Street',
              };
              // Simulating a delay of 2 seconds to mimic fetching data from the server
              setTimeout(() => {
                resolve(user);
              }, 2000);
            });
          }
          // Calling getUserData and using await to handle the returned user data
          async function printUserData() {
            try {
              const userData = await getUserData();
              console.log('User Data:', userData);
            } catch (error) {
              console.error('Error:', error.message);
            }
          }
          // Call the printUserData function to initiate the data fetching and printing process
          printUserData();

No20.

Create a function uploadFiles that takes an array of file objects and uploads them sequentially using fetch and await. The function should wait for each file to be uploaded before proceeding to the next one. Print a success message after each successful upload.

async function uploadFiles(fileObjects) {
            try {
              for (const fileObj of fileObjects) {
                const formData = new FormData();
                formData.append('file', fileObj.file);
                const response = await fetch('https://api.example.com/upload', {
                  method: 'POST',
                  body: formData,
                });
                if (!response.ok) {
                  throw new Error('Failed to upload file ' + fileObj.name);
                }
                console.log("Uploaded file:", fileObj.name);
              }
            } catch (error) {
              throw new Error('An error occurred while uploading files: ' + error.message);
            }
          }  
          // Example array of file objects
          const files = [
            "Enugu files", "Ebonyi Files", "AkwaIibom Files"
          ]
          // Call the uploadFiles function to initiate the file upload process
          uploadFiles(files)
            .then(() => {
              console.log('All files uploaded successfully.');
            })
            .catch(error => {
              console.error('Error:', error.message);
            });
setTimeout:

No21.

Write a function printMessage that takes a message as a parameter and prints it after a delay of 2 seconds using setTimeout.

function printMessage(message) {
              setTimeout(() => {
                console.log(message);
              }, 2000);
            }
            // Call the printMessage function with the message you want to print
            printMessage('Hello, this message will be printed after 2 seconds.');

No22.

Create an array of messages. Write a function printMessages that takes an array as a parameter and prints each message in the array with a delay of 1 second between them using setTimeout.

function printMessages(messages) {
              let index = 0;
              function printMessageWithDelay() {
                if (index < messages.length) {
                  console.log(messages[index]);
                  index++;
                  setTimeout(printMessageWithDelay, 1000);
                }
              }
              printMessageWithDelay();
            }  
            // Example array of messages
            const messagesArray = [
              'Message 1',
              'Message 2',
              'Message 3',
              'Message 4',
              'Message 5',
            ];
            // Call the printMessages function with the array of messages
            printMessages(messagesArray);

No23.

Write a function countdown that takes a number as a parameter and prints a countdown from that number to 0. Each number should be printed with a delay of 1 second between them using setTimeout. After reaching 0, the function should print "Countdown complete!".

function countdown(number) {
              function printNumberWithDelay(num) {
                if (num >= 0) {
                  console.log(num);
                  if (num > 0) {
                    setTimeout(() => {
                      printNumberWithDelay(num - 1);
                    }, 1000);
                  } else {
                    console.log("Countdown complete!");
                  }
                }
              }
              printNumberWithDelay(number);
            }
            // Call the countdown function with the desired number
            countdown(5);

No24.

Write a function changeBackgroundColor that changes the background color of the webpage after a delay of 3 seconds using setTimeout. Use document.body.style.backgroundColor to modify the background color.

function changeBackgroundColor(newColor) {
              setTimeout(() => {
                document.body.style.backgroundColor = newColor;
              }, 3000); // Delay of 3 seconds (3000 milliseconds)
            }
            // Call the changeBackgroundColor function with the desired new color
            changeBackgroundColor('lightblue');

No25.

Create an array of colors. Write a function changeBackgroundColorSequentially that takes an array of colors as a parameter and changes the background color of the webpage to each color sequentially with a delay of 2 seconds between them using setTimeout.

function changeBackgroundColorSequentially(colors) {
              let index = 0;
              function changeColorWithDelay() {
                if (index < colors.length) {
                  index.body.style.backgroundColor = colors[index];
                  index++;
                  setTimeout(changeColorWithDelay, 2000);
                }
              }
              changeColorWithDelay();
            };