CODEWITHSUNDEEP
javascripthtmlcssbuttononclick
Khalifa Bader
Khalifa Bader

Reputation: 69

Convert Miles to Kilometers in a range given by the user and display them in a list

I am required to write the code using three files, Javascript, HTML, and CSS. I am not sure what is the problem in my code, please help me find the error. The user is to write the range in two textareas and when a button is clicked convert all values starting from the first given number up to the second given number. This is what I have written so far:

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../css/converter.css"/>
    <title>Celsius to Fahrenheit Converter</title>
    <script language="JavaScript" src="../js/c2f.js" type="text/javascript">
    </script>
</head>
<body>
<h2>Miles to Kilometers Converter</h2>
<form action="">
    <p>
       <textarea rows="1" name="Input1" id="Input1" cols="10"></textarea>
        <textarea rows="1" name="Input2" id="Input2" cols="10"></textarea>
        <input type="button" value="Convert" name="B3" onclick="conversionTable()">
        <input type="reset" value="Clear" name="B2">
    </p>
</form>
<div id="conversion">
</div>
</body>
</html>

JavaScript code:

function conversionTable(tagId, from, to)
{
    var first = document.getElementById("Input1");
    var second = document.getElementById("Input2");
    from =first;
    to = second;
    var conv = document.getElementById(tagId);
    var tab = document.createElement("table");
    var bod = document.createElement("tbody");
    var thed = document.createElement("thead");
    tab.appendChild(thed);
    tab.appendChild(bod);
    var tr = document.createElement("tr");
    thed.appendChild(tr);
    var th = document.createElement("th");
    tr.appendChild(th);
    th.appendChild(document.createTextNode("Miles"));
    th = document.createElement("th");
    tr.appendChild(th);
    th.appendChild(document.createTextNode("Kilometers"));
    conv.appendChild(tab);



    for(var i=from; i<=to; i++){
        tr = document.createElement("tr");
        if (i%2==0)
            tr.setAttribute("class", "even");
        else
            tr.setAttribute("class", "odd");
        bod.appendChild(tr);
        td = document.createElement("td");
        tr.appendChild(td);
        td.appendChild(document.createTextNode(i));
        td = document.createElement("td");
        tr.appendChild(td);
        td.appendChild(document.createTextNode(c2f(i)));
    }
    function c2f(c) {return Math.round((c * 1.6093)*10)/10}
}

CSS code:

h2{text-align:center; color:blue; background: #EFEFEF}
body{margin: 4em; width: 400px}
table{margin: 2em; padding: 1em;}
th{background: #EFEFFF}
tr.even {background: #B8B8B8}
tr.odd {background: #E0FFFF}

So again, I am trying to pass the two variables (first and second) into my conversionTable() function.

Upvotes: 0

Views: 7532

Answers (3)

RobG
RobG

Reputation: 147483

An exmaple of using plain javascript to build the conversion table:

<form action="">
  <p>
    <textarea rows="1" name="Input1" cols="10"></textarea>
    <textarea rows="1" name="Input2" cols="10"></textarea>
    <input type="button" value="Convert" name="B3" onclick="buildConversionTable(this);">
    <input type="reset" value="Clear" name="B2">
  </p>
</form>

<div id="conversion"></div>

<script>

// Convert miles to kilometres, round to 2 places
function m2k(c) {
  return (c * 1.6093).toFixed(2);  // returns a string
}

// Return a new element with provided tag name and properties
function newElement(tagName,props) {
  var el = document.createElement(tagName);
  if (props) {
    for (var prop in props) {
      if (props.hasOwnProperty(prop)) {
        el[prop] = props[prop];
      }
    }
  }
  return el;
}

// Return a new text node with text as content
function newText(text) {
  return document.createTextNode(text);
}

// Create the conversion table
function buildConversionTable(button) {
  var form = button.form;
  var from = form.Input1.value;
  var to   = form.Input2.value;

  // Use a temporary element to build the tabel from HTML
  var d = document.createElement('div');
  d.innerHTML = '<table><thead><tr><th>Miles<th>Kilometres</thead></table>';
  var table = d.getElementsByTagName('table')[0];

  // Tables always have at least one tbody, no need for tags in the HTML
  var tbody = table.tBodies[0]

  // Use the convenience of appendChild returning the appended element
  for (var i=from, row, cell; i<=to; i++) {
    row = tbody.appendChild(newElement('tr',{className: i%2? 'odd':'even'}));
    cell = row.appendChild(newElement('td'));
    cell.appendChild(newText(i));
    cell = row.appendChild(newElement('td'));
    cell.appendChild(newText(m2k(i)));
  }

  // Add the table to the document  
  document.getElementById('conversion').appendChild(table);
}

</script>

Oh, forgot about the DOM table methods. The for loop adding the rows can be:

  for (var i=from, row, cell; i<=to; i++) {
    row = tbody.insertRow(-1);
    row.insertCell(-1);
    row.insertCell(-1);
    row.className = i%2? 'odd':'even';
    row.cells[0].innerHTML = i;
    row.cells[1].innerHTML = m2k(i);
  }

Upvotes: 1

vultix
vultix

Reputation: 358

I would recommend using jQuery to solve this problem. To include jquery in your project change your html to this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../css/converter.css"/>
    <title>Celsius to Fahrenheit Converter</title>
    <script language="JavaScript" src="../js/c2f.js" type="text/javascript">
    </script>
    <!-- Here is your jquery code includer -->
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
<h2>Miles to Kilometers Converter</h2>

<form action="">
    <p>
        <textarea rows="1" name="Input1" id="Input1" cols="10"></textarea>
        <textarea rows="1" name="Input2" id="Input2" cols="10"></textarea>
        <input type="button" value="Convert" id="convert" name="B3" />
        <input type="reset" value="Clear" name="B2" />
    </p>
</form>
<div id="conversion"></div>
</body>
</html>

Using jQuery you can add the click handler to the convert button and in there calculate the from and to and call the conversionTable function. I have revised the conversionTable function to do what you want in much less code using jQuery.

$("#convert").click(function () {
    var from = parseInt($("#Input1").val());
    var to = parseInt($("#Input2").val());
    conversionTable($("#conversion"), from, to);
});

function conversionTable(tag, from, to) {
    //Generate the table with the thead of miles and kilometers
    var table = $("<table><thead>" +
        "<tr><th>Miles</th><th>Kilometers</th></tr>" +
        "</thead><tbody></tbody></table>");
    //set the tags innerHtml to the table
    tag.html(table);

    for (var i = from; i <= to; i++) {
        var miles = i;
        var kilometers = c2f(i);
        //Create a tr with the found miles and kilometers
        var tr = $("<tr><td>" + miles + "</td><td>" + kilometers + "</td></tr>");
        //Add the tr to the tables tbody
        table.find("tbody").append(tr);
    }
    //Find all of the even and odd tr's and give them the appropriate class
    table.find("tr:even").addClass("even");
    table.find("tr:odd").addClass("odd");

    function c2f(c) {
        return Math.round((c * 1.6093) * 10) / 10;
    }
}

Your css would stay the same as previously posted. You can find a working jsFiddle at http://jsfiddle.net/FsV3j/.

Upvotes: 0

Pedro Estrada
Pedro Estrada

Reputation: 2419

DEMO HERE

Changes to your html:

<input type="button" value="Convert" name="B3" onclick="conversionTable('conversion')" />

Changes to your js:

from = parseInt(first.value);
to = parseInt(second.value);

and thats it. It should work to what you're looking for.

Upvotes: 2

Related Questions