Jump to content
stormtracker

Howto add tables to my website in javascript help please

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...