{"id":29514,"date":"2021-03-08T09:55:43","date_gmt":"2021-03-08T17:55:43","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=29514"},"modified":"2021-03-08T09:55:51","modified_gmt":"2021-03-08T17:55:51","slug":"javascript-addclass","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-addclass\/","title":{"rendered":"JavaScript Add Class: A Guide"},"content":{"rendered":"\n<p>Adding a class property to an element helps the developer create a dynamic user experience on the web page. When a class property is added to an element, that selected element will assume the styling associated with that class name.<br><\/p>\n\n\n\n<p>Think about a user clicking a button. When the button is clicked, we want a section of the web page to change based on our CSS stylesheet. We can assign a class name associated with that styling to the element in order to change its appearance after the button is clicked.&nbsp;<br><\/p>\n\n\n\n<p>Creating an interactive experience is important in any front end programming. In this guide, we will explore two ways to add a class name to a selected element in plain JavaScript. By the end, you will be able to use this tool in your own projects.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use JavaScript Add Class<\/h2>\n\n\n\n<p>In JavaScript, adding a class name can be done in a couple of ways. First, we select the desired HTML element. Then, we have a choice to either use the className property or the <code>add()<\/code> method to add the class name to the element. We will go through the syntax and use in the next section.\u00a0<br><\/p>\n\n\n\n<p>Remember, we are using plain JavaScript here. No libraries are necessary. Because we are using regular JavaScript, a common practice is to wrap the above logic inside a function and pass that function to an event handler. This will ensure the function to add the class name will happen only after a specific event has occurred.&nbsp;<br><\/p>\n\n\n\n<p>As far as HTML elements are concerned, they can have multiple class names. This is useful to remember because we can add class names to elements that already have other class names or ids. All we have to keep in mind is what styling is associated with what class names in our project and add the names to the elements we want to style.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">JavaScript Syntax to Add a Class Name&nbsp;<\/h2>\n\n\n\n<p>We are going to look at two ways to add a class name to an element. Remember from the above section that wrapping the logic to add a class inside a function is a common practice. Once we have our function built, we can call it inside the onClick HTML attribute.&nbsp;<br><\/p>\n\n\n\n<p>The first way to add a class name using plain JavaScript is to go through the className property. The logic here is to select the element, then call .className on the selected element. Then we can concatenate the class name to the element.&nbsp;<br><\/p>\n\n\n\n<p>Let\u2019s start with our HTML:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;div id=&quot;div&quot;&gt;\nHello World\n&lt;\/div&gt;\n&lt;button&gt;\nAdd Class\n&lt;\/button&gt;<\/pre><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/bcqEwvCsx1nlCn2vFuWGsjWyOibmbnFtQ9AtgXW7u_LW8LIe32qonBMo2hhJ4i6mQlhWr_rN3MDoHVwxv6_4W5bfiWS_T5lf4G6_EMLeeP_tbc-RWFjbz9uufKCIWrUxRqbHX6Le\" alt=\"\"\/><\/figure>\n\n\n\n<p>Here we have a &lt;div> with an id of \u201cdiv.\u201d\u00a0 Underneath our &lt;div> is a button. This button will be adding the class name once clicked. Now let\u2019s take a look at an example CSS class.\u00a0<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>.background {\n  background-color: blue;\n  color: white;\n}<\/pre><\/div>\n\n\n\n<p>In our CSS file, we have the class \u201cbackground.\u201d Here it will be styled with a blue background color and the text will be white. We want to add the class name \u201cbackground\u201d to our &lt;div&gt; with the id \u201cdiv.\u201d&nbsp;<br><\/p>\n\n\n\n<p>JavaScript can handle selecting the &lt;div> in a function, like this one:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>const addClass = () =&gt; {\n  const element = document.getElementById('div');\n  element.className += &quot;background&quot;\n}<\/pre><\/div>\n\n\n\n<p>Our function called addClass will select the &lt;div&gt; by its id of \u201cdiv.\u201d We can store that in a variable called element. From here, we call the className property on our variable and concatenate the class name \u201cbackground.\u201d As a review, concatenation in JavaScript adds the element to a list. In other words, concatenating a class name will add that class name to the element and previously defined classes on that element will still appear.&nbsp;&nbsp;<br><\/p>\n\n\n\n<p>We aren\u2019t quite finished yet! We still have to call our addClass function somewhere. Let\u2019s add the class name to our &lt;div> after the button is clicked. <br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;div id=&quot;div&quot;&gt;\nHello World\n&lt;\/div&gt;\n&lt;button onClick=&quot;addClass()&quot;&gt;\nAdd Class\n&lt;\/button&gt;<\/pre><\/div>\n\n\n\n<p>By using the <a href=\"https:\/\/careerkarma.com\/blog\/javascript-onclick\/\">JavaScript onClick<\/a> method, we can call our function after the button is clicked. Let\u2019s test it out by clicking the button.&nbsp;<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/C5NgDeK_S_T4u-LqE3vDhPJ_0K1OL3r_OUdWXdB8QMcqmFfP7_SUe17oWReYM4yEpyRtYj2qqyeJQzwwdrKJqB15leKdygNcWSm5lJQDiqGd-sjgidtLqeLFcHQPsNN0QmGY1Pel\" alt=\"\"\/><\/figure>\n\n\n\n<p>To review what just happened, we added the class name \u201cbackground\u201d that was associated with styling in our CSS file. After we built a JavaScript function to find the element and add the class name, the class style was applied to the &lt;div&gt; once the button was clicked.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">JavaScript add() method<\/h3>\n\n\n\n<p>Using the same example as above, let\u2019s look at the other way to add a class name. This involves using the JavaScript <code>add()<\/code> method. Unlike the above example, we use the classList property to call <code>add()<\/code>.\u00a0<br><\/p>\n\n\n\n<p>Our <code>addClass()<\/code> function now looks like this:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>const addClass = () =&gt; {\n  const element = document.getElementById('div');\n  element.classList.add(&quot;background&quot;)\n}<\/pre><\/div>\n\n\n\n<p>We are still getting the &lt;div> by its id and storing it in a variable. Then we call the classList property on our variable followed by the <code>add()<\/code> method. We pass the class name \u201cbackground\u201d to <code>add()<\/code> as an argument.\u00a0<br><\/p>\n\n\n\n<p>The &lt;div&gt; now has the class \u201cbackground\u201d added to it.&nbsp;<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/Hfo_B4yEXUAjFVLF8mOHf8ChgIulUvWdbKVyYVxX4tZGUHNB-VMaJjboOMPlydn1eCrduEFe7zwQbJJ6iCvBB5poMWPRpN7ngZkyeAH63X-8U4cfYQwVVWAOcf0ia1kUKNvZFE7p\" alt=\"\"\/><\/figure>\n\n\n\n<p>We get the same result by coding it in two different ways. The choice of which one to implement in your code is yours, but the second method is more widely accepted as best practice. Using <code>add()<\/code> is considered best practice because it is less error prone than using concatenation.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>In this guide, we learned how to add a class name to an element. This is useful when you have a class that is styled in the CSS file. By adding the class name to a specific HTML element, that element inherits the styling found in the CSS file.&nbsp;<br><\/p>\n\n\n\n<p>By dynamically changing how elements look on the page, we are able to give the user an interactive experience with our app. When we write interactive applications, it feels natural and engaging to the user. It will keep them coming back to explore our app further.\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"Adding a class property to an element helps the developer create a dynamic user experience on the web page. When a class property is added to an element, that selected element will assume the styling associated with that class name. Think about a user clicking a button. When the button is clicked, we want a&hellip;","protected":false},"author":104,"featured_media":13379,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-29514","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Add a Class Name with JavaScript<\/title>\n<meta name=\"description\" content=\"Learn how to add a class name to an HTML element using plain JavaScript with this guide.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/javascript-addclass\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Add Class: A Guide\" \/>\n<meta property=\"og:description\" content=\"Learn how to add a class name to an HTML element using plain JavaScript with this guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/javascript-addclass\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-08T17:55:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-03-08T17:55:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/apple-code-coding-computer-574069.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"663\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ryan Manchester\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ryan Manchester\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-addclass\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-addclass\\\/\"},\"author\":{\"name\":\"Ryan Manchester\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/92fd52a503f77fc058ec2d0666da9bd5\"},\"headline\":\"JavaScript Add Class: A Guide\",\"datePublished\":\"2021-03-08T17:55:43+00:00\",\"dateModified\":\"2021-03-08T17:55:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-addclass\\\/\"},\"wordCount\":960,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-addclass\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/apple-code-coding-computer-574069.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-addclass\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-addclass\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-addclass\\\/\",\"name\":\"Add a Class Name with JavaScript\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-addclass\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-addclass\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/apple-code-coding-computer-574069.jpg\",\"datePublished\":\"2021-03-08T17:55:43+00:00\",\"dateModified\":\"2021-03-08T17:55:51+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/92fd52a503f77fc058ec2d0666da9bd5\"},\"description\":\"Learn how to add a class name to an HTML element using plain JavaScript with this guide.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-addclass\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-addclass\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-addclass\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/apple-code-coding-computer-574069.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/apple-code-coding-computer-574069.jpg\",\"width\":1000,\"height\":663},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-addclass\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Add Class: A Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/92fd52a503f77fc058ec2d0666da9bd5\",\"name\":\"Ryan Manchester\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ryan-manchester-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ryan-manchester-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ryan-manchester-150x150.jpg\",\"caption\":\"Ryan Manchester\"},\"description\":\"Ryan is a technical writer at Career Karma, where he covers programming languages, technology, and web development. The Texas native earned his Bachelor's of Music Composition from the University of North Texas. Ryan is currently pursuing further education in web development, aiming to graduate from Flatiron School with a certification in full stack web development. Since joining the Career Karma team in November 2020, Ryan has used his expertise to cover topics like React and Ruby on Rails.\",\"sameAs\":[\"http:\\\/\\\/www.ryanmanchester.info\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/ryan-manchester-6537a630\\\/\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/ryan-manchester\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Add a Class Name with JavaScript","description":"Learn how to add a class name to an HTML element using plain JavaScript with this guide.","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:\/\/careerkarma.com\/blog\/javascript-addclass\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Add Class: A Guide","og_description":"Learn how to add a class name to an HTML element using plain JavaScript with this guide.","og_url":"https:\/\/careerkarma.com\/blog\/javascript-addclass\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2021-03-08T17:55:43+00:00","article_modified_time":"2021-03-08T17:55:51+00:00","og_image":[{"width":1000,"height":663,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/apple-code-coding-computer-574069.jpg","type":"image\/jpeg"}],"author":"Ryan Manchester","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Ryan Manchester","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/javascript-addclass\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-addclass\/"},"author":{"name":"Ryan Manchester","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/92fd52a503f77fc058ec2d0666da9bd5"},"headline":"JavaScript Add Class: A Guide","datePublished":"2021-03-08T17:55:43+00:00","dateModified":"2021-03-08T17:55:51+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-addclass\/"},"wordCount":960,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-addclass\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/apple-code-coding-computer-574069.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/javascript-addclass\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/javascript-addclass\/","url":"https:\/\/careerkarma.com\/blog\/javascript-addclass\/","name":"Add a Class Name with JavaScript","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-addclass\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-addclass\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/apple-code-coding-computer-574069.jpg","datePublished":"2021-03-08T17:55:43+00:00","dateModified":"2021-03-08T17:55:51+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/92fd52a503f77fc058ec2d0666da9bd5"},"description":"Learn how to add a class name to an HTML element using plain JavaScript with this guide.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-addclass\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/javascript-addclass\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/javascript-addclass\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/apple-code-coding-computer-574069.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/apple-code-coding-computer-574069.jpg","width":1000,"height":663},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/javascript-addclass\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Add Class: A Guide"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/92fd52a503f77fc058ec2d0666da9bd5","name":"Ryan Manchester","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/12\/ryan-manchester-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/12\/ryan-manchester-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/12\/ryan-manchester-150x150.jpg","caption":"Ryan Manchester"},"description":"Ryan is a technical writer at Career Karma, where he covers programming languages, technology, and web development. The Texas native earned his Bachelor's of Music Composition from the University of North Texas. Ryan is currently pursuing further education in web development, aiming to graduate from Flatiron School with a certification in full stack web development. Since joining the Career Karma team in November 2020, Ryan has used his expertise to cover topics like React and Ruby on Rails.","sameAs":["http:\/\/www.ryanmanchester.info\/","https:\/\/www.linkedin.com\/in\/ryan-manchester-6537a630\/"],"url":"https:\/\/careerkarma.com\/blog\/author\/ryan-manchester\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/29514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/104"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=29514"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/29514\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/13379"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=29514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=29514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=29514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}