LCM & GCD Calculator Card using Tailwind CSS & JavaScript

Last Updated : 08 Mar, 2024

The LCM and GCD Calculator is a web application that allows users to calculate the Least Common Multiple (LCM) and Greatest Common Divisor (GCD) of the two numbers. Users input two numbers and the application computes and displays their LCM and GCD.

Approach to create LCM & GCD Calculator Card

Create the basic structure of the web page using HTML and integrate Tailwind CSS for styling via CDN links.
Classes like bg-white, rounded-lg, shadow-lg, border-2, border-green-500, etc., are applied to style various components.
Classes like bg-white, rounded-lg, shadow-lg, border-2, border-green-500, etc., are applied to style various components.
The calculateLCM the function calculates the LCM of two numbers using the formula (num1 * num2) / calculateGCD(num1, num2). The calculateGCD function calculates the GCD of two numbers using the Euclidean algorithm.
JavaScript functions to calculate the LCM and GCD based on the user input. Implement error handling to validate user input.

Example: Implementation of LCM and GCD Calculator in Tailwind CSS

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>The LCM and GCD Calculator</title> 
    <script src="https://cdn.tailwindcss.com"></script> 
</head> 
  
<body class="bg-gray-100 flex items-center  
             justify-center h-screen"> 
    <div class="max-w-md w-full bg-white p-8 rounded-lg 
                shadow-lg border-2 border-green-500"> 
        <h1 class="text-3xl font-bold text-center mb-8"> 
            LCM and GCD Calculator 
        </h1> 
        <div class="mb-4"> 
            <label for="num1" class="block text-sm font-medium 
                                     text-gray-700 mb-2"> 
                First Number: 
            </label> 
            <input type="number" id="num1" 
                   class="w-full border border-gray-300  
                          rounded-md py-2 px-3  
                          focus:outline-none  
                          focus:border-blue-500"> 
        </div> 
        <div class="mb-4"> 
            <label for="num2" class="block text-sm font-medium 
                                     text-gray-700 mb-2"> 
                Second Number: 
            </label> 
            <input type="number" id="num2" 
                   class="w-full border border-gray-300 
                          rounded-md py-2 px-3  
                          focus:outline-none  
                          focus:border-blue-500"> 
        </div> 
        <div class="flex justify-between"> 
            <button id="calculateLCM" 
                    class="w-1/2 bg-blue-500 text-white 
                           rounded-md py-2 px-4  
                           hover:bg-blue-600  
                           focus:outline-none mr-2"> 
                Calculate LCM 
            </button> 
            <button id="calculateGCD" 
                    class="w-1/2 bg-blue-500 text-white 
                           rounded-md py-2 px-4  
                           hover:bg-blue-600  
                           focus:outline-none ml-2"> 
                Calculate GCD 
            </button> 
        </div> 
        <div id="result" class="text-center text-sm mt-4"></div> 
    </div> 
    <script> 
        document.getElementById('calculateLCM') 
            .addEventListener('click', function () { 
                const num1 = parseInt(document.getElementById('num1').value); 
                const num2 = parseInt(document.getElementById('num2').value); 
                if (isNaN(num1) || isNaN(num2)) { 
                    showMessage('Please enter valid numbers!', 'text-red-500'); 
                    return; 
                } 
                const lcm = calculateLCM(num1, num2); 
                            showMessage(`LCM of ${num1} and  
                            ${num2} is ${lcm}`, 'text-green-500'); 
            }); 
        document.getElementById('calculateGCD') 
            .addEventListener('click', function () { 
                const num1 = parseInt(document.getElementById('num1').value); 
                const num2 = parseInt(document.getElementById('num2').value); 
                if (isNaN(num1) || isNaN(num2)) { 
                    showMessage('Please enter valid numbers!', 'text-red-500'); 
                    return; 
                } 
                const gcd = calculateGCD(num1, num2); 
                            showMessage(`GCD of ${num1} and  
                            ${num2} is ${gcd}`, 'text-green-500'); 
            }); 
        function calculateLCM(num1, num2) { 
            return (num1 * num2) / calculateGCD(num1, num2); 
        } 
        function calculateGCD(num1, num2) { 
            while (num2 !== 0) { 
                let temp = num2; 
                num2 = num1 % num2; 
                num1 = temp; 
            } 
            return num1; 
        } 
        function showMessage(messageText, textColor) { 
            const message = document.getElementById('result'); 
            message.textContent = messageText; 
            message.classList 
                   .remove('text-red-500', 'text-green-500'); 
            message.classList.add(textColor); 
        } 
    </script> 
</body> 
  
</html>