dimanche 24 mai 2015

why is php function html different

Could someone explain why the php function's code is displaying differently than the hard coded html? The outputForecast function should diplay the forecast with the same formatiing as the html panel (at the bottom after function call) but it is not and I am not sure why.

<html lang="en">
<head>

<!-- Latest compiled and minified Bootstrap Core CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Bootstrap theme -->
<link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">

   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Weather Forecast</title>
</head>
<body>
<header>
</header>
<?php
  $forecast = array("Monday" => array(20,10,"Cloudy"),
        "Tuesday" => array(30,11,"Sunny"),
        "Wednesday" => array(26,15,"Sunny"),
        "Thursday" => array(30,18,"Cloudy"),
        "Friday" => array(30,20,"Rain"),
        "Saturday" => array(29,13,"Rain"),
        "Sunday" => array(25,11,"Cloudy"));

<!-- ***This function is not displaying the code like I need*** -->

function outputForecast($day,$high,$low, $description) {
  echo '<div class="panel panel‐default col‐lg‐3 col‐md‐3 col‐sm‐6">'; 
  echo '<div class="panel‐heading">';
  echo '<h3 class="panel‐title">' . $day . '</h3>';
  echo '</div>';
  echo '<div class="panel‐body">';
  echo '<table class="table table‐hover">';
  echo '<tr><td>High:</td><td>' . $high . '</td></tr>';
  echo '<tr><td>Low:</td><td>' . $low . '</td></tr>';
  echo '</table>';
  echo '</div>';
  echo '<div class="panel‐footer"><img src="' . $description . '.png" /> ' . $description . '</div>';
  echo '</div>';
   }
?>

 <div class="container theme-showcase" role="main">
      <div class="jumbotron">
        <h1>Weather Forecast!</h1>
        <p>Coming soon...</p>
      </div>

     <?php
      foreach ($forecast as $key => $weather) {
        outputForecast($key, $weather[0], $weather[1], $weather[2]);
      }
     ?>

<!-- ***Function should display like this section of html*** -->

    <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Monday</h3>
            </div>
            <div class="panel-body">
              <table class="table table-hover">
                <tbody>
              <tr><td>High:</td><td>100&deg;??</td></tr>
                  <tr><td>Low:</td><td>100&deg;??</td></tr>
                 </tbody>
              </table>
            </div>
    </div>
 </div>
</body>
</html>




Aucun commentaire:

Enregistrer un commentaire