--- title: "New CanJS Recipe: Weather Report Guide" description: "Learn about a new recipe we’ve added to CanJS.com: the Weather Report Guide!" image: http://www.bitovi.com/hubfs/canjs-background-blue-2.gif --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting) - ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project Management](https://www.bitovi.com/services/agile-project-management-consulting) - ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product Design](https://www.bitovi.com/services/product-design-consulting) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting) - [View more → ](https://www.bitovi.com/digital-consulting-services) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting) - [Design systems](https://www.bitovi.com/services/axure-figma-migration) - [React](https://www.bitovi.com/services/frontend/react-consulting) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp) - [View more → ](https://www.bitovi.com/our-software-consulting-work) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about delivering products and solving problems. ](https://www.bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships) - [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse or contribute to our community ](https://www.bitovi.com/open-source) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com March 24, 2017 # New CanJS Recipe: Weather Report Guide Learn about a new recipe we’ve added to CanJS.com: the Weather Report Guide! ![Chasen Le Hara](https://app.hubspot.com/settings/avatar/47447d7b410651534d079d84497c1a5c) Chasen Le Hara Share: [![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=) The [new Recipes section on CanJS.com](https://canjs.com/doc/guides/recipes.html) now has a new guide: [Weather Report](https://canjs.com/doc/guides/recipes/simple-weather-report.html)! This guide walks you through building a simple weather report widget with Yahoo’s [Weather API](https://developer.yahoo.com/weather/) and [Query Language (YQL)](https://developer.yahoo.com/yql/console/): - Allow a user to enter a location - Get and display the places for the user’s location name - Allow a user to select a place - Get and display the forecast - Hide the forecast if the user changes the entered location - Skip selecting a place if only one place matches the entered location It takes about 25 minutes to complete and was built with CanJS 3.5. Here’s a quick demo of what the final widget looks like: ![weather forecast.gif](https://www.bitovi.com/hubfs/weather%20forecast.gif) This new guide was [presented](https://www.meetup.com/DoneJS-Chicago/events/237785381/) by [Brian Moschel](https://github.com/moschel) and [Kevin Phillips](https://github.com/phillipskevin) yesterday at [DoneJS Chicago](https://www.meetup.com/DoneJS-Chicago/). If you’re in Chicago, join us for future hack nights on projects like this one. We’ll be adding more recipes over time based on what we hear the community wants, so [let us know](https://github.com/bitovi/training/issues/new?labels=weekly-training-topics) what recipe you would like to see us cook up next. If you have any questions or comments while going through the recipes, please join us on our [forums](http://forums.donejs.com/c/canjs) or [Gitter chat](https://gitter.im/donejs/donejs)! [![Tag for open source](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) open source ](https://www.bitovi.com/blog/topic/open-source)[![Tag for training](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) training ](https://www.bitovi.com/blog/topic/training)[![Tag for development](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) development ](https://www.bitovi.com/blog/topic/development)[![Tag for canjs](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) canjs ](https://www.bitovi.com/blog/topic/canjs) Previous Post ![canjs-background-blue-2.gif](https://www.bitovi.com/hs-fs/hubfs/canjs-background-blue-2.gif?height=117&name=canjs-background-blue-2.gif) [ New on CanJS.com: Recipes! ](https://www.bitovi.com/blog/new-on-canjs.com-recipes)   Next Post ![](https://www.bitovi.com/hs-fs/hubfs/canjs-background-blue-2.gif?height=117&name=canjs-background-blue-2.gif) [ Can’d Goodies: JavaScript Query String Encoding and Decoding ](https://www.bitovi.com/blog/javascript-query-string-encoding-and-decoding) ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "United States", "addressLocality" : "Libertyville", "addressRegion" : "IL", "postalCode" : "60048", "streetAddress" : "1134 Pine Tree Lane " }, "alternateName" : "Bitovi", "areaServed" : { "@type" : "GeoCircle", "geoMidpoint" : { "@type" : "GeoCoordinates", "latitude" : "41.8781", "longitude" : "87.6298" }, "geoRadius" : "5000 km" }, "description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "email" : "contact@bitovi.com", "image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "mainEntityOfPage" : { "@id" : "https://www.bitovi.com/blog/new-canjs-recipe-weather-report-guide", "@type" : "WebPage", "description" : "Learn about a new recipe we’ve added to CanJS.com: the Weather Report Guide!" }, "naics" : "541511", "name" : "Bitovi Web App Consulting", "sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ], "telephone" : "312-620-0386", "url" : "http://bitovi.com" } ``` ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Chasen Le Hara" }, "dateModified" : "March 24, 2017, 11:24:45 PM", "datePublished" : "2017-03-24 23:24:45", "description" : "Learn about a new recipe we’ve added to CanJS.com: the Weather Report Guide!", "headline" : "New CanJS Recipe: Weather Report Guide", "image" : { "@type" : "ImageObject", "url" : "http://www.bitovi.com/hubfs/canjs-background-blue-2.gif" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg" }, "name" : "Bitovi" } } ```