fluentwebdev.com

 Elevating Ideas Through Code 👨‍💻☕

Meet Mohamed Nagy, a seasoned web developer in New York City with over five years of expertise. Proficient in HTML, CSS, and JavaScript, Mr. Nagy specializes in WordPress development, creating visually appealing and user-friendly websites. Dedicated to delivering high-quality solutions, Mr. Nagy stands out as a reliable and innovative professional in the ever-evolving web development landscape.

Expertise

Front-end

I'm a WordPress developer skilled in HTML, CSS, and JavaScript. I focus on delivering top-notch UI/UX with meticulous attention to detail, creating appealing and user-friendly websites.

Back-end

As a backend developer, I craft robust server applications, design APIs, and build scalable systems. I focus on high-performance solutions, strong problem-solving, and optimization, contributing to efficient and reliable backend architectures for successful web applications.

Frameworks

As an experienced React developer, I specialize in dynamic UIs and component-driven architecture. Proficient in state management, I ensure seamless data flow and deliver responsive, engaging web applications.

Code Lab

01. Tic Tac Toe

X's Turn
X's Wins: 0 O's Wins: 0 Draws: 0

HTML


<div class="game-board">
  <div class="cell" onclick="makeMove(0)"></div>
  <div class="cell" onclick="makeMove(1)"></div>
  <div class="cell" onclick="makeMove(2)"></div>
  <div class="cell" onclick="makeMove(3)"></div>
  <div class="cell" onclick="makeMove(4)"></div>
  <div class="cell" onclick="makeMove(5)"></div>
  <div class="cell" onclick="makeMove(6)"></div>
  <div class="cell" onclick="makeMove(7)"></div>
  <div class="cell" onclick="makeMove(8)"></div>
</div>

<div class="message" id="message">X's Turn</div>

<div class="score">
  <span id="scoreX">X's Wins: 0</span>

  <span id="scoreO">O's Wins: 0</span>
  <span id="draws">Draws: 0</span>
</div>

<div class="restB">
  <button class="reset-button" onclick="resetGame()">Reset Game</button>
  <button class="reset-score-button" onclick="resetScore()">
    Reset Score
  </button>
</div>

CSS


.game-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
  width: 300px;
  margin: 0 auto;
  margin-top: 50px;
}

.cell {
  font-family: "Roboto Serif", serif;
  background-color: white;
  border: 2px solid #ccc;
  border-radius: 7px;
  font-size: 60px;
  height: 70px;
  text-align: center;
  cursor: pointer;
}

.message {
  font-family: "Roboto Serif", serif;
  font-size: 24px;
  text-align: center;
  margin-top: 30px;
}

.cell.winning-cell {
  background-color: aliceblue;
}

.restB {
  text-align: center;
}

.reset-button {
  cursor: pointer;
  margin-top: 10px;
  padding: 10px 30px;
  background: white;
  color: #000;
  font-weight: bold;
  border: 2px solid #000;
  border-radius: 7px;
}

.reset-button:hover {
  padding: 10px 30px;
  background: whitesmoke;
  color: gray;
  transition: 0.5s;
  border: 2px solid gray;
  border-radius: 7px;
}

.score {
  font-size: 18px;
  margin-top: 10px;
}

.score span {
  padding: 7px;
  font-family: "Roboto Serif", serif;
  font-size: 14px;
}

.draws {
  font-size: 18px;
  margin-top: 10px;
}

.reset-score-button {
  cursor: pointer;
  margin-top: 10px;
  padding: 10px 30px;
  background: white;
  color: #000;
  font-weight: bold;
  border: 2px solid #000;
  border-radius: 7px;
}

.reset-score-button:hover {
  padding: 10px 30px;
  background: whitesmoke;
  color: gray;
  transition: 0.5s;
  border: 2px solid gray;
  border-radius: 7px;
}

JavaScript


