Priscila Priscila - 4 days ago 6
CSS Question

Exchange program in javascript

I am trying to write an exchange converter in javascript combined with HTML and CSS code. The problem i get here is that i could not convert a number from one currency to another, while there are two different boxes, one for entering a value and the other for returning the exchanged value. My program simply does not convert anything. I would appreciate it if u could help.
Below is my entire code:

<html>
<head>
<title> Converter </title>
<style type="text/css">
div{
width:600px;
height:300px;
background-color:blue;
margin-right: 120px;
margin-top: 40px;
}
#box1{
width: 200px;
height: 200px;
background-color:red;
}
#box2{
width:200px;
height: 200px;
background-color:red;
}
p{
font-size:12pt;
font-family: arial, sans-serif;
}
nav { font-weight : bold;
color: white;
border : 2px solid royalblue;
text-align: center ;
width: 10em;
background-color : royalblue;}
nav ul { display: none;
list-style: none;
margin : 0;
padding: 0;}
nav ul li { border-top: 2px solid royalblue;
background-color : white;
width: 10em;
color: black;}
nav ul li:hover { background-color : powderblue;}
a { text-decoration: none;}
</style>
<script type="text/javascript">
function convert(){
if(document.getElementByOptionValue("txtList1")==Euro(EUR) && document.getElementByOptionValue("txtList2")==Albania(LEK)){
var eur=document.getElementById("first");
var e=parseFloat(eur.value);
if(!validateForm())
return;
var l=e*135.82;
var lek=document.getElementById("second");
lek.value=l;
}
if(document.getElementByOptionValue("txtList1")==Albania(LEK) && document.getElementByOptionValue("txtList2")==Euro(EUR)){
var lek=document.getElementById("first");
var l=parseFloat(lek.value);
if(!validateForm())
return;
var e=l*138.92;
var eur=document.getElementById("second");
lek.value=l;
}
}
function validateForm(){
var f=document.getElementById("first");
if(f.value==""){
alert("Jepni nje vlere");
f.focus();
return false;
}
if(isNaN(f.value){
alert("Vlera qe dhate nuk eshte numer");
f.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<div id="box1">
<form action="">
<p>Type a country or a currency</p>

<p> <label for="txtList" >
<input type="text" id="txtList1"
placeholder="United States Dollars (USD)" list="currencies"/>
<datalist id="currencies">
<option value="United States Dollars (USD)">
<option value="Euro(EUR)">
<option value="Albania (LEK)">
<option value="Paunds (PAUND)">

</datalist>
</label></input></p>
<nav>Browse All
<ul>
<li><a href = "#" >United States Dollars (USD)</a></li>
<li><a href = "#" >Euro(EUR)</a></li>
<li><a href = "#" >Albania (LEK)</a></li>
<li><a href = "#" >Paunds (PAUND)</a></li>

</ul>
</nav>
<p>Please enter an amount </p>
<p><label>Currency:
<input name = "name" type = "text" id="first" size = "15"
maxlength = "10">
</label></p></div>
<input type="button" value="=" onclick="convert()"/>
<div id="box2">
<p>Type a country or a currency</p>

<p> <label for="txtList" >
<input type="text" id="txtList2"
placeholder="Euro (EUR)" list="currencies"/>
<datalist id="currencies">
<option value="United States Dollars (USD)">
<option value="Euro(EUR)">
<option value="Albania (LEK)">
<option value="Paunds (PAUND)">

</datalist>
</label></input></p>
<nav>Browse All
<ul>
<li><a href = "#" >United States Dollars (USD)</a></li>
<li><a href = "#" >Euro(EUR)</a></li>
<li><a href = "#" >Albania (LEK)</a></li>
<li><a href = "#" >Paunds (PAUND)</a></li>

</ul>
</nav>
<p>Please enter an amount </p>
<p><label>Currency:
<input name = "name" type = "text" id="second" size = "15"
maxlength = "10">

</label></p></div></form>
</body>
</html>


The short code:

function convert(){
if(document.getElementByOptionValue("txtList1")==Euro(EUR) && document.getElementByOptionValue("txtList2")==Albania(LEK)){
var eur=document.getElementById("first");
var e=parseFloat(eur.value);
if(!validateForm())
return;
var l=e*135.82;
var lek=document.getElementById("second");
lek.value=l;
}
if(document.getElementByOptionValue("txtList1")==Albania(LEK) && document.getElementByOptionValue("txtList2")==Euro(EUR)){
var lek=document.getElementById("first");
var l=parseFloat(lek.value);
if(!validateForm())
return;
var e=l*138.92;
var eur=document.getElementById("second");
lek.value=l;
}
}
function validateForm(){
var f=document.getElementById("first");
if(f.value==""){
alert("Jepni nje vlere");
f.focus();
return false;
}
if(isNaN(f.value)){
alert("Vlera qe dhate nuk eshte numer");
f.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<div id="box1">
<form action="">
<p>Type a country or a currency</p>

<p> <label for="txtList" >
<input type="text" id="txtList1"
placeholder="United States Dollars (USD)" list="currencies"/>
<datalist id="currencies">
<option value="United States Dollars (USD)">
<option value="Euro(EUR)">
<option value="Albania (LEK)">
<option value="Paunds (PAUND)">

</datalist>
</label></input></p>
<nav>Browse All
<ul>
<li><a href = "#" >United States Dollars (USD)</a></li>
<li><a href = "#" >Euro(EUR)</a></li>
<li><a href = "#" >Albania (LEK)</a></li>
<li><a href = "#" >Paunds (PAUND)</a></li>

</ul>
</nav>
<p>Please enter an amount </p>
<p><label>Currency:
<input name = "name" type = "text" id="first" size = "15"
maxlength = "10">
</label></p></div>
<input type="button" value="=" onclick="convert()"/>
<div id="box2">
<p>Type a country or a currency</p>

<p> <label for="txtList" >
<input type="text" id="txtList2"
placeholder="Euro (EUR)" list="currencies"/>
<datalist id="currencies">
<option value="United States Dollars (USD)">
<option value="Euro(EUR)">
<option value="Albania (LEK)">
<option value="Paunds (PAUND)">

</datalist>
</label></input></p>
<nav>Browse All
<ul>
<li><a href = "#" >United States Dollars (USD)</a></li>
<li><a href = "#" >Euro(EUR)</a></li>
<li><a href = "#" >Albania (LEK)</a></li>
<li><a href = "#" >Paunds (PAUND)</a></li>

</ul>
</nav>
<p>Please enter an amount </p>
<p><label>Currency:
<input name = "name" type = "text" id="second" size = "15"
maxlength = "10">

</label></p></div></form>
</body>
</html>

Answer

I am not sure about the logic what you intend to write. But now it will work for 2 set of values. In the first dropdown select Euro and put some number in the text box. Similarly, select 'Albania' in the second dropdown and presse the '=' button. Now the 2nd textbox will have the converted value.

This will get to started. :)

<html>
<head>
    <title>Converter </title>
    <style type="text/css">
        div {
            width: 600px;
            height: 300px;
            background-color: blue;
            margin-right: 120px;
            margin-top: 40px;
        }

        #box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        #box2 {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        p {
            font-size: 12pt;
            font-family: arial, sans-serif;
        }

        nav {
            font-weight: bold;
            color: white;
            border: 2px solid royalblue;
            text-align: center;
            width: 10em;
            background-color: royalblue;
        }

            nav ul {
                display: none;
                list-style: none;
                margin: 0;
                padding: 0;
            }

                nav ul li {
                    border-top: 2px solid royalblue;
                    background-color: white;
                    width: 10em;
                    color: black;
                }

                    nav ul li:hover {
                        background-color: powderblue;
                    }

        a {
            text-decoration: none;
        }
    </style>
    <script type="text/javascript">
        function convert() {
            if (document.getElementById('txtList1').value == 'Euro(EUR)' && document.getElementById("txtList2").value == 'Albania (LEK)') {
                var eur = document.getElementById("first");
                var e = parseFloat(eur.value);
                if (!validateForm())
                    return;
                var l = e * 135.82;
                var lek = document.getElementById("second");
                lek.value = l;
            }
            if (document.getElementById("txtList1").value == 'Albania (LEK)' && document.getElementById("txtList2").value == 'Euro(EUR)') {
                var lek = document.getElementById("first");
                var l = parseFloat(lek.value);
                if (!validateForm())
                    return;
                var e = l * 138.92;
                var eur = document.getElementById("second");
                eur.value = e;
            }
        }
        function validateForm() {
            var f = document.getElementById("first");
            if (f.value == "") {
                alert("Jepni nje vlere");
                f.focus();
                return false;
            }
            if (isNaN(f.value)) {
                alert("Vlera qe dhate nuk eshte numer");
                f.focus();
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
    <div id="box1">
        <form action="">
            <p>Type a country or a currency</p>

            <p>
                <label for="txtList">
                    <input type="text" id="txtList1"
                        placeholder="United States Dollars (USD)" list="currencies" />
                    <datalist id="currencies">
                        <option value="United States Dollars (USD)">
                        <option value="Euro(EUR)">
                        <option value="Albania (LEK)">
                        <option value="Paunds (PAUND)">
                    </datalist>
                </label>

            </p>
            <nav>
                Browse All
            <ul>
                <li><a href="#">United States Dollars (USD)</a></li>
                <li><a href="#">Euro(EUR)</a></li>
                <li><a href="#">Albania (LEK)</a></li>
                <li><a href="#">Paunds (PAUND)</a></li>

            </ul>
            </nav>
            <p>Please enter an amount </p>
            <p>
                <label>
                    Currency:
                <input name="name" type="text" id="first" size="15"
                    maxlength="10">
                </label>
            </p>

            <input type="button" value="=" onclick="convert()" />
            <div id="box2">
                <p>Type a country or a currency</p>

                <p>
                    <label for="txtList">
                        <input type="text" id="txtList2"
                            placeholder="Euro (EUR)" list="currencies" />
                        <datalist id="Datalist1">
                            <option value="United States Dollars (USD)">
                            <option value="Euro(EUR)">
                            <option value="Albania (LEK)">
                            <option value="Paunds (PAUND)">
                        </datalist>
                    </label>

                </p>
                <nav>
                    Browse All
                <ul>
                    <li><a href="#">United States Dollars (USD)</a></li>
                    <li><a href="#">Euro(EUR)</a></li>
                    <li><a href="#">Albania (LEK)</a></li>
                    <li><a href="#">Paunds (PAUND)</a></li>

                </ul>
                </nav>
                <p>Please enter an amount </p>
                <p>
                    <label>
                        Currency:
                    <input name="name" type="text" id="second" size="15"
                        maxlength="10">
                    </label>
                </p>
            </div>
        </form>
    </div>
</body>
</html>

Comments