{"id":3028,"date":"2022-09-09T12:35:44","date_gmt":"2022-09-09T07:35:44","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3028"},"modified":"2022-09-09T12:37:12","modified_gmt":"2022-09-09T07:37:12","slug":"create-javascript-weather-app-using-openweather-api","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/create-javascript-weather-app-using-openweather-api\/","title":{"rendered":"Create JavaScript Weather App Using OpenWeather API"},"content":{"rendered":"\n

Today, I will teach you how to make a JavaScript Weather App<\/strong> with custom icons using OpenWeather API<\/strong>. The complete source code of this tutorial is given below. So, you can simply download it and try it yourself.<\/p>\n\n\n\n

JavaScript Weather App Screenshot<\/h2>\n\n\n\n
\"JavaScript<\/figure>\n\n\n\n
\n\n\n\n

Get Free OpenWeather API Key<\/h2>\n\n\n\n

Before writing any code, you need to get a free API key<\/strong> for your application from the OpenWeather API<\/a><\/strong> website.<\/p>\n\n\n\n

Step 1:- Create an Account<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Step 2:- Tell Them Where You Want To Use It?<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Step 3:- Confirm Your Email<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Step 4:- Copy API Key<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\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>\n    <head>\n        <title>JavaScript Weather App<\/title>\n        <meta charset="UTF-8">\n        <link rel="stylsheet" href="https:\/\/fonts.googleapis.com\/css?family=Roboto:300,400,700&display=swap"\/>\n        <link type="text\/css" rel="stylesheet" href=".\/style.css" \/>\n    <\/head>\n    <body>\n        <div class="api">\n            <div class="container">\ud83c\udf1e 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">JavaScript 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>\u2764\ufe0f<\/span> by <a href="https:\/\/www.edopedia.com\/" target="_blank">Edopedia<\/a>\n                <\/small>\n            <\/div>\n        <\/footer>\n\n        <script src=".\/script.js"><\/script>\n    <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
style.css<\/h3>\n\n\n\n
\/* RESET STYLES\n\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013 *\/\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  \n  a {\n    color: inherit;\n    text-decoration: none;\n  }\n  \n  button {\n    cursor: pointer;\n  }\n   \n  input {\n    -webkit-appearance: none;\n  }\n   \n  button,\n  input {\n    border: none;\n    background: none;\n    outline: none;\n    color: inherit;\n  }\n  \n  img {\n    display: block;\n    max-width: 100%;\n    height: auto;\n  }\n  \n  ul {\n    list-style: none;\n  }\n  \n  body {\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  \u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013 *\/\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  \u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013 *\/\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  \u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013 *\/\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  \u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013 *\/\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  \u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013\u2013 *\/\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  }<\/pre><\/div>\n\n\n\n
script.js<\/h3>\n\n\n\n
\/*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 = "98558fe02a2a5ba623233fec1ca91076";\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 \ud83d\ude09`;\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>\u00b0C<\/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 \ud83d\ude29";\n    });\n\n  msg.textContent = "";\n  form.reset();\n  input.focus();\n});<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
Today, I will teach you how to make a JavaScript Weather App with custom icons using OpenWeather API. The complete source code of this tutorial is given below. So, you can simply download it and try it yourself. JavaScript Weather App Screenshot Get Free OpenWeather API Key Before writing any code, you need to get … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3038,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3028","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nCreate JavaScript Weather App Using OpenWeather API<\/title>\n<meta name=\"description\" content=\"Today, I will teach you how to make a JavaScript Weather App with custom icons using OpenWeather API. The complete source code of this tutorial is given\" \/>\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\/create-javascript-weather-app-using-openweather-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create JavaScript Weather App Using OpenWeather API\" \/>\n<meta property=\"og:description\" content=\"Today, I will teach you how to make a JavaScript Weather App with custom icons using OpenWeather API. The complete source code of this tutorial is given\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/create-javascript-weather-app-using-openweather-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-09T07:35:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-09T07:37:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/javascript_weather_app.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=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create JavaScript Weather App Using OpenWeather API","description":"Today, I will teach you how to make a JavaScript Weather App with custom icons using OpenWeather API. The complete source code of this tutorial is given","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\/create-javascript-weather-app-using-openweather-api\/","og_locale":"en_US","og_type":"article","og_title":"Create JavaScript Weather App Using OpenWeather API","og_description":"Today, I will teach you how to make a JavaScript Weather App with custom icons using OpenWeather API. The complete source code of this tutorial is given","og_url":"https:\/\/www.edopedia.com\/blog\/create-javascript-weather-app-using-openweather-api\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-09-09T07:35:44+00:00","article_modified_time":"2022-09-09T07:37:12+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/javascript_weather_app.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/create-javascript-weather-app-using-openweather-api\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/create-javascript-weather-app-using-openweather-api\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"Create JavaScript Weather App Using OpenWeather API","datePublished":"2022-09-09T07:35:44+00:00","dateModified":"2022-09-09T07:37:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/create-javascript-weather-app-using-openweather-api\/"},"wordCount":110,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/create-javascript-weather-app-using-openweather-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/javascript_weather_app.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/create-javascript-weather-app-using-openweather-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/create-javascript-weather-app-using-openweather-api\/","url":"https:\/\/www.edopedia.com\/blog\/create-javascript-weather-app-using-openweather-api\/","name":"Create JavaScript Weather App Using OpenWeather API","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/create-javascript-weather-app-using-openweather-api\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/create-javascript-weather-app-using-openweather-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/javascript_weather_app.jpg","datePublished":"2022-09-09T07:35:44+00:00","dateModified":"2022-09-09T07:37:12+00:00","description":"Today, I will teach you how to make a JavaScript Weather App with custom icons using OpenWeather API. The complete source code of this tutorial is given","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/create-javascript-weather-app-using-openweather-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/create-javascript-weather-app-using-openweather-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/create-javascript-weather-app-using-openweather-api\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/javascript_weather_app.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/javascript_weather_app.jpg","width":880,"height":495,"caption":"JavaScript Weather App"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/create-javascript-weather-app-using-openweather-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create JavaScript Weather App Using OpenWeather API"}]},{"@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\/3028","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=3028"}],"version-history":[{"count":5,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3028\/revisions"}],"predecessor-version":[{"id":3039,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3028\/revisions\/3039"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/3038"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}