let currentPlayer = "X";
let gameBoard = ["", "", "", "", "", "", "", "", ""];
let gameOver = false;
let scoreX = 0;
let scoreO = 0;
let draws = 0;

function makeMove(cellIndex) {
  if (!gameOver && gameBoard[cellIndex] === "") {
    gameBoard[cellIndex] = currentPlayer;
    document.getElementsByClassName("cell")[cellIndex].innerText =
      currentPlayer;

    if (checkWin(currentPlayer)) {
      displayMessage(currentPlayer + " wins!");
      updateScore(currentPlayer);
      gameOver = true;
    } else if (checkDraw()) {
      displayMessage("It's a draw!");
      updateDraws();
      gameOver = true;
    } else {
      currentPlayer = currentPlayer === "X" ? "O" : "X";
      displayMessage(currentPlayer + "'s Turn");
    }
  }
}

function checkWin(player) {
  const winningCombinations = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];

  for (let combination of winningCombinations) {
    const [a, b, c] = combination;
    if (
      gameBoard[a] === player &&
      gameBoard[b] === player &&
      gameBoard[c] === player
    ) {
      highlightWinningCells(combination);
      return true;
    }
  }

  return false;
}

function checkDraw() {
  return (
    gameBoard.every((cell) => cell !== "") && !checkWin("X") && !checkWin("O")
  );
}

function displayMessage(message) {
  document.getElementById("message").innerText = message;
}

function highlightWinningCells(cells) {
  for (let cellIndex of cells) {
    document
      .getElementsByClassName("cell")
      [cellIndex].classList.add("winning-cell");
  }
}

function updateScore(player) {
  if (player === "X") {
    scoreX++;
    document.getElementById("scoreX").innerText = "X's Wins: " + scoreX;
  } else if (player === "O") {
    scoreO++;
    document.getElementById("scoreO").innerText = "O's Wins: " + scoreO;
  }
}

function updateDraws() {
  draws++;
  document.getElementById("draws").innerText = "Draws: " + draws;
}

function resetScore() {
  scoreX = 0;
  scoreO = 0;
  draws = 0;
  document.getElementById("scoreX").innerText = "X's Wins: 0";
  document.getElementById("scoreO").innerText = "O's Wins: 0";
  document.getElementById("draws").innerText = "Draws: 0";
}

function disableBoard() {
  const cells = document.getElementsByClassName("cell");
  for (let cell of cells) {
    cell.onclick = null;
  }
}

// Reset the game
function resetGame() {
  currentPlayer = "X";
  gameBoard = ["", "", "", "", "", "", "", "", ""];
  gameOver = false;

  const cells = document.getElementsByClassName("cell");
  for (let cell of cells) {
    cell.innerText = "";
    cell.classList.remove("winning-cell");
    cell.onclick = function () {
      makeMove(Array.from(cells).indexOf(cell));
    };
  }

  displayMessage(currentPlayer + "'s Turn");
}

// Call resetGame() initially to start a new game
resetGame();

02. Currency Convert

HTML


<div class="containerC">
<div class="form-group">
  <label for="amount">Amount:</label>
  <input
    type="number"
    id="amount"
    placeholder="Enter amount"
    step="0.01"
    min="0"
    required
  />
