Posted inGeneral

Currency Calculator HTML / JQUERY

No Comments
Currency Calculator HTML / JQUERY

I have created below calculator using LLM Caluse 3.7 LLM

Command Used :
Create a professional and creative web-based currency calculator with the following specifications:

  1. Design Requirements:
  • Modern, sleek UI with a professional color scheme and gradient background
  • Glassmorphism effects for the calculator interface
  • Custom typography using Google Fonts (preferably Poppins)
  • Responsive design that works well on all screen sizes
  • Subtle animations and hover effects for interactive elements
  • Professional shadows and depth effects
  1. Layout:
  • Two-column layout: main calculator on left, currency buttons on right
  • Clean header with title and subtitle
  • Responsive design that adapts to mobile by rearranging components
  1. Calculator Features:
  • Large, clear display for entered values
  • Traditional calculator buttons (0-9, +, -, *, =, C)
  • Each button should have hover and active states
  • Different colors for number buttons vs. operation buttons
  1. Currency Conversion:
  • Replace dropdown with individual currency buttons in a column
  • Currency buttons should display both currency code (NPR, PKR, etc.) and full name
  • Include support for converting AED to:
    • Nepali Rupee (NPR)
    • Pakistani Rupee (PKR)
    • Bangladeshi Taka (BDT)
    • Philippine Peso (PHP)
    • Sri Lankan Rupee (LKR)
    • Indian Rupee (INR)
  • Use the provided API: https://v6.exchangerate-api.com/v6/XXXXXXXXXXX/latest/AED
  1. UX Improvements:
  • Replace alert() with an on-screen result display
  • Add loading indicators during API calls
  • Show currency symbols (₹, ₨, etc.) in the conversion results
  • Add clear error handling with user-friendly messages
  • Add animation effects for the appearance of result display

Make the code clean, well-commented, and include appropriate CSS variables for easy customization. The calculator should have a professional look while maintaining ease of use with large, clear buttons.

Note that in above XXXXXX is your api key which you can get easily for free from : app.exchangerate-api.com

