Code Adventures | Treehouse

<!DOCTYPE html> <html lang="en" class="application-layout code-adventures-index code-adventures-controller index-action visitor ie7 ie lt-ie11 lt-ie10 lt-ie9 lt-ie8 windows" id="layout" data-featurette="application-layout" > <head> <title>Code Adventures | Treehouse</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","errorBeacon":"bam.nr-data.net","licenseKey":"d98036d1cc","applicationID":"1824378","transactionName":"cQ5eRRQNCQ8BFhZbWFYEb1ACFAANEBFLXUQdCF5VAxo=","queueTime":0,"applicationTime":193,"agent":""}</script> <script type="text/javascript">(window.NREUM||(NREUM={})).init={privacy:{cookies_enabled:true},ajax:{deny_list:[]}};(window.NREUM||(NREUM={})).loader_config={xpid:"VwIBVldWGwIIVlVRAAk=",licenseKey:"d98036d1cc",applicationID:"1824378"};;/*! For license information please see nr-loader-full-1.283.1.min.js.LICENSE.txt */ (()=>{var e,t,r={8122:(e,t,r)=>{"use strict";r.d(t,{a:()=>i});var n=r(944);function i(e,t){try{if(!e||"object"!=typeof e)return(0,n.R)(3);if(!t||"object"!=typeof t)return(0,n.R)(4);const r=Object.create(Object.getPrototypeOf(t),Object.getOwnPropertyDescriptors(t)),o=0===Object.keys(r).length?e:r;for(let a in o)if(void 0!==e[a])try{if(null===e[a]){r[a]=null;continue}Array.isArray(e[a])&&Array.isArray(t[a])?r[a]=Array.from(new Set([...e[a],...t[a]])):"object"==typeof e[a]&&"object"==typeof t[a]?r[a]=i(e[a],t[a]):r[a]=e[a]}catch(e){(0,n.R)(1,e)}return r}catch(e){(0,n.R)(2,e)}}},2555:(e,t,r)=>{"use strict";r.d(t,{Vp:()=>c,fn:()=>s,x1:()=>u});var n=r(384),i=r(8122);const o={beacon:n.NT.beacon,errorBeacon:n.NT.errorBeacon,licenseKey:void 0,applicationID:void 0,sa:void 0,queueTime:void 0,applicationTime:void 0,ttGuid:void 0,user:void 0,account:void 0,product:void 0,extra:void 0,jsAttributes:{},userAttributes:void 0,atts:void 0,transactionName:void 0,tNamePlain:void 0},a={};function s(e){try{const t=c(e);return!!t.licenseKey&&!!t.errorBeacon&&!!t.applicationID}catch(e){return!1}}function c(e){if(!e)throw new Error("All info objects require an agent identifier!");if(!a[e])throw new Error("Info for ".concat(e," was never set"));return a[e]}function u(e,t){if(!e)throw new Error("All info objects require an agent identifier!");a[e]=(0,i.a)(t,o);const r=(0,n.nY)(e);r&&(r.info=a[e])}},9417:(e,t,r)=>{"use strict";r.d(t,{D0:()=>h,gD:()=>p,xN:()=>g});var n=r(3333);const i=e=>{if(!e||"string"!=typeof e)return!1;try{document.createDocumentFragment().querySelector(e)}catch{return!1}return!0};var o=r(2614),a=r(944),s=r(384),c=r(8122);const u="[data-nr-mask]",d=()=>{const e={feature_flags:[],experimental:{marks:!1,measures:!1,resources:!1},mask_selector:"*",block_selector:"[data-nr-block]",mask_input_options:{color:!1,date:!1,"datetime-local":!1,email:!1,month:!1,number:!1,range:!1,search:!1,tel:!1,text:!1,time:!1,url:!1,week:!1,textarea:!1,select:!1,password:!0}};return{ajax:{deny_list:void 0,block_internal:!0,enabled:!0,autoStart:!0},distributed_tracing:{enabled:void 0,exclude_newrelic_header:void 0,cors_use_newrelic_header:void 0,cors_use_tracecontext_headers:void 0,allowed_origins:void 0},get feature_flags(){return e.feature_flags},set feature_flags(t){e.feature_flags=t},generic_events:{enabled:!0,autoStart:!0},harvest:{interval:30},jserrors:{enabled:!0,autoStart:!0},logging:{enabled:!0,autoStart:!0},metrics:{enabled:!0,autoStart:!0},obfuscate:void 0,page_action:{enabled:!0},page_view_event:{enabled:!0,autoStart:!0},page_view_timing:{enabled:!0,autoStart:!0},performance:{get capture_marks(){return e.feature_flags.includes(n.$v.MARKS)||e.experimental.marks},set capture_marks(t){e.experimental.marks=t},get capture_measures(){return e.feature_flags.includes(n.$v.MEASURES)||e.experimental.measures},set capture_measures(t){e.experimental.measures=t},capture_detail:!0,resources:{get enabled(){return e.feature_flags.includes(n.$v.RESOURCES)||e.experimental.resources},set enabled(t){e.experimental.resources=t},asset_types:[],first_party_domains:[],ignore_newrelic:!0}},privacy:{cookies_enabled:!0},proxy:{assets:void 0,beacon:void 0},session:{expiresMs:o.wk,inactiveMs:o.BB},session_replay:{autoStart:!0,enabled:!1,preload:!1,sampling_rate:10,error_sampling_rate:100,collect_fonts:!1,inline_images:!1,fix_stylesheets:!0,mask_all_inputs:!0,get mask_text_selector(){return e.mask_selector},set mask_text_selector(t){i(t)?e.mask_selector="".concat(t,",").concat(u):""===t||null===t?e.mask_selector=u:(0,a.R)(5,t)},get block_class(){return"nr-block"},get ignore_class(){return"nr-ignore"},get mask_text_class(){return"nr-mask"},get block_selector(){return e.block_selector},set block_selector(t){i(t)?e.block_selector+=",".concat(t):""!==t&&(0,a.R)(6,t)},get mask_input_options(){return e.mask_input_options},set mask_input_options(t){t&&"object"==typeof t?e.mask_input_options={...t,password:!0}:(0,a.R)(7,t)}},session_trace:{enabled:!0,autoStart:!0},soft_navigations:{enabled:!0,autoStart:!0},spa:{enabled:!0,autoStart:!0},ssl:void 0,user_actions:{enabled:!0,elementAttributes:["id","className","tagName","type"]}}},l={},f="All configuration objects require an agent identifier!";function h(e){if(!e)throw new Error(f);if(!l[e])throw new Error("Configuration for ".concat(e," was never set"));return l[e]}function g(e,t){if(!e)throw new Error(f);l[e]=(0,c.a)(t,d());const r=(0,s.nY)(e);r&&(r.init=l[e])}function p(e,t){if(!e)throw new Error(f);var r=h(e);if(r){for(var n=t.split("."),i=0;i<n.length-1;i++)if("object"!=typeof(r=r[n[i]]))return;r=r[n[n.length-1]]}return r}},5603:(e,t,r)=>{"use strict";r.d(t,{a:()=>c,o:()=>s});var n=r(384),i=r(8122);const o={accountID:void 0,trustKey:void 0,agentID:void 0,licenseKey:void 0,applicationID:void 0,xpid:void 0},a={};function s(e){if(!e)throw new Error("All loader-config objects require an agent identifier!");if(!a[e])throw new Error("LoaderConfig for ".concat(e," was never set"));return a[e]}function c(e,t){if(!e)throw new Error("All loader-config objects require an agent identifier!");a[e]=(0,i.a)(t,o);const r=(0,n.nY)(e);r&&(r.loader_config=a[e])}},3371:(e,t,r)=>{"use strict";r.d(t,{V:()=>f,f:()=>l});var n=r(8122),i=r(384),o=r(6154),a=r(9324);let s=0;const c={buildEnv:a.F3,distMethod:a.Xs,version:a.xv,originTime:o.WN},u={customTransaction:void 0,disabled:!1,isolatedBacklog:!1,loaderType:void 0,maxBytes:3e4,onerror:void 0,ptid:void 0,releaseIds:{},appMetadata:{},session:void 0,denyList:void 0,timeKeeper:void 0,obfuscator:void 0,harvester:void 0},d={};function l(e){if(!e)throw new Error("All runtime objects require an agent identifier!");if(!d[e])throw new Error("Runtime for ".concat(e," was never set"));return d[e]}function f(e,t){if(!e)throw new Error("All runtime objects require an agent identifier!");d[e]={...(0,n.a)(t,u),...c},Object.hasOwnProperty.call(d[e],"harvestCount")||Object.defineProperty(d[e],"harvestCount",{get:()=>++s});const r=(0,i.nY)(e);r&&(r.runtime=d[e])}},9324:(e,t,r)=>{"use strict";r.d(t,{F3:()=>i,Xs:()=>o,Yq:()=>a,xv:()=>n});const n="1.283.1",i="PROD",o="CDN",a="^2.0.0-alpha.17"},6154:(e,t,r)=>{"use strict";r.d(t,{OF:()=>u,RI:()=>i,WN:()=>f,bv:()=>o,gm:()=>a,lR:()=>l,m:()=>c,mw:()=>s,sb:()=>d});var n=r(1863);const i="undefined"!=typeof window&&!!window.document,o="undefined"!=typeof WorkerGlobalScope&&("undefined"!=typeof self&&self instanceof WorkerGlobalScope&&self.navigator instanceof WorkerNavigator||"undefined"!=typeof globalThis&&globalThis instanceof WorkerGlobalScope&&globalThis.navigator instanceof WorkerNavigator),a=i?window:"undefined"!=typeof WorkerGlobalScope&&("undefined"!=typeof self&&self instanceof WorkerGlobalScope&&self||"undefined"!=typeof globalThis&&globalThis instanceof WorkerGlobalScope&&globalThis),s=Boolean("hidden"===a?.document?.visibilityState),c=""+a?.location,u=/iPad|iPhone|iPod/.test(a.navigator?.userAgent),d=u&&"undefined"==typeof SharedWorker,l=(()=>{const e=a.navigator?.userAgent?.match(/Firefox[/\s](\d+\.\d+)/);return Array.isArray(e)&&e.length>=2?+e[1]:0})(),f=Date.now()-(0,n.t)()},7295:(e,t,r)=>{"use strict";r.d(t,{Xv:()=>a,gX:()=>i,iW:()=>o});var n=[];function i(e){if(!e||o(e))return!1;if(0===n.length)return!0;for(var t=0;t<n.length;t++){var r=n[t];if("*"===r.hostname)return!1;if(s(r.hostname,e.hostname)&&c(r.pathname,e.pathname))return!1}return!0}function o(e){return void 0===e.hostname}function a(e){if(n=[],e&&e.length)for(var t=0;t<e.length;t++){let r=e[t];if(!r)continue;0===r.indexOf("http://")?r=r.substring(7):0===r.indexOf("https://")&&(r=r.substring(8));const i=r.indexOf("/");let o,a;i>0?(o=r.substring(0,i),a=r.substring(i)):(o=r,a="");let[s]=o.split(":");n.push({hostname:s,pathname:a})}}function s(e,t){return!(e.length>t.length)&&t.indexOf(e)===t.length-e.length}function c(e,t){return 0===e.indexOf("/")&&(e=e.substring(1)),0===t.indexOf("/")&&(t=t.substring(1)),""===e||e===t}},1687:(e,t,r)=>{"use strict";r.d(t,{Ak:()=>c,Ze:()=>l,x3:()=>u});var n=r(7836),i=r(3606),o=r(860),a=r(2646);const s={};function c(e,t){const r={staged:!1,priority:o.P3[t]||0};d(e),s[e].get(t)||s[e].set(t,r)}function u(e,t){e&&s[e]&&(s[e].get(t)&&s[e].delete(t),h(e,t,!1),s[e].size&&f(e))}function d(e){if(!e)throw new Error("agentIdentifier required");s[e]||(s[e]=new Map)}function l(e="",t="feature",r=!1){if(d(e),!e||!s[e].get(t)||r)return h(e,t);s[e].get(t).staged=!0,f(e)}function f(e){const t=Array.from(s[e]);t.every((([e,t])=>t.staged))&&(t.sort(((e,t)=>e[1].priority-t[1].priority)),t.forEach((([t])=>{s[e].delete(t),h(e,t)})))}function h(e,t,r=!0){const o=e?n.ee.get(e):n.ee,s=i.i.handlers;if(!o.aborted&&o.backlog&&s){if(r){const e=o.backlog[t],r=s[t];if(r){for(let t=0;e&&t<e.length;++t)g(e[t],r);Object.entries(r).forEach((([e,t])=>{Object.values(t||{}).forEach((t=>{t[0]?.on&&t[0]?.context()instanceof a.y&&t[0].on(e,t[1])}))}))}}o.isolatedBacklog||delete s[t],o.backlog[t]=null,o.emit("drain-"+t,[])}}function g(e,t){var r=e[1];Object.values(t[r]||{}).forEach((t=>{var r=e[0];if(t[0]===r){var n=t[1],i=e[3],o=e[2];n.apply(i,o)}}))}},7836:(e,t,r)=>{"use strict";r.d(t,{P:()=>c,ee:()=>u});var n=r(384),i=r(8990),o=r(3371),a=r(2646),s=r(5607);const c="nr@context:".concat(s.W),u=function e(t,r){var n={},s={},d={},l=!1;try{l=16===r.length&&(0,o.f)(r).isolatedBacklog}catch(e){}var f={on:g,addEventListener:g,removeEventListener:function(e,t){var r=n[e];if(!r)return;for(var i=0;i<r.length;i++)r[i]===t&&r.splice(i,1)},emit:function(e,r,n,i,o){!1!==o&&(o=!0);if(u.aborted&&!i)return;t&&o&&t.emit(e,r,n);for(var a=h(n),c=p(e),d=c.length,l=0;l<d;l++)c[l].apply(a,r);var g=v()[s[e]];g&&g.push([f,e,r,a]);return a},get:m,listeners:p,context:h,buffer:function(e,t){const r=v();if(t=t||"feature",f.aborted)return;Object.entries(e||{}).forEach((([e,n])=>{s[n]=t,t in r||(r[t]=[])}))},abort:function(){f._aborted=!0,Object.keys(f.backlog).forEach((e=>{delete f.backlog[e]}))},isBuffering:function(e){return!!v()[s[e]]},debugId:r,backlog:l?{}:t&&"object"==typeof t.backlog?t.backlog:{},isolatedBacklog:l};return Object.defineProperty(f,"aborted",{get:()=>{let e=f._aborted||!1;return e||(t&&(e=t.aborted),e)}}),f;function h(e){return e&&e instanceof a.y?e:e?(0,i.I)(e,c,(()=>new a.y(c))):new a.y(c)}function g(e,t){n[e]=p(e).concat(t)}function p(e){return n[e]||[]}function m(t){return d[t]=d[t]||e(f,t)}function v(){return f.backlog}}(void 0,"globalEE"),d=(0,n.Zm)();d.ee||(d.ee=u)},2646:(e,t,r)=>{"use strict";r.d(t,{y:()=>n});class n{constructor(e){this.contextId=e}}},9908:(e,t,r)=>{"use strict";r.d(t,{d:()=>n,p:()=>i});var n=r(7836).ee.get("handle");function i(e,t,r,i,o){o?(o.buffer([e],i),o.emit(e,t,r)):(n.buffer([e],i),n.emit(e,t,r))}},3606:(e,t,r)=>{"use strict";r.d(t,{i:()=>o});var n=r(9908);o.on=a;var i=o.handlers={};function o(e,t,r,o){a(o||n.d,i,e,t,r)}function a(e,t,r,i,o){o||(o="feature"),e||(e=n.d);var a=t[o]=t[o]||{};(a[r]=a[r]||[]).push([e,i])}},3878:(e,t,r)=>{"use strict";function n(e,t){return{capture:e,passive:!1,signal:t}}function i(e,t,r=!1,i){window.addEventListener(e,t,n(r,i))}function o(e,t,r=!1,i){document.addEventListener(e,t,n(r,i))}r.d(t,{DD:()=>o,jT:()=>n,sp:()=>i})},5607:(e,t,r)=>{"use strict";r.d(t,{W:()=>n});const n=(0,r(9566).bz)()},9566:(e,t,r)=>{"use strict";r.d(t,{LA:()=>s,ZF:()=>c,bz:()=>a,el:()=>u});var n=r(6154);const i="xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";function o(e,t){return e?15&e[t]:16*Math.random()|0}function a(){const e=n.gm?.crypto||n.gm?.msCrypto;let t,r=0;return e&&e.getRandomValues&&(t=e.getRandomValues(new Uint8Array(30))),i.split("").map((e=>"x"===e?o(t,r++).toString(16):"y"===e?(3&o()|8).toString(16):e)).join("")}function s(e){const t=n.gm?.crypto||n.gm?.msCrypto;let r,i=0;t&&t.getRandomValues&&(r=t.getRandomValues(new Uint8Array(e)));const a=[];for(var s=0;s<e;s++)a.push(o(r,i++).toString(16));return a.join("")}function c(){return s(16)}function u(){return s(32)}},2614:(e,t,r)=>{"use strict";r.d(t,{BB:()=>a,H3:()=>n,g:()=>u,iL:()=>c,tS:()=>s,uh:()=>i,wk:()=>o});const n="NRBA",i="SESSION",o=144e5,a=18e5,s={STARTED:"session-started",PAUSE:"session-pause",RESET:"session-reset",RESUME:"session-resume",UPDATE:"session-update"},c={SAME_TAB:"same-tab",CROSS_TAB:"cross-tab"},u={OFF:0,FULL:1,ERROR:2}},1863:(e,t,r)=>{"use strict";function n(){return Math.floor(performance.now())}r.d(t,{t:()=>n})},7485:(e,t,r)=>{"use strict";r.d(t,{D:()=>i});var n=r(6154);function i(e){if(0===(e||"").indexOf("data:"))return{protocol:"data"};try{const t=new URL(e,location.href),r={port:t.port,hostname:t.hostname,pathname:t.pathname,search:t.search,protocol:t.protocol.slice(0,t.protocol.indexOf(":")),sameOrigin:t.protocol===n.gm?.location?.protocol&&t.host===n.gm?.location?.host};return r.port&&""!==r.port||("http:"===t.protocol&&(r.port="80"),"https:"===t.protocol&&(r.port="443")),r.pathname&&""!==r.pathname?r.pathname.startsWith("/")||(r.pathname="/".concat(r.pathname)):r.pathname="/",r}catch(e){return{}}}},944:(e,t,r)=>{"use strict";function n(e,t){"function"==typeof console.debug&&console.debug("New Relic Warning: https://github.com/newrelic/newrelic-browser-agent/blob/main/docs/warning-codes.md#".concat(e),t)}r.d(t,{R:()=>n})},5284:(e,t,r)=>{"use strict";r.d(t,{t:()=>c,B:()=>s});var n=r(7836),i=r(6154);const o="newrelic";const a=new Set,s={};function c(e,t){const r=n.ee.get(t);s[t]??={},e&&"object"==typeof e&&(a.has(t)||(r.emit("rumresp",[e]),s[t]=e,a.add(t),function(e={}){try{i.gm.dispatchEvent(new CustomEvent(o,{detail:e}))}catch(e){}}({loaded:!0})))}},8990:(e,t,r)=>{"use strict";r.d(t,{I:()=>i});var n=Object.prototype.hasOwnProperty;function i(e,t,r){if(n.call(e,t))return e[t];var i=r();if(Object.defineProperty&&Object.keys)try{return Object.defineProperty(e,t,{value:i,writable:!0,enumerable:!1}),i}catch(e){}return e[t]=i,i}},6389:(e,t,r)=>{"use strict";function n(e,t=500,r={}){const n=r?.leading||!1;let i;return(...r)=>{n&&void 0===i&&(e.apply(this,r),i=setTimeout((()=>{i=clearTimeout(i)}),t)),n||(clearTimeout(i),i=setTimeout((()=>{e.apply(this,r)}),t))}}function i(e){let t=!1;return(...r)=>{t||(t=!0,e.apply(this,r))}}r.d(t,{J:()=>i,s:()=>n})},3304:(e,t,r)=>{"use strict";r.d(t,{A:()=>o});var n=r(7836);const i=()=>{const e=new WeakSet;return(t,r)=>{if("object"==typeof r&&null!==r){if(e.has(r))return;e.add(r)}return r}};function o(e){try{return JSON.stringify(e,i())??""}catch(e){try{n.ee.emit("internal-error",[e])}catch(e){}return""}}},5289:(e,t,r)=>{"use strict";r.d(t,{GG:()=>o,sB:()=>a});var n=r(3878);function i(){return"undefined"==typeof document||"complete"===document.readyState}function o(e,t){if(i())return e();(0,n.sp)("load",e,t)}function a(e){if(i())return e();(0,n.DD)("DOMContentLoaded",e)}},384:(e,t,r)=>{"use strict";r.d(t,{NT:()=>o,US:()=>d,Zm:()=>a,bQ:()=>c,dV:()=>s,nY:()=>u,pV:()=>l});var n=r(6154),i=r(1863);const o={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net"};function a(){return n.gm.NREUM||(n.gm.NREUM={}),void 0===n.gm.newrelic&&(n.gm.newrelic=n.gm.NREUM),n.gm.NREUM}function s(){let e=a();return e.o||(e.o={ST:n.gm.setTimeout,SI:n.gm.setImmediate,CT:n.gm.clearTimeout,XHR:n.gm.XMLHttpRequest,REQ:n.gm.Request,EV:n.gm.Event,PR:n.gm.Promise,MO:n.gm.MutationObserver,FETCH:n.gm.fetch,WS:n.gm.WebSocket}),e}function c(e,t){let r=a();r.initializedAgents??={},t.initializedAt={ms:(0,i.t)(),date:new Date},r.initializedAgents[e]=t}function u(e){let t=a();return t.initializedAgents?.[e]}function d(e,t){a()[e]=t}function l(){return function(){let e=a();const t=e.info||{};e.info={beacon:o.beacon,errorBeacon:o.errorBeacon,...t}}(),function(){let e=a();const t=e.init||{};e.init={...t}}(),s(),function(){let e=a();const t=e.loader_config||{};e.loader_config={...t}}(),a()}},2843:(e,t,r)=>{"use strict";r.d(t,{u:()=>i});var n=r(3878);function i(e,t=!1,r,i){(0,n.DD)("visibilitychange",(function(){if(t)return void("hidden"===document.visibilityState&&e());e(document.visibilityState)}),r,i)}},8139:(e,t,r)=>{"use strict";r.d(t,{u:()=>f});var n=r(7836),i=r(3434),o=r(8990),a=r(6154);const s={},c=a.gm.XMLHttpRequest,u="addEventListener",d="removeEventListener",l="nr@wrapped:".concat(n.P);function f(e){var t=function(e){return(e||n.ee).get("events")}(e);if(s[t.debugId]++)return t;s[t.debugId]=1;var r=(0,i.YM)(t,!0);function f(e){r.inPlace(e,[u,d],"-",g)}function g(e,t){return e[1]}return"getPrototypeOf"in Object&&(a.RI&&h(document,f),c&&h(c.prototype,f),h(a.gm,f)),t.on(u+"-start",(function(e,t){var n=e[1];if(null!==n&&("function"==typeof n||"object"==typeof n)){var i=(0,o.I)(n,l,(function(){var e={object:function(){if("function"!=typeof n.handleEvent)return;return n.handleEvent.apply(n,arguments)},function:n}[typeof n];return e?r(e,"fn-",null,e.name||"anonymous"):n}));this.wrapped=e[1]=i}})),t.on(d+"-start",(function(e){e[1]=this.wrapped||e[1]})),t}function h(e,t,...r){let n=e;for(;"object"==typeof n&&!Object.prototype.hasOwnProperty.call(n,u);)n=Object.getPrototypeOf(n);n&&t(n,...r)}},3434:(e,t,r)=>{"use strict";r.d(t,{Jt:()=>o,YM:()=>c});var n=r(7836),i=r(5607);const o="nr@original:".concat(i.W);var a=Object.prototype.hasOwnProperty,s=!1;function c(e,t){return e||(e=n.ee),r.inPlace=function(e,t,n,i,o){n||(n="");const a="-"===n.charAt(0);for(let s=0;s<t.length;s++){const c=t[s],u=e[c];d(u)||(e[c]=r(u,a?c+n:n,i,c,o))}},r.flag=o,r;function r(t,r,n,s,c){return d(t)?t:(r||(r=""),nrWrapper[o]=t,function(e,t,r){if(Object.defineProperty&&Object.keys)try{return Object.keys(e).forEach((function(r){Object.defineProperty(t,r,{get:function(){return e[r]},set:function(t){return e[r]=t,t}})})),t}catch(e){u([e],r)}for(var n in e)a.call(e,n)&&(t[n]=e[n])}(t,nrWrapper,e),nrWrapper);function nrWrapper(){var o,a,d,l;try{a=this,o=[...arguments],d="function"==typeof n?n(o,a):n||{}}catch(t){u([t,"",[o,a,s],d],e)}i(r+"start",[o,a,s],d,c);try{return l=t.apply(a,o)}catch(e){throw i(r+"err",[o,a,e],d,c),e}finally{i(r+"end",[o,a,l],d,c)}}}function i(r,n,i,o){if(!s||t){var a=s;s=!0;try{e.emit(r,n,i,t,o)}catch(t){u([t,r,n,i],e)}s=a}}}function u(e,t){t||(t=n.ee);try{t.emit("internal-error",e)}catch(e){}}function d(e){return!(e&&"function"==typeof e&&e.apply&&!e[o])}},9414:(e,t,r)=>{"use strict";r.d(t,{J:()=>c});var n=r(7836),i=r(2646),o=r(944),a=r(3434);const s=new Map;function c(e,t,r,c){if("object"!=typeof t||!t||"string"!=typeof r||!r||"function"!=typeof t[r])return(0,o.R)(29);const u=function(e){return(e||n.ee).get("logger")}(e),d=(0,a.YM)(u),l=new i.y(n.P);l.level=c.level,l.customAttributes=c.customAttributes;const f=t[r]?.[a.Jt]||t[r];return s.set(f,l),d.inPlace(t,[r],"wrap-logger-",(()=>s.get(f))),u}},9300:(e,t,r)=>{"use strict";r.d(t,{T:()=>n});const n=r(860).K7.ajax},3333:(e,t,r)=>{"use strict";r.d(t,{$v:()=>u,TZ:()=>n,Zp:()=>i,kd:()=>c,mq:()=>s,nf:()=>a,qN:()=>o});const n=r(860).K7.genericEvents,i=["auxclick","click","copy","keydown","paste","scrollend"],o=["focus","blur"],a=4,s=1e3,c=["PageAction","UserAction","BrowserPerformance"],u={MARKS:"experimental.marks",MEASURES:"experimental.measures",RESOURCES:"experimental.resources"}},6774:(e,t,r)=>{"use strict";r.d(t,{T:()=>n});const n=r(860).K7.jserrors},993:(e,t,r)=>{"use strict";r.d(t,{A$:()=>o,ET:()=>a,TZ:()=>s,p_:()=>i});var n=r(860);const i={ERROR:"ERROR",WARN:"WARN",INFO:"INFO",DEBUG:"DEBUG",TRACE:"TRACE"},o={OFF:0,ERROR:1,WARN:2,INFO:3,DEBUG:4,TRACE:5},a="log",s=n.K7.logging},3785:(e,t,r)=>{"use strict";r.d(t,{R:()=>c,b:()=>u});var n=r(9908),i=r(1863),o=r(860),a=r(8154),s=r(993);function c(e,t,r={},c=s.p_.INFO){(0,n.p)(a.xV,["API/logging/".concat(c.toLowerCase(),"/called")],void 0,o.K7.metrics,e),(0,n.p)(s.ET,[(0,i.t)(),t,r,c],void 0,o.K7.logging,e)}function u(e){return"string"==typeof e&&Object.values(s.p_).some((t=>t===e.toUpperCase().trim()))}},8154:(e,t,r)=>{"use strict";r.d(t,{z_:()=>o,XG:()=>s,TZ:()=>n,rs:()=>i,xV:()=>a});r(6154),r(9566),r(384);const n=r(860).K7.metrics,i="sm",o="cm",a="storeSupportabilityMetrics",s="storeEventMetrics"},6630:(e,t,r)=>{"use strict";r.d(t,{T:()=>n});const n=r(860).K7.pageViewEvent},782:(e,t,r)=>{"use strict";r.d(t,{T:()=>n});const n=r(860).K7.pageViewTiming},6344:(e,t,r)=>{"use strict";r.d(t,{BB:()=>d,G4:()=>o,Qb:()=>l,TZ:()=>i,Ug:()=>a,_s:()=>s,bc:()=>u,yP:()=>c});var n=r(2614);const i=r(860).K7.sessionReplay,o={RECORD:"recordReplay",PAUSE:"pauseReplay",REPLAY_RUNNING:"replayRunning",ERROR_DURING_REPLAY:"errorDuringReplay"},a=.12,s={DomContentLoaded:0,Load:1,FullSnapshot:2,IncrementalSnapshot:3,Meta:4,Custom:5},c={[n.g.ERROR]:15e3,[n.g.FULL]:3e5,[n.g.OFF]:0},u={RESET:{message:"Session was reset",sm:"Reset"},IMPORT:{message:"Recorder failed to import",sm:"Import"},TOO_MANY:{message:"429: Too Many Requests",sm:"Too-Many"},TOO_BIG:{message:"Payload was too large",sm:"Too-Big"},CROSS_TAB:{message:"Session Entity was set to OFF on another tab",sm:"Cross-Tab"},ENTITLEMENTS:{message:"Session Replay is not allowed and will not be started",sm:"Entitlement"}},d=5e3,l={API:"api"}},5270:(e,t,r)=>{"use strict";r.d(t,{Aw:()=>c,CT:()=>u,SR:()=>s});var n=r(384),i=r(9417),o=r(7767),a=r(6154);function s(e){return!!(0,n.dV)().o.MO&&(0,o.V)(e)&&!0===(0,i.gD)(e,"session_trace.enabled")}function c(e){return!0===(0,i.gD)(e,"session_replay.preload")&&s(e)}function u(e,t){const r=t.correctAbsoluteTimestamp(e);return{originalTimestamp:e,correctedTimestamp:r,timestampDiff:e-r,originTime:a.WN,correctedOriginTime:t.correctedOriginTime,originTimeDiff:Math.floor(a.WN-t.correctedOriginTime)}}},3738:(e,t,r)=>{"use strict";r.d(t,{He:()=>i,Kp:()=>s,Lc:()=>u,Rz:()=>d,TZ:()=>n,bD:()=>o,d3:()=>a,jx:()=>l,uP:()=>c});const n=r(860).K7.sessionTrace,i="bstResource",o="resource",a="-start",s="-end",c="fn"+a,u="fn"+s,d="pushState",l=1e3},4234:(e,t,r)=>{"use strict";r.d(t,{W:()=>o});var n=r(7836),i=r(1687);class o{constructor(e,t){this.agentIdentifier=e,this.ee=n.ee.get(e),this.featureName=t,this.blocked=!1}deregisterDrain(){(0,i.x3)(this.agentIdentifier,this.featureName)}}},7767:(e,t,r)=>{"use strict";r.d(t,{V:()=>o});var n=r(9417),i=r(6154);const o=e=>i.RI&&!0===(0,n.gD)(e,"privacy.cookies_enabled")},8969:(e,t,r)=>{"use strict";r.d(t,{j:()=>N});var n=r(860),i=r(2555),o=r(3371),a=r(9908),s=r(7836),c=r(1687),u=r(5289),d=r(6154),l=r(944),f=r(8154),h=r(384),g=r(6344);const p=["setErrorHandler","finished","addToTrace","addRelease","recordCustomEvent","addPageAction","setCurrentRouteName","setPageViewName","setCustomAttribute","interaction","noticeError","setUserId","setApplicationVersion","start",g.G4.RECORD,g.G4.PAUSE,"log","wrapLogger"],m=["setErrorHandler","finished","addToTrace","addRelease"];var v=r(1863),b=r(2614),y=r(993),R=r(3785),x=r(9414);function w(){const e=(0,h.pV)();p.forEach((t=>{e[t]=(...r)=>function(t,...r){let n=[];return Object.values(e.initializedAgents).forEach((e=>{e&&e.api?e.exposed&&e.api[t]&&n.push(e.api[t](...r)):(0,l.R)(38,t)})),n.length>1?n:n[0]}(t,...r)}))}const E={};var A=r(9417),T=r(5603),_=r(5284);const S=e=>{const t=e.startsWith("http");e+="/",r.p=t?e:"https://"+e};let O=!1;function N(e,t={},p,N){let{init:I,info:P,loader_config:j,runtime:C={},exposed:k=!0}=t;C.loaderType=p;const H=(0,h.pV)();P||(I=H.init,P=H.info,j=H.loader_config),(0,A.xN)(e.agentIdentifier,I||{}),(0,T.a)(e.agentIdentifier,j||{}),P.jsAttributes??={},d.bv&&(P.jsAttributes.isWorker=!0),(0,i.x1)(e.agentIdentifier,P);const D=(0,A.D0)(e.agentIdentifier),L=[P.beacon,P.errorBeacon];O||(D.proxy.assets&&(S(D.proxy.assets),L.push(D.proxy.assets)),D.proxy.beacon&&L.push(D.proxy.beacon),w(),(0,h.US)("activatedFeatures",_.B),e.runSoftNavOverSpa&&=!0===D.soft_navigations.enabled&&D.feature_flags.includes("soft_nav")),C.denyList=[...D.ajax.deny_list||[],...D.ajax.block_internal?L:[]],C.ptid=e.agentIdentifier,(0,o.V)(e.agentIdentifier,C),e.ee=s.ee.get(e.agentIdentifier),void 0===e.api&&(e.api=function(e,t,h=!1){t||(0,c.Ak)(e,"api");const p={};var w=s.ee.get(e),A=w.get("tracer");E[e]=b.g.OFF,w.on(g.G4.REPLAY_RUNNING,(t=>{E[e]=t}));var T="api-",_=T+"ixn-";function S(t,r,n,o){const a=(0,i.Vp)(e);return null===r?delete a.jsAttributes[t]:(0,i.x1)(e,{...a,jsAttributes:{...a.jsAttributes,[t]:r}}),I(T,n,!0,o||null===r?"session":void 0)(t,r)}function O(){}p.log=function(e,{customAttributes:t={},level:r=y.p_.INFO}={}){(0,a.p)(f.xV,["API/log/called"],void 0,n.K7.metrics,w),(0,R.R)(w,e,t,r)},p.wrapLogger=(e,t,{customAttributes:r={},level:i=y.p_.INFO}={})=>{(0,a.p)(f.xV,["API/wrapLogger/called"],void 0,n.K7.metrics,w),(0,x.J)(w,e,t,{customAttributes:r,level:i})},m.forEach((e=>{p[e]=I(T,e,!0,"api")})),p.addPageAction=I(T,"addPageAction",!0,n.K7.genericEvents),p.recordCustomEvent=I(T,"recordCustomEvent",!0,n.K7.genericEvents),p.setPageViewName=function(t,r){if("string"==typeof t)return"/"!==t.charAt(0)&&(t="/"+t),(0,o.f)(e).customTransaction=(r||"http://custom.transaction")+t,I(T,"setPageViewName",!0)()},p.setCustomAttribute=function(e,t,r=!1){if("string"==typeof e){if(["string","number","boolean"].includes(typeof t)||null===t)return S(e,t,"setCustomAttribute",r);(0,l.R)(40,typeof t)}else(0,l.R)(39,typeof e)},p.setUserId=function(e){if("string"==typeof e||null===e)return S("enduser.id",e,"setUserId",!0);(0,l.R)(41,typeof e)},p.setApplicationVersion=function(e){if("string"==typeof e||null===e)return S("application.version",e,"setApplicationVersion",!1);(0,l.R)(42,typeof e)},p.start=()=>{try{(0,a.p)(f.xV,["API/start/called"],void 0,n.K7.metrics,w),w.emit("manual-start-all")}catch(e){(0,l.R)(23,e)}},p[g.G4.RECORD]=function(){(0,a.p)(f.xV,["API/recordReplay/called"],void 0,n.K7.metrics,w),(0,a.p)(g.G4.RECORD,[],void 0,n.K7.sessionReplay,w)},p[g.G4.PAUSE]=function(){(0,a.p)(f.xV,["API/pauseReplay/called"],void 0,n.K7.metrics,w),(0,a.p)(g.G4.PAUSE,[],void 0,n.K7.sessionReplay,w)},p.interaction=function(e){return(new O).get("object"==typeof e?e:{})};const N=O.prototype={createTracer:function(e,t){var r={},i=this,o="function"==typeof t;return(0,a.p)(f.xV,["API/createTracer/called"],void 0,n.K7.metrics,w),h||(0,a.p)(_+"tracer",[(0,v.t)(),e,r],i,n.K7.spa,w),function(){if(A.emit((o?"":"no-")+"fn-start",[(0,v.t)(),i,o],r),o)try{return t.apply(this,arguments)}catch(e){const t="string"==typeof e?new Error(e):e;throw A.emit("fn-err",[arguments,this,t],r),t}finally{A.emit("fn-end",[(0,v.t)()],r)}}}};function I(e,t,r,i){return function(){return(0,a.p)(f.xV,["API/"+t+"/called"],void 0,n.K7.metrics,w),i&&(0,a.p)(e+t,[r?(0,v.t)():performance.now(),...arguments],r?null:this,i,w),r?void 0:this}}function P(){r.e(891).then(r.bind(r,8778)).then((({setAPI:t})=>{t(e),(0,c.Ze)(e,"api")})).catch((e=>{(0,l.R)(27,e),w.abort()}))}return["actionText","setName","setAttribute","save","ignore","onEnd","getContext","end","get"].forEach((e=>{N[e]=I(_,e,void 0,h?n.K7.softNav:n.K7.spa)})),p.setCurrentRouteName=h?I(_,"routeName",void 0,n.K7.softNav):I(T,"routeName",!0,n.K7.spa),p.noticeError=function(t,r){"string"==typeof t&&(t=new Error(t)),(0,a.p)(f.xV,["API/noticeError/called"],void 0,n.K7.metrics,w),(0,a.p)("err",[t,(0,v.t)(),!1,r,!!E[e]],void 0,n.K7.jserrors,w)},d.RI?(0,u.GG)((()=>P()),!0):P(),p}(e.agentIdentifier,N,e.runSoftNavOverSpa)),void 0===e.exposed&&(e.exposed=k),O=!0}},8374:(e,t,r)=>{r.nc=(()=>{try{return document?.currentScript?.nonce}catch(e){}return""})()},860:(e,t,r)=>{"use strict";r.d(t,{$J:()=>u,K7:()=>s,P3:()=>c,XX:()=>i,qY:()=>n,v4:()=>a});const n="events",i="jserrors",o="browser/blobs",a="rum",s={ajax:"ajax",genericEvents:"generic_events",jserrors:i,logging:"logging",metrics:"metrics",pageAction:"page_action",pageViewEvent:"page_view_event",pageViewTiming:"page_view_timing",sessionReplay:"session_replay",sessionTrace:"session_trace",softNav:"soft_navigations",spa:"spa"},c={[s.pageViewEvent]:1,[s.pageViewTiming]:2,[s.metrics]:3,[s.jserrors]:4,[s.spa]:5,[s.ajax]:6,[s.sessionTrace]:7,[s.softNav]:8,[s.sessionReplay]:9,[s.logging]:10,[s.genericEvents]:11},u={[s.pageViewEvent]:a,[s.pageViewTiming]:n,[s.ajax]:n,[s.spa]:n,[s.softNav]:n,[s.metrics]:i,[s.jserrors]:i,[s.sessionTrace]:o,[s.sessionReplay]:o,[s.logging]:"browser/logs",[s.genericEvents]:"ins"}}},n={};function i(e){var t=n[e];if(void 0!==t)return t.exports;var o=n[e]={exports:{}};return r[e](o,o.exports,i),o.exports}i.m=r,i.d=(e,t)=>{for(var r in t)i.o(t,r)&&!i.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},i.f={},i.e=e=>Promise.all(Object.keys(i.f).reduce(((t,r)=>(i.f[r](e,t),t)),[])),i.u=e=>({95:"nr-full-compressor",222:"nr-full-recorder",891:"nr-full"}[e]+"-1.283.1.min.js"),i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="NRBA-1.283.1.PROD:",i.l=(r,n,o,a)=>{if(e[r])e[r].push(n);else{var s,c;if(void 0!==o)for(var u=document.getElementsByTagName("script"),d=0;d<u.length;d++){var l=u[d];if(l.getAttribute("src")==r||l.getAttribute("data-webpack")==t+o){s=l;break}}if(!s){c=!0;var f={891:"sha512-lVqR3Dn6J8gNv/qx6uwv/BkHGfYTjmgUmpQ1g3KewUs/BAlEgDNEjtqisiOvM7gJNOH5b/lDr/gXrctX/6uhmg==",222:"sha512-r7JndTDmcqZc7soxM3YtJog64BIblVU4Ez8/mfluyz/KDQOnr3V1KGyop/fFGfRcLFLVYt0pv5PyUwCyC+FbVQ==",95:"sha512-kzPPmh2eRI84JbwNgf72DNQY/HX6glcZEu/X7P6FfEBXL9+sv1l63r5rK0u+QlS2I9OQrnLM5nmwqyfJCpNVHA=="};(s=document.createElement("script")).charset="utf-8",s.timeout=120,i.nc&&s.setAttribute("nonce",i.nc),s.setAttribute("data-webpack",t+o),s.src=r,0!==s.src.indexOf(window.location.origin+"/")&&(s.crossOrigin="anonymous"),f[a]&&(s.integrity=f[a])}e[r]=[n];var h=(t,n)=>{s.onerror=s.onload=null,clearTimeout(g);var i=e[r];if(delete e[r],s.parentNode&&s.parentNode.removeChild(s),i&&i.forEach((e=>e(n))),t)return t(n)},g=setTimeout(h.bind(null,void 0,{type:"timeout",target:s}),12e4);s.onerror=h.bind(null,s.onerror),s.onload=h.bind(null,s.onload),c&&document.head.appendChild(s)}},i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.p="https://js-agent.newrelic.com/",(()=>{var e={85:0,959:0};i.f.j=(t,r)=>{var n=i.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else{var o=new Promise(((r,i)=>n=e[t]=[r,i]));r.push(n[2]=o);var a=i.p+i.u(t),s=new Error;i.l(a,(r=>{if(i.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var o=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;s.message="Loading chunk "+t+" failed.\n("+o+": "+a+")",s.name="ChunkLoadError",s.type=o,s.request=a,n[1](s)}}),"chunk-"+t,t)}};var t=(t,r)=>{var n,o,[a,s,c]=r,u=0;if(a.some((t=>0!==e[t]))){for(n in s)i.o(s,n)&&(i.m[n]=s[n]);if(c)c(i)}for(t&&t(r);u<a.length;u++)o=a[u],i.o(e,o)&&e[o]&&e[o][0](),e[o]=0},r=self["webpackChunk:NRBA-1.283.1.PROD"]=self["webpackChunk:NRBA-1.283.1.PROD"]||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})(),(()=>{"use strict";i(8374);var e=i(944),t=i(6344),r=i(9566);class n{agentIdentifier;constructor(){this.agentIdentifier=(0,r.LA)(16)}#e(t,...r){if("function"==typeof this.api?.[t])return this.api[t](...r);(0,e.R)(35,t)}addPageAction(e,t){return this.#e("addPageAction",e,t)}recordCustomEvent(e,t){return this.#e("recordCustomEvent",e,t)}setPageViewName(e,t){return this.#e("setPageViewName",e,t)}setCustomAttribute(e,t,r){return this.#e("setCustomAttribute",e,t,r)}noticeError(e,t){return this.#e("noticeError",e,t)}setUserId(e){return this.#e("setUserId",e)}setApplicationVersion(e){return this.#e("setApplicationVersion",e)}setErrorHandler(e){return this.#e("setErrorHandler",e)}addRelease(e,t){return this.#e("addRelease",e,t)}log(e,t){return this.#e("log",e,t)}}class o extends n{#e(t,...r){if("function"==typeof this.api?.[t])return this.api[t](...r);(0,e.R)(35,t)}start(){return this.#e("start")}finished(e){return this.#e("finished",e)}recordReplay(){return this.#e(t.G4.RECORD)}pauseReplay(){return this.#e(t.G4.PAUSE)}addToTrace(e){return this.#e("addToTrace",e)}setCurrentRouteName(e){return this.#e("setCurrentRouteName",e)}interaction(){return this.#e("interaction")}wrapLogger(e,t,r){return this.#e("wrapLogger",e,t,r)}}var a=i(860),s=i(9417);const c=Object.values(a.K7);function u(e){const t={};return c.forEach((r=>{t[r]=function(e,t){return!0===(0,s.gD)(t,"".concat(e,".enabled"))}(r,e)})),t}var d=i(8969);var l=i(1687),f=i(4234),h=i(5289),g=i(6154),p=i(5270),m=i(7767),v=i(6389);class b extends f.W{constructor(e,t,r=!0){super(e.agentIdentifier,t),this.auto=r,this.abortHandler=void 0,this.featAggregate=void 0,this.onAggregateImported=void 0,!1===e.init[this.featureName].autoStart&&(this.auto=!1),this.auto?(0,l.Ak)(e.agentIdentifier,t):this.ee.on("manual-start-all",(0,v.J)((()=>{(0,l.Ak)(e.agentIdentifier,this.featureName),this.auto=!0,this.importAggregator(e)})))}importAggregator(t,r={}){if(this.featAggregate||!this.auto)return;let n;this.onAggregateImported=new Promise((e=>{n=e}));const o=async()=>{let o;try{if((0,m.V)(this.agentIdentifier)){const{setupAgentSession:e}=await i.e(891).then(i.bind(i,6526));o=e(t)}}catch(t){(0,e.R)(20,t),this.ee.emit("internal-error",[t]),this.featureName===a.K7.sessionReplay&&this.abortHandler?.()}try{if(!this.#t(this.featureName,o))return(0,l.Ze)(this.agentIdentifier,this.featureName),void n(!1);const{lazyFeatureLoader:e}=await i.e(891).then(i.bind(i,6103)),{Aggregate:a}=await e(this.featureName,"aggregate");this.featAggregate=new a(t,r),t.runtime.harvester.initializedAggregates.push(this.featAggregate),n(!0)}catch(t){(0,e.R)(34,t),this.abortHandler?.(),(0,l.Ze)(this.agentIdentifier,this.featureName,!0),n(!1),this.ee&&this.ee.abort()}};g.RI?(0,h.GG)((()=>o()),!0):o()}#t(e,t){switch(e){case a.K7.sessionReplay:return(0,p.SR)(this.agentIdentifier)&&!!t;case a.K7.sessionTrace:return!!t;default:return!0}}}var y=i(6630);class R extends b{static featureName=y.T;constructor(e,t=!0){super(e,y.T,t),this.importAggregator(e)}}var x=i(384);var w=i(9908),E=i(2843),A=i(3878),T=i(782),_=i(1863);class S extends b{static featureName=T.T;constructor(e,t=!0){super(e,T.T,t),g.RI&&((0,E.u)((()=>(0,w.p)("docHidden",[(0,_.t)()],void 0,T.T,this.ee)),!0),(0,A.sp)("pagehide",(()=>(0,w.p)("winPagehide",[(0,_.t)()],void 0,T.T,this.ee))),this.importAggregator(e))}}var O=i(8154);class N extends b{static featureName=O.TZ;constructor(e,t=!0){super(e,O.TZ,t),this.importAggregator(e)}}var I=i(6774),P=i(3304);class j{constructor(e,t,r,n,i){this.name="UncaughtError",this.message="string"==typeof e?e:(0,P.A)(e),this.sourceURL=t,this.line=r,this.column=n,this.__newrelic=i}}function C(e){return D(e)?e:new j(void 0!==e?.message?e.message:e,e?.filename||e?.sourceURL,e?.lineno||e?.line,e?.colno||e?.col,e?.__newrelic)}function k(e){const t="Unhandled Promise Rejection";if(!e?.reason)return;if(D(e.reason))try{return e.reason.message=t+": "+e.reason.message,C(e.reason)}catch(t){return C(e.reason)}const r=C(e.reason);return r.message=t+": "+r?.message,r}function H(e){if(e.error instanceof SyntaxError&&!/:\d+$/.test(e.error.stack?.trim())){const t=new j(e.message,e.filename,e.lineno,e.colno,e.error.__newrelic);return t.name=SyntaxError.name,t}return D(e.error)?e.error:C(e)}function D(e){return e instanceof Error&&!!e.stack}class L extends b{static featureName=I.T;#r=!1;constructor(e,r=!0){super(e,I.T,r);try{this.removeOnAbort=new AbortController}catch(e){}this.ee.on("internal-error",((e,t)=>{this.abortHandler&&(0,w.p)("ierr",[C(e),(0,_.t)(),!0,{},this.#r,t],void 0,this.featureName,this.ee)})),this.ee.on(t.G4.REPLAY_RUNNING,(e=>{this.#r=e})),g.gm.addEventListener("unhandledrejection",(e=>{this.abortHandler&&(0,w.p)("err",[k(e),(0,_.t)(),!1,{unhandledPromiseRejection:1},this.#r],void 0,this.featureName,this.ee)}),(0,A.jT)(!1,this.removeOnAbort?.signal)),g.gm.addEventListener("error",(e=>{this.abortHandler&&(0,w.p)("err",[H(e),(0,_.t)(),!1,{},this.#r],void 0,this.featureName,this.ee)}),(0,A.jT)(!1,this.removeOnAbort?.signal)),this.abortHandler=this.#n,this.importAggregator(e)}#n(){this.removeOnAbort?.abort(),this.abortHandler=void 0}}var M=i(8990);let K=1;const U="nr@id";function V(e){const t=typeof e;return!e||"object"!==t&&"function"!==t?-1:e===g.gm?0:(0,M.I)(e,U,(function(){return K++}))}function G(e){if("string"==typeof e&&e.length)return e.length;if("object"==typeof e){if("undefined"!=typeof ArrayBuffer&&e instanceof ArrayBuffer&&e.byteLength)return e.byteLength;if("undefined"!=typeof Blob&&e instanceof Blob&&e.size)return e.size;if(!("undefined"!=typeof FormData&&e instanceof FormData))try{return(0,P.A)(e).length}catch(e){return}}}var F=i(8139),B=i(7836),W=i(3434);const z={},q=["open","send"];function Z(t){var r=t||B.ee;const n=function(e){return(e||B.ee).get("xhr")}(r);if(void 0===g.gm.XMLHttpRequest)return n;if(z[n.debugId]++)return n;z[n.debugId]=1,(0,F.u)(r);var i=(0,W.YM)(n),o=g.gm.XMLHttpRequest,a=g.gm.MutationObserver,s=g.gm.Promise,c=g.gm.setInterval,u="readystatechange",d=["onload","onerror","onabort","onloadstart","onloadend","onprogress","ontimeout"],l=[],f=g.gm.XMLHttpRequest=function(t){const r=new o(t),a=n.context(r);try{n.emit("new-xhr",[r],a),r.addEventListener(u,(s=a,function(){var e=this;e.readyState>3&&!s.resolved&&(s.resolved=!0,n.emit("xhr-resolved",[],e)),i.inPlace(e,d,"fn-",y)}),(0,A.jT)(!1))}catch(t){(0,e.R)(15,t);try{n.emit("internal-error",[t])}catch(e){}}var s;return r};function h(e,t){i.inPlace(t,["onreadystatechange"],"fn-",y)}if(function(e,t){for(var r in e)t[r]=e[r]}(o,f),f.prototype=o.prototype,i.inPlace(f.prototype,q,"-xhr-",y),n.on("send-xhr-start",(function(e,t){h(e,t),function(e){l.push(e),a&&(p?p.then(b):c?c(b):(m=-m,v.data=m))}(t)})),n.on("open-xhr-start",h),a){var p=s&&s.resolve();if(!c&&!s){var m=1,v=document.createTextNode(m);new a(b).observe(v,{characterData:!0})}}else r.on("fn-end",(function(e){e[0]&&e[0].type===u||b()}));function b(){for(var e=0;e<l.length;e++)h(0,l[e]);l.length&&(l=[])}function y(e,t){return t}return n}var Y="fetch-",X=Y+"body-",J=["arrayBuffer","blob","json","text","formData"],Q=g.gm.Request,ee=g.gm.Response,te="prototype";const re={};function ne(e){const t=function(e){return(e||B.ee).get("fetch")}(e);if(!(Q&&ee&&g.gm.fetch))return t;if(re[t.debugId]++)return t;function r(e,r,n){var i=e[r];"function"==typeof i&&(e[r]=function(){var e,r=[...arguments],o={};t.emit(n+"before-start",[r],o),o[B.P]&&o[B.P].dt&&(e=o[B.P].dt);var a=i.apply(this,r);return t.emit(n+"start",[r,e],a),a.then((function(e){return t.emit(n+"end",[null,e],a),e}),(function(e){throw t.emit(n+"end",[e],a),e}))})}return re[t.debugId]=1,J.forEach((e=>{r(Q[te],e,X),r(ee[te],e,X)})),r(g.gm,"fetch",Y),t.on(Y+"end",(function(e,r){var n=this;if(r){var i=r.headers.get("content-length");null!==i&&(n.rxSize=i),t.emit(Y+"done",[null,r],n)}else t.emit(Y+"done",[e],n)})),t}var ie=i(7485),oe=i(5603);class ae{constructor(e){this.agentIdentifier=e}generateTracePayload(e){if(!this.shouldGenerateTrace(e))return null;var t=(0,oe.o)(this.agentIdentifier);if(!t)return null;var n=(t.accountID||"").toString()||null,i=(t.agentID||"").toString()||null,o=(t.trustKey||"").toString()||null;if(!n||!i)return null;var a=(0,r.ZF)(),s=(0,r.el)(),c=Date.now(),u={spanId:a,traceId:s,timestamp:c};return(e.sameOrigin||this.isAllowedOrigin(e)&&this.useTraceContextHeadersForCors())&&(u.traceContextParentHeader=this.generateTraceContextParentHeader(a,s),u.traceContextStateHeader=this.generateTraceContextStateHeader(a,c,n,i,o)),(e.sameOrigin&&!this.excludeNewrelicHeader()||!e.sameOrigin&&this.isAllowedOrigin(e)&&this.useNewrelicHeaderForCors())&&(u.newrelicHeader=this.generateTraceHeader(a,s,c,n,i,o)),u}generateTraceContextParentHeader(e,t){return"00-"+t+"-"+e+"-01"}generateTraceContextStateHeader(e,t,r,n,i){return i+"@nr=0-1-"+r+"-"+n+"-"+e+"----"+t}generateTraceHeader(e,t,r,n,i,o){if(!("function"==typeof g.gm?.btoa))return null;var a={v:[0,1],d:{ty:"Browser",ac:n,ap:i,id:e,tr:t,ti:r}};return o&&n!==o&&(a.d.tk=o),btoa((0,P.A)(a))}shouldGenerateTrace(e){return this.isDtEnabled()&&this.isAllowedOrigin(e)}isAllowedOrigin(e){var t=!1,r={};if((0,s.gD)(this.agentIdentifier,"distributed_tracing")&&(r=(0,s.D0)(this.agentIdentifier).distributed_tracing),e.sameOrigin)t=!0;else if(r.allowed_origins instanceof Array)for(var n=0;n<r.allowed_origins.length;n++){var i=(0,ie.D)(r.allowed_origins[n]);if(e.hostname===i.hostname&&e.protocol===i.protocol&&e.port===i.port){t=!0;break}}return t}isDtEnabled(){var e=(0,s.gD)(this.agentIdentifier,"distributed_tracing");return!!e&&!!e.enabled}excludeNewrelicHeader(){var e=(0,s.gD)(this.agentIdentifier,"distributed_tracing");return!!e&&!!e.exclude_newrelic_header}useNewrelicHeaderForCors(){var e=(0,s.gD)(this.agentIdentifier,"distributed_tracing");return!!e&&!1!==e.cors_use_newrelic_header}useTraceContextHeadersForCors(){var e=(0,s.gD)(this.agentIdentifier,"distributed_tracing");return!!e&&!!e.cors_use_tracecontext_headers}}var se=i(9300),ce=i(7295),ue=["load","error","abort","timeout"],de=ue.length,le=(0,x.dV)().o.REQ,fe=(0,x.dV)().o.XHR;class he extends b{static featureName=se.T;constructor(e,t=!0){super(e,se.T,t),this.dt=new ae(e.agentIdentifier),this.handler=(e,t,r,n)=>(0,w.p)(e,t,r,n,this.ee);try{const e={xmlhttprequest:"xhr",fetch:"fetch",beacon:"beacon"};g.gm?.performance?.getEntriesByType("resource").forEach((t=>{if(t.initiatorType in e&&0!==t.responseStatus){const r={status:t.responseStatus},n={rxSize:t.transferSize,duration:Math.floor(t.duration),cbTime:0};ge(r,t.name),this.handler("xhr",[r,n,t.startTime,t.responseEnd,e[t.initiatorType]],void 0,a.K7.ajax)}}))}catch(e){}ne(this.ee),Z(this.ee),function(e,t,r,n){function i(e){var t=this;t.totalCbs=0,t.called=0,t.cbTime=0,t.end=x,t.ended=!1,t.xhrGuids={},t.lastSize=null,t.loadCaptureCalled=!1,t.params=this.params||{},t.metrics=this.metrics||{},e.addEventListener("load",(function(r){E(t,e)}),(0,A.jT)(!1)),g.lR||e.addEventListener("progress",(function(e){t.lastSize=e.loaded}),(0,A.jT)(!1))}function o(e){this.params={method:e[0]},ge(this,e[1]),this.metrics={}}function s(t,r){e.loader_config.xpid&&this.sameOrigin&&r.setRequestHeader("X-NewRelic-ID",e.loader_config.xpid);var i=n.generateTracePayload(this.parsedOrigin);if(i){var o=!1;i.newrelicHeader&&(r.setRequestHeader("newrelic",i.newrelicHeader),o=!0),i.traceContextParentHeader&&(r.setRequestHeader("traceparent",i.traceContextParentHeader),i.traceContextStateHeader&&r.setRequestHeader("tracestate",i.traceContextStateHeader),o=!0),o&&(this.dt=i)}}function c(e,r){var n=this.metrics,i=e[0],o=this;if(n&&i){var a=G(i);a&&(n.txSize=a)}this.startTime=(0,_.t)(),this.body=i,this.listener=function(e){try{"abort"!==e.type||o.loadCaptureCalled||(o.params.aborted=!0),("load"!==e.type||o.called===o.totalCbs&&(o.onloadCalled||"function"!=typeof r.onload)&&"function"==typeof o.end)&&o.end(r)}catch(e){try{t.emit("internal-error",[e])}catch(e){}}};for(var s=0;s<de;s++)r.addEventListener(ue[s],this.listener,(0,A.jT)(!1))}function u(e,t,r){this.cbTime+=e,t?this.onloadCalled=!0:this.called+=1,this.called!==this.totalCbs||!this.onloadCalled&&"function"==typeof r.onload||"function"!=typeof this.end||this.end(r)}function d(e,t){var r=""+V(e)+!!t;this.xhrGuids&&!this.xhrGuids[r]&&(this.xhrGuids[r]=!0,this.totalCbs+=1)}function l(e,t){var r=""+V(e)+!!t;this.xhrGuids&&this.xhrGuids[r]&&(delete this.xhrGuids[r],this.totalCbs-=1)}function f(){this.endTime=(0,_.t)()}function h(e,r){r instanceof fe&&"load"===e[0]&&t.emit("xhr-load-added",[e[1],e[2]],r)}function p(e,r){r instanceof fe&&"load"===e[0]&&t.emit("xhr-load-removed",[e[1],e[2]],r)}function m(e,t,r){t instanceof fe&&("onload"===r&&(this.onload=!0),("load"===(e[0]&&e[0].type)||this.onload)&&(this.xhrCbStart=(0,_.t)()))}function v(e,r){this.xhrCbStart&&t.emit("xhr-cb-time",[(0,_.t)()-this.xhrCbStart,this.onload,r],r)}function b(e){var t,r=e[1]||{};if("string"==typeof e[0]?0===(t=e[0]).length&&g.RI&&(t=""+g.gm.location.href):e[0]&&e[0].url?t=e[0].url:g.gm?.URL&&e[0]&&e[0]instanceof URL?t=e[0].href:"function"==typeof e[0].toString&&(t=e[0].toString()),"string"==typeof t&&0!==t.length){t&&(this.parsedOrigin=(0,ie.D)(t),this.sameOrigin=this.parsedOrigin.sameOrigin);var i=n.generateTracePayload(this.parsedOrigin);if(i&&(i.newrelicHeader||i.traceContextParentHeader))if(e[0]&&e[0].headers)s(e[0].headers,i)&&(this.dt=i);else{var o={};for(var a in r)o[a]=r[a];o.headers=new Headers(r.headers||{}),s(o.headers,i)&&(this.dt=i),e.length>1?e[1]=o:e.push(o)}}function s(e,t){var r=!1;return t.newrelicHeader&&(e.set("newrelic",t.newrelicHeader),r=!0),t.traceContextParentHeader&&(e.set("traceparent",t.traceContextParentHeader),t.traceContextStateHeader&&e.set("tracestate",t.traceContextStateHeader),r=!0),r}}function y(e,t){this.params={},this.metrics={},this.startTime=(0,_.t)(),this.dt=t,e.length>=1&&(this.target=e[0]),e.length>=2&&(this.opts=e[1]);var r,n=this.opts||{},i=this.target;"string"==typeof i?r=i:"object"==typeof i&&i instanceof le?r=i.url:g.gm?.URL&&"object"==typeof i&&i instanceof URL&&(r=i.href),ge(this,r);var o=(""+(i&&i instanceof le&&i.method||n.method||"GET")).toUpperCase();this.params.method=o,this.body=n.body,this.txSize=G(n.body)||0}function R(e,t){if(this.endTime=(0,_.t)(),this.params||(this.params={}),(0,ce.iW)(this.params))return;let n;this.params.status=t?t.status:0,"string"==typeof this.rxSize&&this.rxSize.length>0&&(n=+this.rxSize);const i={txSize:this.txSize,rxSize:n,duration:(0,_.t)()-this.startTime};r("xhr",[this.params,i,this.startTime,this.endTime,"fetch"],this,a.K7.ajax)}function x(e){const t=this.params,n=this.metrics;if(!this.ended){this.ended=!0;for(let t=0;t<de;t++)e.removeEventListener(ue[t],this.listener,!1);t.aborted||(0,ce.iW)(t)||(n.duration=(0,_.t)()-this.startTime,this.loadCaptureCalled||4!==e.readyState?null==t.status&&(t.status=0):E(this,e),n.cbTime=this.cbTime,r("xhr",[t,n,this.startTime,this.endTime,"xhr"],this,a.K7.ajax))}}function E(e,r){e.params.status=r.status;var n=function(e,t){var r=e.responseType;return"json"===r&&null!==t?t:"arraybuffer"===r||"blob"===r||"json"===r?G(e.response):"text"===r||""===r||void 0===r?G(e.responseText):void 0}(r,e.lastSize);if(n&&(e.metrics.rxSize=n),e.sameOrigin){var i=r.getResponseHeader("X-NewRelic-App-Data");i&&((0,w.p)(O.rs,["Ajax/CrossApplicationTracing/Header/Seen"],void 0,a.K7.metrics,t),e.params.cat=i.split(", ").pop())}e.loadCaptureCalled=!0}t.on("new-xhr",i),t.on("open-xhr-start",o),t.on("open-xhr-end",s),t.on("send-xhr-start",c),t.on("xhr-cb-time",u),t.on("xhr-load-added",d),t.on("xhr-load-removed",l),t.on("xhr-resolved",f),t.on("addEventListener-end",h),t.on("removeEventListener-end",p),t.on("fn-end",v),t.on("fetch-before-start",b),t.on("fetch-start",y),t.on("fn-start",m),t.on("fetch-done",R)}(e,this.ee,this.handler,this.dt),this.importAggregator(e)}}function ge(e,t){var r=(0,ie.D)(t),n=e.params||e;n.hostname=r.hostname,n.port=r.port,n.protocol=r.protocol,n.host=r.hostname+":"+r.port,n.pathname=r.pathname,e.parsedOrigin=r,e.sameOrigin=r.sameOrigin}const pe={},me=["pushState","replaceState"];function ve(e){const t=function(e){return(e||B.ee).get("history")}(e);return!g.RI||pe[t.debugId]++||(pe[t.debugId]=1,(0,W.YM)(t).inPlace(window.history,me,"-")),t}var be=i(3738);const{He:ye,bD:Re,d3:xe,Kp:we,TZ:Ee,Lc:Ae,uP:Te,Rz:_e}=be;class Se extends b{static featureName=Ee;constructor(e,t=!0){super(e,Ee,t);if(!(0,m.V)(this.agentIdentifier))return void this.deregisterDrain();const r=this.ee;let n;ve(r),this.eventsEE=(0,F.u)(r),this.eventsEE.on(Te,(function(e,t){this.bstStart=(0,_.t)()})),this.eventsEE.on(Ae,(function(e,t){(0,w.p)("bst",[e[0],t,this.bstStart,(0,_.t)()],void 0,a.K7.sessionTrace,r)})),r.on(_e+xe,(function(e){this.time=(0,_.t)(),this.startPath=location.pathname+location.hash})),r.on(_e+we,(function(e){(0,w.p)("bstHist",[location.pathname+location.hash,this.startPath,this.time],void 0,a.K7.sessionTrace,r)}));try{n=new PerformanceObserver((e=>{const t=e.getEntries();(0,w.p)(ye,[t],void 0,a.K7.sessionTrace,r)})),n.observe({type:Re,buffered:!0})}catch(e){}this.importAggregator(e,{resourceObserver:n})}}var Oe=i(2614);class Ne extends b{static featureName=t.TZ;#i;#o;constructor(e,r=!0){let n;super(e,t.TZ,r),this.replayRunning=!1,this.#o=e;try{n=JSON.parse(localStorage.getItem("".concat(Oe.H3,"_").concat(Oe.uh)))}catch(e){}(0,p.SR)(e.agentIdentifier)&&this.ee.on(t.G4.RECORD,(()=>this.#a())),this.#s(n)?(this.#i=n?.sessionReplayMode,this.#c()):this.importAggregator(e),this.ee.on("err",(e=>{this.replayRunning&&(this.errorNoticed=!0,(0,w.p)(t.G4.ERROR_DURING_REPLAY,[e],void 0,this.featureName,this.ee))})),this.ee.on(t.G4.REPLAY_RUNNING,(e=>{this.replayRunning=e}))}#s(e){return e&&(e.sessionReplayMode===Oe.g.FULL||e.sessionReplayMode===Oe.g.ERROR)||(0,p.Aw)(this.agentIdentifier)}#u=!1;async#c(e){if(!this.#u){this.#u=!0;try{const{Recorder:t}=await Promise.all([i.e(891),i.e(222)]).then(i.bind(i,8589));this.recorder??=new t({mode:this.#i,agentIdentifier:this.agentIdentifier,trigger:e,ee:this.ee,agentRef:this.#o}),this.recorder.startRecording(),this.abortHandler=this.recorder.stopRecording}catch(e){}this.importAggregator(this.#o,{recorder:this.recorder,errorNoticed:this.errorNoticed})}}#a(){this.featAggregate?this.featAggregate.mode!==Oe.g.FULL&&this.featAggregate.initializeRecording(Oe.g.FULL,!0):(this.#i=Oe.g.FULL,this.#c(t.Qb.API),this.recorder&&this.recorder.parent.mode!==Oe.g.FULL&&(this.recorder.parent.mode=Oe.g.FULL,this.recorder.stopRecording(),this.recorder.startRecording(),this.abortHandler=this.recorder.stopRecording))}}var Ie=i(3333);class Pe extends b{static featureName=Ie.TZ;constructor(e,t=!0){super(e,Ie.TZ,t);const r=[e.init.page_action.enabled,e.init.performance.capture_marks,e.init.performance.capture_measures,e.init.user_actions.enabled,e.init.performance.resources.enabled];if(g.RI&&(e.init.user_actions.enabled&&(Ie.Zp.forEach((e=>(0,A.sp)(e,(e=>(0,w.p)("ua",[e],void 0,this.featureName,this.ee)),!0))),Ie.qN.forEach((e=>{const t=(0,v.s)((e=>{(0,w.p)("ua",[e],void 0,this.featureName,this.ee)}),500,{leading:!0});(0,A.sp)(e,t)}))),e.init.performance.resources.enabled&&g.gm.PerformanceObserver?.supportedEntryTypes.includes("resource"))){new PerformanceObserver((e=>{e.getEntries().forEach((e=>{(0,w.p)("browserPerformance.resource",[e],void 0,this.featureName,this.ee)}))})).observe({type:"resource",buffered:!0})}r.some((e=>e))?this.importAggregator(e):this.deregisterDrain()}}var je=i(993),Ce=i(3785),ke=i(9414);class He extends b{static featureName=je.TZ;constructor(e,t=!0){super(e,je.TZ,t);const r=this.ee;(0,ke.J)(r,g.gm.console,"log",{level:"info"}),(0,ke.J)(r,g.gm.console,"error",{level:"error"}),(0,ke.J)(r,g.gm.console,"warn",{level:"warn"}),(0,ke.J)(r,g.gm.console,"info",{level:"info"}),(0,ke.J)(r,g.gm.console,"debug",{level:"debug"}),(0,ke.J)(r,g.gm.console,"trace",{level:"trace"}),this.ee.on("wrap-logger-end",(function([e]){const{level:t,customAttributes:n}=this;(0,Ce.R)(r,e,n,t)})),this.importAggregator(e)}}new class extends o{constructor(t){super(),g.gm?(this.features={},(0,x.bQ)(this.agentIdentifier,this),this.desiredFeatures=new Set(t.features||[]),this.desiredFeatures.add(R),this.runSoftNavOverSpa=[...this.desiredFeatures].some((e=>e.featureName===a.K7.softNav)),(0,d.j)(this,t,t.loaderType||"agent"),this.run()):(0,e.R)(21)}get config(){return{info:this.info,init:this.init,loader_config:this.loader_config,runtime:this.runtime}}run(){try{const t=u(this.agentIdentifier),r=[...this.desiredFeatures];r.sort(((e,t)=>a.P3[e.featureName]-a.P3[t.featureName])),r.forEach((r=>{if(!t[r.featureName]&&r.featureName!==a.K7.pageViewEvent)return;if(this.runSoftNavOverSpa&&r.featureName===a.K7.spa)return;if(!this.runSoftNavOverSpa&&r.featureName===a.K7.softNav)return;const n=function(e){switch(e){case a.K7.ajax:return[a.K7.jserrors];case a.K7.sessionTrace:return[a.K7.ajax,a.K7.pageViewEvent];case a.K7.sessionReplay:return[a.K7.sessionTrace];case a.K7.pageViewTiming:return[a.K7.pageViewEvent];default:return[]}}(r.featureName).filter((e=>!(e in this.features)));n.length>0&&(0,e.R)(36,{targetFeature:r.featureName,missingDependencies:n}),this.features[r.featureName]=new r(this)}))}catch(t){(0,e.R)(22,t);for(const e in this.features)this.features[e].abortHandler?.();const r=(0,x.Zm)();delete r.initializedAgents[this.agentIdentifier]?.api,delete r.initializedAgents[this.agentIdentifier]?.features,delete this.sharedAggregator;return r.ee.get(this.agentIdentifier).abort(),!1}}}({features:[R,S,Se,Ne,he,N,L,Pe,He],loaderType:"pro"})})()})();</script> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes" /> <meta name="google-site-verification" content="4Ga-viQvIZUFNQXu323xpp_24RDlLooxwlpnXhinjPA" /> <meta name="msvalidate.01" content="F0716E70B7DD3B8C892B48891CA4B541" /> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="fQh6uLzrBXIxVvMZJd27ZOSh8Q5qBByxjKtqRkuF7laTKrYmK9aVxZz3AFexpBec8ihfKfTsTZaI/XOALR5tQA==" /> <link rel="preload" href="https://ecs-static.teamtreehouse.com/assets/vendor-f4a70e398d62c1b7bd00ff33f21e74e92066e660584b86e57d54a9b252314e57.css" as="style" type="text/css" crossorigin="anonymous" integrity="true"> <link rel="preload" href="https://ecs-static.teamtreehouse.com/assets/application-3fe4d64fadf4ca4d0459873312d66d0c10d2159ffc37a68b02020c15e1167db5.css" as="style" type="text/css" crossorigin="anonymous" integrity="true"> <link rel="stylesheet" media="all" href="https://ecs-static.teamtreehouse.com/assets/vendor-f4a70e398d62c1b7bd00ff33f21e74e92066e660584b86e57d54a9b252314e57.css" crossorigin="true" integrity="sha256-9KcOOY1iwbe9AP8z8h506SBm5mBYS4blfVSpslIxTlc=" /> <link rel="stylesheet" media="all" href="https://ecs-static.teamtreehouse.com/assets/application-3fe4d64fadf4ca4d0459873312d66d0c10d2159ffc37a68b02020c15e1167db5.css" crossorigin="true" integrity="sha256-P+TWT630yk0EWYczEtZtDBDSFZ/8N6aLAgIMFeEWfbU=" /> <link rel="preconnect" href="https://cdn.fonts.net"> <link rel="preload" onload="this.rel='stylesheet'" as="style" href="https://cdn.fonts.net/kit/39d0ab8f-c2d6-48ee-8a04-732fec352d95/39d0ab8f-c2d6-48ee-8a04-732fec352d95.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/> <style media="print"> header, footer, .graph, .nav, svg { display: none } </style> <link rel="shortcut icon" href="/assets/favicon-pride.png" /> <link rel="apple-touch-icon-precomposed" sizes="60x60" href="https://ecs-static.teamtreehouse.com/assets/apple-touch-icon-60x60-precomposed-05be36fef4d37c9642a8923eb00325c9d680150d26954e868ddded6b7976a032.png" /> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="https://ecs-static.teamtreehouse.com/assets/apple-touch-icon-76x76-precomposed-7283cd247847d1f21be0e79c52e3524c89adabf69cfc331046319f4ab19be058.png" /> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://ecs-static.teamtreehouse.com/assets/apple-touch-icon-120x120-precomposed-dda60d87f49aa928ff86379bb50d9514d4b5f19502ff562b453e3d254730f682.png" /> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://ecs-static.teamtreehouse.com/assets/apple-touch-icon-152x152-precomposed-1f486d33d1fe181adce0689d370d7dab9e777fab99b244e15b8c785239410674.png" /> <link rel="preload" href="https://ecs-static.teamtreehouse.com/assets/application_vendor-190e58c76a02c6db7ade130f3dd31bde5c398709b1af3261fd56a768836c437c.js" as="script" type="text/javascript" crossorigin="anonymous"> <link rel="preload" href="https://ecs-static.teamtreehouse.com/assets/application-35a8d45d797f31fa96a9e8c1bf74532a40290afe0afe98b7cc63ee27379c151b.js" as="script" type="text/javascript" crossorigin="anonymous"> <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin> <link rel="dns-prefetch" href="https://www.googletagmanager.com"> <link rel="preconnect" href="https://www.google-analytics.com" crossorigin> <link rel="dns-prefetch" href="https://www.google-analytics.com"> <link rel="preconnect" href="https://www.google.com/recaptcha/api.js" crossorigin> <link rel="dns-prefetch" href="https://www.google.com/recaptcha/api.js"> <script src="https://www.google.com/recaptcha/api.js" async defer></script> <script src="https://cdn.usefathom.com/script.js" data-site="JATZEBKX" defer></script> <script>(function(w,r){w._rwq=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)}})(window,"rewardful");</script> <script async src="https://affiliates.teamtreehouse.com/rw.js" data-rewardful="5ba892"></script> </head> <body class="windows ie7 ie lt-ie11 lt-ie10 lt-ie9 lt-ie8 navbar-announcement-padding">  <script> window.dataLayer = window.dataLayer || []; dataLayer.push({"loggedIn":false,"visitorId":8980930559,"userId":null}); </script>  <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PZ55S7" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl+'';f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PZ55S7');</script>  <script src="https://ecs-static.teamtreehouse.com/assets/head_vendor-6a3288bb3aef100cad5d3497f90343103ec0f44b56f4ab0a057922302e7e77bb.js" crossorigin="true" integrity="sha256-ajKIuzrvEAytXTSX+QNDED7A9EtW9KsKBXkiMC5+d7s="></script> <script> window.bugsnagClient = bugsnag({ apiKey: "8251a8eb6422d59eaf410e7c1b1c7b38", releaseStage: "production", beforeSend: function (report) { if (window.location.hostname != "teamtreehouse.com") { report.ignore(); } } }); </script> <link rel="preconnect" href="https://optanon.blob.core.windows.net" crossorigin> <link rel="dns-prefetch" href="https://optanon.blob.core.windows.net"> <script async src="https://cdn.cookielaw.org/consent/39d1ae64-085b-42e6-a239-a988d6530b80.js"></script> <script> function OptanonWrapper() { window.dataLayer.push({ event: "OneTrustGroupsUpdated" }) } </script> <script> //<![CDATA[ window.appData = '{\"controller_name\":\"code_adventures\",\"action_name\":\"index\",\"app_version\":\"cea27f26d8610df8967f406f622b5f1f54af0233\"}' //]]> </script> <section class="nav-announcement" data-featurette="nav-announcement-banner" style="background-color:#ab20fd !important;"> <div class="swiper nav-announcement-slider"> <div class="swiper-wrapper"> <div class="swiper-slide" data-bg-color="#ab20fd" data-desktop-message="🤑 Join the <a style="text-decoration: underline !important" href="https://join.teamtreehouse.com/affiliates/">Treehouse affiliate program</a> and earn 25% commission!" data-mobile-message="🤑 Join the <a style="text-decoration: underline !important" href="https://join.teamtreehouse.com/affiliates/">Treehouse affiliate program</a> and earn 25% commission!" > <p class="announcement-message grabbable" style="color:#FFFFFF !important;"> 🤑 Join the <a href="https://join.teamtreehouse.com/affiliates/">Treehouse affiliate program</a> and earn 25% commission! </p> </div> <div class="swiper-slide" data-bg-color="#02b6b9" data-desktop-message="✨ No-code curious? Check out 4 new <a style="text-decoration: underline !important" href="/library/topic:no-code"> FREE Adalo courses</a> and start building an app in minutes — no code required!" data-mobile-message="✨ No-code curious? Check out 4 new <a style="text-decoration: underline !important" href="/library/topic:no-code"> FREE Adalo courses</a> and start building an app in minutes — no code required!" > <p class="announcement-message grabbable" style="color:#ffffff !important;"> ✨ No-code curious? Check out 4 new <a href="/library/topic:no-code"> FREE Adalo courses</a> and start building an app in minutes — no code required! </p> </div> <div class="swiper-slide" data-bg-color="#5fcf80" data-desktop-message="🌟 Dreaming of a bright future? 🎓 <a style="text-decoration: underline !important;" href="mailto:help@teamtreehouse.com?subject=Treehouse%20Scholarship%20Inquiry">Ask about the Treehouse Scholarship program!</a> 🚀 " data-mobile-message="🌟 Dreaming of a bright future? 🎓 <a style="text-decoration: underline !important;" href="mailto:help@teamtreehouse.com?subject=Treehouse%20Scholarship%20Inquiry">Ask about the Treehouse Scholarship program!</a> 🚀 " > <p class="announcement-message grabbable" style="color:#ffffff !important;"> 🌟 Dreaming of a bright future? 🎓 <a href="mailto:help@teamtreehouse.com?subject=Treehouse%20Scholarship%20Inquiry">Ask about the Treehouse Scholarship program!</a> 🚀 </p> </div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </section> <nav class="nav navbar-announcement-margin" data-layout-element="navigation" data-header > <div class="nav-container"> <button class="hamburger-button " aria-label="Navigation Menu" data-hamburger-button> <span class="hamburger"></span> </button> <ul class="nav-list"> <li class="nav-item nav-item-logo"> <h6 class="nav-item-logo-container"><a title="" data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Treehouse Logo" data-event-label="Source: Navbar" data-analytics-event="marketing nav link" data-analytics-link="Treehouse Logo" data-analytics-path="https://teamtreehouse.com/" data-analytics-action="clicked" class="nav-link nav-link-logo" href="https://teamtreehouse.com/"><svg alt="" class="treehouse-icon nav-item-logo-icon" preserveAspectRatio="xMinYMin meet" viewBox="0 0 139 32" aria-labelledby="treehouseLogo9717246" role="img"> <title id="treehouseLogo9717246">Treehouse Logo</title> <path class="icon-treehouse" d="M42.8 21.1c-0.4 0.1-0.9 0.2-1.4 0.2 -1 0-1.4-0.6-1.4-1.6v-4.5h2.8c0.7 0 1.4-0.5 1.4-1.3s-0.6-1.3-1.4-1.3H40v-1.5c0-0.9-0.7-1.5-1.5-1.5S37 10.3 37 11.1v8.7c0 2.5 1.2 4.3 4 4.3 0.8 0 1.9-0.1 2.7-0.5 0.7-0.3 0.9-0.8 0.9-1.3C44.6 21.6 43.9 20.9 42.8 21.1zM52.8 12.2c-0.4-0.1-1.2-0.2-1.9-0.2 -2.5 0-3.9 1.5-3.9 3.8v6.8c0 0.8 0.7 1.5 1.5 1.5s1.5-0.7 1.5-1.5v-6.2c0-1 0.4-1.4 1.1-1.4s1.1 0.2 1.7 0.2c0.9 0 1.4-0.8 1.4-1.4C54.1 13 53.7 12.5 52.8 12.2zM61.1 12c-2.8 0-4.8 1.8-5.1 4.7 0 0.7-0.1 1.9 0 2.8 0.2 2.8 2.2 4.7 5.2 4.7 1.4 0 2.7-0.3 3.5-0.8 0.6-0.4 0.7-0.8 0.7-1.2 0-0.8-0.7-1.6-1.9-1.2 -0.7 0.3-1.5 0.5-2.3 0.5 -1.4 0-2.5-0.7-2.5-2.1v-0.3h5.7c1 0 1.5-0.6 1.5-1.5v-0.5C66 14 64 12 61.1 12zM63 17.1h-4.2c0-1.5 0.7-2.5 2.3-2.5 1.4 0 2.2 0.9 2.1 2.2C63.2 17 63.2 17.1 63 17.1zM73.1 12c-2.8 0-4.8 1.8-5.1 4.7 0 0.7-0.1 1.9 0 2.8 0.2 2.8 2.2 4.7 5.2 4.7 1.4 0 2.7-0.3 3.5-0.8 0.6-0.4 0.7-0.8 0.7-1.2 0-0.8-0.7-1.6-1.9-1.2 -0.7 0.3-1.5 0.5-2.3 0.5 -1.4 0-2.5-0.7-2.5-2.1v-0.3h5.7c1 0 1.5-0.6 1.5-1.5v-0.5C78 14 76 12 73.1 12zM75 17.1h-4.2c0-1.5 0.7-2.5 2.3-2.5 1.4 0 2.2 0.9 2.1 2.2C75.2 17 75.2 17.1 75 17.1zM123.6 17l-1.6-0.4c-1-0.2-1.3-0.5-1.3-1s0.5-0.9 1.6-0.9c0.6 0 1.3 0.2 1.9 0.5 0.7 0.4 1.5 0.3 1.9-0.2 0.5-0.5 0.5-1.4-0.1-2 -0.8-0.6-2.2-1-3.6-1 -2.6 0-4.5 1.3-4.5 3.7 0 1.9 1.4 2.9 3.2 3.4 0.9 0.2 0.8 0.2 1.6 0.4 0.9 0.2 1.3 0.6 1.3 1 0 0.6-0.5 1-1.7 1 -1 0-1.9-0.3-2.6-0.7 -0.7-0.5-1.5-0.3-1.9 0.3 -0.4 0.6-0.3 1.4 0.3 1.8 0.8 0.7 2.1 1.3 4.2 1.3 2.6 0 4.6-1.4 4.6-3.8C126.9 18.6 125.8 17.5 123.6 17zM137.5 19.1c1 0 1.5-0.6 1.5-1.5l0 0v-0.5c0-3.1-2-5.1-4.9-5.1 -2.8 0-4.8 1.8-5.1 4.7 0 0.7-0.1 1.9 0 2.8 0.2 2.8 2.2 4.7 5.2 4.7 1.4 0 2.7-0.3 3.5-0.8 0.6-0.4 0.7-0.8 0.7-1.2 0-0.8-0.7-1.6-1.9-1.2 -0.7 0.3-1.5 0.5-2.3 0.5 -1.4 0-2.5-0.7-2.5-2.1v-0.3H137.5zM134.1 14.6c1.4 0 2.2 0.9 2.1 2.2 0 0.2-0.1 0.3-0.2 0.3h-4.2C131.8 15.6 132.6 14.6 134.1 14.6zM97.5 12c-3 0-5.2 1.9-5.5 4.5 -0.1 0.9-0.1 2.3 0 3.2 0.2 2.6 2.5 4.5 5.5 4.5s5.2-1.9 5.4-4.5c0.1-0.9 0.1-2.2 0-3.1C102.7 13.9 100.5 12 97.5 12zM99.9 19.2c-0.1 1.3-1 2.1-2.4 2.1s-2.3-0.9-2.4-2.1c0-0.6 0-1.6 0-2.2 0.1-1.3 1-2.1 2.4-2.1s2.3 0.9 2.4 2.1C100 17.6 100 18.6 99.9 19.2zM85.6 12c-1.1 0-2.3 0.4-2.7 0.9l0 0V9.7c0-0.9-0.6-1.5-1.4-1.5s-1.4 0.7-1.4 1.5v12.9c0 0.8 0.7 1.5 1.5 1.5s1.4-0.7 1.4-1.5v-6.7c0.5-0.5 1.3-0.9 2.3-0.9 1.2 0 1.9 0.7 1.9 2.1v5.5c0 0.9 0.6 1.6 1.4 1.6 0.9 0 1.5-0.7 1.5-1.6v-5.7C90 13.7 88.4 12 85.6 12zM113.6 12.1c-0.8 0-1.5 0.7-1.5 1.5v7.1c-0.5 0.3-1.2 0.6-2.1 0.6 -1.2 0-2.1-0.7-2.1-2.1v-5.6c0-0.9-0.7-1.6-1.5-1.6 -0.9 0-1.4 0.7-1.4 1.6v5.7c0 3.1 1.8 4.8 4.9 4.8 2.3 0 3.9-0.8 4.6-1.3 0.4-0.2 0.5-0.5 0.5-1v-8.2C115 12.8 114.4 12.1 113.6 12.1z"></path><path class="icon-logo" d="M26 5.9c-1.1-0.6-2.8 0.4-3.8 2.2l-1.9 3.2c-0.7 1.3-0.6 2.9 0.3 4.2l0.1 0.1c0.9 1.2 2 2.4 2.4 2.8 0.2 0.2 0.4 0.5 0.5 0.9 0.3 1.1-0.3 2.3-1.5 2.6 -1.1 0.3-2.3-0.3-2.6-1.5 -0.1-0.3-0.1-0.6-0.1-0.8 0.1-0.5-0.1-1.2-0.8-2 -0.7-0.7-2 0.7-2.5 2.1v0.1c-0.4 1.4-0.7 2.7-0.6 2.8 0 0.1 0.1 0.1 0.1 0.2 0.6 1.2 0.2 2.6-1 3.2s-2.6 0.2-3.2-1 -0.2-2.6 1-3.2c0.1 0 0.1-0.1 0.2-0.1s0.3-0.6 0.6-1.4c0.2-0.7 0.3-1 0.4-1.3 0.1-0.4 0.3-1.4 0.2-1.8 -0.1-0.5-0.6-0.5-1.1-0.2 -0.3 0.2-0.9 0.7-1.1 0.9 -0.5 0.4-0.9 1-1.1 1.5 -0.1 0.2-0.3 0.5-0.5 0.7 -0.9 0.7-2.2 0.6-3-0.3 -0.7-0.9-0.6-2.2 0.3-3 0.3-0.2 0.6-0.4 0.9-0.4 0.5-0.1 2.3-1.2 3.4-2 0.2-0.1 0.5-0.4 0.6-0.5 0.3-0.4 0-0.7-0.3-0.7 -0.9 0.1-1.9 0.2-2.1 0.5 -0.1 0.1-0.2 0.3-0.4 0.4 -0.8 0.6-2 0.4-2.6-0.4s-0.4-2 0.4-2.6c0.3-0.3 0.8-0.4 1.1-0.4 0.7 0 2.5 0.4 3.9 0.1l0.4-0.1c1.5-0.3 3.3-1.6 4-2.9 0 0 0.7-1.2 1.5-2.7C19 3.6 18.9 1.9 18 1.4l-1.7-1c-0.9-0.5-2.2-0.5-3.1 0L1.6 7C0.7 7.5 0 8.7 0 9.7v12.8c0 1 0.7 2.2 1.6 2.7l11.6 6.6c0.9 0.5 2.3 0.5 3.1 0l11.6-6.6c0.9-0.5 1.6-1.7 1.6-2.7V9.7c0-1-0.7-2.2-1.6-2.7C27.9 7 27.1 6.5 26 5.9z"></path> </svg></a></h6> </li> <div class="nav-block nav-block-mobile-tablet"> <li class="nav-item nav-item-secondary nav-item-show-on-mobile nav-item-tablet" data-featurette="expandable-content-card"> <span class="nav-link nav-link-plans toggle-steps-view">Plans</span> <span class="nav-item-show-on-mobile-container"> <div class="toggle-steps-view-chevron toggle-steps" tabindex="0"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 12 7.5" class="chevron-icon" aria-labelledby="chevron6953352" role="img"> <title id="chevron6953352">Chevron</title> <g> <path d="M6,7.5L0.3,1.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0L6,4.6l4.3-4.3c0.4-0.4,1-0.4,1.4,0c0.4,0.4,0.4,1,0,1.4L6,7.5z"></path> </g> </svg></div> </span> <ul class="list-unstyled steps-list steps-list-override toggle-steps-hide nav-item-submenu nav-item-mobile"> <li><a href="https://teamtreehouse.com/plans">For Individuals</a></li> <li><a href="https://teamtreehouse.com/teams">For Businesses</a></li> <li><a href="https://teamtreehouse.com/for/schools">For Schools</a></li> <li><a href="/libraries">For Libraries</a></li> <li><a href="/military">For Military</a></li> </ul> </li> <li class="nav-item nav-item-secondary nav-item-show-on-mobile nav-item-tablet" data-featurette="expandable-content-card"> <span class="nav-link nav-link-plans toggle-steps-view">Library</span> <span class="nav-item-show-on-mobile-container"> <div class="toggle-steps-view-chevron toggle-steps" tabindex="0"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 12 7.5" class="chevron-icon" aria-labelledby="chevron2787227" role="img"> <title id="chevron2787227">Chevron</title> <g> <path d="M6,7.5L0.3,1.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0L6,4.6l4.3-4.3c0.4-0.4,1-0.4,1.4,0c0.4,0.4,0.4,1,0,1.4L6,7.5z"></path> </g> </svg></div> </span> <ul class="list-unstyled steps-list steps-list-override toggle-steps-hide nav-item-submenu nav-item-mobile"> <li><a href="https://teamtreehouse.com/library">All Courses</a></li> <li><a href="https://teamtreehouse.com/tracks">Tracks</a></li> <li><a href="https://join.teamtreehouse.com/college-credit">College Credit</a></li> </ul> </li> <li class="nav-item nav-item-secondary nav-item-show-on-mobile nav-item-tablet" data-featurette="expandable-content-card"> <span class="nav-link nav-link-plans toggle-steps-view">Techdegree</span> <span class="nav-item-show-on-mobile-container"> <div class="toggle-steps-view-chevron toggle-steps" tabindex="0"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 12 7.5" class="chevron-icon" aria-labelledby="chevron6774655" role="img"> <title id="chevron6774655">Chevron</title> <g> <path d="M6,7.5L0.3,1.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0L6,4.6l4.3-4.3c0.4-0.4,1-0.4,1.4,0c0.4,0.4,0.4,1,0,1.4L6,7.5z"></path> </g> </svg></div> </span> <ul class="list-unstyled steps-list steps-list-override toggle-steps-hide nav-item-submenu nav-item-mobile"> <li><a href="https://teamtreehouse.com/techdegree">Overview</a></li> <li><a href="https://teamtreehouse.com/techdegree/front-end-web-development">Front End Development</a></li> <li><a href="https://teamtreehouse.com/techdegree/full-stack-javascript">Full Stack JavaScript</a></li> <li><a href="https://teamtreehouse.com/techdegree/data-analysis">Data Analysis</a></li> <li><a href="https://teamtreehouse.com/techdegree/ux-design">UX Design</a></li> <li><a href="https://teamtreehouse.com/techdegree/python-development">Python</a></li> </ul> </li> <li class="nav-item nav-item-secondary nav-item-show-on-mobile nav-item-tablet" data-featurette="expandable-content-card"> <span class="nav-link nav-link-plans toggle-steps-view">Community</span> <span class="nav-item-show-on-mobile-container"> <div class="toggle-steps-view-chevron toggle-steps" tabindex="0"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 12 7.5" class="chevron-icon" aria-labelledby="chevron3847725" role="img"> <title id="chevron3847725">Chevron</title> <g> <path d="M6,7.5L0.3,1.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0L6,4.6l4.3-4.3c0.4-0.4,1-0.4,1.4,0c0.4,0.4,0.4,1,0,1.4L6,7.5z"></path> </g> </svg></div> </span> <ul class="list-unstyled steps-list steps-list-override toggle-steps-hide nav-item-submenu nav-item-mobile"> <li><a href="https://treehouse-community-projects.vercel.app">Community Projects</a></li> <li><a href="https://teamtreehouse.com/live_sessions">Live Sessions</a></li> <li><a href="https://teamtreehouse.com/code_adventures">Code Adventures</a></li> <li><a href="https://discord.gg/z7AYghFmhR">Discord</a></li> <li><a href="https://teamtreehouse.com/community">Forum</a></li> <li><a href="https://teamtreehouse.com/stories">Success Stories</a></li> <li><a href="https://teamtreehouse.com/links">Treehouse Links</a></li> <li><a href="https://join.teamtreehouse.com/100-days-of-code">100 Days of Code</a></li> </ul> </li> <li class="nav-item nav-item-secondary nav-item-show-on-mobile nav-item-tablet" data-featurette="expandable-content-card"> <span class="nav-link nav-link-plans toggle-steps-view">Resources</span> <span class="nav-item-show-on-mobile-container"> <div class="toggle-steps-view-chevron toggle-steps" tabindex="0"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 12 7.5" class="chevron-icon" aria-labelledby="chevron9693204" role="img"> <title id="chevron9693204">Chevron</title> <g> <path d="M6,7.5L0.3,1.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0L6,4.6l4.3-4.3c0.4-0.4,1-0.4,1.4,0c0.4,0.4,0.4,1,0,1.4L6,7.5z"></path> </g> </svg></div> </span> <ul class="list-unstyled steps-list steps-list-override toggle-steps-hide nav-item-submenu nav-item-mobile"> <li><a class="dropdown-item" href="https://teamtreehouse.com/career-toolbox">Career Toolbox</a></li> <li><a class="dropdown-item" href="https://join.teamtreehouse.com/codeforward">CodeForward</a></li> <li><a class="dropdown-item" href="https://teamtreehouse.com/libraries/find-your-library">Free Treehouse Near Me</a></li> <li><a class="dropdown-item" href="/jobs">Jobs</a></li> <li><a class="dropdown-item" href="http://blog.teamtreehouse.com">Blog</a></li> <li><a class="dropdown-item" href="https://teamtreehouse.com/support">Support</a></li> <li><a class="dropdown-item" href="https://teamtreehouse.com/about">About</a></li> </ul> </li> </div> <div class="nav-block nav-block-2020 nav-block-hide-on-mobile"> <li class="nav-item nav-item-secondary"> <div class="nav-dropdown"> <button class="nav-toggle" aria-haspopup="true" aria-expanded="false">Plans</button> <div class="nav-dropdown-menu"> <a class="dropdown-item" href="https://teamtreehouse.com/plans">For Individuals</a> <a class="dropdown-item" href="https://teamtreehouse.com/teams">For Businesses</a> <a class="dropdown-item" href="https://teamtreehouse.com/for/schools">For Schools</a> <a class="dropdown-item" href="/libraries">For Libraries</a> <a class="dropdown-item" href="/military">For Military</a> </div> </div> </li> <li class="nav-item nav-item-secondary"> <div class="nav-dropdown"> <button class="nav-toggle" aria-haspopup="true" aria-expanded="false">Library</button> <div class="nav-dropdown-menu"> <a class="dropdown-item" href="https://teamtreehouse.com/library">All Courses</a> <a class="dropdown-item" href="https://teamtreehouse.com/tracks">Tracks</a> <a class="dropdown-item" href="https://join.teamtreehouse.com/college-credit">College Credit</a> </div> </div> </li> <li class="nav-item nav-item-secondary"> <div class="nav-dropdown"> <button class="nav-toggle" aria-haspopup="true" aria-expanded="false">Techdegree</button> <div class="nav-dropdown-menu"> <a class="dropdown-item" href="https://teamtreehouse.com/techdegree">Overview</a> <a class="dropdown-item" href="/techdegree/front-end-web-development">Front End Web Development</a> <a class="dropdown-item" href="/techdegree/full-stack-javascript">Full Stack JavaScript</a> <a class="dropdown-item" href="/techdegree/python-development">Python Development</a> <a class="dropdown-item" href="/techdegree/data-analysis">Data Analysis</a> <a class="dropdown-item" href="/techdegree/ux-design">UX Design</a> </div> </div> </li> <li class="nav-item nav-item-secondary"> <div class="nav-dropdown"> <button class="nav-toggle" aria-haspopup="true" aria-expanded="false">Community</button> <div class="nav-dropdown-menu"> <a class="dropdown-item" href="https://treehouse-community-projects.vercel.app">Community Projects</a> <a class="dropdown-item" href="https://teamtreehouse.com/live_sessions">Live Sessions</a> <a class="dropdown-item" href="https://teamtreehouse.com/code_adventures">Code Adventures</a> <a class="dropdown-item" href="https://discord.gg/z7AYghFmhR">Discord</a> <a class="dropdown-item" href="https://teamtreehouse.com/community">Forum</a> <a class="dropdown-item" href="https://teamtreehouse.com/stories">Success Stories</a> <a class="dropdown-item" href="https://teamtreehouse.com/links">Treehouse Links</a> <a class="dropdown-item" href="https://join.teamtreehouse.com/100-days-of-code">100 Days of Code</a> </div> </div> </li> <li class="nav-item nav-item-secondary"> <div class="nav-dropdown"> <button class="nav-toggle" aria-haspopup="true" aria-expanded="false">Resources</button> <div class="nav-dropdown-menu"> <a class="dropdown-item" href="https://teamtreehouse.com/career-toolbox">Career Toolbox</a> <a class="dropdown-item" href="https://join.teamtreehouse.com/codeforward">CodeForward</a> <a class="dropdown-item" href="https://teamtreehouse.com/libraries/find-your-library">Free Treehouse Near Me</a> <a class="dropdown-item" href="/jobs">Jobs</a> <a class="dropdown-item" href="http://blog.teamtreehouse.com">Blog</a> <a class="dropdown-item" href="https://teamtreehouse.com/support">Support</a> <a class="dropdown-item" href="https://teamtreehouse.com/about">About</a> </div> </div> </li> </div> <li class="nav-item nav-item-tablet nav-item-sign-in nav22-mobile-override" data-featurette="analytics-click-event" data-target="a" data-event-category="link" data-event-action="M: Clicked Sign In" data-event-label="Source: Navbar"> <a class="nav-link nav-link-sign-in " data-featurette="analytics-click-event" data-event-category="link" data-event-action="M: Clicked Sign In" data-event-label="Source: Navbar" data-analytics-event="marketing nav link" data-analytics-link="Sign In" data-analytics-path="https://teamtreehouse.com/signin?return_to=%2Fcode_adventures" data-analytics-action="clicked" href="https://teamtreehouse.com/signin?return_to=%2Fcode_adventures">Sign In</a> </li> <li class="nav-item nav-item-free-trial nav-item-cta flex-inline-xs"> <a class="nav-link nav-link-free-trial button" target="_blank" data-featurette="analytics-click-event" data-event-category="link" data-event-action="M: Clicked Free Trial" data-event-label="Source: Navbar" data-analytics-event="marketing nav link" data-analytics-link="Free Trial" data-analytics-path="/subscribe/new?trial=yes" data-analytics-action="clicked" href="/subscribe/new?trial=yes">Free Trial</a> </li> </ul> <div class="nav-social nav-item-show-on-mobile"> <a title="Instagram" class="nav-social-link" target="_blank" rel="noopener" href="https://instagram.com/teamtreehouse"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 24 24" class="instagram-icon" aria-labelledby="instagramIcon8095658" role="img"> <title id="instagramIcon8095658">Instagram</title> <path d="M16.6,18.5H7.4c-1,0-1.9-0.8-1.9-1.9V7.4c0-1,0.8-1.9,1.9-1.9h9.3c1,0,1.9,0.8,1.9,1.9v9.3C18.5,17.7,17.7,18.5,16.6,18.5z M12,10.1c-1,0-1.9,0.8-1.9,1.9s0.8,1.9,1.9,1.9s1.9-0.8,1.9-1.9S13,10.1,12,10.1z M15.7,7.4c-0.6,0-0.9,0.4-0.9,0.9 s0.4,0.9,0.9,0.9s0.9-0.4,0.9-0.9S16.3,7.4,15.7,7.4z M16.6,12h-0.9c0,2-1.7,3.7-3.7,3.7S8.3,14,8.3,12H7.4v3.7 c0,0.6,0.4,0.9,0.9,0.9h7.4c0.6,0,0.9-0.4,0.9-0.9V12z"></path> </svg></a> <a title="Twitter" class="nav-social-link" target="_blank" rel="noopener" href="https://twitter.com/treehouse"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 24 24" class="twitter-icon" aria-labelledby="twitterIcon1806958" role="img"> <title id="twitterIcon1806958">Twitter</title> <path d="M19,8.3c-0.5,0.2-1,0.4-1.5,0.4c0.6-0.3,1-0.9,1.2-1.5c-0.5,0.3-1.1,0.5-1.7,0.7C16.5,7.3,15.8,7,15,7 c-1.5,0-2.7,1.2-2.7,2.8c0,0.2,0,0.4,0.1,0.6c-2.2-0.1-4.2-1.2-5.5-2.9C6.7,7.9,6.5,8.4,6.5,8.9c0,1,0.4,1.8,1.2,2.3 c-0.4,0-1.2-0.1-1.2-0.3c0,0,0,0,0,0c0,1.3,0.9,2.5,2.2,2.7c-0.2,0.1-0.4,0.1-0.7,0.1c-0.2,0-0.3,0-0.5-0.1c0.3,1.1,1.3,1.9,2.5,1.9 c-0.9,0.7-2.1,1.2-3.3,1.2c-0.2,0-0.4,0-0.6,0c1.2,0.8,2.6,1.2,4.1,1.2c4.9,0,7.6-4.2,7.6-7.9c0-0.1,0-0.2,0-0.4 C18.2,9.4,18.6,8.9,19,8.3z"></path> </svg></a> <a title="Facebook" class="nav-social-link" target="_blank" rel="noopener" href="https://facebook.com/teamtreehouse"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 24 24" class="facebook-icon" aria-labelledby="facebookIcon2175996" role="img"> <title id="facebookIcon2175996">Facebook</title> <path d="M10.3,19.8V13H7.8v-2.8h2.5V8c0-2.4,1.5-3.8,3.7-3.8c1.1,0,2.2,0.2,2.2,0.2v2.4h-1.2c-1.2,0-1.6,0.8-1.6,1.5v1.8h2.7 L15.6,13h-2.3v6.8H10.3z"></path> </svg></a> <a title="YouTube" class="nav-social-link" target="_blank" rel="noopener" href="https://youtube.com/user/gotreehouse"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 24 24" class="youtube-icon" aria-labelledby="youtubeIcon1976518" role="img"> <title id="youtubeIcon1976518">YouTube</title> <path d="M19.5,8.2c-0.2-0.7-0.7-1.2-1.4-1.4C16.9,6.5,12,6.5,12,6.5s-4.9,0-6.1,0.3C5.2,7,4.7,7.6,4.5,8.2C4.2,9.5,4.2,12,4.2,12 s0,2.5,0.3,3.8c0.2,0.7,0.7,1.2,1.4,1.4c1.2,0.3,6.1,0.3,6.1,0.3s4.9,0,6.1-0.3c0.7-0.2,1.2-0.7,1.4-1.4c0.3-1.2,0.3-3.8,0.3-3.8 S19.8,9.5,19.5,8.2z M9.9,15V9l5.2,3L9.9,15z"></path> </svg></a> <a title="LinkedIn" class="nav-social-link" target="_blank" rel="noopener" href="https://linkedin.com/company/treehouse-island-inc-"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 24 24" class="linked-in-icon" aria-labelledby="linkedinIcon881263" role="img"> <title id="linkedinIcon881263">LinkedIn</title> <path d="M17.5,5.5h-11C6,5.5,5.6,6,5.5,6.5v11.1c0,0.5,0.4,0.9,1,0.9h11c0.5,0,0.9-0.4,1-0.9V6.5C18.5,6,18.1,5.5,17.5,5.5z M9.4,16.6H7.5v-6.2h1.9V16.6z M8.4,9.5C7.8,9.5,7.3,9,7.3,8.4s0.5-1.1,1.1-1.1s1.1,0.5,1.1,1.1S9,9.5,8.4,9.5z M16.6,16.6h-1.9v-3 c0-0.7,0-1.7-1-1.7s-1.2,0.8-1.2,1.6v3.1h-1.9v-6.2h1.8v0.9c0.4-0.6,1-1,1.8-1c2,0,2.3,1.3,2.3,3L16.6,16.6z"></path> </svg></a> </div> </div> </nav> <div class=""> <main class="content " role="main" data-content=""> <div class="container "> <div class="th-ca"> <header class="th-ca-welcome"> <h1>Hey! You're here! Welcome to <span>Code Adventures</span>.</h1> <p>Come build awesome projects with a bit of healthy competition. Explore this page — we'll see you on an adventure.</p> </header> <section class="th-ca-trial"> <div class="th-ca-trial-text"> <h1>Welcome to Treehouse Code Adventures</h1> <h2>Looking to learn something new?</h2> <p>Only developers with active Treehouse accounts may embark on these Code Adventures. Great news, though — <span>we offer a free, 7-day trial.</span> Get started with Code Adventures and gain access to thousands of hours of videos, quizzes, and more with the Treehouse platform today. </p> <button><a target="_blank" href="/subscribe/new?trial=yes">Start a Free Trial</a></button> <a href="/plans" target="_blank">What else does Treehouse offer?</a> </div> <img class="th-ca-trial-tablet" alt="illustration of a person with a safari hat and torch" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/code_adventures_2x-dd9e636ec33a4ec5728268bf169b5844bc59369eaed750c59c6d34bbbd8230d1.webp" /> <img class="th-ca-trial-desktop" alt="illustration of a person with a safari hat and torch" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/code_adventures_4x-b803ecb6c4492be390b960f7113b49faf1ff39e21e4129d9ab03f386c85ba8f0.webp" /> </section> <main class="th-ca-adventures"> <section class="th-ca-adventures-newest"> <nav class="th-ca-adventures-main-nav"> <ul> <li class="active"> <a href="">Adventures</a> </li> <li> <a href="">How it works</a> </li> </ul> </nav> <div class="th-ca-new-adventures active" id="th-tab-adventures"> <header> <h2>Newest</h2> <p>These are the most recently uploaded adventures. Ahhh, nice and fresh.</p> </header> <div class="sorted-adventures-container"> <div class="th-ca-adventures-compact-cards"> <div data-featurette="adventure-slider" class="adventureSlider"> <div class="th-ca-adventures-compact-cards-card"> <div class= "adventure-wrapper"> <header> <h3>Message Reactions Component</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-advanced-text"><span class="th-ca-advanced-bg"></span>advanced</p> <a target="_blank" href="/code_adventures/21"> <div class="th-ca-adventures-compact-cards-card-image th-ca-advanced-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/message-reactions-component/message-reactions-component.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>Message Reactions Component</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Desktop icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/desktop-solid-94b15bac6cb51cc7b18edf0899f586e6b548c0eaeec925e9c5f1495bd7410e3b.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">Ever notice on iMessage or other various messaging services, you can pin your favorite conversations? This Code Adventure will allow you to write the functionality to do just that. Use any tech you'd like; vanilla JavaScript, React, Vue, etc. to build out a message pins component!</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <a target="_blank" class="th-ca-btn-primary advanced" href="/code_adventures/21">View Adventure</a> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class= "adventure-wrapper"> <header> <h3>Message Pins Component</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-advanced-text"><span class="th-ca-advanced-bg"></span>advanced</p> <a target="_blank" href="/code_adventures/20"> <div class="th-ca-adventures-compact-cards-card-image th-ca-advanced-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/message-pins-component/message-pins-component.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>Message Pins Component</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Mobile icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/mobile-solid-6462eefc0d8406b7238d40339d400404d9e4bfe1b57c2d1589ebd4ba773358e2.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">Ever notice on iMessage or other various messaging services, you can pin your favorite conversations? This Code Adventure will allow you to write the functionality to do just that. Use any tech you'd like; vanilla JavaScript, React, Vue, etc. to build out a message pins component!</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <a target="_blank" class="th-ca-btn-primary advanced" href="/code_adventures/20">View Adventure</a> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class= "adventure-wrapper"> <header> <h3>Data Sorting Component</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-intermediate-text"><span class="th-ca-intermediate-bg"></span>intermediate</p> <a target="_blank" href="/code_adventures/19"> <div class="th-ca-adventures-compact-cards-card-image th-ca-intermediate-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/data-sorting-component/data-sorting-component.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>Data Sorting Component</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Mobile icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/mobile-solid-6462eefc0d8406b7238d40339d400404d9e4bfe1b57c2d1589ebd4ba773358e2.svg" /> <img alt="Tablet icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/tablet-solid-68130e059f42a42c82d6b72ef6dcfc96893b60caef9067149774f0e4b71f3b1c.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">Giving the end-user multiple ways to sort/view their data is a great UX feature. This can be relatively easily by thinking ahead and writing some good CSS. Of course, minimal JavaScript as well. Create a component that will allow users to see the exact same data in a minimum of 2 ways. As per the mockups; card view and list view. Use vanilla JavaScript or any framework you'd like to tackle this Code Adventure!</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <a target="_blank" class="th-ca-btn-primary intermediate" href="/code_adventures/19">View Adventure</a> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class= "adventure-wrapper"> <header> <h3>Product Details Modal</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-advanced-text"><span class="th-ca-advanced-bg"></span>advanced</p> <a target="_blank" href="/code_adventures/18"> <div class="th-ca-adventures-compact-cards-card-image th-ca-advanced-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/product-details-modal/product-details-modal.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>Product Details Modal</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Desktop icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/desktop-solid-94b15bac6cb51cc7b18edf0899f586e6b548c0eaeec925e9c5f1495bd7410e3b.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">Create a product details modal for a fictitious smartwatch company of the future. By effectively presenting the product, answering customer questions, and addressing potential concerns brought up in reviews, the product details page plays a direct role in converting visitors into buyers.</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <a target="_blank" class="th-ca-btn-primary advanced" href="/code_adventures/18">View Adventure</a> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class= "adventure-wrapper"> <header> <h3>Yoga Studio Landing Page</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-beginner-text"><span class="th-ca-beginner-bg"></span>beginner</p> <a target="_blank" href="/code_adventures/17"> <div class="th-ca-adventures-compact-cards-card-image th-ca-beginner-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/yoga-studio-landing-page/yoga-studio-landing-page.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>Yoga Studio Landing Page</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Mobile icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/mobile-solid-6462eefc0d8406b7238d40339d400404d9e4bfe1b57c2d1589ebd4ba773358e2.svg" /> <img alt="Desktop icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/desktop-solid-94b15bac6cb51cc7b18edf0899f586e6b548c0eaeec925e9c5f1495bd7410e3b.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">Create a simple landing page for a yoga studio using HTML and CSS.</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <a target="_blank" class="th-ca-btn-primary beginner" href="/code_adventures/17">View Adventure</a> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class= "adventure-wrapper"> <header> <h3>UI with a Dark Mode</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-intermediate-text"><span class="th-ca-intermediate-bg"></span>intermediate</p> <a target="_blank" href="/code_adventures/16"> <div class="th-ca-adventures-compact-cards-card-image th-ca-intermediate-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/ui-with-a-dark-mode/ui-with-a-dark-mode.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>UI with a Dark Mode</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Desktop icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/desktop-solid-94b15bac6cb51cc7b18edf0899f586e6b548c0eaeec925e9c5f1495bd7410e3b.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">A UI with a Dark and Light Modes is an HTML and CSS-heavy code adventure with a very small amount of JavaScript to toggle the light and dark modes respectively.</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <a target="_blank" class="th-ca-btn-primary intermediate" href="/code_adventures/16">View Adventure</a> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class= "adventure-wrapper"> <header> <h3>Settings Panel</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-beginner-text"><span class="th-ca-beginner-bg"></span>beginner</p> <a target="_blank" href="/code_adventures/15"> <div class="th-ca-adventures-compact-cards-card-image th-ca-beginner-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/settings-panel/settings-panel.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>Settings Panel</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Desktop icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/desktop-solid-94b15bac6cb51cc7b18edf0899f586e6b548c0eaeec925e9c5f1495bd7410e3b.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">A settings panel that allows users to manage various account preferences including synchronization, online visibility, privacy controls, and the option to delete their account.</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <a target="_blank" class="th-ca-btn-primary beginner" href="/code_adventures/15">View Adventure</a> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class= "adventure-wrapper"> <header> <h3>Multi-Step Form</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-beginner-text"><span class="th-ca-beginner-bg"></span>beginner</p> <a target="_blank" href="/code_adventures/14"> <div class="th-ca-adventures-compact-cards-card-image th-ca-beginner-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/multi-step-form/multi-step-form.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>Multi-Step Form</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Mobile icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/mobile-solid-6462eefc0d8406b7238d40339d400404d9e4bfe1b57c2d1589ebd4ba773358e2.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">A multi-step form that requires user input across three stages. </p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <a target="_blank" class="th-ca-btn-primary beginner" href="/code_adventures/14">View Adventure</a> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class= "adventure-wrapper"> <header> <h3>JavaScript Calculator with a Dark Mode</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-beginner-text"><span class="th-ca-beginner-bg"></span>beginner</p> <a target="_blank" href="/code_adventures/13"> <div class="th-ca-adventures-compact-cards-card-image th-ca-beginner-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/javascript-calculator-with-a-dark-mode/javascript-calculator-with-a-dark-mode.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>JavaScript Calculator with a Dark Mode</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Desktop icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/desktop-solid-94b15bac6cb51cc7b18edf0899f586e6b548c0eaeec925e9c5f1495bd7410e3b.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">A digital calculator with two distinct themes: a dark mode and a light mode. Implement this design using HTML, CSS, and JavaScript.</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <a target="_blank" class="th-ca-btn-primary beginner" href="/code_adventures/13">View Adventure</a> </div> </div> </div> </div> </div> </div> <div class="th-ca-how-it-works" id="th-tab-how-it-works"> <video controls poster="https://treehouse-code-adventures.s3.amazonaws.com/how-it-works/th-ca-how-it-works-still-image.png"> <source src="https://treehouse-code-adventures.s3.amazonaws.com/how-it-works/Code-Adventures-How-To.mp4" type="video/mp4"> </video> </div> </section> </main> <section class="th-ca-adventures-filters"> <header> <form id="filter-form" action="/code_adventures" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓" /> <h2>Sort by:</h2> <div> <li class="th-ca-filter-container" data-featurette="filter-list"> <a class="th-ca-filter-label" data-filter-list-current-value="">Topic <svg class="chevron-icon sm-chevron-down" preserveAspectRatio="xMinYMin meet" viewBox="0 0 12 7.5" aria-labelledby="chevron4700213" role="img"> <title id="chevron4700213">Chevron</title> <g> <path d="M6,7.5L0.3,1.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0L6,4.6l4.3-4.3c0.4-0.4,1-0.4,1.4,0c0.4,0.4,0.4,1,0,1.4L6,7.5z"></path> </g> </svg> </a> <ul class="th-ca-filter-dropdown"> <li> <input type="search" placeholder="Find topic..." id="topic-search" name="topic_search"> </li> <li> <label class="th-ca-filter-option" data-filter-name="tag_list" data-filter-value="AI"> <input type="radio" name="tag_list">AI </label> </li> <li> <label class="th-ca-filter-option" data-filter-name="tag_list" data-filter-value="API"> <input type="radio" name="tag_list">API </label> </li> <li> <label class="th-ca-filter-option" data-filter-name="tag_list" data-filter-value="CSS"> <input type="radio" name="tag_list">CSS </label> </li> <li> <label class="th-ca-filter-option" data-filter-name="tag_list" data-filter-value="HTML"> <input type="radio" name="tag_list">HTML </label> </li> <li> <label class="th-ca-filter-option" data-filter-name="tag_list" data-filter-value="JavaScript"> <input type="radio" name="tag_list">JavaScript </label> </li> <li> <label class="th-ca-filter-option" data-filter-name="tag_list" data-filter-value="practice"> <input type="radio" name="tag_list">practice </label> </li> </ul> </li> </div> <div> <li class="th-ca-filter-container" data-featurette="filter-list"> <a class="th-ca-filter-label" data-filter-list-current-value="">Difficulty <svg class="chevron-icon sm-chevron-down" preserveAspectRatio="xMinYMin meet" viewBox="0 0 12 7.5" aria-labelledby="chevron6238361" role="img"> <title id="chevron6238361">Chevron</title> <g> <path d="M6,7.5L0.3,1.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0L6,4.6l4.3-4.3c0.4-0.4,1-0.4,1.4,0c0.4,0.4,0.4,1,0,1.4L6,7.5z"></path> </g> </svg> </a> <ul class="th-ca-filter-dropdown"> <li> <input type="search" placeholder="Find difficulty..." id="difficulty-search" name="difficulty_search"> </li> <li> <label class="th-ca-filter-option" data-filter-name="skill_level" data-filter-value="Beginner"> <input type="radio" name="skill_level">Beginner </label> </li> <li> <label class="th-ca-filter-option" data-filter-name="skill_level" data-filter-value="Intermediate"> <input type="radio" name="skill_level">Intermediate </label> </li> <li> <label class="th-ca-filter-option" data-filter-name="skill_level" data-filter-value="Advanced"> <input type="radio" name="skill_level">Advanced </label> </li> </ul> </li> </div> <div> <li class="th-ca-filter-container" data-featurette="filter-list"> <a class="th-ca-filter-label" data-filter-list-current-value="">Author <svg class="chevron-icon sm-chevron-down" preserveAspectRatio="xMinYMin meet" viewBox="0 0 12 7.5" aria-labelledby="chevron1379373" role="img"> <title id="chevron1379373">Chevron</title> <g> <path d="M6,7.5L0.3,1.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0L6,4.6l4.3-4.3c0.4-0.4,1-0.4,1.4,0c0.4,0.4,0.4,1,0,1.4L6,7.5z"></path> </g> </svg> </a> <ul class="th-ca-filter-dropdown"> <li> <input type="search" placeholder="Find author..." id="author-search" name="author_search"> </li> <li> <label class="th-ca-filter-option" data-filter-name="author" data-filter-value="Brian jensen"> <input type="radio" name="author">Brian jensen </label> </li> <li> <label class="th-ca-filter-option" data-filter-name="author" data-filter-value="Dustin usey"> <input type="radio" name="author">Dustin usey </label> </li> </ul> </li> </div> <div class="th-ca-search"> <input type="text" placeholder="Search..." id="search-input" name="search" value=""> </div> </form> </header> <div class="filtered-list"> <div class="th-ca-filter-option-container"> </div> <label type="button" class="th-ca-filter-clear" id="clear-filter-button">Clear All</label> </div> <div id="filtered-adventures-container"> <div class="th-ca-adventures-compact-cards" id="filtered-adventures"> <div data-featurette="adventure-slider" class="adventureSliderTwoRows"> <div class="th-ca-adventures-compact-cards-card"> <div class="adventure-wrapper"> <header> <h3>AI Short Story Generator</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-intermediate-text"><span class="th-ca-intermediate-bg"></span>intermediate</p> <a target="_blank" href="/code_adventures/8"> <div class="th-ca-adventures-compact-cards-card-image th-ca-intermediate-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/ai-short-story-generator/ai-short-story-generator.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>AI Short Story Generator</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Desktop icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/desktop-solid-94b15bac6cb51cc7b18edf0899f586e6b548c0eaeec925e9c5f1495bd7410e3b.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">Create an interactive platform that uses artificial intelligence to dynamically generate captivating stories and accompanying images, offering users a unique narrative experience each time.</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>AI</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <button class="th-ca-btn-primary intermediate"><a target="_blank" href="/code_adventures/8">View Adventure</a></button> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class="adventure-wrapper"> <header> <h3>An Interactive Video Transcript</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-intermediate-text"><span class="th-ca-intermediate-bg"></span>intermediate</p> <a target="_blank" href="/code_adventures/7"> <div class="th-ca-adventures-compact-cards-card-image th-ca-intermediate-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/interactive-video-transcripts/interactive-video-transcripts.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>An Interactive Video Transcript</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Desktop icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/desktop-solid-94b15bac6cb51cc7b18edf0899f586e6b548c0eaeec925e9c5f1495bd7410e3b.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">An interactive video transcript designed to enhance the viewer's experience by allowing them to interact with the content. Utilize HTML, CSS, and JavaScript to create a seamless interface that will integrate the transcript with the video playback.</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <button class="th-ca-btn-primary intermediate"><a target="_blank" href="/code_adventures/7">View Adventure</a></button> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class="adventure-wrapper"> <header> <h3>Animal Crossing API</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-intermediate-text"><span class="th-ca-intermediate-bg"></span>intermediate</p> <a target="_blank" href="/code_adventures/10"> <div class="th-ca-adventures-compact-cards-card-image th-ca-intermediate-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/animal-crossing-api/animal-crossing-api.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>Animal Crossing API</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Mobile icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/mobile-solid-6462eefc0d8406b7238d40339d400404d9e4bfe1b57c2d1589ebd4ba773358e2.svg" /> <img alt="Tablet icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/tablet-solid-68130e059f42a42c82d6b72ef6dcfc96893b60caef9067149774f0e4b71f3b1c.svg" /> <img alt="Desktop icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/desktop-solid-94b15bac6cb51cc7b18edf0899f586e6b548c0eaeec925e9c5f1495bd7410e3b.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">Create a web application that uses the Nookipedia Animal Crossing API to display information about the game's villagers.</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>API</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <button class="th-ca-btn-primary intermediate"><a target="_blank" href="/code_adventures/10">View Adventure</a></button> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class="adventure-wrapper"> <header> <h3>Data Sorting Component</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-intermediate-text"><span class="th-ca-intermediate-bg"></span>intermediate</p> <a target="_blank" href="/code_adventures/19"> <div class="th-ca-adventures-compact-cards-card-image th-ca-intermediate-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/data-sorting-component/data-sorting-component.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>Data Sorting Component</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Mobile icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/mobile-solid-6462eefc0d8406b7238d40339d400404d9e4bfe1b57c2d1589ebd4ba773358e2.svg" /> <img alt="Tablet icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/tablet-solid-68130e059f42a42c82d6b72ef6dcfc96893b60caef9067149774f0e4b71f3b1c.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">Giving the end-user multiple ways to sort/view their data is a great UX feature. This can be relatively easily by thinking ahead and writing some good CSS. Of course, minimal JavaScript as well. Create a component that will allow users to see the exact same data in a minimum of 2 ways. As per the mockups; card view and list view. Use vanilla JavaScript or any framework you'd like to tackle this Code Adventure!</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <button class="th-ca-btn-primary intermediate"><a target="_blank" href="/code_adventures/19">View Adventure</a></button> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class="adventure-wrapper"> <header> <h3>Digital Business Card</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-beginner-text"><span class="th-ca-beginner-bg"></span>beginner</p> <a target="_blank" href="/code_adventures/9"> <div class="th-ca-adventures-compact-cards-card-image th-ca-beginner-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/digital-business-card/digital-business-card.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>Digital Business Card</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Mobile icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/mobile-solid-6462eefc0d8406b7238d40339d400404d9e4bfe1b57c2d1589ebd4ba773358e2.svg" /> <img alt="Desktop icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/desktop-solid-94b15bac6cb51cc7b18edf0899f586e6b548c0eaeec925e9c5f1495bd7410e3b.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">Use HTML, CSS, and JavaScript to create a dynamic, responsive, and visually appealing digital business card.</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <button class="th-ca-btn-primary beginner"><a target="_blank" href="/code_adventures/9">View Adventure</a></button> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class="adventure-wrapper"> <header> <h3>Digital Calculator Neumorphism</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-beginner-text"><span class="th-ca-beginner-bg"></span>beginner</p> <a target="_blank" href="/code_adventures/11"> <div class="th-ca-adventures-compact-cards-card-image th-ca-beginner-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/digital-calculator-neumorphism/digital-calculator-neumorphism.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>Digital Calculator Neumorphism</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Mobile icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/mobile-solid-6462eefc0d8406b7238d40339d400404d9e4bfe1b57c2d1589ebd4ba773358e2.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">A digital calculator styled in the neumorphism design trend. Implement this design using HTML, CSS, and JavaScript.</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <button class="th-ca-btn-primary beginner"><a target="_blank" href="/code_adventures/11">View Adventure</a></button> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class="adventure-wrapper"> <header> <h3>Hamburger Menu</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-beginner-text"><span class="th-ca-beginner-bg"></span>beginner</p> <a target="_blank" href="/code_adventures/12"> <div class="th-ca-adventures-compact-cards-card-image th-ca-beginner-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/hamburger-menu/hamburger-menu.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>Hamburger Menu</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Mobile icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/mobile-solid-6462eefc0d8406b7238d40339d400404d9e4bfe1b57c2d1589ebd4ba773358e2.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">Create a hamburger menu that can be used in the mobile view to navigate between pages on the site.</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <button class="th-ca-btn-primary beginner"><a target="_blank" href="/code_adventures/12">View Adventure</a></button> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class="adventure-wrapper"> <header> <h3>JavaScript Calculator with a Dark Mode</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-beginner-text"><span class="th-ca-beginner-bg"></span>beginner</p> <a target="_blank" href="/code_adventures/13"> <div class="th-ca-adventures-compact-cards-card-image th-ca-beginner-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/javascript-calculator-with-a-dark-mode/javascript-calculator-with-a-dark-mode.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>JavaScript Calculator with a Dark Mode</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Desktop icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/desktop-solid-94b15bac6cb51cc7b18edf0899f586e6b548c0eaeec925e9c5f1495bd7410e3b.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">A digital calculator with two distinct themes: a dark mode and a light mode. Implement this design using HTML, CSS, and JavaScript.</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <button class="th-ca-btn-primary beginner"><a target="_blank" href="/code_adventures/13">View Adventure</a></button> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class="adventure-wrapper"> <header> <h3>Message Pins Component</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-advanced-text"><span class="th-ca-advanced-bg"></span>advanced</p> <a target="_blank" href="/code_adventures/20"> <div class="th-ca-adventures-compact-cards-card-image th-ca-advanced-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/message-pins-component/message-pins-component.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>Message Pins Component</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Mobile icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/mobile-solid-6462eefc0d8406b7238d40339d400404d9e4bfe1b57c2d1589ebd4ba773358e2.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">Ever notice on iMessage or other various messaging services, you can pin your favorite conversations? This Code Adventure will allow you to write the functionality to do just that. Use any tech you'd like; vanilla JavaScript, React, Vue, etc. to build out a message pins component!</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <button class="th-ca-btn-primary advanced"><a target="_blank" href="/code_adventures/20">View Adventure</a></button> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class="adventure-wrapper"> <header> <h3>Message Reactions Component</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-advanced-text"><span class="th-ca-advanced-bg"></span>advanced</p> <a target="_blank" href="/code_adventures/21"> <div class="th-ca-adventures-compact-cards-card-image th-ca-advanced-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/message-reactions-component/message-reactions-component.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>Message Reactions Component</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Desktop icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/desktop-solid-94b15bac6cb51cc7b18edf0899f586e6b548c0eaeec925e9c5f1495bd7410e3b.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">Ever notice on iMessage or other various messaging services, you can pin your favorite conversations? This Code Adventure will allow you to write the functionality to do just that. Use any tech you'd like; vanilla JavaScript, React, Vue, etc. to build out a message pins component!</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <button class="th-ca-btn-primary advanced"><a target="_blank" href="/code_adventures/21">View Adventure</a></button> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class="adventure-wrapper"> <header> <h3>Multi-Step Form</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-beginner-text"><span class="th-ca-beginner-bg"></span>beginner</p> <a target="_blank" href="/code_adventures/14"> <div class="th-ca-adventures-compact-cards-card-image th-ca-beginner-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/multi-step-form/multi-step-form.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>Multi-Step Form</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Mobile icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/mobile-solid-6462eefc0d8406b7238d40339d400404d9e4bfe1b57c2d1589ebd4ba773358e2.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">A multi-step form that requires user input across three stages. </p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <button class="th-ca-btn-primary beginner"><a target="_blank" href="/code_adventures/14">View Adventure</a></button> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class="adventure-wrapper"> <header> <h3>Product Details Modal</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-advanced-text"><span class="th-ca-advanced-bg"></span>advanced</p> <a target="_blank" href="/code_adventures/18"> <div class="th-ca-adventures-compact-cards-card-image th-ca-advanced-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/product-details-modal/product-details-modal.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>Product Details Modal</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Desktop icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/desktop-solid-94b15bac6cb51cc7b18edf0899f586e6b548c0eaeec925e9c5f1495bd7410e3b.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">Create a product details modal for a fictitious smartwatch company of the future. By effectively presenting the product, answering customer questions, and addressing potential concerns brought up in reviews, the product details page plays a direct role in converting visitors into buyers.</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <button class="th-ca-btn-primary advanced"><a target="_blank" href="/code_adventures/18">View Adventure</a></button> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class="adventure-wrapper"> <header> <h3>SVG Animations</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-beginner-text"><span class="th-ca-beginner-bg"></span>beginner</p> <a target="_blank" href="/code_adventures/6"> <div class="th-ca-adventures-compact-cards-card-image th-ca-beginner-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/svg-animations/svg-animations.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>SVG Animations</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Desktop icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/desktop-solid-94b15bac6cb51cc7b18edf0899f586e6b548c0eaeec925e9c5f1495bd7410e3b.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">Use SVGs to spruce up and add a bit of character to a website. Some basic HTML and CSS are required. You'll need to use the SVG files provided to match the mockup as closely as possible.</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <button class="th-ca-btn-primary beginner"><a target="_blank" href="/code_adventures/6">View Adventure</a></button> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class="adventure-wrapper"> <header> <h3>Settings Panel</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-beginner-text"><span class="th-ca-beginner-bg"></span>beginner</p> <a target="_blank" href="/code_adventures/15"> <div class="th-ca-adventures-compact-cards-card-image th-ca-beginner-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/settings-panel/settings-panel.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>Settings Panel</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Desktop icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/desktop-solid-94b15bac6cb51cc7b18edf0899f586e6b548c0eaeec925e9c5f1495bd7410e3b.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">A settings panel that allows users to manage various account preferences including synchronization, online visibility, privacy controls, and the option to delete their account.</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <button class="th-ca-btn-primary beginner"><a target="_blank" href="/code_adventures/15">View Adventure</a></button> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class="adventure-wrapper"> <header> <h3>UI with a Dark Mode</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-intermediate-text"><span class="th-ca-intermediate-bg"></span>intermediate</p> <a target="_blank" href="/code_adventures/16"> <div class="th-ca-adventures-compact-cards-card-image th-ca-intermediate-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/ui-with-a-dark-mode/ui-with-a-dark-mode.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>UI with a Dark Mode</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Desktop icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/desktop-solid-94b15bac6cb51cc7b18edf0899f586e6b548c0eaeec925e9c5f1495bd7410e3b.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">A UI with a Dark and Light Modes is an HTML and CSS-heavy code adventure with a very small amount of JavaScript to toggle the light and dark modes respectively.</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <button class="th-ca-btn-primary intermediate"><a target="_blank" href="/code_adventures/16">View Adventure</a></button> </div> </div> <div class="th-ca-adventures-compact-cards-card"> <div class="adventure-wrapper"> <header> <h3>Yoga Studio Landing Page</h3> </header> <p class="th-ca-adventures-compact-cards-card-level th-ca-beginner-text"><span class="th-ca-beginner-bg"></span>beginner</p> <a target="_blank" href="/code_adventures/17"> <div class="th-ca-adventures-compact-cards-card-image th-ca-beginner-gradient"> <div class="th-ca-adventures-compact-cards-card-thumbnail"> <div class="th-ca-adventures-compact-cards-card-thumbnail-image" style='background: url(https://treehouse-code-adventures.s3.amazonaws.com/yoga-studio-landing-page/yoga-studio-landing-page.webp) no-repeat center center/cover'></div> </div> <div class="th-ca-adventures-compact-cards-card-thumbnail-info"> <h5>Yoga Studio Landing Page</h5> <div class="th-ca-adventures-compact-cards-card-thumbnail-info-icons"> <img alt="Mobile icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/mobile-solid-6462eefc0d8406b7238d40339d400404d9e4bfe1b57c2d1589ebd4ba773358e2.svg" /> <img alt="Desktop icon" src="https://ecs-static.teamtreehouse.com/assets/views/code_adventures/desktop-solid-94b15bac6cb51cc7b18edf0899f586e6b548c0eaeec925e9c5f1495bd7410e3b.svg" /> </div> </div> </div> </a> <p class="th-ca-adventures-compact-cards-card-summary">Create a simple landing page for a yoga studio using HTML and CSS.</p> </div> <ul class="th-ca-adventures-compact-cards-card-topics"> <li>HTML</li> <li>CSS</li> </ul> <div class="th-ca-adventures-compact-cards-card-btns"> <button class="th-ca-btn-primary beginner"><a target="_blank" href="/code_adventures/17">View Adventure</a></button> </div> </div> </div> </div> </div> </section> <div class="th-ca-svg-symbols"> <svg fill="none" xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="th-ca-lg-chevron" viewBox="0 0 6 11"> <path d="M0.25106 4.85286C-0.0836861 5.21079 -0.0836861 5.79207 0.25106 6.15001L4.53582 10.7316C4.87056 11.0895 5.41419 11.0895 5.74894 10.7316C6.08369 10.3736 6.08369 9.79233 5.74894 9.4344L2.0694 5.5L5.74626 1.5656C6.08101 1.20767 6.08101 0.626383 5.74626 0.26845C5.41152 -0.0894833 4.86789 -0.0894833 4.53314 0.26845L0.248382 4.84999L0.25106 4.85286Z" fill="currentColor" /> </svg> <svg fill="none" xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="th-ca-open" width="14" height="14" viewBox="0 0 14 14"> <path d="M8.75 0C8.26602 0 7.875 0.391016 7.875 0.875C7.875 1.35898 8.26602 1.75 8.75 1.75H11.0113L5.50703 7.25703C5.16523 7.59883 5.16523 8.15391 5.50703 8.4957C5.84883 8.8375 6.40391 8.8375 6.7457 8.4957L12.25 2.98867V5.25C12.25 5.73398 12.641 6.125 13.125 6.125C13.609 6.125 14 5.73398 14 5.25V0.875C14 0.391016 13.609 0 13.125 0H8.75ZM2.1875 0.875C0.978906 0.875 0 1.85391 0 3.0625V11.8125C0 13.0211 0.978906 14 2.1875 14H10.9375C12.1461 14 13.125 13.0211 13.125 11.8125V8.75C13.125 8.26602 12.734 7.875 12.25 7.875C11.766 7.875 11.375 8.26602 11.375 8.75V11.8125C11.375 12.0531 11.1781 12.25 10.9375 12.25H2.1875C1.94687 12.25 1.75 12.0531 1.75 11.8125V3.0625C1.75 2.82188 1.94687 2.625 2.1875 2.625H5.25C5.73398 2.625 6.125 2.23398 6.125 1.75C6.125 1.26602 5.73398 0.875 5.25 0.875H2.1875Z" fill="currentColor" /> </symbol> </svg> <svg fill="none" xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="th-ca-hamburger" width="17" height="14" viewBox="0 0 17 14"> <path d="M1 1H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M1 7H15.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <path d="M8 13L16 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> </symbol> </svg> </div> </div> </div></main> </div> <svg xmlns="http://www.w3.org/2000/svg" class="color-bar-footer" width="100%" height="3" viewBox="0 0 1441 3" preserveAspectRatio="none"> <g fill="none" fill-rule="evenodd"> <rect width="144" height="3" fill="#0B88C3"/> <rect width="144" height="3" x="144" fill="#00D377"/> <rect width="144" height="3" x="288" fill="#00B950"/> <rect width="144" height="3" x="432" fill="#FFD247"/> <rect width="144" height="3" x="576" fill="#FF9800"/> <rect width="144" height="3" x="720" fill="#FF464F"/> <rect width="144" height="3" x="864" fill="#FF82B3"/> <rect width="144" height="3" x="1008" fill="#FF4385"/> <rect width="144" height="3" x="1152" fill="#A47DCC"/> <rect width="145" height="3" x="1296" fill="#875BB5"/> </g> </svg> <footer> <div class="footer">  <div class="footer-left"> <ul class="links-2020-footer list-unstyled"> <h4>Treehouse</h4> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked About" data-event-label="Source: Footer" href="/about">About</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Blog" data-event-label="Source: Footer" href="https://blog.teamtreehouse.com/">Blog</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Careers" data-event-label="Source: Footer" href="/jobs">Careers</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Community" data-event-label="Source: Footer" href="/community">Community</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Stories" data-event-label="Source: Footer" href="/stories">Stories</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Treehouse Shop" data-event-label="Source: Footer" href="https://teespring.com/stores/teamtreehouse">Shop</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Contact" data-event-label="Source: Footer" href="/support">Contact</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Contact" data-event-label="Source: Footer" href="/giftcard">Gift Card</a></li> </ul> </div>  <div class="footer-middle"> <h4 class="catcta"><a href="/library">See Full Catalogue</a></h4> <div class="footer-catalogue"> <div class="footer-catalogue-tech"> <h4><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Techdegrees" data-event-label="Source: Footer" href="/techdegree">Techdegree</a></h4> <ul class="links-2020-footer list-unstyled"> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Front End Web Development" data-event-label="Source: Footer" href="/techdegree/front-end-web-development">Front End Web Development</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Full Stack JavaScript" data-event-label="Source: Footer" href="/techdegree/full-stack-javascript">Full Stack JavaScript</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Python Development" data-event-label="Source: Footer" href="/techdegree/python-development">Python Development</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Data Analysis" data-event-label="Source: Footer" href="/techdegree/data-analysis">Data Analysis</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked UX Design" data-event-label="Source: Footer" href="/techdegree/ux-design">UX Design</a></li> </ul> </div> <div class="footer-catalogue-tracks"> <h4>Tracks</h4> <ul class="links-2020-footer list-unstyled"> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Learn to Code for Beginners" data-event-label="Source: Footer" href="/tracks/learn-to-code-for-beginners">Learn to Code for Beginners</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Beginning Python" data-event-label="Source: Footer" href="/tracks/beginning-python">Beginning Python</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Beginning SQL" data-event-label="Source: Footer" href="/tracks/beginning-sql">Beginning SQL</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Beginning Java" data-event-label="Source: Footer" href="/tracks/beginning-java">Beginning Java</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked See More Tracks" data-event-label="Source: Footer" href="/tracks">...see more</a></li> </ul> </div> <div class="footer-catalogue-courses"> <h4>Courses</h4> <ul class="links-2020-footer list-unstyled"> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked JavaDcript Basics" data-event-label="Source: Footer" href="/library/javascript-basics">JavaScript Basics</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Intro to HTML & CSS" data-event-label="Source: Footer" href="/library/introduction-to-html-and-css">Intro to HTML & CSS</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Python Basics" data-event-label="Source: Footer" href="/library/python-basics">Python Basics</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked CSS Layout" data-event-label="Source: Footer" href="/library/css-layout">CSS Layout</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked See more Courses" data-event-label="Source: Footer" href="/library">...see more</a></li> </ul> </div> </div> </div>  <div class="footer-right"> <h4>Explore</h4> <ul class="links-2020-footer list-unstyled"> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Plans" data-event-label="Source: Footer" href="/plans">Plans</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Affiliates" data-event-label="Source: Footer" href="https://join.teamtreehouse.com/affiliates">Affiliates</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Perks" data-event-label="Source: Footer" href="/perks">Perks</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Physical Library Access" data-event-label="Source: Footer" href="/libraries/find-your-library">Free Treehouse Near Me</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Treehouse for Libraries" data-event-label="Source: Footer" href="https://join.teamtreehouse.com/libraries/">Treehouse for Libraries</a></li> <li><a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Treehouse for Teams" data-event-label="Source: Footer" href="/teams">Treehouse for Businesses</a></li> </ul> </div> </div> <div class="footer-tail"> <ul class="list-unstyled social"> <li><a title="Twitter" target="_blank" rel="noopener" data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Twitter Icon" data-event-label="Source: Footer" href="https://twitter.com/treehouse"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 24 24" class="twitter-icon" aria-labelledby="twitterIcon4873268" role="img"> <title id="twitterIcon4873268">Twitter</title> <path d="M19,8.3c-0.5,0.2-1,0.4-1.5,0.4c0.6-0.3,1-0.9,1.2-1.5c-0.5,0.3-1.1,0.5-1.7,0.7C16.5,7.3,15.8,7,15,7 c-1.5,0-2.7,1.2-2.7,2.8c0,0.2,0,0.4,0.1,0.6c-2.2-0.1-4.2-1.2-5.5-2.9C6.7,7.9,6.5,8.4,6.5,8.9c0,1,0.4,1.8,1.2,2.3 c-0.4,0-1.2-0.1-1.2-0.3c0,0,0,0,0,0c0,1.3,0.9,2.5,2.2,2.7c-0.2,0.1-0.4,0.1-0.7,0.1c-0.2,0-0.3,0-0.5-0.1c0.3,1.1,1.3,1.9,2.5,1.9 c-0.9,0.7-2.1,1.2-3.3,1.2c-0.2,0-0.4,0-0.6,0c1.2,0.8,2.6,1.2,4.1,1.2c4.9,0,7.6-4.2,7.6-7.9c0-0.1,0-0.2,0-0.4 C18.2,9.4,18.6,8.9,19,8.3z"></path> </svg></a></li> <li><a title="YouTube" target="_blank" rel="noopener" data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked YouTube Icon" data-event-label="Source: Footer" href="https://youtube.com/user/gotreehouse"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 24 24" class="youtube-icon" aria-labelledby="youtubeIcon1344757" role="img"> <title id="youtubeIcon1344757">YouTube</title> <path d="M19.5,8.2c-0.2-0.7-0.7-1.2-1.4-1.4C16.9,6.5,12,6.5,12,6.5s-4.9,0-6.1,0.3C5.2,7,4.7,7.6,4.5,8.2C4.2,9.5,4.2,12,4.2,12 s0,2.5,0.3,3.8c0.2,0.7,0.7,1.2,1.4,1.4c1.2,0.3,6.1,0.3,6.1,0.3s4.9,0,6.1-0.3c0.7-0.2,1.2-0.7,1.4-1.4c0.3-1.2,0.3-3.8,0.3-3.8 S19.8,9.5,19.5,8.2z M9.9,15V9l5.2,3L9.9,15z"></path> </svg></a></li> <li><a title="Facebook" target="_blank" rel="noopener" data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Facebook Icon" data-event-label="Source: Footer" href="https://facebook.com/teamtreehouse"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 24 24" class="facebook-icon" aria-labelledby="facebookIcon4150823" role="img"> <title id="facebookIcon4150823">Facebook</title> <path d="M10.3,19.8V13H7.8v-2.8h2.5V8c0-2.4,1.5-3.8,3.7-3.8c1.1,0,2.2,0.2,2.2,0.2v2.4h-1.2c-1.2,0-1.6,0.8-1.6,1.5v1.8h2.7 L15.6,13h-2.3v6.8H10.3z"></path> </svg></a></li> <li><a title="LinkedIn" target="_blank" rel="noopener" data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked LinkedIn Icon" data-event-label="Source: Footer" href="https://linkedin.com/company/treehouse-island-inc-"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 24 24" class="linked-in-icon" aria-labelledby="linkedinIcon3470677" role="img"> <title id="linkedinIcon3470677">LinkedIn</title> <path d="M17.5,5.5h-11C6,5.5,5.6,6,5.5,6.5v11.1c0,0.5,0.4,0.9,1,0.9h11c0.5,0,0.9-0.4,1-0.9V6.5C18.5,6,18.1,5.5,17.5,5.5z M9.4,16.6H7.5v-6.2h1.9V16.6z M8.4,9.5C7.8,9.5,7.3,9,7.3,8.4s0.5-1.1,1.1-1.1s1.1,0.5,1.1,1.1S9,9.5,8.4,9.5z M16.6,16.6h-1.9v-3 c0-0.7,0-1.7-1-1.7s-1.2,0.8-1.2,1.6v3.1h-1.9v-6.2h1.8v0.9c0.4-0.6,1-1,1.8-1c2,0,2.3,1.3,2.3,3L16.6,16.6z"></path> </svg></a></li> <li><a title="Instagram" target="_blank" rel="noopener" data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Instagram Icon" data-event-label="Source: Footer" href="https://instagram.com/teamtreehouse"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 24 24" class="instagram-icon" aria-labelledby="instagramIcon3382247" role="img"> <title id="instagramIcon3382247">Instagram</title> <path d="M16.6,18.5H7.4c-1,0-1.9-0.8-1.9-1.9V7.4c0-1,0.8-1.9,1.9-1.9h9.3c1,0,1.9,0.8,1.9,1.9v9.3C18.5,17.7,17.7,18.5,16.6,18.5z M12,10.1c-1,0-1.9,0.8-1.9,1.9s0.8,1.9,1.9,1.9s1.9-0.8,1.9-1.9S13,10.1,12,10.1z M15.7,7.4c-0.6,0-0.9,0.4-0.9,0.9 s0.4,0.9,0.9,0.9s0.9-0.4,0.9-0.9S16.3,7.4,15.7,7.4z M16.6,12h-0.9c0,2-1.7,3.7-3.7,3.7S8.3,14,8.3,12H7.4v3.7 c0,0.6,0.4,0.9,0.9,0.9h7.4c0.6,0,0.9-0.4,0.9-0.9V12z"></path> </svg></a></li> <li><a title="TikTok" target="_blank" rel="noopener" data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked TikTok Icon" data-event-label="Source: Footer" href="https://tiktok.com/@team.treehouse"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 24 24" class="tiktok-icon"> <g id="BXaky5.tif"> <g> <path d="M17.6,8.5C17.6,8.5,17.6,8.5,17.6,8.5c-0.1,0-0.1,0-0.2-0.1c-0.8-0.1-1.5-0.5-2-1.1C15,7,14.7,6.6,14.5,6.1 C14.5,6,14.4,6,14.3,6c-0.6,0-1.1,0-1.7,0c-0.2,0-0.2,0-0.2,0.2c0,2.6,0,5.2,0,7.8c0,1.1-0.8,1.9-1.9,1.9c-1,0-1.9-0.8-1.9-1.9 c0-1,0.8-1.9,1.9-1.9c0.2,0,0.4,0,0.6,0c0.1,0,0.2,0,0.2-0.2c0-0.6,0-1.2,0-1.8c0,0,0-0.1,0-0.1c-0.4,0-0.8,0-1.2,0 c-2.1,0.2-3.6,2.1-3.5,4.2c0.1,2.1,1.8,3.7,3.9,3.8c2.2,0,4.1-1.7,4.1-3.9c0-1.5,0-3.1,0-4.6c0-0.1,0-0.1,0-0.2 c0.8,0.8,1.7,1.2,2.8,1.3C17.4,9.8,17.5,9.2,17.6,8.5z"></path> </g> </g> </svg></a></li> <li><a title="Discord" target="_blank" rel="noopener" data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Discord Icon" data-event-label="Source: Footer" href="https://discord.com/invite/RNNxkTHAUT"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 14 11" class="discord-icon"> <g id="surface1"> <path d="M 11.859375 1.035156 C 10.941406 0.609375 9.96875 0.308594 8.972656 0.136719 C 8.835938 0.382812 8.710938 0.636719 8.601562 0.898438 C 7.539062 0.734375 6.457031 0.734375 5.394531 0.898438 C 5.285156 0.636719 5.160156 0.382812 5.027344 0.136719 C 4.027344 0.308594 3.054688 0.613281 2.136719 1.039062 C 0.308594 3.769531 -0.1875 6.4375 0.0585938 9.066406 C 1.128906 9.863281 2.328125 10.472656 3.601562 10.863281 C 3.886719 10.472656 4.140625 10.058594 4.359375 9.625 C 3.945312 9.46875 3.546875 9.277344 3.164062 9.050781 C 3.265625 8.976562 3.363281 8.902344 3.457031 8.828125 C 4.566406 9.355469 5.777344 9.628906 7 9.628906 C 8.222656 9.628906 9.433594 9.355469 10.542969 8.828125 C 10.636719 8.90625 10.734375 8.980469 10.835938 9.050781 C 10.453125 9.277344 10.050781 9.472656 9.636719 9.628906 C 9.855469 10.0625 10.109375 10.472656 10.394531 10.863281 C 11.671875 10.476562 12.871094 9.867188 13.941406 9.066406 C 14.230469 6.019531 13.445312 3.378906 11.859375 1.035156 Z M 4.675781 7.449219 C 3.984375 7.449219 3.414062 6.816406 3.414062 6.035156 C 3.414062 5.257812 3.964844 4.617188 4.671875 4.617188 C 5.378906 4.617188 5.945312 5.257812 5.933594 6.035156 C 5.921875 6.816406 5.378906 7.449219 4.675781 7.449219 Z M 9.324219 7.449219 C 8.632812 7.449219 8.066406 6.816406 8.066406 6.035156 C 8.066406 5.257812 8.617188 4.617188 9.324219 4.617188 C 10.035156 4.617188 10.597656 5.257812 10.585938 6.035156 C 10.570312 6.816406 10.027344 7.449219 9.324219 7.449219 Z M 9.324219 7.449219 "></path> </g> </svg></a></li> </ul> <div class="legal-links"> <a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Terms & Conditions" data-event-label="Source: Footer" href="/terms">Terms & Conditions</a></li> <span>|</span> <a data-featurette="analytics-click-event" data-event-category="button" data-event-action="M: Clicked Privacy" data-event-label="Source: Footer" href="/privacy">Privacy</a></li> </div> <p class="copyright-message">© 2025 Treehouse Island, Inc.</p> </div> </footer> <div id="mini-profile-container"></div> <div id="tarp" class="modal-tarp" style="display: none;" data-featurette="tarp"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.4/swiper-bundle.min.js" defer="defer" aysnc="true"></script> <script src="https://ecs-static.teamtreehouse.com/assets/application_vendor-190e58c76a02c6db7ade130f3dd31bde5c398709b1af3261fd56a768836c437c.js" crossorigin="anonymous" defer="defer" integrity="sha256-GQ5Yx2oCxtt63hMPPdMb3lw5hwmxrzJh/VanaINsQ3w="></script> <script src="https://ecs-static.teamtreehouse.com/assets/views/pages/code_adventures/code_adventures-891cc17fde257de8b824d07316a2262dd68460527979ed94be089182ba5710b9.js" crossorigin="anonymous" defer="defer" integrity="sha256-iRzBf94lfei4JNBzFqImLdaEYFJ5ee2UvgiRgrpXELk="></script> <script src="https://ecs-static.teamtreehouse.com/assets/application-35a8d45d797f31fa96a9e8c1bf74532a40290afe0afe98b7cc63ee27379c151b.js" crossorigin="anonymous" defer="defer" integrity="sha256-NajUXXl/MfqWqejBv3RTKkApCv4K/pi3zGPuJzecFRs="></script>  <script type="text/plain" class="optanon-category-2" async> !function(){ var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0"; analytics.load("DMUKccVYvuuUIVSJlokCJe0YQyGm9qVb"); analytics.ready(function(){ window.analytics.segmentDebug = window.analytics.debug; window.analytics.debug = function(state) { if (state == null) { state = true; } $.cookie("_treehouse_analytics_debug", state); return state; }; }) window.recordedAnalytics = [] function recordAnalyticsCall(callType, event, properties, options) { if ($.cookie("_treehouse_analytics_debug") == "true") { window.recordedAnalytics.push([callType, event, properties, options]) console.debug("Analytics: ", callType, ("'" + event + "'"), properties, options); } } analytics.on('alias', function(e, p, o) { recordAnalyticsCall('alias', e, p, o)}); analytics.on('identify', function(e, p, o) { recordAnalyticsCall('identify', e, p, o)}); analytics.on('group', function(e, p, o) { recordAnalyticsCall('group', e, p, o)}); analytics.on('track', function(e, p, o) { recordAnalyticsCall('track', e, p, o)}); analytics.on('page', function(e, p, o) { recordAnalyticsCall('page', e, p, o)}); var request_id = "2b9393f2-2530-4bec-b5c3-f085addbcea6"; function trackIdentity() { window.analytics.identify({"visitor_id":"8980930559","session_id":"45790e0b-80b7-4631-80e4-ba6cd60d1534"}); } function trackPage() { window.analytics.page({ visitor_id: "8980930559", session_id: "45790e0b-80b7-4631-80e4-ba6cd60d1534", request_id: request_id }); } trackIdentity(); trackPage(); $(document).on("pjax:success", function(event, body, status, xhr, options) { request_id = xhr.getResponseHeader("X-Request-Id"); trackPage(); }); }}(); //# sourceURL=_analytics_footer.erb </script>  <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/7320745.js"></script>  <script src="https://ecs-static.teamtreehouse.com/packs/js/application-9900001412a776dd2112.js"></script>  </body> </html>

CINXE.COM

Code Adventures | Treehouse