</div>
<div class="form-group">
  <label for="from">From:</label>
  <select id="from" required>
    <option value="">Select currency</option>
    <option value="AFN">Afghanistan Afghani (AFN)</option>
    <option value="ALL">Albania Lek (ALL)</option>
    <option value="DZD">Algerian Dinar (DZD)</option>
    <option value="AOA">Angola Kwanza (AOA)</option>
    <option value="ARS">Argentina Peso (ARS)</option>
    <option value="AMD">Armenia Dram (AMD)</option>
    <option value="AWG">Aruba Florin (AWG)</option>
    <option value="AUD">Australia Dollar (AUD)</option>
    <option value="AZN">Azerbaijan New Manat (AZN)</option>
    <option value="BSD">Bahamas Dollar (BSD)</option>
    <option value="BHD">Bahrain Dinar (BHD)</option>
    <option value="BDT">Bangladesh Taka (BDT)</option>
    <option value="BBD">Barbados Dollar (BBD)</option>
    <option value="BYR">Belarus Ruble (BYR)</option>
    <option value="BZD">Belize Dollar (BZD)</option>
    <option value="BMD">Bermuda Dollar (BMD)</option>
    <option value="BTN">Bhutan Ngultrum (BTN)</option>
    <option value="BOB">Bolivia Boliviano (BOB)</option>
    <option value="BAM">Bosnia Mark (BAM)</option>
    <option value="BWP">Botswana Pula (BWP)</option>
    <option value="BRL">Brazil Real (BRL)</option>
    <option value="BND">Brunei Dollar (BND)</option>
    <option value="BGN">Bulgaria Lev (BGN)</option>
    <option value="BIF">Burundi Franc (BIF)</option>
    <option value="XOF">CFA Franc BCEAO (XOF)</option>
    <option value="XAF">CFA Franc BEAC (XAF)</option>
    <option value="XPF">CFP Franc (XPF)</option>
    <option value="KHR">Cambodia Riel (KHR)</option>
    <option value="CAD">Canada Dollar (CAD)</option>
    <option value="CVE">Cape Verde Escudo (CVE)</option>
    <option value="KYD">Cayman Islands Dollar (KYD)</option>
    <option value="CLP">Chili Peso (CLP)</option>
    <option value="CNY">China Yuan/Renminbi (CNY)</option>
    <option value="COP">Colombia Peso (COP)</option>
    <option value="KMF">Comoros Franc (KMF)</option>
    <option value="CDF">Congo Franc (CDF)</option>
    <option value="CRC">Costa Rica Colon (CRC)</option>
    <option value="HRK">Croatia Kuna (HRK)</option>
    <option value="CUC">Cuba Convertible Peso (CUC)</option>
    <option value="CUP">Cuba Peso (CUP)</option>
    <option value="CYP">Cyprus Pound (CYP)</option>
    <option value="CZK">Czech Koruna (CZK)</option>
    <option value="DKK">Denmark Krone (DKK)</option>
    <option value="DJF">Djibouti Franc (DJF)</option>
    <option value="DOP">Dominican Republic Peso (DOP)</option>
    <option value="XCD">East Caribbean Dollar (XCD)</option>
    <option value="EGP">Egypt Pound (EGP)</option>
    <option value="SVC">El Salvador Colon (SVC)</option>
    <option value="EEK">Estonia Kroon (EEK)</option>
    <option value="ETB">Ethiopia Birr (ETB)</option>
    <option value="EUR">Euro (EUR)</option>
    <option value="FKP">Falkland Islands Pound (FKP)</option>
    <option value="FJD">Fiji Dollar (FJD)</option>
    <option value="GMD">Gambia Dalasi (GMD)</option>
    <option value="GEL">Georgia Lari (GEL)</option>
    <option value="GHS">Ghana New Cedi (GHS)</option>
    <option value="GIP">Gibraltar Pound (GIP)</option>
    <option value="GRD">Greece Drachma (GRD)</option>
    <option value="GTQ">Guatemala Quetzal (GTQ)</option>
    <option value="GNF">Guinea Franc (GNF)</option>
    <option value="GYD">Guyana Dollar (GYD)</option>
    <option value="HTG">Haiti Gourde (HTG)</option>
    <option value="HNL">Honduras Lempira (HNL)</option>
    <option value="HKD">Hong Kong Dollar (HKD)</option>
    <option value="HUF">Hungary Forint (HUF)</option>
    <option value="ISK">Iceland Krona (ISK)</option>
    <option value="INR">India Rupee (INR)</option>
    <option value="IDR">Indonesia Rupiah (IDR)</option>
    <option value="IRR">Iran Rial (IRR)</option>
    <option value="IQD">Iraq Dinar (IQD)</option>
    <option value="IED">Ireland Pound (IED)</option>
    <option value="ILS">Israel New Shekel (ILS)</option>
    <option value="ITL">Italy Lira (ITL)</option>
    <option value="JMD">Jamaica Dollar (JMD)</option>
    <option value="JPY">Japan Yen (JPY)</option>
    <option value="JOD">Jordan Dinar (JOD)</option>
    <option value="KZT">Kazakhstan Tenge (KZT)</option>
    <option value="KES">Kenya Shilling (KES)</option>
    <option value="KWD">Kuwait Dinar (KWD)</option>
    <option value="KGS">Kyrgyzstan Som (KGS)</option>
    <option value="LAK">Laos Kip (LAK)</option>
    <option value="LVL">Latvia Lats (LVL)</option>
    <option value="LBP">Lebanon Pound (LBP)</option>
    <option value="LSL">Lesotho Loti (LSL)</option>
    <option value="LRD">Liberia Dollar (LRD)</option>
    <option value="LYD">Libya Dinar (LYD)</option>
    <option value="LTL">Lithuania Litas (LTL)</option>
    <option value="LUF">Luxembourg Franc (LUF)</option>
    <option value="MOP">Macau Pataca (MOP)</option>
    <option value="MKD">Macedonia Denar (MKD)</option>
    <option value="MGA">Malagasy Ariary (MGA)</option>
    <option value="MWK">Malawi Kwacha (MWK)</option>
    <option value="MYR">Malaysia Ringgit (MYR)</option>
    <option value="MVR">Maldives Rufiyaa (MVR)</option>
    <option value="MTL">Malta Lira (MTL)</option>
    <option value="MRO">Mauritania Ouguiya (MRO)</option>
    <option value="MUR">Mauritius Rupee (MUR)</option>
    <option value="MXN">Mexico Peso (MXN)</option>
    <option value="MDL">Moldova Leu (MDL)</option>
    <option value="MNT">Mongolia Tugrik (MNT)</option>
    <option value="MAD">Morocco Dirham (MAD)</option>
    <option value="MZN">Mozambique New Metical (MZN)</option>
    <option value="MMK">Myanmar Kyat (MMK)</option>
    <option value="ANG">NL Antilles Guilder (ANG)</option>
    <option value="NAD">Namibia Dollar (NAD)</option>
    <option value="NPR">Nepal Rupee (NPR)</option>
    <option value="NLG">Netherlands Guilder (NLG)</option>
    <option value="NZD">New Zealand Dollar (NZD)</option>
    <option value="NIO">Nicaragua Cordoba Oro (NIO)</option>
    <option value="NGN">Nigeria Naira (NGN)</option>
    <option value="KPW">North Korea Won (KPW)</option>
    <option value="NOK">Norway Kroner (NOK)</option>
    <option value="OMR">Oman Rial (OMR)</option>
    <option value="PKR">Pakistan Rupee (PKR)</option>
    <option value="PAB">Panama Balboa (PAB)</option>
    <option value="PGK">Papua New Guinea Kina (PGK)</option>
    <option value="PYG">Paraguay Guarani (PYG)</option>
    <option value="PEN">Peru Nuevo Sol (PEN)</option>
    <option value="PHP">Philippines Peso (PHP)</option>
    <option value="PLN">Poland Zloty (PLN)</option>
    <option value="PTE">Portugal Escudo (PTE)</option>
    <option value="QAR">Qatar Rial (QAR)</option>
    <option value="RON">Romania New Lei (RON)</option>
    <option value="RUB">Russia Rouble (RUB)</option>
    <option value="RWF">Rwanda Franc (RWF)</option>
    <option value="WST">Samoa Tala (WST)</option>
    <option value="STD">Sao Tome/Principe Dobra (STD)</option>
    <option value="SAR">Saudi Arabia Riyal (SAR)</option>
    <option value="RSD">Serbia Dinar (RSD)</option>
    <option value="SCR">Seychelles Rupee (SCR)</option>
    <option value="SLL">Sierra Leone Leone (SLL)</option>
    <option value="SGD">Singapore Dollar (SGD)</option>
    <option value="SKK">Slovakia Koruna (SKK)</option>
    <option value="SIT">Slovenia Tolar (SIT)</option>
    <option value="SBD">Solomon Islands Dollar (SBD)</option>
    <option value="SOS">Somali Shilling (SOS)</option>
    <option value="ZAR">South Africa Rand (ZAR)</option>
    <option value="KRW">South Korea Won (KRW)</option>
    <option value="ESP">Spain Peseta (ESP)</option>
    <option value="LKR">Sri Lanka Rupee (LKR)</option>
    <option value="SHP">St Helena Pound (SHP)</option>
    <option value="SDG">Sudan Pound (SDG)</option>
    <option value="SRD">Suriname Dollar (SRD)</option>
    <option value="SZL">Swaziland Lilangeni (SZL)</option>
    <option value="SEK">Sweden Krona (SEK)</option>
    <option value="CHF">Switzerland Franc (CHF)</option>
    <option value="SYP">Syria Pound (SYP)</option>
    <option value="TWD">Taiwan Dollar (TWD)</option>
    <option value="TZS">Tanzania Shilling (TZS)</option>
    <option value="THB">Thailand Baht (THB)</option>
    <option value="TOP">Tonga Pa'anga (TOP)</option>
    <option value="TTD">Trinidad/Tobago Dollar (TTD)</option>
    <option value="TND">Tunisia Dinar (TND)</option>
    <option value="TRY">Turkish New Lira (TRY)</option>
    <option value="TMM">Turkmenistan Manat (TMM)</option>
    <option value="USD">USA Dollar (USD)</option>
    <option value="UGX">Uganda Shilling (UGX)</option>
    <option value="UAH">Ukraine Hryvnia (UAH)</option>
    <option value="UYU">Uruguay Peso (UYU)</option>
    <option value="AED">United Arab Emirates Dirham (AED)</option>
    <option value="VUV">Vanuatu Vatu (VUV)</option>
    <option value="VEB">Venezuela Bolivar (VEB)</option>
    <option value="VND">Vietnam Dong (VND)</option>
    <option value="YER">Yemen Rial (YER)</option>
    <option value="ZMK">Zambia Kwacha (ZMK)</option>
    <option value="ZWD">Zimbabwe Dollar (ZWD)</option>
  </select>
