{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{"gridIframeSandboxAttributes":"allow-forms allow-modals allow-pointer-lock allow-presentation allow-same-origin allow-scripts"},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__user":{"anon":true,"base_url":"/anon/","current_team_id":0,"current_team_hashid":null,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjM1MzYwMDcxLCJpYXQiOjE2MzUzNTY0NzEsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.DdDRFkK1s6f4Fu5L2j2o6NbH01BEyAJAzcLa8u_6xEaI1dMWop6PxeX6xWPYqJ-9C7AjVfl0cI12S8IDGtkCamJxVUNFbiy0DXLrWtQqxuHzcgI6YORpBwb_w_VgWbyunH58b7WhN0th5jX2xEHON4NSe4KHBMV79kObCCUXE5YmUqg3a3RgUOFIe2bfGqjy-3Wd9NVXnenNRaFwUDRwS4MAX3EgpMeba0Z8NXhhjFiBL8LWRXUVIW1wbiMdWbQBOJyorwXnyCQrw5efWh8Wxs4H5bjJz0uMIM680R_q7USZ6Aa2refLkuhfozHvQisevuF7P0HfaF1sDsL7ZuKsOg"},"__graphql":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar80":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=512&version=0&width=512","currentContext":{"id":"VoDkNZ","baseUrl":"/anon","title":"Captain Anonymous","name":"Captain Anonymous","avatar80":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://gravatar.com/avatar/b15e0cf27861794b6faa31065e8f9950?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=512&version=0&width=512","username":"anon","contextType":"USER","__typename":"User"},"currentTeamId":null,"baseUrl":"/anon","username":"anon","admin":false,"anon":true,"pro":false,"verified":null,"teams":[],"__typename":"User"}}},"__pay_stripe_public":"pk_NgCjQmQs7wXOFmfNC0LKMgEkmlThn","__pay_braintree_env":"production","__item":"{\"id\":41835953,\"user_id\":210284,\"html\":\"<div class=\\\"api\\\">\\n <div class=\\\"container\\\">🌞 This demo needs an OpenWeather API key to work. <a target=\\\"_blank\\\" href=\\\"https:\\/\\/home.openweathermap.org\\/users\\/sign_up\\\">Get yours here for free!<\\/a>\\n <\\/div>\\n<\\/div>\\n<section class=\\\"top-banner\\\">\\n <div class=\\\"container\\\">\\n <h1 class=\\\"heading\\\">Simple Weather App<\\/h1>\\n <form>\\n <input type=\\\"text\\\" placeholder=\\\"Search for a city\\\" autofocus>\\n <button type=\\\"submit\\\">SUBMIT<\\/button>\\n <span class=\\\"msg\\\"><\\/span>\\n <\\/form>\\n <\\/div>\\n<\\/section>\\n<section class=\\\"ajax-section\\\">\\n <div class=\\\"container\\\">\\n <ul class=\\\"cities\\\"><\\/ul>\\n <\\/div>\\n<\\/section>\\n<footer class=\\\"page-footer\\\">\\n <div class=\\\"container\\\">\\n <small>Made with <span>❤<\\/span> by <a href=\\\"http:\\/\\/georgemartsoukos.com\\/\\\" target=\\\"_blank\\\">George Martsoukos<\\/a>\\n <\\/small>\\n <\\/div>\\n<\\/footer>\",\"css\":\"\\/* RESET STYLES\\n–––––––––––––––––––––––––––––––––––––––––––––––––– *\\/\\n:root {\\n --bg_main: #0a1f44;\\n --text_light: #fff;\\n --text_med: #53627c;\\n --text_dark: #1e2432;\\n --red: #ff1e42;\\n --darkred: #c3112d;\\n --orange: #ff8c00;\\n}\\n\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n font-weight: normal;\\n}\\n\\na {\\n color: inherit;\\n text-decoration: none;\\n}\\n\\nbutton {\\n cursor: pointer;\\n}\\n \\ninput {\\n -webkit-appearance: none;\\n}\\n \\nbutton,\\ninput {\\n border: none;\\n background: none;\\n outline: none;\\n color: inherit;\\n}\\n\\nimg {\\n display: block;\\n max-width: 100%;\\n height: auto;\\n}\\n\\nul {\\n list-style: none;\\n}\\n\\nbody {\\n font: 1rem\\/1.3 \\\"Roboto\\\", sans-serif;\\n background: var(--bg_main);\\n color: var(--text_dark);\\n padding: 70px;\\n}\\n\\n.container {\\n width: 100%;\\n max-width: 1200px;\\n margin: 0 auto;\\n padding: 0 15px;\\n}\\n\\n\\n\\/* SECTION #1\\n–––––––––––––––––––––––––––––––––––––––––––––––––– *\\/\\n.top-banner {\\n color: var(--text_light);\\n}\\n\\n.heading {\\n font-weight: bold;\\n font-size: 4rem;\\n letter-spacing: 0.02em;\\n padding: 0 0 30px 0;\\n}\\n\\n.top-banner form {\\n position: relative;\\n display: flex;\\n align-items: center;\\n}\\n\\n.top-banner form input {\\n font-size: 2rem;\\n height: 40px;\\n padding: 5px 5px 10px;\\n border-bottom: 1px solid;\\n}\\n\\n.top-banner form input::placeholder {\\n color: currentColor; \\n}\\n\\n.top-banner form button {\\n font-size: 1rem;\\n font-weight: bold;\\n letter-spacing: 0.1em;\\n padding: 15px 20px;\\n margin-left: 15px;\\n border-radius: 5px;\\n background: var(--red);\\n transition: background 0.3s ease-in-out;\\n}\\n\\n.top-banner form button:hover {\\n background: var(--darkred);\\n}\\n\\n.top-banner form .msg {\\n position: absolute;\\n bottom: -40px;\\n left: 0;\\n max-width: 450px;\\n min-height: 40px;\\n}\\n\\n\\n\\/* SECTION #2\\n–––––––––––––––––––––––––––––––––––––––––––––––––– *\\/\\n.ajax-section {\\n margin: 70px 0 20px;\\n}\\n\\n.ajax-section .cities {\\n display: grid;\\n grid-gap: 32px 20px;\\n grid-template-columns: repeat(4, 1fr);\\n}\\n\\n.ajax-section .city {\\n position: relative;\\n padding: 40px 10%;\\n border-radius: 20px;\\n background: var(--text_light);\\n color: var(--text_med);\\n}\\n\\n.ajax-section .city::after {\\n content: '';\\n width: 90%;\\n height: 50px;\\n position: absolute;\\n bottom: -12px;\\n left: 5%;\\n z-index: -1;\\n opacity: 0.3;\\n border-radius: 20px;\\n background: var(--text_light);\\n}\\n\\n.ajax-section figcaption {\\n margin-top: 10px;\\n text-transform: uppercase;\\n letter-spacing: 0.05em;\\n}\\n\\n.ajax-section .city-temp {\\n font-size: 5rem;\\n font-weight: bold;\\n margin-top: 10px;\\n color: var(--text_dark);\\n}\\n\\n.ajax-section .city sup {\\n font-size: 0.5em;\\n}\\n\\n.ajax-section .city-name sup {\\n padding: 0.2em 0.6em;\\n border-radius: 30px;\\n color: var(--text_light);\\n background: var(--orange);\\n}\\n\\n.ajax-section .city-icon {\\n margin-top: 10px;\\n width: 100px;\\n height: 100px;\\n}\\n\\n\\n\\/* FOOTER\\n–––––––––––––––––––––––––––––––––––––––––––––––––– *\\/\\n.page-footer {\\n text-align: right;\\n font-size: 1rem;\\n color: var(--text_light);\\n margin-top: 40px;\\n}\\n\\n.page-footer span {\\n color: var(--red);\\n}\\n\\n\\n\\/* MQ\\n–––––––––––––––––––––––––––––––––––––––––––––––––– *\\/\\n@media screen and (max-width: 1000px) {\\n body {\\n padding: 30px;\\n }\\n \\n .ajax-section .cities {\\n grid-template-columns: repeat(3, 1fr);\\n }\\n}\\n\\n@media screen and (max-width: 700px) {\\n .heading,\\n .ajax-section .city-temp {\\n font-size: 3rem;\\n }\\n \\n .ajax-section {\\n margin-top: 20px;\\n }\\n \\n .top-banner form {\\n flex-direction: column;\\n align-items: flex-start;\\n }\\n \\n .top-banner form input,\\n .top-banner form button {\\n width: 100%;\\n }\\n\\n .top-banner form button {\\n margin: 20px 0 0 0;\\n }\\n \\n .top-banner form .msg {\\n position: static;\\n max-width: none;\\n min-height: 0;\\n margin-top: 10px;\\n }\\n\\n .ajax-section .cities {\\n grid-template-columns: repeat(2, 1fr);\\n }\\n}\\n\\n@media screen and (max-width: 500px) {\\n body {\\n padding: 15px;\\n }\\n \\n .ajax-section .cities {\\n grid-template-columns: repeat(1, 1fr);\\n }\\n}\\n\\n\\n\\/* API Key banner\\n–––––––––––––––––––––––––––––––––––––––––––––––––– *\\/\\n.api {\\n background: #fffbbc;\\n position: fixed;\\n top: 0;\\n left: 0;\\n width: 100%;\\n padding: 10px;\\n}\\n\\n.api a {\\n text-decoration: underline;\\n}\\n\\n.api a:hover {\\n text-decoration: none;\\n}\",\"parent\":0,\"js\":\"\\/*SEARCH BY USING A CITY NAME (e.g. athens) OR A COMMA-SEPARATED CITY NAME ALONG WITH THE COUNTRY CODE (e.g. athens,gr)*\\/\\nconst form = document.querySelector(\\\".top-banner form\\\");\\nconst input = document.querySelector(\\\".top-banner input\\\");\\nconst msg = document.querySelector(\\\".top-banner .msg\\\");\\nconst list = document.querySelector(\\\".ajax-section .cities\\\");\\n\\/*SUBSCRIBE HERE FOR API KEY: https:\\/\\/home.openweathermap.org\\/users\\/sign_up*\\/\\nconst apiKey = \\\"4d8fb5b93d4af21d66a2948710284366\\\";\\n\\nform.addEventListener(\\\"submit\\\", e => {\\n e.preventDefault();\\n let inputVal = input.value;\\n\\n \\/\\/check if there's already a city\\n const listItems = list.querySelectorAll(\\\".ajax-section .city\\\");\\n const listItemsArray = Array.from(listItems);\\n\\n if (listItemsArray.length > 0) {\\n const filteredArray = listItemsArray.filter(el => {\\n let content = \\\"\\\";\\n \\/\\/athens,gr\\n if (inputVal.includes(\\\",\\\")) {\\n \\/\\/athens,grrrrrr->invalid country code, so we keep only the first part of inputVal\\n if (inputVal.split(\\\",\\\")[1].length > 2) {\\n inputVal = inputVal.split(\\\",\\\")[0];\\n content = el\\n .querySelector(\\\".city-name span\\\")\\n .textContent.toLowerCase();\\n } else {\\n content = el.querySelector(\\\".city-name\\\").dataset.name.toLowerCase();\\n }\\n } else {\\n \\/\\/athens\\n content = el.querySelector(\\\".city-name span\\\").textContent.toLowerCase();\\n }\\n return content == inputVal.toLowerCase();\\n });\\n\\n if (filteredArray.length > 0) {\\n msg.textContent = `You already know the weather for ${\\n filteredArray[0].querySelector(\\\".city-name span\\\").textContent\\n } ...otherwise be more specific by providing the country code as well 😉`;\\n form.reset();\\n input.focus();\\n return;\\n }\\n }\\n\\n \\/\\/ajax here\\n const url = `https:\\/\\/api.openweathermap.org\\/data\\/2.5\\/weather?q=${inputVal}&appid=${apiKey}&units=metric`;\\n\\n fetch(url)\\n .then(response => response.json())\\n .then(data => {\\n const { main, name, sys, weather } = data;\\n const icon = `https:\\/\\/s3-us-west-2.amazonaws.com\\/s.cdpn.io\\/162656\\/${\\n weather[0][\\\"icon\\\"]\\n }.svg`;\\n\\n const li = document.createElement(\\\"li\\\");\\n li.classList.add(\\\"city\\\");\\n const markup = `\\n <h2 class=\\\"city-name\\\" data-name=\\\"${name},${sys.country}\\\">\\n <span>${name}<\\/span>\\n <sup>${sys.country}<\\/sup>\\n <\\/h2>\\n <div class=\\\"city-temp\\\">${Math.round(main.temp)}<sup>°C<\\/sup><\\/div>\\n <figure>\\n <img class=\\\"city-icon\\\" src=\\\"${icon}\\\" alt=\\\"${\\n weather[0][\\\"description\\\"]\\n }\\\">\\n <figcaption>${weather[0][\\\"description\\\"]}<\\/figcaption>\\n <\\/figure>\\n `;\\n li.innerHTML = markup;\\n list.appendChild(li);\\n })\\n .catch(() => {\\n msg.textContent = \\\"Please search for a valid city 😩\\\";\\n });\\n\\n msg.textContent = \\\"\\\";\\n form.reset();\\n input.focus();\\n});\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"css_prefix_free\":null,\"css_external\":null,\"js_library\":null,\"js_modernizr\":null,\"js_external\":null,\"created_at\":\"2019-12-16T11:45:39.000Z\",\"updated_at\":\"2021-04-06T08:22:17.000Z\",\"session_hash\":\"44be8121eb17c20b8315742252c0a856\",\"title\":\"Simple Weather App By Using OpenWeatherMap API & Custom Icons\",\"description\":\"In today’s tutorial, we’ll learn how to build a simple, yet fully functional weather app with Vanilla JavaScript. We have a lot of interesting things to cover, so grab a cup of coffee and let’s get started!\\n\\n[Read full tutorial here](https:\\/\\/webdesign.tutsplus.com\\/tutorials\\/build-a-simple-weather-app-with-vanilla-javascript--cms-33893)\",\"slug_hash\":\"gObLaEP\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"5d483dde862ebe9dd28c625a8682897c\",\"has_animation\":false,\"css_pre_processor_lib\":\"\",\"checksum\":0,\"screenshot_uuid\":\"8a9a482d-efff-4ed2-879c-44346a45f6db\",\"team_id\":0,\"css_prefix\":\"autoprefixer\",\"template\":false,\"js_module\":null,\"pen_hash\":null,\"hashid\":\"gObLaEP\"}"}