├── .gitignore ├── dist ├── google43a059169b3f667a.html ├── download.ico ├── BingSiteAuth.xml ├── 025fab35f0783766510c70c14bac33b6.jpg ├── 6dc4a6844d690975a6189296f8cc54ee.jpg └── index.html ├── .github └── workflows │ ├── googleb3ec120995e10cda.html │ └── linters.yml ├── src ├── images │ ├── kite.jpg │ ├── mist.jpg │ ├── rain.jpg │ ├── snow.jpg │ ├── wind.jpg │ ├── autumn.jpg │ ├── bluesky.jpg │ ├── drizzle.jpg │ ├── lighting.jpg │ ├── spring.jpg │ ├── summer.jpg │ ├── sunrise.jpg │ ├── sunset.jpg │ ├── winter.jpg │ ├── darkclouds.jpg │ ├── rainclouds.jpg │ └── shiningsun.jpg ├── js │ ├── search.js │ ├── helpers.js │ ├── events.js │ └── dom.js ├── index.js └── style │ └── style.css ├── assets ├── screenshot1.png ├── screenshot2.png └── screenshot3.png ├── BingSiteAuth.xml ├── .stylelintrc.json ├── .eslintrc.json ├── webpack.config.js ├── LICENSE ├── package.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /dist/google43a059169b3f667a.html: -------------------------------------------------------------------------------- 1 | google-site-verification: google43a059169b3f667a.html -------------------------------------------------------------------------------- /dist/download.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/dist/download.ico -------------------------------------------------------------------------------- /.github/workflows/googleb3ec120995e10cda.html: -------------------------------------------------------------------------------- 1 | google-site-verification: googleb3ec120995e10cda.html -------------------------------------------------------------------------------- /src/images/kite.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/src/images/kite.jpg -------------------------------------------------------------------------------- /src/images/mist.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/src/images/mist.jpg -------------------------------------------------------------------------------- /src/images/rain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/src/images/rain.jpg -------------------------------------------------------------------------------- /src/images/snow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/src/images/snow.jpg -------------------------------------------------------------------------------- /src/images/wind.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/src/images/wind.jpg -------------------------------------------------------------------------------- /assets/screenshot1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/assets/screenshot1.png -------------------------------------------------------------------------------- /assets/screenshot2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/assets/screenshot2.png -------------------------------------------------------------------------------- /assets/screenshot3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/assets/screenshot3.png -------------------------------------------------------------------------------- /src/images/autumn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/src/images/autumn.jpg -------------------------------------------------------------------------------- /src/images/bluesky.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/src/images/bluesky.jpg -------------------------------------------------------------------------------- /src/images/drizzle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/src/images/drizzle.jpg -------------------------------------------------------------------------------- /src/images/lighting.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/src/images/lighting.jpg -------------------------------------------------------------------------------- /src/images/spring.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/src/images/spring.jpg -------------------------------------------------------------------------------- /src/images/summer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/src/images/summer.jpg -------------------------------------------------------------------------------- /src/images/sunrise.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/src/images/sunrise.jpg -------------------------------------------------------------------------------- /src/images/sunset.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/src/images/sunset.jpg -------------------------------------------------------------------------------- /src/images/winter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/src/images/winter.jpg -------------------------------------------------------------------------------- /src/images/darkclouds.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/src/images/darkclouds.jpg -------------------------------------------------------------------------------- /src/images/rainclouds.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/src/images/rainclouds.jpg -------------------------------------------------------------------------------- /src/images/shiningsun.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/src/images/shiningsun.jpg -------------------------------------------------------------------------------- /BingSiteAuth.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 1A92FC2EC113F8616A21D76DA684A133 4 | -------------------------------------------------------------------------------- /dist/BingSiteAuth.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 1A92FC2EC113F8616A21D76DA684A133 4 | -------------------------------------------------------------------------------- /dist/025fab35f0783766510c70c14bac33b6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/dist/025fab35f0783766510c70c14bac33b6.jpg -------------------------------------------------------------------------------- /dist/6dc4a6844d690975a6189296f8cc54ee.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamirPaulb/WeatherApp/HEAD/dist/6dc4a6844d690975a6189296f8cc54ee.jpg -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard"], 3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"], 4 | "rules": { 5 | "at-rule-no-unknown": null, 6 | "scss/at-rule-no-unknown": true, 7 | "csstree/validator": true 8 | }, 9 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"] 10 | } -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "jest": true 6 | }, 7 | "parserOptions": { 8 | "ecmaVersion": 2018, 9 | "sourceType": "module" 10 | }, 11 | "extends": ["airbnb-base"], 12 | "rules": { 13 | "no-shadow": "off", 14 | "no-param-reassign": "off", 15 | "eol-last": "off", 16 | "arrow-parens": "off" 17 | }, 18 | "ignorePatterns": [ 19 | "dist/", 20 | "build/" 21 | ] 22 | } -------------------------------------------------------------------------------- /src/js/search.js: -------------------------------------------------------------------------------- 1 | const places = require('places.js'); 2 | 3 | function autoComplete() { 4 | const KEY = 'f7093e7853be493e407d46a434f9c54b'; 5 | const ID = 'plBAKYUGY2FI'; 6 | const placesAutocomplete = places({ 7 | appId: ID, 8 | apiKey: KEY, 9 | container: document.querySelector('#search'), 10 | templates: { 11 | value(suggestion) { 12 | return suggestion.name; 13 | }, 14 | }, 15 | }).configure({ 16 | type: 'city', 17 | aroundLatLngViaIP: true, 18 | }); 19 | return placesAutocomplete; 20 | } 21 | 22 | 23 | export default autoComplete; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import dom from './js/dom'; 2 | import events from './js/events'; 3 | import autoComplete from './js/search'; 4 | import './style/style.css'; 5 | 6 | const event = events(); 7 | autoComplete(); 8 | const submit = document.getElementById('submit'); 9 | submit.addEventListener('click', event.getLocation.bind(this, 'search')); 10 | 11 | const submit2 = document.getElementById('submit2'); 12 | submit2.addEventListener('click', event.getForecast.bind(this)); 13 | 14 | const search2 = document.getElementById('search2'); 15 | search2.addEventListener('click', event.getLocation.bind(this, 'searchBar')); 16 | 17 | const home = document.getElementById('home'); 18 | home.addEventListener('click', () => { dom().show('aaa'); }); 19 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 3 | 4 | module.exports = { 5 | mode: 'development', 6 | entry: './src/index.js', 7 | devtool: 'inline-source-map', 8 | plugins: [ 9 | new CleanWebpackPlugin(), 10 | ], 11 | output: { 12 | filename: 'main.js', 13 | path: path.resolve(__dirname, 'dist'), 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.css$/, 19 | use: [ 20 | 'style-loader', 21 | 'css-loader', 22 | ], 23 | }, 24 | { 25 | test: /\.(png|svg|jpg|gif)$/, 26 | use: [ 27 | 'file-loader', 28 | ], 29 | }, 30 | ], 31 | }, 32 | }; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Javier 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Weather-App-JS", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "watch": "webpack --watch", 9 | "build": "webpack" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/javitocor/Weather-App-JS.git" 14 | }, 15 | "keywords": [], 16 | "author": "", 17 | "license": "ISC", 18 | "bugs": { 19 | "url": "https://github.com/javitocor/Weather-App-JS/issues" 20 | }, 21 | "homepage": "https://github.com/javitocor/Weather-App-JS#readme", 22 | "devDependencies": { 23 | "clean-webpack-plugin": "^3.0.0", 24 | "css-loader": "^3.6.0", 25 | "file-loader": "^6.0.0", 26 | "style-loader": "^1.2.1", 27 | "webpack": "^4.43.0", 28 | "webpack-cli": "^3.3.12" 29 | }, 30 | "dependencies": { 31 | "places.js": "^1.19.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | eslint: 10 | name: ESLint 11 | runs-on: ubuntu-18.04 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: "12.x" 17 | - name: Setup ESLint 18 | run: | 19 | npm install --save-dev eslint@6.8.x eslint-config-airbnb-base@14.1.x eslint-plugin-import@2.20.x 20 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/javascript/.eslintrc.json 21 | - name: ESLint Report 22 | run: npx eslint . 23 | stylelint: 24 | name: Stylelint 25 | runs-on: ubuntu-18.04 26 | steps: 27 | - uses: actions/checkout@v2 28 | - uses: actions/setup-node@v1 29 | with: 30 | node-version: "12.x" 31 | - name: Setup Stylelint 32 | run: | 33 | npm install --save-dev stylelint@13.3.x stylelint-scss@3.17.x stylelint-config-standard@20.0.x stylelint-csstree-validator 34 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/javascript/.stylelintrc.json 35 | - name: Stylelint Report 36 | run: npx stylelint "**/*.{css,scss}" -------------------------------------------------------------------------------- /src/js/helpers.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable consistent-return */ 2 | /* eslint-disable no-alert */ 3 | /* eslint-disable no-console */ 4 | 5 | const helpers = function helpers() { 6 | const createElement = function createElement(tag, className) { 7 | const element = document.createElement(tag); 8 | element.className = className; 9 | return element; 10 | }; 11 | 12 | const createElementWithInnerText = function createElementWithInnerText(tag, className, text) { 13 | const element = document.createElement(tag); 14 | element.className = className; 15 | element.innerHTML = text; 16 | return element; 17 | }; 18 | 19 | const addInnerText = function addInnerText(className, text) { 20 | const element = document.getElementById(className); 21 | element.innerHTML = text; 22 | return element.innerHTML; 23 | }; 24 | 25 | async function getFahrenheit(city) { 26 | try { 27 | const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=903507f17d707fecd352d38301efba77&units=imperial`; 28 | const response = await fetch(url, { mode: 'cors' }); 29 | const cityFahr = await response.json(); 30 | return cityFahr; 31 | } catch (error) { 32 | console.error('Error:', error); 33 | alert('Could not find the location'); 34 | } 35 | } 36 | 37 | return { 38 | addInnerText, createElement, createElementWithInnerText, getFahrenheit, 39 | }; 40 | }; 41 | 42 | 43 | export { helpers as default }; -------------------------------------------------------------------------------- /src/js/events.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-alert */ 2 | /* eslint-disable no-console */ 3 | import dom from './dom'; 4 | 5 | const events = function events() { 6 | function showFlow(data) { 7 | dom().clearForms(); 8 | dom().fillCard(data); 9 | dom().imageSwitch(data, 'image'); 10 | dom().show('search'); 11 | 12 | const farCel = document.getElementById('farCel'); 13 | farCel.onclick = function changeTemp() { dom().converter(data); }; 14 | } 15 | 16 | function forecastFlow(data) { 17 | dom().clearForms(); 18 | dom().createCard(data); 19 | dom().show('forecast'); 20 | } 21 | 22 | async function getSearch(city) { 23 | try { 24 | const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=903507f17d707fecd352d38301efba77&units=metric`; 25 | const response = await fetch(url, { mode: 'cors' }); 26 | const cityData = await response.json(); 27 | showFlow(cityData); 28 | } catch (error) { 29 | console.error('Error:', error); 30 | alert('Could not find the location'); 31 | } 32 | } 33 | 34 | function getLocation(searchBar) { 35 | const city = (document.getElementById(searchBar).value).toLowerCase(); 36 | getSearch(city); 37 | } 38 | 39 | async function getForecast() { 40 | try { 41 | const value = (document.getElementById('search').value).toLowerCase(); 42 | const url = `https://api.openweathermap.org/data/2.5/forecast?q=${value}&units=metric&appid=903507f17d707fecd352d38301efba77`; 43 | const response = await fetch(url, { mode: 'cors' }); 44 | const cityData = await response.json(); 45 | forecastFlow(cityData); 46 | } catch (error) { 47 | console.error('Error:', error); 48 | alert('Could not find the location'); 49 | } 50 | } 51 | 52 | 53 | return { 54 | getSearch, showFlow, getForecast, getLocation, 55 | }; 56 | }; 57 | 58 | export { events as default }; -------------------------------------------------------------------------------- /src/style/style.css: -------------------------------------------------------------------------------- 1 | #main { 2 | display: block; 3 | background-image: url("../images/summer.jpg"); 4 | background-size: cover; 5 | background-position-y: 100%; 6 | height: 80vh; 7 | } 8 | 9 | #image { 10 | background-image: url("../images/sunset.jpg"); 11 | background-size: cover; 12 | background-position-y: 100%; 13 | height: 75vh; 14 | } 15 | 16 | #section { 17 | display: none; 18 | height: 80vh; 19 | } 20 | 21 | #temp, 22 | #feel, 23 | #desc, 24 | #pressure, 25 | #humidity, 26 | #minTemp, 27 | #maxTemp, 28 | #wind, 29 | #windDir, 30 | #clouds, 31 | #sunrise, 32 | #sunset { 33 | background-color: rgba(255, 255, 255, 0.1); 34 | } 35 | 36 | #home { 37 | cursor: pointer; 38 | } 39 | 40 | /* Main input wrapper */ 41 | .algolia-places {} 42 | 43 | /* The algolia-places input */ 44 | .ap-input, .ap-hint {} 45 | 46 | /* The style of the svg icons when the input is on hover */ 47 | .ap-input:hover ~ .ap-input-icon svg, 48 | .ap-input:focus ~ .ap-input-icon svg, 49 | .ap-input-icon:hover svg {} 50 | 51 | /* The dropdown style */ 52 | .ap-dropdown-menu {} 53 | 54 | /* The suggestions style */ 55 | .ap-suggestion { 56 | text-align: start; 57 | } 58 | 59 | /* The highlighted names style */ 60 | .ap-suggestion em {} 61 | 62 | /* The addresses style */ 63 | .ap-address {} 64 | 65 | /* The icons of each suggestions ( can be a building or a pin ) */ 66 | .ap-suggestion-icon {} 67 | 68 | /* The style of the svg inside the .ap-suggestion-icon */ 69 | .ap-suggestion-icon svg {} 70 | 71 | /* The icons inside the input ( can be a pin or a cross ) */ 72 | .ap-input-icon {right: 235px;} 73 | 74 | /* The style of the svg inside the .ap-input-icon */ 75 | .ap-input-icon svg {} 76 | 77 | /* .a-cursor is the class a suggestion go on hover */ 78 | .ap-cursor {} 79 | 80 | /* The style of the svg icon, when the .ap-suggestion is on hover */ 81 | .ap-cursor .ap-suggestion-icon svg {} 82 | 83 | /* The styles of the Algolia Places input footer */ 84 | .ap-footer {} 85 | 86 | /* The styles of the Algolia Places input footer links */ 87 | .ap-footer a {} 88 | 89 | /* The styles of the Algolia Places input footer svg icons */ 90 | .ap-footer a svg {} 91 | 92 | /* The styles of the Algolia Places input footer on hover */ 93 | .ap-footer:hover {} 94 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WeatherApp 2 | 3 | > A weather app that pulls from the OpenWeatherMap API to allow users to search for and view the forecast in cities worldwide. Built with JavaScript. 4 | 5 | Landing Page: 6 | ![screenshot](./assets/screenshot1.png) 7 | 8 | Actual Weather: 9 | ![screenshot](./assets/screenshot2.png) 10 | 11 | 5-Day Forecast: 12 | ![screenshot](./assets/screenshot3.png) 13 | 14 | 15 | Additional description about the project and its features. 16 | 17 | ## Built With 18 | 19 | - HTML 20 | - CSS 21 | - JAVASCRIPT 22 | - NPM 23 | - WEBPACK 24 | - BOOTSTRAP 25 | - GITHUB ACTIONS 26 | 27 | ## Live Demo 28 | 29 | [Live Demo Link](https://samirpaulb.github.io/WeatherApp/) :point_left: 30 | 31 | ## Getting Started 32 | - Follow the live demo link and enjoy the site. 33 | 34 | ### Usage 35 | - To get a local copy up and running follow these simple example steps. 36 | 37 | Clone the repository unto your local machine cd to the folder. 38 | 39 | 40 | ### Prerequisites 41 | 42 | - A modern browser, up to date. :muscle: 43 | 44 | ### Run tests 45 | 46 | - There is no automated tests for this project. 47 | 48 | ## Future features 49 | 50 | - Add extra functionality and a contact page. 51 | 52 | ## Author 53 | 54 | 👤 SAMIR PAUL 55 | - Github: [@SamirPaulb](https://github.com/SamirPaulb) 56 | - Twitter: [@SamirPaulb](https://twitter.com/SamirPaulb) 57 | - Linkedin: [samirpaul](https://www.linkedin.com/in/samirpaul/) 58 | 59 | ## Show your support 60 | 61 | Give a ⭐️ if you like this project! 62 | 63 | 64 | ## 📝 License 65 | 66 | This project is [MIT](lic.url) licensed. 67 | 68 | 69 | 70 | [contributors-shield]: https://img.shields.io/github/contributors/javitocor/Weather-App-JS.svg?style=flat-square 71 | [contributors-url]: https://github.com/javitocor/Weather-App-JS/graphs/contributors 72 | [forks-shield]: https://img.shields.io/github/forks/javitocor/Weather-App-JS.svg?style=flat-square 73 | [forks-url]: https://github.com/javitocor/Weather-App-JS/network/members 74 | [stars-shield]: https://img.shields.io/github/stars/javitocor/Weather-App-JS.svg?style=flat-square 75 | [stars-url]: https://github.com/javitocor/Weather-App-JS/stargazers 76 | [issues-shield]: https://img.shields.io/github/issues/javitocor/Weather-App-JS.svg?style=flat-square 77 | [issues-url]: https://github.com/javitocor/Weather-App-JS/issues 78 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Weather APP 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 43 |
44 |
45 |