</div>
<div class="form-group">
  <label for="to">To:</label>
  <select id="to" required>
    <option value="">Select currency</option>
    <option value="AFN">Afghanistan Afghani (AFN)</option>
    <option value="ALL">Albania Lek (ALL)</option>
    <option value="DZD">Algerian Dinar (DZD)</option>
    <option value="AOA">Angola Kwanza (AOA)</option>
    <option value="ARS">Argentina Peso (ARS)</option>
    <option value="AMD">Armenia Dram (AMD)</option>
    <option value="AWG">Aruba Florin (AWG)</option>
    <option value="AUD">Australia Dollar (AUD)</option>
    <option value="AZN">Azerbaijan New Manat (AZN)</option>
    <option value="BSD">Bahamas Dollar (BSD)</option>
    <option value="BHD">Bahrain Dinar (BHD)</option>
    <option value="BDT">Bangladesh Taka (BDT)</option>
    <option value="BBD">Barbados Dollar (BBD)</option>
    <option value="BYR">Belarus Ruble (BYR)</option>
    <option value="BZD">Belize Dollar (BZD)</option>
    <option value="BMD">Bermuda Dollar (BMD)</option>
    <option value="BTN">Bhutan Ngultrum (BTN)</option>
    <option value="BOB">Bolivia Boliviano (BOB)</option>
    <option value="BAM">Bosnia Mark (BAM)</option>
    <option value="BWP">Botswana Pula (BWP)</option>
    <option value="BRL">Brazil Real (BRL)</option>
    <option value="BND">Brunei Dollar (BND)</option>
    <option value="BGN">Bulgaria Lev (BGN)</option>
    <option value="BIF">Burundi Franc (BIF)</option>
    <option value="XOF">CFA Franc BCEAO (XOF)</option>
    <option value="XAF">CFA Franc BEAC (XAF)</option>
    <option value="XPF">CFP Franc (XPF)</option>
    <option value="KHR">Cambodia Riel (KHR)</option>
    <option value="CAD">Canada Dollar (CAD)</option>
    <option value="CVE">Cape Verde Escudo (CVE)</option>
    <option value="KYD">Cayman Islands Dollar (KYD)</option>
    <option value="CLP">Chili Peso (CLP)</option>
    <option value="CNY">China Yuan/Renminbi (CNY)</option>
    <option value="COP">Colombia Peso (COP)</option>
    <option value="KMF">Comoros Franc (KMF)</option>
    <option value="CDF">Congo Franc (CDF)</option>
    <option value="CRC">Costa Rica Colon (CRC)</option>
    <option value="HRK">Croatia Kuna (HRK)</option>
    <option value="CUC">Cuba Convertible Peso (CUC)</option>
    <option value="CUP">Cuba Peso (CUP)</option>
    <option value="CYP">Cyprus Pound (CYP)</option>
    <option value="CZK">Czech Koruna (CZK)</option>
    <option value="DKK">Denmark Krone (DKK)</option>
    <option value="DJF">Djibouti Franc (DJF)</option>
    <option value="DOP">Dominican Republic Peso (DOP)</option>
    <option value="XCD">East Caribbean Dollar (XCD)</option>
    <option value="EGP">Egypt Pound (EGP)</option>
    <option value="SVC">El Salvador Colon (SVC)</option>
    <option value="EEK">Estonia Kroon (EEK)</option>
    <option value="ETB">Ethiopia Birr (ETB)</option>
    <option value="EUR">Euro (EUR)</option>
    <option value="FKP">Falkland Islands Pound (FKP)</option>
    <option value="FJD">Fiji Dollar (FJD)</option>
    <option value="GMD">Gambia Dalasi (GMD)</option>
    <option value="GEL">Georgia Lari (GEL)</option>
    <option value="GHS">Ghana New Cedi (GHS)</option>
    <option value="GIP">Gibraltar Pound (GIP)</option>
    <option value="GRD">Greece Drachma (GRD)</option>
    <option value="GTQ">Guatemala Quetzal (GTQ)</option>
    <option value="GNF">Guinea Franc (GNF)</option>
    <option value="GYD">Guyana Dollar (GYD)</option>
    <option value="HTG">Haiti Gourde (HTG)</option>
    <option value="HNL">Honduras Lempira (HNL)</option>
    <option value="HKD">Hong Kong Dollar (HKD)</option>
    <option value="HUF">Hungary Forint (HUF)</option>
    <option value="ISK">Iceland Krona (ISK)</option>
    <option value="INR">India Rupee (INR)</option>
    <option value="IDR">Indonesia Rupiah (IDR)</option>
    <option value="IRR">Iran Rial (IRR)</option>
    <option value="IQD">Iraq Dinar (IQD)</option>
    <option value="IED">Ireland Pound (IED)</option>
    <option value="ILS">Israel New Shekel (ILS)</option>
    <option value="ITL">Italy Lira (ITL)</option>
    <option value="JMD">Jamaica Dollar (JMD)</option>
    <option value="JPY">Japan Yen (JPY)</option>
    <option value="JOD">Jordan Dinar (JOD)</option>
    <option value="KZT">Kazakhstan Tenge (KZT)</option>
    <option value="KES">Kenya Shilling (KES)</option>
    <option value="KWD">Kuwait Dinar (KWD)</option>
    <option value="KGS">Kyrgyzstan Som (KGS)</option>
    <option value="LAK">Laos Kip (LAK)</option>
    <option value="LVL">Latvia Lats (LVL)</option>
    <option value="LBP">Lebanon Pound (LBP)</option>
    <option value="LSL">Lesotho Loti (LSL)</option>
    <option value="LRD">Liberia Dollar (LRD)</option>
    <option value="LYD">Libya Dinar (LYD)</option>
    <option value="LTL">Lithuania Litas (LTL)</option>
    <option value="LUF">Luxembourg Franc (LUF)</option>
    <option value="MOP">Macau Pataca (MOP)</option>
    <option value="MKD">Macedonia Denar (MKD)</option>
    <option value="MGA">Malagasy Ariary (MGA)</option>
    <option value="MWK">Malawi Kwacha (MWK)</option>
    <option value="MYR">Malaysia Ringgit (MYR)</option>
    <option value="MVR">Maldives Rufiyaa (MVR)</option>
    <option value="MTL">Malta Lira (MTL)</option>
    <option value="MRO">Mauritania Ouguiya (MRO)</option>
    <option value="MUR">Mauritius Rupee (MUR)</option>
    <option value="MXN">Mexico Peso (MXN)</option>
    <option value="MDL">Moldova Leu (MDL)</option>
    <option value="MNT">Mongolia Tugrik (MNT)</option>
    <option value="MAD">Morocco Dirham (MAD)</option>
    <option value="MZN">Mozambique New Metical (MZN)</option>
    <option value="MMK">Myanmar Kyat (MMK)</option>
    <option value="ANG">NL Antilles Guilder (ANG)</option>
    <option value="NAD">Namibia Dollar (NAD)</option>
    <option value="NPR">Nepal Rupee (NPR)</option>
    <option value="NLG">Netherlands Guilder (NLG)</option>
    <option value="NZD">New Zealand Dollar (NZD)</option>
    <option value="NIO">Nicaragua Cordoba Oro (NIO)</option>
    <option value="NGN">Nigeria Naira (NGN)</option>
    <option value="KPW">North Korea Won (KPW)</option>
    <option value="NOK">Norway Kroner (NOK)</option>
    <option value="OMR">Oman Rial (OMR)</option>
    <option value="PKR">Pakistan Rupee (PKR)</option>
    <option value="PAB">Panama Balboa (PAB)</option>
    <option value="PGK">Papua New Guinea Kina (PGK)</option>
    <option value="PYG">Paraguay Guarani (PYG)</option>
    <option value="PEN">Peru Nuevo Sol (PEN)</option>
    <option value="PHP">Philippines Peso (PHP)</option>
    <option value="PLN">Poland Zloty (PLN)</option>
    <option value="PTE">Portugal Escudo (PTE)</option>
    <option value="QAR">Qatar Rial (QAR)</option>
    <option value="RON">Romania New Lei (RON)</option>
    <option value="RUB">Russia Rouble (RUB)</option>
    <option value="RWF">Rwanda Franc (RWF)</option>
    <option value="WST">Samoa Tala (WST)</option>
    <option value="STD">Sao Tome/Principe Dobra (STD)</option>
    <option value="SAR">Saudi Arabia Riyal (SAR)</option>
    <option value="RSD">Serbia Dinar (RSD)</option>
    <option value="SCR">Seychelles Rupee (SCR)</option>
    <option value="SLL">Sierra Leone Leone (SLL)</option>
    <option value="SGD">Singapore Dollar (SGD)</option>
    <option value="SKK">Slovakia Koruna (SKK)</option>
    <option value="SIT">Slovenia Tolar (SIT)</option>
    <option value="SBD">Solomon Islands Dollar (SBD)</option>
    <option value="SOS">Somali Shilling (SOS)</option>
    <option value="ZAR">South Africa Rand (ZAR)</option>
    <option value="KRW">South Korea Won (KRW)</option>
    <option value="ESP">Spain Peseta (ESP)</option>
    <option value="LKR">Sri Lanka Rupee (LKR)</option>
    <option value="SHP">St Helena Pound (SHP)</option>
    <option value="SDG">Sudan Pound (SDG)</option>
    <option value="SRD">Suriname Dollar (SRD)</option>
    <option value="SZL">Swaziland Lilangeni (SZL)</option>
    <option value="SEK">Sweden Krona (SEK)</option>
    <option value="CHF">Switzerland Franc (CHF)</option>
    <option value="SYP">Syria Pound (SYP)</option>
    <option value="TWD">Taiwan Dollar (TWD)</option>
    <option value="TZS">Tanzania Shilling (TZS)</option>
    <option value="THB">Thailand Baht (THB)</option>
    <option value="TOP">Tonga Pa'anga (TOP)</option>
    <option value="TTD">Trinidad/Tobago Dollar (TTD)</option>
    <option value="TND">Tunisia Dinar (TND)</option>
    <option value="TRY">Turkish New Lira (TRY)</option>
    <option value="TMM">Turkmenistan Manat (TMM)</option>
    <option value="USD">USA Dollar (USD)</option>
    <option value="UGX">Uganda Shilling (UGX)</option>
    <option value="UAH">Ukraine Hryvnia (UAH)</option>
    <option value="UYU">Uruguay Peso (UYU)</option>
    <option value="AED">United Arab Emirates Dirham (AED)</option>
    <option value="VUV">Vanuatu Vatu (VUV)</option>
    <option value="VEB">Venezuela Bolivar (VEB)</option>
    <option value="VND">Vietnam Dong (VND)</option>
    <option value="YER">Yemen Rial (YER)</option>
    <option value="ZMK">Zambia Kwacha (ZMK)</option>
    <option value="ZWD">Zimbabwe Dollar (ZWD)</option>
  </select>
