Collection of free jQuery weather widget code examples from Codepen and GitHub.

Demo image: Weather App Using Fetch API

Author

  • Mohammad Muazam

Made with

  • HTML / CSS / JS

About a code

Weather App Using Fetch API

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, bootstrap.css, bootstrap.js, anime.js

Demo image: Weather App

Author

  • Gerald Jones

Made with

  • HTML / CSS / JS

About a code

Weather App

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, skycons.js

Demo image: Local Weather

Author

  • mehdi kamyar

Made with

  • HTML / CSS / JS

About a code

Local Weather

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, ionicons.css, font-awesome.css, tether.js, bootstrap.js, skycons.js

Demo image: Weather Card

Author

  • Parth

Made with

  • HTML / CSS (SCSS) / JS

About a code

Weather Card

A simplistic, minimalist weather card.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Demo image: Weather App

Author

  • Tiffany Du

Made with

  • HTML / CSS / JS

About a code

Weather App

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Demo image: Super Mario Weather

Author

  • ErreC

Made with

  • HTML / CSS / JS

About a code

Super Mario Weather

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, bootstrap.js, jquery-ui.js

Demo image: Local Weather App

Author

  • JD

Made with

  • HTML / CSS (SCSS) / JS

About a code

Local Weather App

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: weather-icons.css

Demo image: Weather Widget App with Open Weather API

Author

  • myleschuahiock

Made with

  • HTML / CSS / JS

About a code

Weather Widget App with Open Weather API

Geo-location weather widget that detects weather status, conditions, local time, temperature in (Celsius/Fahrenheit), wind speed, humidity, pressure, sunrise and sunset. Allow geo-location on browser first.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css

Demo image: Weather Widget

Author

  • Chyno Deluxe

Made with

  • HTML / CSS (SCSS) / JS

About a code

Weather Widget

A simple current weather widget and current time and date feature.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, weather-icons.css

Author

  • Marc Malignan

Made with

  • HTML / CSS (SCSS) / JS

About a code

CSS Weather App

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css