Online App Currency Converter Kaise Banaye एक उपयोगी Tool Website ya App बना सकते हो, जो विभिन्न मुद्राओं को Real TIme में बदलने की सुविधा प्रदान करता है। अगर आप एक ऐसा App बनाना चाहते हैं, जो Currency Converter को आसान बनाए, तो यहां स्टेप-बाय-स्टेप प्रक्रिया दी गई है।
क्या है करेंसी कनवर्टर ऐप? – Currency Converter App Online
Curreny Converter App एक ऐसा प्लेटफ़ॉर्म है, जो उपयोगकर्ताओं को अलग-अलग देशों की मुद्राओं को Live Exchange के आधार पर बदलने में मदद करता है। इसे टूरिस्ट, व्यवसायी और निवेशकों के लिए बेहद उपयोगी माना जाता है।
Online App Currency Converter Kaise Banaye- करेंसी कनवर्टर ऐप में शामिल किए जाने वाले फीचर्स
- लाइव एक्सचेंज रेट्स – Live Exchange rates
- ऑफलाइन मोड – Offline Mode
- कन्वर्जन हिस्ट्री – onverter Histroy
- ग्राफिकल डेटा रिप्रेजेंटेशन
- मल्टी लैंग्वेज सपोर्ट – All languge Support
ऑनलाइन करेंसी कनवर्टर ऐप बनाना एक उपयोगी और फायदेमंद प्रोजेक्ट हो सकता है। इसे बनाने के लिए सही प्लानिंग, Tool और APIs का उपयोग करना जरूरी है। जब आपका App तैयार हो जाए, तो इसे आकर्षक फीचर्स और यूजर फ्रेंडली डिज़ाइन के साथ लॉन्च करें। इस को मैने इस तरह की कोडिग की है, कि आप इसे website भी बना सकते है।
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Currency Converter</title>
<link rel=”stylesheet” href=”styles.css”>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
text-align: center;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, select, button {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
font-size: 18px;
text-align: center;
}
/* Navigation Menu */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.nav-links {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.nav-links li {
margin: 0 15px;
}
.nav-links a {
text-decoration: none;
color: white;
font-size: 16px;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: #4CAF50;
}
.hamburger {
display: none;
background: none;
border: none;
font-size: 24px;
color: white;
cursor: pointer;
}
@media (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
position: absolute;
top: 50px;
right: 0;
background-color: #333;
padding: 10px;
width: 100%;
}
.nav-links.active {
display: flex;
}
.hamburger {
display: block;
}
}
</style>
</head>
<body>
<div class=”container”>
<h1>Currency Converter</h1>
<form id=”converter-form”>
<div class=”form-group”>
<label for=”amount”>Amount:</label>
<input type=”number” id=”amount” placeholder=”Enter amount” required>
</div>
<div class=”form-group”>
<label for=”from-currency”>From:</label>
<select id=”from-currency”></select>
</div>
<div class=”form-group”>
<label for=”to-currency”>To:</label>
<select id=”to-currency”></select>
</div>
<button type=”submit”>Convert</button>
</form>
<div id=”result” class=”result”></div>
</div>
<script>
document.addEventListener(‘DOMContentLoaded’, () => {
const fromCurrency = document.getElementById(‘from-currency’);
const toCurrency = document.getElementById(‘to-currency’);
const form = document.getElementById(‘converter-form’);
const resultDiv = document.getElementById(‘result’);
const apiKey = ‘YOUR_API_KEY’; // Replace with your actual API key
const apiUrl = ‘https://open.er-api.com/v6/latest’;
// Fetch currency data and populate dropdowns
fetch(apiUrl)
.then(response => response.json())
.then(data => {
const currencies = Object.keys(data.rates);
currencies.forEach(currency => {
const option1 = document.createElement(‘option’);
option1.value = currency;
option1.textContent = currency;
fromCurrency.appendChild(option1);
const option2 = document.createElement(‘option’);
option2.value = currency;
option2.textContent = currency;
toCurrency.appendChild(option2);
});
})
.catch(error => {
console.error(‘Error fetching currency data:’, error);
});
// Handle form submission
form.addEventListener(‘submit’, (event) => {
event.preventDefault();
const amount = parseFloat(document.getElementById(‘amount’).value);
const from = fromCurrency.value;
const to = toCurrency.value;
if (isNaN(amount) || !from || !to) {
resultDiv.textContent = ‘Please enter a valid amount and select currencies.’;
return;
}
fetch(`${apiUrl}/${from}`)
.then(response => response.json())
.then(data => {
if (data.rates[to]) {
const rate = data.rates[to];
const convertedAmount = (amount * rate).toFixed(2);
resultDiv.textContent = `${amount} ${from} = ${convertedAmount} ${to}`;
} else {
resultDiv.textContent = ‘Conversion rate not available.’;
}
})
.catch(error => {
console.error(‘Error during conversion:’, error);
resultDiv.textContent = ‘Error fetching conversion data.’;
});
});
});
</script>
</body>
</html>
currencyconvert.html File Save Kare. Run any web browser Host to Local and public इस पेज को आप किसी भी जगह लोकल या public पर host Kare.
जैसे कि Hostinger पर hosting लेकर Page Ko Upload करके website बनाकर पैसे कमाएं. साथ में Snake Online का App भी बना दिया उसे आप Downlod करें।
1 thought on “Online App Currency Converter Kaise Banaye- Without AI”