# Complete Online Conversion Website
I'll provide you with a well-organized solution that you can deploy online. This includes HTML, CSS, and JavaScript for a fully functional conversion website, plus instructions for hosting it.
## Complete HTML File (index.html)
```html
ConvertEasy - Online Unit Conversion Tools
Your one-stop solution for all unit conversions
Convert Between Any Units Instantly
Free, fast, and accurate conversion tools for everyday use
Explore Tools
Fast Conversions
Get instant results without any delays or page reloads
Accurate Results
Precise calculations using up-to-date conversion factors
Mobile Friendly
Works perfectly on all devices from desktop to smartphone
Privacy Focused
No tracking, no ads, just pure conversion tools
The History of the Metric System
Learn how the metric system became the international standard for measurement.
Read More
Understanding Temperature Scales
Discover the differences between Celsius, Fahrenheit, and Kelvin scales.
Read More
How Currency Exchange Rates Work
Everything you need to know about how currency values are determined.
Read More
```
## CSS File (styles.css)
```css
/* Global Styles */
:root {
--primary-color: #3498db;
--secondary-color: #2c3e50;
--accent-color: #e74c3c;
--light-color: #ecf0f1;
--dark-color: #2c3e50;
--text-color: #333;
--text-light: #7f8c8d;
--border-radius: 8px;
--box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: #f9f9f9;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* Header Styles */
header {
background-color: var(--secondary-color);
color: white;
padding: 1rem 0;
box-shadow: var(--box-shadow);
}
.logo h1 {
font-size: 1.8rem;
margin-bottom: 0.5rem;
}
.logo p {
font-size: 0.9rem;
opacity: 0.8;
}
nav ul {
display: flex;
list-style: none;
margin-top: 1rem;
}
nav li {
margin-right: 1.5rem;
}
nav a {
color: white;
text-decoration: none;
font-weight: 500;
transition: var(--transition);
display: flex;
align-items: center;
gap: 0.5rem;
}
nav a:hover {
color: var(--primary-color);
}
nav a.active {
color: var(--primary-color);
font-weight: 600;
}
/* Hero Section */
.hero {
display: flex;
flex-direction: column;
align-items: center;
padding: 3rem 0;
gap: 2rem;
}
.hero-content {
text-align: center;
}
.hero-content h2 {
font-size: 2.2rem;
margin-bottom: 1rem;
color: var(--secondary-color);
}
.hero-content p {
font-size: 1.1rem;
margin-bottom: 1.5rem;
color: var(--text-light);
}
.btn {
display: inline-block;
background-color: var(--primary-color);
color: white;
padding: 0.8rem 1.5rem;
border-radius: var(--border-radius);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.btn:hover {
background-color: #2980b9;
transform: translateY(-2px);
}
.hero-image img {
max-width: 100%;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
/* Conversion Tools Section */
.conversion-tools {
padding: 3rem 0;
}
.conversion-tools h2, .features h2, .blog-preview h2 {
font-size: 1.8rem;
margin-bottom: 2rem;
color: var(--secondary-color);
display: flex;
align-items: center;
gap: 0.8rem;
}
.tool-category {
background-color: white;
border-radius: var(--border-radius);
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: var(--box-shadow);
}
.tool-category h3 {
font-size: 1.3rem;
margin-bottom: 1.5rem;
color: var(--secondary-color);
display: flex;
align-items: center;
gap: 0.8rem;
}
.converter {
display: flex;
flex-direction: column;
gap: 1rem;
}
.input-group {
display: flex;
gap: 1rem;
}
.input-group input, .input-group select {
flex: 1;
padding: 0.8rem;
border: 1px solid #ddd;
border-radius: var(--border-radius);
font-size: 1rem;
}
.input-group input:focus, .input-group select:focus {
outline: none;
border-color: var(--primary-color);
}
.input-group input[readonly] {
background-color: #f5f5f5;
}
button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 0.8rem;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
button:hover {
background-color: #2980b9;
}
.api-notice {
font-size: 0.8rem;
color: var(--text-light);
text-align: center;
margin-top: 0.5rem;
}
/* Features Section */
.features {
padding: 3rem 0;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.feature-card {
background-color: white;
padding: 1.5rem;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
text-align: center;
transition: var(--transition);
}
.feature-card:hover {
transform: translateY(-5px);
}
.feature-card i {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
.feature-card h3 {
margin-bottom: 0.8rem;
color: var(--secondary-color);
}
.feature-card p {
color: var(--text-light);
font-size: 0.95rem;
}
/* Blog Preview Section */
.blog-preview {
padding: 3rem 0;
}
.articles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
article {
background-color: white;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--box-shadow);
transition: var(--transition);
}
article:hover {
transform: translateY(-5px);
}
article img {
width: 100%;
height: 200px;
object-fit: cover;
}
article h3 {
padding: 1rem 1rem 0.5rem;
color: var(--secondary-color);
}
article p {
padding: 0 1rem 1rem;
color: var(--text-light);
}
.read-more {
display: inline-block;
padding: 0.5rem 1rem;
margin: 0 1rem 1rem;
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.read-more:hover {
color: #2980b9;
}
.read-more i {
transition: var(--transition);
}
.read-more:hover i {
transform: translateX(3px);
}
/* Footer Styles */
footer {
background-color: var(--secondary-color);
color: white;
padding: 3rem 0 0;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h3 {
font-size: 1.3rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.8rem;
}
.footer-section p {
margin-bottom: 1rem;
opacity: 0.8;
}
.footer-section ul {
list-style: none;
}
.footer-section li {
margin-bottom: 0.8rem;
}
.footer-section a {
color: white;
text-decoration: none;
opacity: 0.8;
transition: var(--transition);
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-section a:hover {
opacity: 1;
color: var(--primary-color);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.5rem 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
text-align: center;
}
.social-icons {
display: flex;
gap: 1rem;
}
.social-icons a {
color: white;
font-size: 1.2rem;
opacity: 0.8;
transition: var(--transition);
}
.social-icons a:hover {
opacity: 1;
color: var(--primary-color);
}
/* Responsive Styles */
@media (min-width: 768px) {
header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
margin-top: 0;
}
.hero {
flex-direction: row;
text-align: left;
}
.hero-content {
flex: 1;
text-align: left;
}
.hero-image {
flex: 1;
}
.footer-bottom {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
}
@media (min-width: 992px) {
.hero-content h2 {
font-size: 2.5rem;
}
}
```
## JavaScript File (script.js)
```javascript
// Length Converter
document.getElementById('length-convert').addEventListener('click', function() {
const value = parseFloat(document.getElementById('length-value').value);
const fromUnit = document.getElementById('length-from').value;
const toUnit = document.getElementById('length-to').value;
if (isNaN(value)) {
alert('Please enter a valid number');
return;
}
// Convert to meters first (base unit)
let meters;
switch(fromUnit) {
case 'mm': meters = value / 1000; break;
case 'cm': meters = value / 100; break;
case 'm': meters = value; break;
case 'km': meters = value * 1000; break;
case 'in': meters = value * 0.0254; break;
case 'ft': meters = value * 0.3048; break;
case 'yd': meters = value * 0.9144; break;
case 'mi': meters = value * 1609.344; break;
}
// Convert from meters to target unit
let result;
switch(toUnit) {
case 'mm': result = meters * 1000; break;
case 'cm': result = meters * 100; break;
case 'm': result = meters; break;
case 'km': result = meters / 1000; break;
case 'in': result = meters / 0.0254; break;
case 'ft': result = meters / 0.3048; break;
case 'yd': result = meters / 0.9144; break;
case 'mi': result = meters / 1609.344; break;
}
document.getElementById('length-result').value = result.toFixed(6);
});
// Temperature Converter
document.getElementById('temp-convert').addEventListener('click', function() {
const value = parseFloat(document.getElementById('temp-value').value);
const fromUnit = document.getElementById('temp-from').value;
const toUnit = document.getElementById('temp-to').value;
if (isNaN(value)) {
alert('Please enter a valid number');
return;
}
// Convert to Celsius first (base unit)
let celsius;
switch(fromUnit) {
case 'c': celsius = value; break;
case 'f': celsius = (value - 32) * 5/9; break;
case 'k': celsius = value - 273.15; break;
}
// Convert from Celsius to target unit
let result;
switch(toUnit) {
case 'c': result = celsius; break;
case 'f': result = (celsius * 9/5) + 32; break;
case 'k': result = celsius + 273.15; break;
}
document.getElementById('temp-result').value = result.toFixed(2);
});
// Weight Converter
document.getElementById('weight-convert').addEventListener('click', function() {
const value = parseFloat(document.getElementById('weight-value').value);
const fromUnit = document.getElementById('weight-from').value;
const toUnit = document.getElementById('weight-to').value;
if (isNaN(value)) {
alert('Please enter a valid number');
return;
}
// Convert to grams first (base unit)
let grams;
switch(fromUnit) {
case 'g': grams = value; break;
case 'kg': grams = value * 1000; break;
case 'oz': grams = value * 28.3495; break;
case 'lb': grams = value * 453.592; break;
case 'st': grams = value * 6350.29; break;
}
// Convert from grams to target unit
let result;
switch(toUnit) {
case 'g': result = grams; break;
case 'kg': result = grams / 1000; break;
case 'oz': result = grams / 28.3495; break;
case 'lb': result = grams / 453.592; break;
case 'st': result = grams / 6350.29; break;
}
document.getElementById('weight-result').value = result.toFixed(6);
});
// Make converters work when pressing Enter
document.querySelectorAll('input').forEach(input => {
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
const converterId = this.closest('.converter').querySelector('button').id;
document.getElementById(converterId).click();
}
});
});
```
## Currency API File (currency-api.js)
```javascript
// Currency Converter with API
document.getElementById('currency-convert').addEventListener('click', async function() {
const value = parseFloat(document.getElementById('currency-value').value);
const fromCurrency = document.getElementById('currency-from').value;
const toCurrency = document.getElementById('currency-to').value;
if (isNaN(value)) {
alert('Please enter a valid number');
return;
}
// Show loading state
const resultField = document.getElementById('currency-result');
resultField.value = "Loading...";
try {
// Note: In a real application, you would use a proper API with your own API key
// This is a mock implementation that simulates API behavior
// Simulate API delay
await new Promise(resolve => setTimeout(resolve, 800));
// Mock exchange rates (in a real app, these would come from an API)
const mockRates = {
USD: { USD: 1, EUR: 0.85, GBP: 0.73, JPY: 110.15, CAD: 1.25 },
EUR: { USD: 1.18, EUR: 1, GBP: 0.86, JPY: 129.55, CAD: 1.47 },
GBP: { USD: 1.37, EUR: 1.16, GBP: 1, JPY: 150.50, CAD: 1.71 },
JPY: { USD: 0.0091, EUR: 0.0077, GBP: 0.0066, JPY: 1, CAD: 0.011 },
CAD: { USD: 0.80, EUR: 0.68, GBP: 0.58, JPY: 90.91, CAD: 1 }
};
// Get the rate (from mock data in this example)
const rate = mockRates[fromCurrency][toCurrency];
const result = value * rate;
// Display result
resultField.value = result.toFixed(2);
// In a real implementation, you would:
// 1. Use a real API like ExchangeRate-API
// 2. Cache rates in localStorage with a timestamp
// 3. Only fetch new rates when cached ones are stale
} catch (error) {
console.error("Currency conversion error:", error);
resultField.value = "Error";
alert("Failed to get currency rates. Please try again later.");
}
});
// For a real implementation, you would add:
// - API key management
// - Rate caching
// - Error handling
// - Fallback to mock data when offline
```
## How to Deploy This Website Online
To make your conversion website live, follow these steps:
### Option 1: Free Hosting with GitHub Pages
1. Create a GitHub account if you don't have one
2. Create a new repository named "conversion-website"
3. Upload all four files (index.html, styles.css, script.js, currency-api.js)
4. Go to Repository Settings > Pages
5. Select "main" branch and root folder, then click Save
6. Your site will be live at `https://[your-username].github.io/conversion-website/`
### Option 2: Free Hosting with Netlify
1. Create a Netlify account
2. Drag and drop your project folder to the Netlify drop zone
3. Your site will be deployed instantly with a random URL
4. You can customize the domain in settings
### Option 3: Paid Hosting (More Professional)
1. Purchase a domain name (from Namecheap, Google Domains, etc.)
2. Get hosting (SiteGround, Bluehost, etc.)
3. Upload your files via FTP or the hosting file manager
4. Connect your domain to the hosting
## Additional Improvements You Can Make
1. **Add More Conversion Tools**:
- Volume (liters, gallons, etc.)
- Area (square meters, acres, etc.)
- Time zones
- Data storage (MB, GB, TB)
2. **Enhance the Currency Converter**:
- Use a real API like ExchangeRate-API
- Add currency symbols in results
- Implement rate caching
3. **Add User Features**:
- Save favorite conversions
- Conversion history
- Dark mode toggle
4. **SEO Optimization**:
- Add meta tags
- Create sitemap.xml
- Add structured data
This complete solution gives you a professional, functional conversion website that you can deploy immediately. The code is well-organized, responsive, and includes all the core functionality of a conversion tool website.
No comments:
Post a Comment