Jump to content

Howto add tables to my website in javascript help please


stormtracker
 Share

Recommended Posts

Hello i am working on a weather website would like to add table to my weather page to clean it up so i can use javascript for the table also how can i fix up musearch button to the rite of the serch bar mike 

function show(data){
	return "<h2 style='font-size:15px; font-weight: bold;' class='text-center'>Current Weather Forecast For " + data.name + ", " + data.sys.country +"</h2>" + "<h3 style='font-size:15px; font-weight: bold;'<strong>Description</strong>: <img src='http://openweathermap.org/img/w/"+ data.weather[0].icon+".png'> "+ data.weather[0].main +"</h3>" +
	       "<h3 style='font-size:15px; font-weight: bold;'<strong>Weather</strong>: "+ data.weather[0].main +"</h3>" +
	       "<h3 style='font-size:15px; font-weight: bold;'<strong>Temperature</strong>: "+ data.main.temp + "&deg;C</h3>" +
		   "<h3 style='font-size:15px; font-weight: bold;'<strong>Pressure</strong>: "+ data.main.pressure + " HPA</h3>" +
           "<h3 style='font-size:15px; font-weight: bold;'<strong>Humidity</strong>: "+ data.main.humidity + " %</h3>" +
		   "<h3 style='font-size:15px; font-weight: bold;'<strong>Min</strong>: "+ data.main.temp_min + " &deg;C</h3>" +
           "<h3 style='font-size:15px; font-weight: bold;'<strong>Max</strong>: "+ data.main.temp_max + " &deg;C</h3>" +	 
           "<h3 style='font-size:15px; font-weight: bold;'<strong>Winds Speed</strong>: "+ data.wind.speed + " m/s</h3>" +
           "<h3 style='font-size:15px; font-weight: bold;'><strong>Winds Direction</strong>: " + data.wind.deg + " &deg</h3>";
           "<h3 style='font-size:15px; font-weight: bold;'><strong>Sunrise</strong>: " + data.sys.sunrise + "</h3>";
}           	   

 

Untitled.png

Link to comment
Share on other sites

You might wish to begin here.

In regard to your button, you might try floating it or placing the entire bar in a flex box.  Button and forms have a mind of their own.

Roddy

p.s.  If you find my entry helpful, hover over the heart and click on the trophy.

Edited by iwato
Link to comment
Share on other sites

this is my html code if anyone can help me please 

<html lang="en">
<head>
    <meta charest="UTF-8">
    <meta name="description" content="Free Weather Resource">
    <meta name="keywords" content="Current Forecast, Weather Charts, Weather Community,Weather Blog">
    <meta name="author" content="Michael Wright">
	<title>StormSearchers</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
</head>

<body>
<div class="jumbotron" style="margin-bottom:0px; color:white; background-color: #4aa1f3;">
   <h2 class="text-center" style="font-size:50px; font-weight:600px;">StormSearchers</h2>
</div>
<div id="nav">
	<ul>
		<li><a href="http://www.stormsearchers.com/current.html">Current</a></li>
		<li><a href="http://www.stormsearchers.com/winds.html">Winds</a></li>
		<li><a href="http://www.stormsearchers.com/rain.html">Rainfall</a></li>
		<li><a href="http://www.stormsearchers.com/almanac.html">Almanac</a></li>
		<li><a href="http://www.stormsearchers.com/tides.html">Marine Tides</a></li>
		<li><a href="http://www.stormsearchers.com/storms.html">Stormcast</a></li>
<div class="row form-group form-inline" id="rowDiv">
	    <input type="text" name="city" id="city" class="form-control" placeholder="City Name">
		<button id="submitWeather" class="btn btn-primary">Search City</button>
   </ul>
 </div>
<div id="warnings" class="marquee">marquee information marquee information marquee information marquee information</div>
</div>
</div>
<div id="container">This is where the contents goes</div>
<div id="show">
</div>
<script src="weather.js"></script>

<div class="footer">
   <div class="container">
      <div class="row text-center" style="padding-top:30px;">
	       <p>Copyright&copy;Stormsearchers 2018-2019 A.B.N:000.000.000.000  all rights reserved</p>
	       <br>Your use of this website is subject to our <a href="http://www.stormsearchers.com/terms.html">Terms & Conditions</a> and please Read our <a href="http://www.stormsearchers.com/privacy.html">Privacy statement</a></br>
	       <br>Comments, Confessionsor contact the web-master!</p>
	 </div>
</div>
</body>
</html>

 

Edited by stormtracker
Link to comment
Share on other sites

You have no doctype

<!DOCTYPE html>

For every opening '<div' there must be equally a closing </div>, same with '<p>.........</p>' paragraphs. Each of these are like box containers,  a box within a box

<div id="nav">

is a box container for  '<ul>...........</ul>'which is a box container for 'li' box container elements and so on.  You have a div opening box container but no, or misplaced closing div outside closing div for id="nav", this breaks the box structure, causing more problems as the browser attempts to correct this broken structure as well as others within your code.

IF you validate at

https://validator.w3.org/

You will also find it says "document type does not allow element "DIV" here; assuming missing "LI" start-tag" which is referring to

<div class="row form-group form-inline" id="rowDiv">

not being allowed as child of '<ul>' elements, only 'li' elements are allowed child elements, so you need to add the div INSIDE a li element.

Go through validation and fix remaining errors/warnings, then come back to us if problem still exists.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...