Categories: Uncategorized

Currency Converter – JavaScript Mini Project By Anup Tamang (Moktan)

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Currency Converter</title>
  <link rel="stylesheet" type="text/css" href="anup.css">
</head>
<body>
  <div class="container">
    <h1>Currency Converter</h1>
    <div class="form">
      <label for="amount">Amount:</label>
      <input type="number" id="amount" placeholder="Enter amount">
      <label for="from">From:</label>
      <select id="from">
        <option value="NPR">Nepalese Rupee (NPR)</option>
        <option value="INR">Indian Rupee (INR)</option>
        <option value="CNY">Chinese Yuan (CNY)</option>
        <option value="PKR">Pakistani Rupee (PKR)</option>
        <option value="AFN">Afghan Afghani (AFN)</option>
        <option value="BTN">Bhutanese Ngultrum (BTN)</option>
        <option value="BDT">Bangladeshi Taka (BDT)</option>
      </select>
      <label for="to">To:</label>
      <select id="to">
        <option value="NPR">Nepalese Rupee (NPR)</option>
        <option value="INR">Indian Rupee (INR)</option>
        <option value="CNY">Chinese Yuan (CNY)</option>
        <option value="PKR">Pakistani Rupee (PKR)</option>
        <option value="AFN">Afghan Afghani (AFN)</option>
        <option value="BTN">Bhutanese Ngultrum (BTN)</option>
        <option value="BDT">Bangladeshi Taka (BDT)</option>
      </select>
      <button >

anup.css

.container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

body{
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    background: linear-gradient(to right bottom, #007673, #0e0066);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

h1 {
  font-size: 60px;
    text-align: center;
}

.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}

label {
  margin-right: 10px;
    width: 48%;
}

select,input{
    width: 100%;
    margin-bottom: 15px;
    font-size: 20px;
    padding: 8px 15px;
    font-weight: 700;
}

button {
  width: 200px;
    display: block;
    padding: 10px;
    margin: 0 auto;
    border-radius: 15px;
    background-color: #e62e00;
    color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 22px;
}

.result {
  background-color:#000000;
  padding: 20px;
  border-radius: 5px;
}

script.css

function convert() {
  let amount = document.getElementById("amount").value;
  let from = document.getElementById("from").value;
  let to = document.getElementById("to").value;
  let rate = getRate(from, to);
  let result = amount * rate;
  document.getElementById("output").innerHTML = amount + " " + from + " = " + result.toFixed(2) + " " + to;
}

function getRate(from, to) {
  let rate;
  switch(from) {
    case "NPR":
      switch(to) {
        case "NPR":
          rate = 1;
          break;
        case "INR":
          rate = 0.63;
          break;
        case "CNY":
          rate = 0.062;
          break;
        case "PKR":
          rate = 1.60;
          break;
        case "AFN":
          rate = 1.31;
          break;
        case "BTN":
          rate = 0.71;
          break;
        case "BDT":
          rate = 1.18;
          break;
      }
      break;
    case "INR":
      switch(to) {
        case "NPR":
          rate = 1.59;
          break;
        case "INR":
          rate = 1;
          break;
        case "CNY":
          rate = 0.098;
          break;
        case "PKR":
          rate = 2.54;
          break;
        case "AFN":
          rate = 2.08;
          break;
        case "BTN":
          rate = 1.12;
          break;
        case "BDT":
          rate = 1.86;
          break;
      }
      break;
    case "CNY":
      switch(to) {
        case "NPR":
          rate = 16.11;
          break;
        case "INR":
          rate = 10.20;
          break;
        case "CNY":
          rate = 1;
          break;
        case "PKR":
          rate = 25.80;
          break;
        case "AFN":
          rate = 21.12;
          break;
        case "BTN":
          rate = 11.38;
          break;
        case "BDT":
          rate = 18.91;
          break;
      }
      break;
    case "PKR":
      switch(to) {
        case "NPR":
          rate = 0.62;
          break;
        case "INR":
          rate = 0.39;
          break;
        case "CNY":
          rate = 0.039;
          break;
        case "PKR":
          rate = 1;
          break;
        case "AFN":
          rate = 0.82;
          break;
        case "BTN":
          rate = 0.44;
          break;
        case "BDT":
          rate = 0.73;
          break;
      }
      break;
    case "AFN":
      switch(to) {
        case "NPR":
          rate = 0.76;
          break;
        case "INR":
          rate = 0.48;
          break;
        case "CNY":
          rate = 0.047;
          break;
        case "PKR":
          rate = 1.22;
          break;
        case "AFN":
          rate = 1;
          break;
        case "BTN":
          rate = 0.54;
          break;
        case "BDT":
          rate = 0.90;
          break;
      }
      break;
    case "BTN":
      switch(to) {
        case "NPR":
          rate = 1.41;
          break;
        case "INR":
          rate = 0.89;
          break;
        case "CNY":
          rate = 0.087;
          break;
        case "PKR":
          rate = 2.26;
          break;
        case "AFN":
          rate = 1.85;
          break;
        case "BTN":
          rate = 1;
          break;
        case "BDT":
          rate = 1.66;
          break;
      }
      break;
    case "BDT":
      switch(to) {
        case "NPR":
          rate = 0.85;
          break;
        case "INR":
          rate = 0.54;
          break;
        case "CNY":
          rate = 0.053;
          break;
        case "PKR":
          rate = 1.38;
          break;
        case "AFN":
          rate = 1.13;
          break;
        case "BTN":
          rate = 0.60;
          break;
        case "BDT":
          rate = 1;
          break;
      }
      break;
  }
  return rate;
}

 

jaminrai