{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; web-share; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"live_fullpage"}},"__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.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjc1NDQ4MzMyLCJpYXQiOjE2NzU0NDQ3MzIsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.G96WT1w_va0nu3VTmpuXQGmDtw0PLV__TlHz8aJLSWwVqaArgQQxxMrFX0x1ShwZxAn_gd3Cau3ZlWZB4GBOZDeWnURywlj88a1HEoNKlpy3idQ26RIAkO20EM3V93-CFg7nc_1EB34aq4ksbnsFDVoWgKQ7xP1jTeB6-2LjjYrktCn9IocSKkpCBna8bPre76YN8FsrL7K2bK7IbfgobvkjhTLxjvoKLzLI-eJlvL2ZOjxKQFdwM4gXbJkQe44G5ryvxyNFG6Uu8WBEe1RXLBe1fRsN2x2_uPAljxDvL6vouadZe8xpiLPiqHyXEAoXg09iEED5rqevqpWFNJ5Pag"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__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}\",\"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\",\"js_library\":null,\"created_at\":\"2019-12-16T11:45:39.000Z\",\"updated_at\":\"2021-04-06T08:22:17.000Z\",\"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,\"team_id\":0,\"css_prefix\":\"autoprefixer\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":\"2022-11-08T22:42:55.128Z\",\"pen_hash\":null,\"hashid\":\"gObLaEP\"}"}