{"id":10078,"date":"2024-01-10T18:17:00","date_gmt":"2024-01-10T18:17:00","guid":{"rendered":"https:\/\/codehim.com\/?p=10078"},"modified":"2024-01-22T16:17:59","modified_gmt":"2024-01-22T11:17:59","slug":"binary-clock-in-html-css-and-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/","title":{"rendered":"Binary Clock in HTML CSS and JavaScript"},"content":{"rendered":"

This code creates a binary clock using HTML, CSS, and JavaScript. It displays hours, minutes, and seconds in a unique visual format. The JavaScript function retrieves the current time and updates the clock accordingly<\/a>. It’s a visual representation of time in binary form, offering an alternative way to view the current time.<\/p>\n

How to Create Binary Clock In HTML CSS and JavaScript<\/h2>\n

1. First of all, create the HTML structure for the binary clock as follows.\u00a0 It\u00a0defines the layout of the clock. It consists of <div><\/code> elements representing hours, minutes, and seconds, each containing <i><\/code> elements for displaying the binary representation.<\/p>\n

<div class=\"binary-clock\">\r\n  <span>Hours<\/span><span>Minutes<\/span><span>Seconds<\/span>\r\n  <div data-digit><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n  <div data-digit><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n  <div data-digit><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n  <div data-digit><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n  <div data-digit><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n  <div data-digit><i><\/i><i><\/i><i><\/i><i><\/i><\/div>\r\n<\/div><\/pre>\n
2. Now, style using the clock using the following CSS styles. It styles the clock components. It uses grid layouts, colors, shadows, and transitions to create the visual representation of the binary clock. You can modify colors, sizes, or styles to customize the appearance.<\/p>\n
.binary-clock{\r\n  width: min(20rem, 100%);\r\n  margin-inline: auto;\r\n  display: grid;\r\n  grid-template-columns: repeat(6,1fr);\r\n  --gap: 1.25rem;\r\n  gap: var(--gap);\r\n  --colorH: #ff187c;\r\n  --colorM: #09fff4;\r\n  --colorS: #80ff09;\r\n}\r\n.binary-clock > span {\r\n  grid-column-end: span 2;\r\n  text-align: center;\r\n  color: var(--color);\r\n  text-shadow: 2px 2px 4px hsl(0 0% 0%)\r\n}\r\n[data-digit]::after {\r\n  content: attr(data-digit);\r\n  color: var(--color);\r\n  text-align: center;\r\n  text-shadow: 2px 2px 4px hsl(0 0% 0%)\r\n}\r\n[data-digit] { \r\n  display: grid;\r\n  gap: var(--gap);\r\n}\r\n[data-digit] > i {\r\n  box-shadow:\r\n    inset -0.5rem -0.5rem 1rem hsl(0 0% 0% \/ .5),\r\n    inset 0.5rem 0.5rem 1rem hsl(0 0% 100% \/ .125),\r\n    0 0 2rem var(--active-color, transparent);\r\n  aspect-ratio: 1\/1;\r\n  background-color: var(--active-color, transparent);\r\n  border-radius: 50%;\r\n  display: grid;\r\n  place-items: center;\r\n  transition: background-color 0.5s, box-shadow 0.5s\r\n}\r\n[data-digit=\"1\"] > i:nth-of-type(4), \r\n[data-digit=\"2\"] > i:nth-of-type(3),\r\n[data-digit=\"3\"] > i:nth-of-type(3),\r\n[data-digit=\"3\"] > i:nth-of-type(4),\r\n[data-digit=\"4\"] > i:nth-of-type(2),\r\n[data-digit=\"5\"] > i:nth-of-type(2),\r\n[data-digit=\"5\"] > i:nth-of-type(4),\r\n[data-digit=\"6\"] > i:nth-of-type(2),\r\n[data-digit=\"6\"] > i:nth-of-type(3),\r\n[data-digit=\"7\"] > i:nth-of-type(2),\r\n[data-digit=\"7\"] > i:nth-of-type(3),\r\n[data-digit=\"7\"] > i:nth-of-type(4),\r\n[data-digit=\"8\"] > i:nth-of-type(1),\r\n[data-digit=\"9\"] > i:nth-of-type(1),\r\n[data-digit=\"9\"] > i:nth-of-type(4)\r\n{ --active-color: var(--color) }\r\n\r\n.binary-clock > span:nth-child(1),\r\n[data-digit]:nth-of-type(1),\r\n[data-digit]:nth-of-type(2) { --color: var(--colorH) }\r\n\r\n.binary-clock > span:nth-child(2),\r\n[data-digit]:nth-of-type(3),\r\n[data-digit]:nth-of-type(4) { --color: var(--colorM) }\r\n\r\n.binary-clock > span:nth-child(3),\r\n[data-digit]:nth-of-type(5),\r\n[data-digit]:nth-of-type(6) { --color: var(--colorS) }\r\n\r\nbody { \r\n  font-family: system-ui, sans-serif;\r\n  font-size: 1.5rem;\r\n  margin: 0; \r\n  padding: 2rem; \r\n  min-height: 100vh; \r\n  background-color: #121212;\r\n  display: grid; \r\n  align-items: center;\r\n  box-sizing: border-box;\r\n}<\/pre>\n
3. Finally, add the following JavaScript function to activate the clock. It retrieves the current time using Date()<\/code> and converts hours, minutes, and seconds into their binary representations. It updates the HTML elements with the binary values to display the time on the clock.<\/p>\n
time();\r\n\r\nfunction time(){\r\n  const digitEls=document.querySelectorAll(\".binary-clock>[data-digit]\");\r\n  const date=new Date();\r\n  const h=date.getHours();\r\n  const m=date.getMinutes();\r\n  const s=date.getSeconds();\r\n  const digits=[h,m,s].reduce((a,v)=>[...a,...v.toString().padStart(2,\"0\")],[]);\r\n  digits.forEach((digit,index)=>digitEls[index].dataset.digit=digit);\r\n  window.requestAnimationFrame(time);\r\n}<\/pre>\n
That’s all! hopefully, you have successfully created Binary Clock on your website. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code creates a binary clock using HTML, CSS, and JavaScript. It displays hours, minutes, and seconds in a unique…<\/p>\n","protected":false},"author":1,"featured_media":10107,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[58],"tags":[88],"class_list":["post-10078","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-date-time","tag-digital-clocks"],"acf":[],"yoast_head":"\nBinary Clock in HTML CSS and JavaScript — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Binary Clock in HTML CSS and JavaScript. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Binary Clock in HTML CSS and JavaScript — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Binary Clock in HTML CSS and JavaScript. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-10T18:17:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:17:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Binary-Clock-in-HTML-CSS-and-JavaScript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Binary Clock in HTML CSS and JavaScript\",\"datePublished\":\"2024-01-10T18:17:00+00:00\",\"dateModified\":\"2024-01-22T11:17:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/\"},\"wordCount\":217,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Binary-Clock-in-HTML-CSS-and-JavaScript.png\",\"keywords\":[\"Digital Clocks\"],\"articleSection\":[\"Date & Time\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/\",\"url\":\"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/\",\"name\":\"Binary Clock in HTML CSS and JavaScript — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Binary-Clock-in-HTML-CSS-and-JavaScript.png\",\"datePublished\":\"2024-01-10T18:17:00+00:00\",\"dateModified\":\"2024-01-22T11:17:59+00:00\",\"description\":\"Here is a free code snippet to create a Binary Clock in HTML CSS and JavaScript. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Binary-Clock-in-HTML-CSS-and-JavaScript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Binary-Clock-in-HTML-CSS-and-JavaScript.png\",\"width\":1280,\"height\":960,\"caption\":\"Binary Clock in HTML CSS and JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Date & Time\",\"item\":\"https:\/\/codehim.com\/category\/date-time\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Binary Clock in HTML CSS and JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Binary Clock in HTML CSS and JavaScript — CodeHim","description":"Here is a free code snippet to create a Binary Clock in HTML CSS and JavaScript. You can view demo and download the source code.","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:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Binary Clock in HTML CSS and JavaScript — CodeHim","og_description":"Here is a free code snippet to create a Binary Clock in HTML CSS and JavaScript. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-10T18:17:00+00:00","article_modified_time":"2024-01-22T11:17:59+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Binary-Clock-in-HTML-CSS-and-JavaScript.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Binary Clock in HTML CSS and JavaScript","datePublished":"2024-01-10T18:17:00+00:00","dateModified":"2024-01-22T11:17:59+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/"},"wordCount":217,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Binary-Clock-in-HTML-CSS-and-JavaScript.png","keywords":["Digital Clocks"],"articleSection":["Date & Time"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/","url":"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/","name":"Binary Clock in HTML CSS and JavaScript — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Binary-Clock-in-HTML-CSS-and-JavaScript.png","datePublished":"2024-01-10T18:17:00+00:00","dateModified":"2024-01-22T11:17:59+00:00","description":"Here is a free code snippet to create a Binary Clock in HTML CSS and JavaScript. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Binary-Clock-in-HTML-CSS-and-JavaScript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Binary-Clock-in-HTML-CSS-and-JavaScript.png","width":1280,"height":960,"caption":"Binary Clock in HTML CSS and JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/date-time\/binary-clock-in-html-css-and-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Date & Time","item":"https:\/\/codehim.com\/category\/date-time\/"},{"@type":"ListItem","position":3,"name":"Binary Clock in HTML CSS and JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1142,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10078","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=10078"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10078\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/10107"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=10078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=10078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=10078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}