Code received from Claude Sonnet

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AED Currency Converter</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
  <style>
    :root {
      --primary-color: #3a36e0;
      --secondary-color: #f0f0f0;
      --accent-color: #1e88e5;
      --number-button: #6200ea;
      --operation-button: #304ffe;
      --equals-button: #2962ff;
      --currency-button: #00c853;
      --clear-button: #d50000;
      --text-light: #ffffff;
      --text-dark: #333333;
      --shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Poppins', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: linear-gradient(45deg, #6a11cb, #2575fc);
      color: var(--text-dark);
    }
    
    .app-container {
      width: 90%;
      max-width: 850px;
      margin: 20px;
    }
    
    .header {
      color: white;
      text-align: center;
      margin-bottom: 20px;
    }
    
    .header h1 {
      font-size: 2.5rem;
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .header p {
      font-size: 1rem;
      opacity: 0.9;
    }
    
    .calculator {
      background: rgba(255, 255, 255, 0.95);
      padding: 30px;
      border-radius: 20px;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: row;
      gap: 25px;
      backdrop-filter: blur(10px);
    }
    
    .main-section {
      flex: 3;
    }
    
    .currency-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    .display-container {
      background: var(--secondary-color);
      border-radius: 15px;
      padding: 20px;
      margin-bottom: 25px;
      box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    .display {
      width: 100%;
      height: 60px;
      font-size: 2.2rem;
      text-align: right;
      border: none;
      background: transparent;
      color: var(--text-dark);
      font-family: inherit;
      font-weight: 500;
    }
    
    .display::placeholder {
      color: rgba(0, 0, 0, 0.3);
    }
    
    .info-text {
      font-size: 0.9rem;
      color: rgba(0, 0, 0, 0.5);
      text-align: right;
      margin-top: 5px;
    }
    
    .buttons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
    }
    
    .button {
      padding: 20px 10px;
      font-size: 1.5rem;
      border: none;
      border-radius: 12px;
      background: var(--number-button);
      color: var(--text-light);
      cursor: pointer;
      transition: all 0.3s ease;
      font-family: inherit;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    .button:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }
    
    .button:active {
      transform: translateY(0);
    }
    
    .button.operation {
      background: var(--operation-button);
    }
    
    .button.equals {
      background: var(--equals-button);
    }
    
    .button.clear {
      background: var(--clear-button);
    }
    
    .currency-button {
      padding: 15px 10px;
      font-size: 1.2rem;
      border: none;
      border-radius: 12px;
      background: var(--currency-button);
      color: var(--text-light);
      cursor: pointer;
      transition: all 0.3s ease;
      margin-bottom: 10px;
      font-family: inherit;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    .currency-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }
    
    .currency-button:active {
      transform: translateY(0);
    }
    
    .currency-name {
      margin-left: 10px;
    }
    
    .result-container {
      background: var(--secondary-color);
      border-radius: 15px;
      padding: 20px;
      margin-top: 25px;
      box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
      text-align: center;
      display: none;
    }
    
    .result-container.active {
      display: block;
      animation: fadeIn 0.5s;
    }
    
    .result-title {
      font-size: 1rem;
      color: rgba(0, 0, 0, 0.7);
      margin-bottom: 10px;
    }
    
    .result-value {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--primary-color);
    }
    
    .loading {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(0, 0, 0, 0.2);
      border-radius: 50%;
      border-top-color: var(--primary-color);
      animation: spin 1s ease-in-out infinite;
      margin-left: 10px;
      vertical-align: middle;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @media (max-width: 800px) {
      .calculator {
        flex-direction: column;
      }
      
      .currency-section {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }
      
      .currency-button {
        margin-bottom: 0;
      }
    }
    
    @media (max-width: 500px) {
      .app-container {
        width: 100%;
        margin: 10px;
      }
      
      .calculator {
        padding: 20px;
      }
      
      .currency-section {
        grid-template-columns: repeat(2, 1fr);
      }
      
      .button {
        padding: 15px 5px;
        font-size: 1.3rem;
      }
    }
  </style>
</head>
<body>
  <div class="app-container">
    <div class="header">
      <h1>AED Currency Converter</h1>
      <p>Enter amount in AED and convert to other currencies instantly</p>
    </div>
    <div class="calculator">
      <div class="main-section">
        <div class="display-container">
          <input type="text" id="display" class="display" placeholder="0" disabled>
          <div class="info-text">UAE Dirham (AED)</div>
        </div>
        
        <div class="buttons">
          <button class="button" onclick="appendValue('7')">7</button>
          <button class="button" onclick="appendValue('8')">8</button>
          <button class="button" onclick="appendValue('9')">9</button>
          <button class="button clear" onclick="clearDisplay()">C</button>
          
          <button class="button" onclick="appendValue('4')">4</button>
          <button class="button" onclick="appendValue('5')">5</button>
          <button class="button" onclick="appendValue('6')">6</button>
          <button class="button operation" onclick="appendValue('+')">+</button>
          
          <button class="button" onclick="appendValue('1')">1</button>
          <button class="button" onclick="appendValue('2')">2</button>
          <button class="button" onclick="appendValue('3')">3</button>
          <button class="button operation" onclick="appendValue('-')">−</button>
          
          <button class="button" onclick="appendValue('0')">0</button>
          <button class="button" onclick="appendValue('.')">.</button>
          <button class="button equals" onclick="calculate()">=</button>
          <button class="button operation" onclick="appendValue('*')">×</button>
        </div>

        <div class="result-container" id="result-container">
          <div class="result-title">Conversion Result:</div>
          <div class="result-value" id="result-value"></div>
        </div>
      </div>
      
      <div class="currency-section">
        <button class="currency-button" onclick="convertCurrency('NPR')">
          <span class="currency-code">NPR</span>
          <span class="currency-name">Nepali</span>
        </button>
        <button class="currency-button" onclick="convertCurrency('PKR')">
          <span class="currency-code">PKR</span>
          <span class="currency-name">Pakistani</span>
        </button>
        <button class="currency-button" onclick="convertCurrency('BDT')">
          <span class="currency-code">BDT</span>
          <span class="currency-name">Bangladeshi</span>
        </button>
        <button class="currency-button" onclick="convertCurrency('PHP')">
          <span class="currency-code">PHP</span>
          <span class="currency-name">Philippine</span>
        </button>
        <button class="currency-button" onclick="convertCurrency('LKR')">
          <span class="currency-code">LKR</span>
          <span class="currency-name">Sri Lankan</span>
        </button>
        <button class="currency-button" onclick="convertCurrency('INR')">
          <span class="currency-code">INR</span>
          <span class="currency-name">Indian</span>
        </button>
      </div>
    </div>
  </div>

  <script>
    let display = document.getElementById('display');
    const resultContainer = document.getElementById('result-container');
    const resultValue = document.getElementById('result-value');

    function appendValue(value) {
      display.value += value;
    }

    function clearDisplay() {
      display.value = '';
      resultContainer.classList.remove('active');
    }

    function calculate() {
      try {
        display.value = eval(display.value);
      } catch (error) {
        showResult('Invalid calculation', true);
      }
    }

    function showResult(text, isError = false) {
      resultValue.textContent = text;
      resultValue.style.color = isError ? '#d50000' : '#00796b';
      resultContainer.classList.add('active');
    }

    function showLoading() {
      resultValue.innerHTML = 'Converting <div class="loading"></div>';
      resultContainer.classList.add('active');
    }

    async function convertCurrency(currency) {
      const amount = parseFloat(display.value);
      if (isNaN(amount) || amount <= 0) {
        showResult('Please enter a valid amount in AED', true);
        return;
      }

      showLoading();
      const url = `https://v6.exchangerate-api.com/v6/XXXXXXXXXXXX/latest/AED`;

      try {
        const response = await fetch(url);
        const data = await response.json();

        if (data.result === 'success') {
          const rate = data.conversion_rates[currency];
          const convertedAmount = (amount * rate).toFixed(2);
          const currencyMap = {
            'NPR': '₨',
            'PKR': '₨',
            'BDT': '৳',
            'PHP': '₱',
            'LKR': '₨',
            'INR': '₹'
          };
          const symbol = currencyMap[currency] || '';
          
          showResult(`${amount} AED = ${symbol}${convertedAmount} ${currency}`);
          display.value = convertedAmount;
        } else {
          showResult('Failed to fetch currency rates', true);
      }
      } catch (error) {
        showResult('Error fetching currency rates', true);
    }
    }
  </script>
</body>
</html>