{"id":3661,"date":"2022-10-08T01:09:51","date_gmt":"2022-10-07T20:09:51","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3661"},"modified":"2022-10-08T01:09:54","modified_gmt":"2022-10-07T20:09:54","slug":"how-to-make-a-weather-app-using-html5-css3-javascript","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-weather-app-using-html5-css3-javascript\/","title":{"rendered":"How to Make a Weather App using HTML5, CSS3 & JavaScript"},"content":{"rendered":"\n

In this tutorial, I will teach you\u00a0how to create a weather app<\/strong>\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Weather App<\/strong> is given below.<\/p>\n\n\n\n

You can download the full source code (including images) of this JavaScript Weather app at the end of this article.<\/p>\n\n\n\n

JavaScript Weather App Source Code<\/h2>\n\n\n\n

index.html<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang="en" dir="ltr">\n  <head>\n    <meta charset="utf-8">\n    <title>Weather App in JavaScript<\/title>\n    <link rel="stylesheet" href="style.css">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <!-- Linking BoxIcon for Icon -->\n    <link href='https:\/\/unpkg.com\/boxicons@2.0.9\/css\/boxicons.min.css' rel='stylesheet'>\n  <\/head>\n  <body>\n    <div class="wrapper">\n      <header><i class='bx bx-left-arrow-alt'><\/i>Weather App<\/header>\n      <section class="input-part">\n        <p class="info-txt"><\/p>\n        <div class="content">\n          <input type="text" spellcheck="false" placeholder="Enter city name" required>\n          <div class="separator"><\/div>\n          <button>Get Device Location<\/button>\n        <\/div>\n      <\/section>\n      <section class="weather-part">\n        <img src="" alt="Weather Icon">\n        <div class="temp">\n          <span class="numb">_<\/span>\n          <span class="deg">\u00b0<\/span>C\n        <\/div>\n        <div class="weather">_ _<\/div>\n        <div class="location">\n          <i class='bx bx-map'><\/i>\n          <span>_, _<\/span>\n        <\/div>\n        <div class="bottom-details">\n          <div class="column feels">\n            <i class='bx bxs-thermometer'><\/i>\n            <div class="details">\n              <div class="temp">\n                <span class="numb-2">_<\/span>\n                <span class="deg">\u00b0<\/span>C\n              <\/div>\n              <p>Feels like<\/p>\n            <\/div>\n          <\/div>\n          <div class="column humidity">\n            <i class='bx bxs-droplet-half'><\/i>\n            <div class="details">\n              <span>_<\/span>\n              <p>Humidity<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/section>\n    <\/div>\n    \n    <script src="script.js"><\/script>\n\n  <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n
script.js<\/h3>\n\n\n\n
const wrapper = document.querySelector(".wrapper"),\ninputPart = document.querySelector(".input-part"),\ninfoTxt = inputPart.querySelector(".info-txt"),\ninputField = inputPart.querySelector("input"),\nlocationBtn = inputPart.querySelector("button"),\nweatherPart = wrapper.querySelector(".weather-part"),\nwIcon = weatherPart.querySelector("img"),\narrowBack = wrapper.querySelector("header i");\n\nlet api;\n\ninputField.addEventListener("keyup", e =>{\n    \/\/ if user pressed enter btn and input value is not empty\n    if(e.key == "Enter" && inputField.value != ""){\n        requestApi(inputField.value);\n    }\n});\n\nlocationBtn.addEventListener("click", () =>{\n    if(navigator.geolocation){ \/\/ if browser support geolocation api\n        navigator.geolocation.getCurrentPosition(onSuccess, onError);\n    }else{\n        alert("Your browser not support geolocation api");\n    }\n});\n\nfunction requestApi(city){\n    api = `https:\/\/api.openweathermap.org\/data\/2.5\/weather?q=${city}&units=metric&appid=your_api_key`;\n    fetchData();\n}\n\nfunction onSuccess(position){\n    const {latitude, longitude} = position.coords; \/\/ getting lat and lon of the user device from coords obj\n    api = `https:\/\/api.openweathermap.org\/data\/2.5\/weather?lat=${latitude}&lon=${longitude}&units=metric&appid=your_api_key`;\n    fetchData();\n}\n\nfunction onError(error){\n    \/\/ if any error occur while getting user location then we'll show it in infoText\n    infoTxt.innerText = error.message;\n    infoTxt.classList.add("error");\n}\n\nfunction fetchData(){\n    infoTxt.innerText = "Getting weather details...";\n    infoTxt.classList.add("pending");\n    \/\/ getting api response and returning it with parsing into js obj and in another \n    \/\/ then function calling weatherDetails function with passing api result as an argument\n    fetch(api).then(res => res.json()).then(result => weatherDetails(result)).catch(() =>{\n        infoTxt.innerText = "Something went wrong";\n        infoTxt.classList.replace("pending", "error");\n    });\n}\n\nfunction weatherDetails(info){\n    if(info.cod == "404"){ \/\/ if user entered city name isn't valid\n        infoTxt.classList.replace("pending", "error");\n        infoTxt.innerText = `${inputField.value} isn't a valid city name`;\n    }else{\n        \/\/getting required properties value from the whole weather information\n        const city = info.name;\n        const country = info.sys.country;\n        const {description, id} = info.weather[0];\n        const {temp, feels_like, humidity} = info.main;\n\n        \/\/ using custom weather icon according to the id which api gives to us\n        if(id == 800){\n            wIcon.src = "icons\/clear.svg";\n        }else if(id >= 200 && id <= 232){\n            wIcon.src = "icons\/storm.svg";  \n        }else if(id >= 600 && id <= 622){\n            wIcon.src = "icons\/snow.svg";\n        }else if(id >= 701 && id <= 781){\n            wIcon.src = "icons\/haze.svg";\n        }else if(id >= 801 && id <= 804){\n            wIcon.src = "icons\/cloud.svg";\n        }else if((id >= 500 && id <= 531) || (id >= 300 && id <= 321)){\n            wIcon.src = "icons\/rain.svg";\n        }\n        \n        \/\/passing a particular weather info to a particular element\n        weatherPart.querySelector(".temp .numb").innerText = Math.floor(temp);\n        weatherPart.querySelector(".weather").innerText = description;\n        weatherPart.querySelector(".location span").innerText = `${city}, ${country}`;\n        weatherPart.querySelector(".temp .numb-2").innerText = Math.floor(feels_like);\n        weatherPart.querySelector(".humidity span").innerText = `${humidity}%`;\n        infoTxt.classList.remove("pending", "error");\n        infoTxt.innerText = "";\n        inputField.value = "";\n        wrapper.classList.add("active");\n    }\n}\n\narrowBack.addEventListener("click", ()=>{\n    wrapper.classList.remove("active");\n});\n<\/pre><\/div>\n\n\n\n
style.css<\/h3>\n\n\n\n
\/* Import Google Font - Poppins *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap');\n*{\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: 'Poppins', sans-serif;\n}\nbody{\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n  background: #43AFFC;\n}\n::selection{\n  color: #fff;\n  background: #43AFFC;\n}\n.wrapper{\n  width: 400px;\n  background: #fff;\n  border-radius: 7px;\n  box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);\n}\n.wrapper header{\n  display: flex;\n  font-size: 21px;\n  font-weight: 500;\n  color: #43AFFC;\n  padding: 16px 15px;\n  align-items: center;\n  border-bottom: 1px solid #ccc;\n}\nheader i{\n  font-size: 0em;\n  cursor: pointer;\n  margin-right: 8px;\n}\n.wrapper.active header i{\n  margin-left: 5px;\n  font-size: 30px;\n}\n.wrapper .input-part{\n  margin: 20px 25px 30px;\n}\n.wrapper.active .input-part{\n  display: none;\n}\n.input-part .info-txt{\n  display: none;\n  font-size: 17px;\n  text-align: center;\n  padding: 12px 10px;\n  border-radius: 7px;\n  margin-bottom: 15px;\n}\n.input-part .info-txt.error{\n  color: #721c24;\n  display: block;\n  background: #f8d7da;\n  border: 1px solid #f5c6cb;\n}\n.input-part .info-txt.pending{\n  color: #0c5460;\n  display: block;\n  background: #d1ecf1;\n  border: 1px solid #bee5eb;\n}\n.input-part :where(input, button){\n  width: 100%;\n  height: 55px;\n  border: none;\n  outline: none;\n  font-size: 18px;\n  border-radius: 7px;\n}\n.input-part input{\n  text-align: center;\n  padding: 0 15px;\n  border: 1px solid #ccc;\n}\n.input-part input:is(:focus, :valid){\n  border: 2px solid #43AFFC;\n}\n.input-part input::placeholder{\n  color: #bfbfbf;\n}\n.input-part .separator{\n  height: 1px;\n  width: 100%;\n  margin: 25px 0;\n  background: #ccc;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.separator::before{\n  content: "or";\n  color: #b3b3b3;\n  font-size: 19px;\n  padding: 0 15px;\n  background: #fff;\n}\n.input-part button{\n  color: #fff;\n  cursor: pointer;\n  background: #43AFFC;\n  transition: 0.3s ease;\n}\n.input-part button:hover{\n  background: #1d9ffc;\n}\n\n.wrapper .weather-part{\n  display: none;\n  margin: 30px 0 0;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n}\n.wrapper.active .weather-part{\n  display: flex;\n}\n.weather-part img{\n  max-width: 125px;\n}\n.weather-part .temp{\n  display: flex;\n  font-weight: 500;\n  font-size: 72px;\n}\n.weather-part .temp .numb{\n  font-weight: 600;\n}\n.weather-part .temp .deg{\n  font-size: 40px;\n  display: block;\n  margin: 10px 5px 0 0;\n}\n.weather-part .weather{\n  font-size: 21px;\n  text-align: center;\n  margin: -5px 20px 15px;\n}\n.weather-part .location{\n  display: flex;\n  font-size: 19px;\n  padding: 0 20px;\n  text-align: center;\n  margin-bottom: 30px;\n  align-items: flex-start;\n}\n.location i{\n  font-size: 22px;\n  margin: 4px 5px 0 0;\n}\n.weather-part .bottom-details{\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  border-top: 1px solid #ccc;\n}\n.bottom-details .column{\n  display: flex;\n  width: 100%;\n  padding: 15px 0;\n  align-items: center;\n  justify-content: center;\n}\n.column i{\n  color: #5DBBFF;\n  font-size: 40px;\n}\n.column.humidity{\n  border-left: 1px solid #ccc;\n}\n.column .details{\n  margin-left: 3px;\n}\n.details .temp, .humidity span{\n  font-size: 18px;\n  font-weight: 500;\n  margin-top: -3px;\n}\n.details .temp .deg{\n  margin: 0;\n  font-size: 17px;\n  padding: 0 2px 0 1px;\n}\n.column .details p{\n  font-size: 14px;\n  margin-top: -6px;\n}\n.humidity i{\n  font-size: 37px;\n}<\/pre><\/div>\n\n\n\n
\n\n\n\n
Download Source Code (including images)<\/h2>\n\n\n
Download<\/a><\/p>","protected":false},"excerpt":{"rendered":"
In this tutorial, I will teach you\u00a0how to create a weather app\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Weather App is given below. You can download the full source code (including images) of this JavaScript Weather app at the end of this article. JavaScript Weather App Source Code index.html script.js … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3663,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3661","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nHow to Make a Weather App using HTML5, CSS3 & JavaScript<\/title>\n<meta name=\"description\" content=\"In this tutorial, I will teach you\u00a0how to create a weather app\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Weather App\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/how-to-make-a-weather-app-using-html5-css3-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make a Weather App using HTML5, CSS3 & JavaScript\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, I will teach you\u00a0how to create a weather app\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Weather App\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/how-to-make-a-weather-app-using-html5-css3-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-07T20:09:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-07T20:09:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-Weather-App-in-JavaScript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Make a Weather App using HTML5, CSS3 & JavaScript","description":"In this tutorial, I will teach you\u00a0how to create a weather app\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Weather App","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-weather-app-using-html5-css3-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to Make a Weather App using HTML5, CSS3 & JavaScript","og_description":"In this tutorial, I will teach you\u00a0how to create a weather app\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Weather App","og_url":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-weather-app-using-html5-css3-javascript\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-10-07T20:09:51+00:00","article_modified_time":"2022-10-07T20:09:54+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-Weather-App-in-JavaScript.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-weather-app-using-html5-css3-javascript\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-weather-app-using-html5-css3-javascript\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"How to Make a Weather App using HTML5, CSS3 & JavaScript","datePublished":"2022-10-07T20:09:51+00:00","dateModified":"2022-10-07T20:09:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-weather-app-using-html5-css3-javascript\/"},"wordCount":77,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-weather-app-using-html5-css3-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-Weather-App-in-JavaScript.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/how-to-make-a-weather-app-using-html5-css3-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-weather-app-using-html5-css3-javascript\/","url":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-weather-app-using-html5-css3-javascript\/","name":"How to Make a Weather App using HTML5, CSS3 & JavaScript","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-weather-app-using-html5-css3-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-weather-app-using-html5-css3-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-Weather-App-in-JavaScript.jpg","datePublished":"2022-10-07T20:09:51+00:00","dateModified":"2022-10-07T20:09:54+00:00","description":"In this tutorial, I will teach you\u00a0how to create a weather app\u00a0using HTML5, CSS3, and JavaScript. The complete source code of this JavaScript Weather App","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-weather-app-using-html5-css3-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/how-to-make-a-weather-app-using-html5-css3-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-weather-app-using-html5-css3-javascript\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-Weather-App-in-JavaScript.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Build-Weather-App-in-JavaScript.jpg","width":880,"height":495,"caption":"How to Make a Weather App using HTML5, CSS3 & JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/how-to-make-a-weather-app-using-html5-css3-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Make a Weather App using HTML5, CSS3 & JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3661","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3661"}],"version-history":[{"count":1,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3661\/revisions"}],"predecessor-version":[{"id":3662,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3661\/revisions\/3662"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/3663"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3661"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3661"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}