wwwebdeveloper.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

With proficiency in HTML, CSS, and JavaScript, I specialize in WordPress development, bringing a meticulous and detail-oriented approach to my work with a specific emphasis on delivering top-notch UI/UX. My skill set is demonstrated through the creation of appealing and user-friendly websites, showcasing expertise in crafting seamless designs that elevate overall user experiences.

Back-end

As a backend developer, my expertise lies in crafting robust server applications, designing APIs, and building scalable systems. With a focus on delivering high-performance solutions, I am committed to strong problem-solving and optimization. My proficiency extends to creating efficient and reliable backend architectures that contribute to the overall success and functionality of web applications.

Frameworks

As an experienced React developer, I specialize in crafting dynamic User Interfaces (UIs) with a keen understanding of component-driven architecture. Proficient in state management, I ensure the seamless interaction and flow of data within applications. My commitment lies in delivering responsive user experiences, where the user interface not only meets but exceeds expectations, creating engaging and efficient 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.