function get(url, success) {
let httpRequest = new XMLHttpRequest();
httpRequest.open('GET', url);
httpRequest.onload = function() {
// console.log(httpRequest.responseText);
success(httpRequest.responseText);
}
httpRequest.send();
};
function successHandler(data) {
const dataObj = JSON.parse(data);
const weatherDiv = document.querySelector('#weather');
const weatherFragment = `
<h1>Weather</h1>
<h2 class="top">
<img
src="http://openweathermap.org/img/w/${dataObj.weather[0].icon}.png"
alt="${dataObj.weather[0].description}"
width="50"
height="50"
/>${dataObj.name}
</h2>
<p>
<span class="tempF">${tempToF(dataObj.main.temp)}°</span> | ${dataObj.weather[0].description}
</p>
`;
// console.log(weatherFragment);
// console.log(weatherDiv);
weatherDiv.innerHTML = weatherFragment;
weatherDiv.classList.remove('hidden');
}
function tempToF(kelvin) {
return ((kelvin - 273.15) * 1.8 + 32).toFixed(0);
}
document.addEventListener('DOMContentLoaded', function() {
const apiKey = '';
// const url = 'https://api.openweathermap.org/data/2.5/weather?q=London&APPID=' + apiKey;
// const url = 'https://api.openweathermap.org/data/2.5/weather?q=los+angeles&APPID=' + apiKey; //org
const url = 'https://api.openweathermap.org/data/2.5/weather?q=los angeles&APPID=' + apiKey;
get(url, successHandler);
});
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to Explore California</title>
<meta name="description" content="A lynda.com example of HTML5 and CSS3">
<meta name="keywords" content="html5, css3, lynda, local storage, canvas, forms, semantics, web apps">
<!--make sure mobile devices display the page at the proper scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="_css/main.css" rel="stylesheet" type="text/css" media="screen, projection">
<link href="_css/jquery_widgets.css" rel="stylesheet" media="screen, projection" />
<link href="_css/tablet.css" rel="stylesheet" type="text/css" media="all and (min-width: 481px) and (max-width: 768px)" />
<link href="_css/mobile.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 480px)" />
<script src="_scripts/jquery-1.5.1.min.js"></script>
<script src="_scripts/jquery-ui-1.8.10.custom.min.js"></script>
<script src="_scripts/menus.js"></script>
<script src="_scripts/ajax.js"></script>
</head>
<body id="home" class="no-js">
<div id="wrapper">
<header id="mainHeader"> <a href="index.htm" title="home" class="logo">
<!-- I need this div because IE is an affront to mankind-->
<div>
<h1>Explore California</h1>
</div>
</a>
<nav id="siteNav">
<h1>Where do you want to go?</h1>
<ul>
<li><a href="tours.htm" title="Our tours">Tours <br /><span class="tagline">follow our bliss</span></a>
<ul>
<li><a href="tours.htm" title="Our tours">All Tours</a></li>
<li><a href="tours.htm" title="find tours">Tours by Activity</a></li>
<li><a href="tours.htm" title="find tours">Tours by Region</a></li>
<li><a href="tours.htm" title="find tours">Tour Finder</a></li>
</ul>
</li>
<li><a href="mission.htm" title="What we believe">Mission <br /><span class="tagline">what makes us different?</span></a></li>
<li><a href="resources.htm" title="planning resources">Resources <br /><span class="tagline">plan your trip</span></a>
<ul>
<li><a href="resources/faq.htm" title="Got questions?">Tour FAQs</a></li>
<li><a href="resources/additional_resources.htm" title="additional resources">Tour Information</a></li>
<li><a href="resources/terms.htm" title="terms and conditions">Site Terms</a></li>
</ul>
</li>
<li><a href="explorers.htm" title="Our community">Explorers <br /><span class="tagline">join our community</span></a>
<ul>
<li><a href="explorers/join.htm" title="join our community">Join the Explorers</a></li>
<li><a href="blog/index.htm" title="read our blog!">Read our Blog</a></li>
<li><a href="explorers/gallery.htm" title="contributor photos">Tour Photos</a></li>
<li><a href="_video/EC_podcast_full version.mov" title="check out our podcast">Video podcast</a></li>
</ul>
</li>
<li><a href="contact.htm" title="contact us" class="last">Contact <br /><span class="tagline">we're listening</span></a>
<ul>
<li><a href="support.htm" title="need help?">Support</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<section id="actionCall">
<h1>Explore our world your way</h1>
<a href="tours.htm" title="Find your tour!"><h2>Find your tour</h2></a>
</section>
<div id="contentWrapper">
<section id="mainContent">
<article id="mainArticle">
<h1>Tour Spotlight</h1>
<p class="spotlight">This month's spotlight package is Cycle California. Whether you are looking for some serious downhill thrills to a relaxing ride along the coast, you'll find something to love in Cycle California.<br /> <span class="accent"><a href="tours_cycle.htm" title="Cycle California">tour details</a></span></p>
<h1>Explorer's Podcast</h1>
<!-- <video controls poster="_video/podcast_poster.jpg" width="512" height="288" preload="none"> -->
<source src="_video/podcast_teaser.mp4" type="video/mp4" />
<source src="_video/podcast_teaser.webm" type="video/webm" />
<source src="_video/podcast_teaser.theora.ogv"type="video/ogg" />
</video>
<p class="videoText">Join us each month as we publish a new Explore California video podcast, with featured tours, customer photos, and some exctiing new features!<span class="accent"><a href="explorers/video.htm" title="Video Podcast">Watch the full video</a></span></p>
</article>
</section>
<aside id="secondaryContent">
<!-- added by myself-->
<div id="weather">
</div>
<div id="specials">
<h1>Monthly Specials</h1>
<h2 class="top"><img src="_images/calm_bug.gif" alt="California Calm" width="75" height="75" />California Calm</h2>
<p>Day Spa Package <br />
<a href="tours/tour_detail_cycle.htm">$250</a></p>
<h2><img src="_images/desert_bug.gif" alt="From desert to sea" width="75" height="75" />From Desert to Sea</h2>
<p>2 Day Salton Sea <br />
<a href="tours/tour_detail_cycle.htm">$350</a></p>
<h2><img src="_images/backpack_bug.gif" alt="Backpack Cali" width="75" height="41" />Backpack Cali</h2>
<p>Big Sur Retreat <br />
<a href="tours/tour_detail_cycle.htm">$620</a></p>
<h2><img src="_images/taste_bug.gif" alt="Taste of California" width="75" height="75" />Taste of California</h2>
<p>Tapas & Groves <br />
<a href="tours/tour_detail_taste.htm">$150</a></p>
</div>
<h1>Did You Know?</h1>
<p>The official state flag of California was designed by William Todd and first used on June 14, 1846. The flag was not officially adopted until 1911. The flag features a grizzly bear, a red bar, a star and is one of the most recognizable state flags in the Nation.</p>
</aside>
</div>
<footer id="pageFooter">
<section id="quickLinks">
<h1>Quick Nav</h1>
<ul id="quickNav">
<li><a href="index.htm" title="Our home page">Home</a></li>
<li><a href="tours.htm" title="Explore our tours">Tours</a></li>
<li><a href="mission.htm" title="What we think">Mission</a></li>
<li><a href="resources.htm" title="Guidance and planning">Resources</a></li>
<li><a href="explorers.htm" title="Join our community">Explorers</a></li>
<li><a href="contact.htm" title="Contact and support">Contact</a></li>
</ul>
</section>
<section id="footerResources">
<h1>Resources</h1>
<ul id="quickNav">
<li><a href="resources/faq.htm" title="Our home page">FAQ</a></li>
<li><a href="support.htm" title="Need help?">Support</a></li>
<li><a href="resources/legal.htm" title="The fine print">Legal</a></li>
</ul>
</section>
<section id="companyInfo">
<h1>Contact</h1>
<h2>Explore California</h2>
<p>5605 Nota Street<br />
Ventura, CA 93003</p>
<p>866.555.4310<br />866.555.4315 <em>(24 hour support)</em></p>
</section>
</footer>
</div>
</body>
</html>
