![](https://i.imgur.com/9UQ54uc.gif"){kind=small}
mrbeansbigtoe123
New member
0
0%
Months of Service
0%
Hello everyone, I found an HTML code for a function that I need and the code is as follows:
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Converter</title>
</head>
<body>
<h1>Power Usage Converter</h1>
<div class="row">
<div class="column">
<form>
<label for="volts">Voltage (V)</label>
<input type="number" id="volts" name="volts" placeholder="Volts">
<label for="amps1">Current (A)</label>
<input type="number" id="amps1" name="amps1" placeholder="Amps">
<button type="button" onclick="convertToWatts()">Convert to Watts</button>
</form>
<div class="result" id="wattsResult"></div>
</div>
<div class="column">
<form>
<label for="watts">Power (W)</label>
<input type="number" id="watts" name="watts" placeholder="Watts">
<label for="amps2">Current (A)</label>
<input type="number" id="amps2" name="amps2" placeholder="Amps">
<button type="button" onclick="convertToVolts()">Convert to Volts</button>
</form>
<div class="result" id="voltsResult"></div>
</div>
</div>
<script>
function convertToWatts() { console.log("Watts"); }
function convertToVolts() { console.log("Volts"); }
</script>
</body>
</html>
```
I saved it as index.html on my computer and it works perfectly. Then, I uploaded it to my server in a folder named "script" for organization. Now, my question is: How do I make it visible on my website? I tried copying the code directly into WordPress and it shows up, but I'm not sure if that's the correct way because I believe it's not referencing my index.html file in the script folder.
Any HTML genius out there?
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Converter</title>
</head>
<body>
<h1>Power Usage Converter</h1>
<div class="row">
<div class="column">
<form>
<label for="volts">Voltage (V)</label>
<input type="number" id="volts" name="volts" placeholder="Volts">
<label for="amps1">Current (A)</label>
<input type="number" id="amps1" name="amps1" placeholder="Amps">
<button type="button" onclick="convertToWatts()">Convert to Watts</button>
</form>
<div class="result" id="wattsResult"></div>
</div>
<div class="column">
<form>
<label for="watts">Power (W)</label>
<input type="number" id="watts" name="watts" placeholder="Watts">
<label for="amps2">Current (A)</label>
<input type="number" id="amps2" name="amps2" placeholder="Amps">
<button type="button" onclick="convertToVolts()">Convert to Volts</button>
</form>
<div class="result" id="voltsResult"></div>
</div>
</div>
<script>
function convertToWatts() { console.log("Watts"); }
function convertToVolts() { console.log("Volts"); }
</script>
</body>
</html>
```
I saved it as index.html on my computer and it works perfectly. Then, I uploaded it to my server in a folder named "script" for organization. Now, my question is: How do I make it visible on my website? I tried copying the code directly into WordPress and it shows up, but I'm not sure if that's the correct way because I believe it's not referencing my index.html file in the script folder.
Any HTML genius out there?