{"id":15623,"date":"2017-01-03T16:15:20","date_gmt":"2017-01-03T14:15:20","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=15623"},"modified":"2017-12-19T13:07:40","modified_gmt":"2017-12-19T11:07:40","slug":"html5-range-slider-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/","title":{"rendered":"HTML5 Range Slider Example"},"content":{"rendered":"<p>HTML5 has added so many new features to the HTML specification. With this newly added features we do not need to write complex or long JavaScript. One of the newly added element is the HTML <code>&lt;input&gt;<\/code> tag of type range.<\/p>\n<p>In this example we are going to learn how to work with this new element.<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;tgm4cmEWcKUikZNn&#8217;]<br \/>\n&nbsp;<br \/>\nFor this example we will use:<\/p>\n<ul>\n<li>A computer with a modern browser installed.<\/li>\n<li>notepad++.<\/li>\n<\/ul>\n<h2>1. Getting Started<\/h2>\n<p>The &lt;input type=range&gt; is used for input fields that should contain a value within a range. For example you have an image drawn on an HTML5 canvas and you want to give the user the ability to control the transparency level of the image. This can be accomplished with the HTML5 <code>&lt;input type=range&gt;<\/code>. This element allows a user choose a value within a range.<br \/>\nThis control has been available in operating systems for decades, but only recently\u00a0has found its way into the browser.<\/p>\n<p>The reason for this delay is probably that it is easy to emulate the functionality with JavaScript alone.<br \/>\nLet&#8217;s take a look at the syntax for this element.<\/p>\n<pre class=\"brush:bash\">&lt; input type=\"range\" &gt;\r\n\r\n<\/pre>\n<p>We can add it through JavaScript also. See the syntax below:<\/p>\n<pre class=\"brush:bash\">var x = document.createElement(\"INPUT\");\/\/ create an input element\r\n    x.setAttribute(\"type\", \"range\");\/\/ set its type\r\n    document.body.appendChild(x);\/\/add it to the HTML file.\r\n<\/pre>\n<p>You can access an &lt;input type=&#8221;range&#8221;&gt; with JavaScript <code>getElementById()<\/code><\/p>\n<pre class=\"brush:bash\">document.getElementById(\"ment\")\r\n\/\/where ment is the ID of the element.\r\n<\/pre>\n<h3>1.1 Properties Of The Slider Control<\/h3>\n<p>Let&#8217;s look at some of the properties of this element.<\/p>\n<ul>\n<li>autocomplete: With the autocomplete property you can set or return the value of the slider control.<\/li>\n<li>autofocus: You can use this property to set or get whether a slider should automatically get focus when page loads.<\/li>\n<li>defaultValue: With this property you can set the default value of the slider element or get the default value of the slider.<\/li>\n<li>disabled: This sets or gets whether the slider is available for user interaction.<\/li>\n<li>form: This property returns a reference to the form that contains the slider control.<\/li>\n<li>list: Returns a reference to the datalist that contains the slider control<\/li>\n<li>max: This property sets or returns the value of the max value of the slider control<\/li>\n<li>min: You can use this property to set or get the minimum value of the slider control.<\/li>\n<li>name: Sets or returns the value of the name attribute of a slider control.<\/li>\n<li>step: Sets or returns the value of the step attribute of the slider control.<\/li>\n<li>type: Returns which type of form element the slider control is.<\/li>\n<li>value: Sets or returns the value of the value attribute of a slider control.<\/li>\n<\/ul>\n<p>Lets take a look at a simple example<\/p>\n<p><span style=\"text-decoration: underline;\"><em>index.html<\/em><\/span><\/p>\n<pre class=\"brush:html\">&lt;!DOCTYPE html&gt; \r\n&lt;html lang=en&gt;\r\n\t&lt;head&gt;\r\n\t&lt;style&gt;\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:hidden;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t&lt;\/style&gt;\r\n\t \t\t&lt;meta charset=\"utf-8\" \/&gt;\r\n\t\t&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/&gt;\r\n\t\r\n\t&lt;title&gt; HTML5 Slider Control Example &lt;\/title&gt;\r\n\t\r\n\t&lt;\/head&gt;\r\n\t&lt;body&gt;\r\n&lt;input type=range autofocus min=1 max=10 step=1&gt;\r\n\r\n\t&lt;\/body&gt;\r\n\t&lt;\/html&gt;\r\n<\/pre>\n<p>Another Example below<\/p>\n<p><span style=\"text-decoration: underline;\"><em>index2.html<\/em><\/span><\/p>\n<pre class=\"brush:html\">&lt;!DOCTYPE html&gt; \r\n&lt;html lang=en&gt;\r\n\t&lt;head&gt;\r\n\t&lt;style&gt;\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:hidden;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n\t \r\n\t&lt;\/style&gt;\r\n\t \t\t&lt;meta charset=\"utf-8\" \/&gt;\r\n\t\t&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/&gt;\r\n\t\r\n\t&lt;title&gt; HTML5 Slider Control Example With Events &lt;\/title&gt;\r\n\t\r\n\t&lt;\/head&gt;\r\n\t&lt;body onload=init()&gt;\r\n&lt;script&gt;\r\nslide=null;\r\ns=null;\r\n\/\/ function called page loads\r\nfunction init(){\r\nslide=document.getElementById(\"slider\"); \/\/ get a reference to the slider element\r\nslide.addEventListener(\"change\",handler,false);\/\/add a listener to the slider\r\ns=document.getElementById(\"hold\"); \/\/ get a reference to the text box\r\ns.value = slide.value;\/\/ set the text box value to the slider value\r\n}\r\n\/\/function that is called when there is a change on the slider\r\nfunction handler(){\r\n\r\ns.value = slide.value;\/\/set the text box value to the slider current value\r\n\r\n\r\n\r\n}\r\n&lt;\/script&gt;\r\n&lt;input id=slider type = range autofocus min = 1 max = 10 step = 1&gt;\r\n&lt;input type=text id=hold&gt;\r\n\t&lt;\/body&gt;\r\n\t&lt;\/html&gt;\r\n<\/pre>\n<p><b>NOTE: <\/b> You should always write your javascript in a file which is different from your HTML file. In the above example we wrote both javascript and HTML in the same file for simplicity.<\/p>\n<h2>2. Summary<\/h2>\n<p>In this example we learnt about HTML5 slider control. We also gave detailed information on how to create and manipulate the slider.<\/p>\n<h2>3. Download the source code<\/h2>\n<div class=\"download\">\n<p><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here:\u00a0<strong><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/12\/html5rangexample.zip\">html5rangexample<\/a><\/strong><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>HTML5 has added so many new features to the HTML specification. With this newly added features we do not need to write complex or long JavaScript. One of the newly added element is the HTML &lt;input&gt; tag of type range. In this example we are going to learn how to work with this new element. &hellip;<\/p>\n","protected":false},"author":164,"featured_media":914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[420],"class_list":["post-15623","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5","tag-range-slider"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML5 Range Slider Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"HTML5 has added so many new features to the HTML specification. With this newly added features we do not need to write complex or long JavaScript. One of\" \/>\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.webcodegeeks.com\/html5\/html5-range-slider-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Range Slider Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"HTML5 has added so many new features to the HTML specification. With this newly added features we do not need to write complex or long JavaScript. One of\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-03T14:15:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-19T11:07:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Olayemi Odunayo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Olayemi Odunayo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/\"},\"author\":{\"name\":\"Olayemi Odunayo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/417918d9b5811210265e8590509718b8\"},\"headline\":\"HTML5 Range Slider Example\",\"datePublished\":\"2017-01-03T14:15:20+00:00\",\"dateModified\":\"2017-12-19T11:07:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/\"},\"wordCount\":509,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"keywords\":[\"range slider\"],\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/\",\"name\":\"HTML5 Range Slider Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"datePublished\":\"2017-01-03T14:15:20+00:00\",\"dateModified\":\"2017-12-19T11:07:40+00:00\",\"description\":\"HTML5 has added so many new features to the HTML specification. With this newly added features we do not need to write complex or long JavaScript. One of\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/html5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 Range Slider Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/417918d9b5811210265e8590509718b8\",\"name\":\"Olayemi Odunayo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/016b2a353262962fceecf5c274161cd9ef60fdf1593ec95e71d37f5fd9b444f6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/016b2a353262962fceecf5c274161cd9ef60fdf1593ec95e71d37f5fd9b444f6?s=96&d=mm&r=g\",\"caption\":\"Olayemi Odunayo\"},\"description\":\"I am a programmer and web developer, who has experience in developing websites and writing desktop and mobile applications. I have worked with both schematic and schemaless databases. I am also familiar with third party API and working with cloud servers. I do programming on the client side with Java, JavaScript, html, Ajax and CSS while I use PHP for server side programming.\",\"sameAs\":[\"https:\/\/www.webcodegeeks.com\/\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/olayemi-odunayo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 Range Slider Example - Web Code Geeks - 2026","description":"HTML5 has added so many new features to the HTML specification. With this newly added features we do not need to write complex or long JavaScript. One of","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.webcodegeeks.com\/html5\/html5-range-slider-example\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 Range Slider Example - Web Code Geeks - 2026","og_description":"HTML5 has added so many new features to the HTML specification. With this newly added features we do not need to write complex or long JavaScript. One of","og_url":"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2017-01-03T14:15:20+00:00","article_modified_time":"2017-12-19T11:07:40+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","type":"image\/jpeg"}],"author":"Olayemi Odunayo","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Olayemi Odunayo","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/"},"author":{"name":"Olayemi Odunayo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/417918d9b5811210265e8590509718b8"},"headline":"HTML5 Range Slider Example","datePublished":"2017-01-03T14:15:20+00:00","dateModified":"2017-12-19T11:07:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/"},"wordCount":509,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","keywords":["range slider"],"articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/","url":"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/","name":"HTML5 Range Slider Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","datePublished":"2017-01-03T14:15:20+00:00","dateModified":"2017-12-19T11:07:40+00:00","description":"HTML5 has added so many new features to the HTML specification. With this newly added features we do not need to write complex or long JavaScript. One of","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-range-slider-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"HTML5","item":"https:\/\/www.webcodegeeks.com\/category\/html5\/"},{"@type":"ListItem","position":3,"name":"HTML5 Range Slider Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/417918d9b5811210265e8590509718b8","name":"Olayemi Odunayo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/016b2a353262962fceecf5c274161cd9ef60fdf1593ec95e71d37f5fd9b444f6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/016b2a353262962fceecf5c274161cd9ef60fdf1593ec95e71d37f5fd9b444f6?s=96&d=mm&r=g","caption":"Olayemi Odunayo"},"description":"I am a programmer and web developer, who has experience in developing websites and writing desktop and mobile applications. I have worked with both schematic and schemaless databases. I am also familiar with third party API and working with cloud servers. I do programming on the client side with Java, JavaScript, html, Ajax and CSS while I use PHP for server side programming.","sameAs":["https:\/\/www.webcodegeeks.com\/"],"url":"https:\/\/www.webcodegeeks.com\/author\/olayemi-odunayo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/15623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/164"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=15623"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/15623\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=15623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=15623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=15623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}