</div>
<div class="result" id="result"></div>
</div>
</div>

CSS


.containerC {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  max-width: 400px;
  width: 100%;
}

h1 {
  text-align: center;
}

.form-group {
  display: flex;
  margin-bottom: 20px;
}

.form-group label {
  flex: 1;
  font-weight: bold;
  line-height: 32px;
}

.form-group input,
.form-group select {
  flex: 2;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.result {
  text-align: center;
  font-size: 20px;
  margin-top: 20px;
}

.result{
font-size:18px;
text-align:right;
background: rgba(0, 200, 255, 0.06);
padding:7px;
}

JavaScript


document.addEventListener("DOMContentLoaded", function() {
  const amountInput = document.getElementById('amount');
  const fromSelect = document.getElementById('from');
  const toSelect = document.getElementById('to');
  const resultDiv = document.getElementById('result');

  amountInput.addEventListener('input', convert);
  fromSelect.addEventListener('change', convert);
  toSelect.addEventListener('change', convert);

  function convert() {
    const amount = amountInput.value;
    const fromCurrency = fromSelect.value;
    const toCurrency = toSelect.value;

    if (amount === '' || fromCurrency === '' || toCurrency === '') {
      resultDiv.textContent = 'Please fill in all fields.';
      return;
    }

    fetch(`https://api.exchangerate-api.com/v4/latest/${fromCurrency}`)
      .then(response => response.json())
      .then(data => {
        const exchangeRate = data.rates[toCurrency];
        if (exchangeRate) {
          const convertedAmount = amount * exchangeRate;
          resultDiv.textContent = `${amount} ${fromCurrency} = ${convertedAmount.toFixed(2)} ${toCurrency}`;
        } else {
          resultDiv.textContent = 'Currency conversion not available.';
        }
      })
      .catch(error => {
        console.log(error);
        resultDiv.textContent = 'An error occurred while fetching data.';
      });
  }

  convert(); // Call convert initially to display results
});

03. Project

No more items to display

Contact

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.