Search by Location

46 |
Write the location to get the weather
47 |
48 | 49 |

50 | 51 | 52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
    62 |
  • 63 |
  • 64 |
  • 65 |
  • 66 |
  • 67 |
  • 68 |
69 |
    70 |
  • 71 |
  • 72 |
  • 73 |
  • 74 |
  • 75 |
  • 76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |

87 |
88 |
89 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /src/js/dom.js: -------------------------------------------------------------------------------- 1 | import helpers from './helpers'; 2 | 3 | const dom = function dom() { 4 | function show(value) { 5 | switch (true) { 6 | case value === 'search': 7 | document.getElementById('main').style.display = 'none'; 8 | document.getElementById('section').style.display = 'block'; 9 | document.getElementById('section2').style.display = 'none'; 10 | break; 11 | case value === 'forecast': 12 | document.getElementById('main').style.display = 'none'; 13 | document.getElementById('section').style.display = 'none'; 14 | document.getElementById('section2').style.display = 'block'; 15 | break; 16 | default: 17 | document.getElementById('main').style.display = 'block'; 18 | document.getElementById('section').style.display = 'none'; 19 | document.getElementById('section2').style.display = 'none'; 20 | break; 21 | } 22 | } 23 | 24 | function fillCard(data) { 25 | helpers().addInnerText('title', `${data.name}, ${data.sys.country}`); 26 | helpers().addInnerText('temp', ` Temp: ${data.main.temp} Celsius`); 27 | helpers().addInnerText('feel', ` Feel: ${data.main.feels_like} Celsius`); 28 | helpers().addInnerText('desc', ` ${data.weather[0].main}`); 29 | helpers().addInnerText('pressure', ` Pressure: ${data.main.pressure} hPa`); 30 | helpers().addInnerText('humidity', ` Humidity: ${data.main.humidity}%`); 31 | helpers().addInnerText('minTemp', ` Min: ${data.main.temp_min} Celsius`); 32 | helpers().addInnerText('maxTemp', ` Max: ${data.main.temp_max} Celsius`); 33 | helpers().addInnerText('wind', ` ${data.wind.speed} meter/sec`); 34 | helpers().addInnerText('windDir', ` ${data.wind.deg} degrees`); 35 | helpers().addInnerText('clouds', ` Clouds: ${data.clouds.all}%`); 36 | helpers().addInnerText('sunrise', ` Sunrise: ${new Date((data.sys.sunrise + data.timezone) * 1000).toUTCString().slice(-11, -7)} AM`); 37 | helpers().addInnerText('sunset', ` Sunset: ${new Date((data.sys.sunset + data.timezone) * 1000).toUTCString().slice(-11, -7)} PM`); 38 | } 39 | 40 | function imageSwitch(data, id) { 41 | const code = data.weather[0].id; 42 | switch (true) { 43 | case code >= 200 && code <= 232: 44 | document.getElementById(id).style.backgroundImage = "url('../src/images/lighting.jpg')"; 45 | break; 46 | case code >= 300 && code <= 321: 47 | document.getElementById(id).style.backgroundImage = "url('../src/images/drizzle.jpg')"; 48 | break; 49 | case code >= 500 && code <= 531: 50 | document.getElementById(id).style.backgroundImage = "url('../src/images/rain.jpg')"; 51 | break; 52 | case code >= 600 && code <= 622: 53 | document.getElementById(id).style.backgroundImage = "url('../src/images/snow.jpg')"; 54 | break; 55 | case code >= 701 && code <= 781: 56 | document.getElementById(id).style.backgroundImage = "url('../src/images/mist.jpg')"; 57 | break; 58 | case code >= 801 && code <= 804: 59 | document.getElementById(id).style.backgroundImage = "url('../src/images/rainclouds.jpg')"; 60 | break; 61 | case code === 800: 62 | document.getElementById(id).style.backgroundImage = "url('../src/images/shiningsun.jpg')"; 63 | break; 64 | default: 65 | document.getElementById(id).style.backgroundImage = "url('../src/images/bluesky.jpg')"; 66 | break; 67 | } 68 | } 69 | 70 | function clearForms() { 71 | document.getElementById('searching').reset(); 72 | document.getElementById('navSearch').reset(); 73 | } 74 | 75 | function createCard(data) { 76 | const name = document.getElementById('cityName'); 77 | name.innerHTML = `${data.city.name}, ${data.city.country}`; 78 | const row = document.getElementById('row'); 79 | row.innerHTML = ''; 80 | const forecastFive = data.list.filter((value, index) => index % 8 === 0); 81 | forecastFive.forEach((day, index) => { 82 | const cont = helpers().createElement('div', 'col-5'); 83 | const card = helpers().createElement('div', 'card bg-dark text-white w-100 mb-2 mx-2'); 84 | const imgBg = helpers().createElement('div', ''); 85 | imgBg.id = `images${index + 1}`; 86 | imgBg.style = 'background-size: cover;background-position-y: 100%;height: 75vh;'; 87 | const over = helpers().createElement('div', 'card-img-overlay'); 88 | const h5 = helpers().createElement('h5', 'card-title text-center text-warning'); 89 | h5.innerHTML = day.dt_txt.slice(0, -9); 90 | const listCont = helpers().createElement('div', 'd-flex flex-row justify-content-around'); 91 | const ul1 = helpers().createElement('ul', 'list-group list-unstyled'); 92 | const ul2 = helpers().createElement('ul', 'list-group list-unstyled'); 93 | const temp = helpers().createElementWithInnerText('li', 'list-group-item', ` Temp: ${day.main.temp} Celsius`); 94 | const feel = helpers().createElementWithInnerText('li', 'list-group-item', ` Feel: ${day.main.feels_like} Celsius`); 95 | const pressure = helpers().createElementWithInnerText('li', 'list-group-item', ` Pressure: ${day.main.pressure} hPa`); 96 | const humidity = helpers().createElementWithInnerText('li', 'list-group-item', ` Humidity: ${day.main.humidity}%`); 97 | const desc = helpers().createElementWithInnerText('li', 'list-group-item', ` ${day.weather[0].main}`); 98 | const minTemp = helpers().createElementWithInnerText('li', 'list-group-item', ` Min: ${day.main.temp_min} Celsius`); 99 | const maxTemp = helpers().createElementWithInnerText('li', 'list-group-item', ` Max: ${day.main.temp_max} Celsius`); 100 | const clouds = helpers().createElementWithInnerText('li', 'list-group-item', ` Clouds: ${day.clouds.all}%`); 101 | const wind = helpers().createElementWithInnerText('li', 'list-group-item', ` ${day.wind.speed} meter/sec`); 102 | const windDir = helpers().createElementWithInnerText('li', 'list-group-item', ` ${day.wind.deg} degrees`); 103 | const color = document.getElementsByClassName('list-group-item'); 104 | 105 | ul2.appendChild(minTemp); 106 | ul2.appendChild(maxTemp); 107 | ul2.appendChild(wind); 108 | ul2.appendChild(windDir); 109 | ul2.appendChild(clouds); 110 | 111 | ul1.appendChild(temp); 112 | ul1.appendChild(feel); 113 | ul1.appendChild(desc); 114 | ul1.appendChild(pressure); 115 | ul1.appendChild(humidity); 116 | 117 | listCont.appendChild(ul1); 118 | listCont.appendChild(ul2); 119 | 120 | over.appendChild(h5); 121 | over.appendChild(listCont); 122 | 123 | card.appendChild(imgBg); 124 | card.appendChild(over); 125 | 126 | cont.appendChild(card); 127 | row.appendChild(cont); 128 | 129 | for (let i = 0; i < color.length; i += 1) { 130 | color[i].style = 'background-color: rgba(255,255,255,0.1);'; 131 | } 132 | 133 | 134 | imageSwitch(day, (`images${index + 1}`)); 135 | }); 136 | } 137 | 138 | 139 | async function converter(data) { 140 | const data2 = await helpers().getFahrenheit(data.name); 141 | if (document.getElementById('temp').innerHTML.includes(' Celsius')) { 142 | helpers().addInnerText('temp', ` Temp: ${data2.main.temp} ℉`); 143 | helpers().addInnerText('feel', ` Feel: ${data2.main.feels_like} ℉`); 144 | helpers().addInnerText('minTemp', ` Min: ${data2.main.temp_min} ℉`); 145 | helpers().addInnerText('maxTemp', ` Max: ${data2.main.temp_max} ℉`); 146 | } else { 147 | helpers().addInnerText('temp', ` Temp: ${data.main.temp} Celsius`); 148 | helpers().addInnerText('feel', ` Feel: ${data.main.feels_like} Celsius`); 149 | helpers().addInnerText('minTemp', ` Min: ${data.main.temp_min} Celsius`); 150 | helpers().addInnerText('maxTemp', ` Max: ${data.main.temp_max} Celsius`); 151 | } 152 | } 153 | 154 | 155 | return { 156 | show, fillCard, imageSwitch, createCard, clearForms, converter, 157 | }; 158 | }; 159 | 160 | export { dom as default }; --------------------------------------------------------------------------------