diff --git a/404.html b/404.html index 5a9d922..c6e58f8 100644 --- a/404.html +++ b/404.html @@ -8,13 +8,13 @@ - + -

404

That's a Four-Oh-Four.
+ - + diff --git a/assets/js/39.b01b2adb.js b/assets/js/39.b01b2adb.js deleted file mode 100644 index c4c6eb0..0000000 --- a/assets/js/39.b01b2adb.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{307:function(e,o,t){e.exports=t.p+"assets/img/logo.2552a637.png"},308:function(e,o,t){e.exports=t.p+"assets/img/inaugural_skulk.f267a04e.jpg"},462:function(e,o,t){"use strict";t.r(o);var r=t(14),n=Object(r.a)({},(function(){var e=this,o=e._self._c;return o("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[o("h1",{attrs:{id:"about-our-workshops"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#about-our-workshops"}},[e._v("#")]),e._v(" About Our Workshops")]),e._v(" "),o("p",[o("img",{attrs:{src:t(307),alt:"Front-End Foxes"}})]),e._v(" "),o("p",[e._v("Front-End Foxes and its sub-group, Vue Vixens, are initiatives created by Jen Looper, a Cloud Developer Advocate Lead at "),o("a",{attrs:{href:"http://www.microsoft.com",target:"_blank",rel:"noopener noreferrer"}},[e._v("Microsoft"),o("OutboundLink")],1),e._v(". Our mission is to create workshops to teach Vue.js in a cool and fun way to 'foxy people who identify as women'. We have chapters worldwide; find us at "),o("a",{attrs:{href:"https://frontendfoxes.org",target:"_blank",rel:"noopener noreferrer"}},[e._v("FrontEndFoxes.org"),o("OutboundLink")],1),e._v(". Front-End Foxes workshops are called 'skulks' because a group of foxes is called a 'skulk'.")]),e._v(" "),o("p",[e._v("These self-driven workshops are designed to help people get better acquainted with front-end technologies for both web and mobile development. Our teaching methodology is explained in "),o("a",{attrs:{href:"https://dev.to/frontendfoxes/the-way-of-the-fox-the-vue-vixens-curriculum-290",target:"_blank",rel:"noopener noreferrer"}},[e._v("this article"),o("OutboundLink")],1),e._v(".")]),e._v(" "),o("p",[o("img",{attrs:{src:t(308),alt:"inaugural skulk in New Orleans"}})]),e._v(" "),o("blockquote",[o("p",[e._v("Our inaugural Skulk at Vue.US Conference in New Orleans in March, 2018")])]),e._v(" "),o("h2",{attrs:{id:"faq"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#faq"}},[e._v("#")]),e._v(" FAQ")]),e._v(" "),o("p",[o("strong",[e._v("What's the difference between a Chapter, a 'Mini', and a 'Nano'?")])]),e._v(" "),o("p",[e._v("This content is presented as various types, divided by length. The first five chapters comprise the full-day workshop. Other chapters are listed as 'mini-workshops' or 'half-day workshops' and can be done ad hoc with groups for breakfasts, lunch'n'learn sessions, or meetups. Nanos are ten to thirty-minute warm-up icebreaker coding exercises used by our Chapters.")]),e._v(" "),o("p",[o("strong",[e._v("Why are the chapters broken up into parts?")])]),e._v(" "),o("p",[e._v("All the online codelabs are designed to be completed in groups in a self-study mode in a workshop format during meetups, conferences, and brown-bag lunches. For the all-day workshops, it is best to break up the day into parts and regroup users periodically so that 'no developer is left behind'. If an attendee gets lost, she can 'reboot' by downloading the ending point for each previous chapter into a new Code Sandbox.")]),e._v(" "),o("p",[o("strong",[e._v("Where can I register for a skulk?")])]),e._v(" "),o("p",[e._v("Workshop attendees and mentors can register for events at "),o("a",{attrs:{href:"https://www.frontendfoxes.org",target:"_blank",rel:"noopener noreferrer"}},[e._v("FrontEndFoxes.org"),o("OutboundLink")],1),e._v(". Keep an eye on our Twitter feeds "),o("a",{attrs:{href:"https://twitter.com/VueVixens",target:"_blank",rel:"noopener noreferrer"}},[e._v("@vuevixens"),o("OutboundLink")],1),e._v(" and "),o("a",{attrs:{href:"https://twitter.com/FrontendFoxes",target:"_blank",rel:"noopener noreferrer"}},[e._v("@frontendfoxes"),o("OutboundLink")],1),e._v(" for announcements of upcoming events. Front-End Foxes workshops are free, but depend on budget from conferences and meetups to provide lunch, breakfast, or snacks, and a space with wifi.")]),e._v(" "),o("p",[o("strong",[e._v("I'm a guy. Can I participate?")])]),e._v(" "),o("p",[e._v("The goal of the program is to familiarize women and those who identify as such with concepts of programming for web and mobile in a supportive and inclusive environment. Experienced developers, however, are very welcome to join in our efforts to organize events, support our scholarship fund, mentor a skulk, and provide content. We are grateful for all kinds of help!")]),e._v(" "),o("p",[o("strong",[e._v("Want to contribute? Please make sure to check out our "),o("RouterLink",{attrs:{to:"/workshops/CODE_OF_CONDUCT.html"}},[e._v("Code of Conduct")]),e._v(" as well as our "),o("RouterLink",{attrs:{to:"/contributing.html"}},[e._v("Contributing instructions")]),e._v(".")],1)])])}),[],!1,null,null,null);o.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/39.e0f1278a.js b/assets/js/39.e0f1278a.js new file mode 100644 index 0000000..5e98f8a --- /dev/null +++ b/assets/js/39.e0f1278a.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{307:function(e,o,t){e.exports=t.p+"assets/img/logo.2552a637.png"},308:function(e,o,t){e.exports=t.p+"assets/img/inaugural_skulk.f267a04e.jpg"},462:function(e,o,t){"use strict";t.r(o);var r=t(14),n=Object(r.a)({},(function(){var e=this,o=e._self._c;return o("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[o("blockquote",[o("p",[e._v("Hello, Hacktoberfest folks! We are currently looking to upgrade these workshops to Vue 3+. Start with the Minis and let's see how the look. I'm looking for clean, documented code that we can run in Code Sandbox to help the legacy of Front-End Foxes live on.")])]),e._v(" "),o("h1",{attrs:{id:"about-our-workshops"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#about-our-workshops"}},[e._v("#")]),e._v(" About Our Workshops")]),e._v(" "),o("p",[o("img",{attrs:{src:t(307),alt:"Front-End Foxes"}})]),e._v(" "),o("p",[e._v("Front-End Foxes, formerly known as Vue Vixens, were initiatives created by Jen Looper, currently Head of Academic Advocacy at AWS. Our mission was to create workshops to teach Vue.js in a cool and fun way to 'foxy people who identify as women'. We had chapters worldwide before closing the nonprofit in 2022. Front-End Foxes workshops are called 'skulks' because a group of foxes is called a 'skulk'.")]),e._v(" "),o("p",[e._v("These self-driven workshops have helped hundreds of women get better acquainted with front-end technologies for both web and mobile development. Our teaching methodology is explained in "),o("a",{attrs:{href:"https://dev.to/frontendfoxes/the-way-of-the-fox-the-vue-vixens-curriculum-290",target:"_blank",rel:"noopener noreferrer"}},[e._v("this article"),o("OutboundLink")],1),e._v(".")]),e._v(" "),o("p",[o("img",{attrs:{src:t(308),alt:"inaugural skulk in New Orleans"}})]),e._v(" "),o("blockquote",[o("p",[e._v("Our inaugural Skulk at Vue.US Conference in New Orleans in March, 2018")])]),e._v(" "),o("h2",{attrs:{id:"faq"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#faq"}},[e._v("#")]),e._v(" FAQ")]),e._v(" "),o("p",[o("strong",[e._v("What's the difference between a Chapter, a 'Mini', and a 'Nano'?")])]),e._v(" "),o("p",[e._v("This content is presented as various types, divided by length. The first five chapters comprise the full-day workshop. Other chapters are listed as 'mini-workshops' or 'half-day workshops' and can be done ad hoc with groups for breakfasts, lunch'n'learn sessions, or meetups. Nanos are ten to thirty-minute warm-up icebreaker coding exercises used by our Chapters.")]),e._v(" "),o("p",[o("strong",[e._v("Why are the chapters broken up into parts?")])]),e._v(" "),o("p",[e._v("All the online codelabs are designed to be completed in groups in a self-study mode in a workshop format during meetups, conferences, and brown-bag lunches. For the all-day workshops, it is best to break up the day into parts and regroup users periodically so that 'no developer is left behind'. If an attendee gets lost, she can 'reboot' by downloading the ending point for each previous chapter into a new Code Sandbox.")]),e._v(" "),o("p",[o("strong",[e._v("Where can I register for a skulk?")])]),e._v(" "),o("p",[e._v("Workshop attendees and mentors can register for events at "),o("a",{attrs:{href:"https://www.frontendfoxes.org",target:"_blank",rel:"noopener noreferrer"}},[e._v("FrontEndFoxes.org"),o("OutboundLink")],1),e._v(". Keep an eye on our Twitter feeds "),o("a",{attrs:{href:"https://twitter.com/VueVixens",target:"_blank",rel:"noopener noreferrer"}},[e._v("@vuevixens"),o("OutboundLink")],1),e._v(" and "),o("a",{attrs:{href:"https://twitter.com/FrontendFoxes",target:"_blank",rel:"noopener noreferrer"}},[e._v("@frontendfoxes"),o("OutboundLink")],1),e._v(" for announcements of upcoming events. Front-End Foxes workshops are free, but depend on budget from conferences and meetups to provide lunch, breakfast, or snacks, and a space with wifi.")]),e._v(" "),o("p",[o("strong",[e._v("I'm a guy. Can I participate?")])]),e._v(" "),o("p",[e._v("The goal of the program is to familiarize women and those who identify as such with concepts of programming for web and mobile in a supportive and inclusive environment. Experienced developers, however, are very welcome to join in our efforts to organize events, support our scholarship fund, mentor a skulk, and provide content. We are grateful for all kinds of help!")]),e._v(" "),o("p",[o("strong",[e._v("Want to contribute? Please make sure to check out our "),o("RouterLink",{attrs:{to:"/workshops/CODE_OF_CONDUCT.html"}},[e._v("Code of Conduct")]),e._v(" as well as our "),o("RouterLink",{attrs:{to:"/contributing.html"}},[e._v("Contributing instructions")]),e._v(".")],1)])])}),[],!1,null,null,null);o.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/58.97fa300d.js b/assets/js/58.bd6af85c.js similarity index 99% rename from assets/js/58.97fa300d.js rename to assets/js/58.bd6af85c.js index 76a2cc6..a7a7e02 100644 --- a/assets/js/58.97fa300d.js +++ b/assets/js/58.bd6af85c.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[58],{392:function(t,e,n){t.exports=n.p+"assets/img/mini2_1.97e0e6ec.png"},433:function(t,e,n){"use strict";n.r(e);var a=n(14),s=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"🖥️-1-build-a-simple-pet-fetching-web-app"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#🖥️-1-build-a-simple-pet-fetching-web-app"}},[t._v("#")]),t._v(" 🖥️ 1: Build A Simple Pet Fetching Web App")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[e("strong",[t._v("Project Goal")])]),t._v(" "),e("th",[t._v("Get started with Vue.js basics and simple API calls")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[e("strong",[t._v("What you’ll learn")])]),t._v(" "),e("td",[t._v("Setting up your Vue app, components basics, performing simple REST API calls using Axios")])]),t._v(" "),e("tr",[e("td",[e("strong",[t._v("Tools you’ll need")])]),t._v(" "),e("td",[t._v("A modern browser like Chrome. A "),e("a",{attrs:{href:"https://github.com",target:"_blank",rel:"noopener noreferrer"}},[t._v("GitHub"),e("OutboundLink")],1),t._v(" account which can be used to login to "),e("a",{attrs:{href:"https://codesandbox.io",target:"_blank",rel:"noopener noreferrer"}},[t._v("CodeSandbox"),e("OutboundLink")],1),t._v(".")])]),t._v(" "),e("tr",[e("td",[e("strong",[t._v("Time needed to complete")])]),t._v(" "),e("td",[t._v("1 hour")])]),t._v(" "),e("tr",[e("td",[e("strong",[t._v("Just want to try the app?")])]),t._v(" "),e("td",[e("a",{attrs:{href:"https://codesandbox.io/s/web-1-mini-workshop-koj8w",target:"_blank",rel:"noopener noreferrer"}},[t._v("CodeSandbox link"),e("OutboundLink")],1)])])])]),t._v(" "),e("h1",{attrs:{id:"instructions"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#instructions"}},[t._v("#")]),t._v(" Instructions")]),t._v(" "),e("h2",{attrs:{id:"scaffold-your-app"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#scaffold-your-app"}},[t._v("#")]),t._v(" Scaffold your app")]),t._v(" "),e("p",[t._v("We'll start from scratch in "),e("a",{attrs:{href:"http://codesandbox.io",target:"_blank",rel:"noopener noreferrer"}},[t._v("CodeSandbox"),e("OutboundLink")],1),t._v(". Create a CodeSandbox account and scaffold a starter Vue.js template by clicking "),e("a",{attrs:{href:"https://codesandbox.io/s/vue",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),e("OutboundLink")],1),t._v(".")]),t._v(" "),e("p",[t._v("We're going to build an application to load random dog images and store them to a favorites list:")]),t._v(" "),e("p",[e("img",{attrs:{src:n(392),alt:"random dog app"}})]),t._v(" "),e("p",[t._v("Take a look at the code that was scaffolded by CodeSandbox for a basic Vue.js app. The file "),e("code",[t._v("main.js")]),t._v(" is open by default. This is the main starting point of a Vue.js app. Note that in this file you import Vue from its npm package: "),e("code",[t._v('import Vue from "vue";')]),t._v(". CodeSandbox imports all the needed dependencies from npm to build the app. You can always check out the root "),e("code",[t._v("package.json")]),t._v(" to find out which dependencies are needed.")]),t._v(" "),e("p",[e("code",[t._v("main.js")]),t._v(" also initializes the app as a new Vue.js app and sets the div into which the app code will be injected.")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("render")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("h")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("h")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("App"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#app'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Open up "),e("code",[t._v("App.vue")]),t._v(". In this file, the 'home' component is built. It contains the three main parts of a Vue.js Single File Component (SFC): a template, a script block, and a style block.")]),t._v(" "),e("p",[t._v("Note the first div in the template block has the id of 'app' - this is the div where the app code will be injected. There's also a "),e("code",[t._v("")]),t._v(" component included underneath the logo image. This is an example of an SFC being included into "),e("code",[t._v("App.vue")]),t._v(".")]),t._v(" "),e("p",[t._v("Open "),e("code",[t._v("components/HelloWorld.vue")]),t._v(" and you'll find the source of the list of links that appears embedded in "),e("code",[t._v("App.vue")]),t._v(". This file also includes a script block with a "),e("code",[t._v("msg")]),t._v(" variable and some more styles in a "),e("code",[t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br"),e("span",{staticClass:"line-number"},[t._v("11")]),e("br"),e("span",{staticClass:"line-number"},[t._v("12")]),e("br"),e("span",{staticClass:"line-number"},[t._v("13")]),e("br"),e("span",{staticClass:"line-number"},[t._v("14")]),e("br"),e("span",{staticClass:"line-number"},[t._v("15")]),e("br"),e("span",{staticClass:"line-number"},[t._v("16")]),e("br"),e("span",{staticClass:"line-number"},[t._v("17")]),e("br"),e("span",{staticClass:"line-number"},[t._v("18")]),e("br"),e("span",{staticClass:"line-number"},[t._v("19")]),e("br"),e("span",{staticClass:"line-number"},[t._v("20")]),e("br"),e("span",{staticClass:"line-number"},[t._v("21")]),e("br"),e("span",{staticClass:"line-number"},[t._v("22")]),e("br"),e("span",{staticClass:"line-number"},[t._v("23")]),e("br"),e("span",{staticClass:"line-number"},[t._v("24")]),e("br"),e("span",{staticClass:"line-number"},[t._v("25")]),e("br"),e("span",{staticClass:"line-number"},[t._v("26")]),e("br"),e("span",{staticClass:"line-number"},[t._v("27")]),e("br"),e("span",{staticClass:"line-number"},[t._v("28")]),e("br"),e("span",{staticClass:"line-number"},[t._v("29")]),e("br"),e("span",{staticClass:"line-number"},[t._v("30")]),e("br"),e("span",{staticClass:"line-number"},[t._v("31")]),e("br"),e("span",{staticClass:"line-number"},[t._v("32")]),e("br"),e("span",{staticClass:"line-number"},[t._v("33")]),e("br"),e("span",{staticClass:"line-number"},[t._v("34")]),e("br"),e("span",{staticClass:"line-number"},[t._v("35")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Notice we don't use "),e("code",[t._v("")]),t._v(" as part of the style block. The 'scoped' keyword ensures that your styles will remain valid only for the current SFC, but we're going to make these styles universal.")])]),t._v(" "),e("p",[t._v("This style block uses a path to an external image hosted on Github, rather than to a relative path. This is because CodeSandbox doesn't host images easily; normally you'd just add an image on a relative path such as "),e("code",[t._v("/images/myImage.png")]),t._v(".")]),t._v(" "),e("p",[t._v("Adding the stylesheet didn't do much to our template except break the existing styles. Let's fix the template!")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("☕️ Take a break! ☕️")]),t._v(" "),e("p",[t._v("Now's a great time to join a breakout room if you're joining us on Zoom!")])]),t._v(" "),e("h2",{attrs:{id:"install-vuetify"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#install-vuetify"}},[t._v("#")]),t._v(" Install Vuetify")]),t._v(" "),e("p",[t._v("Before we edit the template, we're going to install Vuetify. Vuetify is a cool library that gives a Material Design styling to your Vue apps.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Vuetify is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components for building your application. You can find full documentation for it "),e("a",{attrs:{href:"https://vuetifyjs.com/en/getting-started/quick-start",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),e("OutboundLink")],1)])]),t._v(" "),e("p",[t._v("Install it by clicking the 'Add Dependency' button in the Dependency dropdown area on the left in CodeSandbox. Search for 'Vuetify'.")]),t._v(" "),e("p",[t._v("Then click on the library in the list to install it.")]),t._v(" "),e("p",[t._v("Check whether the dependency is installed by opening "),e("code",[t._v("package.json")]),t._v(' and checking the "dependencies" object. It should look like this:')]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-json line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-json"}},[e("code",[e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"dependencies"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"vue"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.6.10"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"vuetify"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.0.19"')]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br")])]),e("p",[t._v("Vuetify works via a plugin structure. In the "),e("code",[t._v("/src")]),t._v(" folder of your project, create a new folder called "),e("code",[t._v("plugins")]),t._v(" and inside that a new file called "),e("code",[t._v("vuetify.js")]),t._v(".")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("In CodeSandbox, right click on the new folder to create a new file. Be careful to create these new assets in the "),e("code",[t._v("/src")]),t._v(" folder!")])]),t._v(" "),e("p",[t._v("In the new "),e("code",[t._v("vuetify.js")]),t._v(" file, add this code to bootstrap the plugin:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Vue "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Vuetify "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vuetify'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vuetify/dist/vuetify.min.css'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nVue"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Vuetify"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vuetify")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br")])]),e("p",[t._v("Next, initialize Vuetify by opening "),e("code",[t._v("main.js")]),t._v(" and adding these lines under the second "),e("code",[t._v("import")]),t._v(" (line 3):")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" vuetify "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/plugins/vuetify'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Then, change the Vue initialization at the bottom of "),e("code",[t._v("main.js")]),t._v(" to this:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tvuetify"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("render")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("h")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("h")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("App"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#app'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br")])]),e("p",[t._v("This ensures that Vuetify's themes and components will be available throughout the Vue app.")]),t._v(" "),e("p",[t._v("We are going to use icons in this app, so we also have to add Material icons into the "),e("code",[t._v("head")]),t._v(" part of the "),e("code",[t._v("index.html")]),t._v(" file. This file is in the "),e("code",[t._v("public")]),t._v(" folder. Insert this line after the "),e("code",[t._v("")]),t._v(" tag:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("link")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("rel")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylesheet"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Let's also change the page title to "),e("code",[t._v("Dog Lover")]),t._v(". To do so, we have to change the content of the "),e("code",[t._v("title")]),t._v(" tag:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("title")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Dog Lover"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("title")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Then, overwrite the current template in "),e("code",[t._v("App.vue")]),t._v(" with this markup:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-app")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-main")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dogs-layout"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-container")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("fill-height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dogs-overlay"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("h1")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("display-2 text-xs-center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Choose your favorite dogs"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("h1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-card")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dog-card"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("400px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-img")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-card-actions")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-spacer")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-spacer")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-btn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("favorite"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-btn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("forward"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-card-actions")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-card")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-container")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-main")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-app")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br"),e("span",{staticClass:"line-number"},[t._v("11")]),e("br"),e("span",{staticClass:"line-number"},[t._v("12")]),e("br"),e("span",{staticClass:"line-number"},[t._v("13")]),e("br"),e("span",{staticClass:"line-number"},[t._v("14")]),e("br"),e("span",{staticClass:"line-number"},[t._v("15")]),e("br"),e("span",{staticClass:"line-number"},[t._v("16")]),e("br"),e("span",{staticClass:"line-number"},[t._v("17")]),e("br"),e("span",{staticClass:"line-number"},[t._v("18")]),e("br"),e("span",{staticClass:"line-number"},[t._v("19")]),e("br"),e("span",{staticClass:"line-number"},[t._v("20")]),e("br"),e("span",{staticClass:"line-number"},[t._v("21")]),e("br"),e("span",{staticClass:"line-number"},[t._v("22")]),e("br"),e("span",{staticClass:"line-number"},[t._v("23")]),e("br")])]),e("p",[t._v("Your app should refresh (if it doesn't, use the manual refresh button in the app preview address bar). Wow, that made a big change!")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Note the use of "),e("code",[t._v("<v-app>")]),t._v(" in this template markup - this is a requirement of Vuetify and is a sure sign you'll have a Vuetify-themed app. We're also using a bunch of Vuetify layout elements like "),e("code",[t._v("v-container")]),t._v(" and UI components like "),e("code",[t._v("v-card")]),t._v(" and "),e("code",[t._v("v-btn")]),t._v(".")])]),t._v(" "),e("h2",{attrs:{id:"add-some-data"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add-some-data"}},[t._v("#")]),t._v(" Add some data")]),t._v(" "),e("p",[t._v("At this point, we need to start populating our UI with some data. First thing we want to do is to display a dog image inside our "),e("code",[t._v("v-card")]),t._v(". Let's add a static link just to test how it looks. In "),e("code",[t._v("App.vue")]),t._v("'s template, change the "),e("code",[t._v("src")]),t._v(" property of "),e("code",[t._v("v-img")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("400px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("https://images.dog.ceo/breeds/chihuahua/n02085620_3407.jpg"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-img")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("How cute! 🐶")]),t._v(" "),e("p",[t._v("But the idea is to make this link dynamic, so it's time to create your first Vue variable. First, you have to add "),e("code",[t._v("data()")]),t._v(" to your Vue component. This function should return an object of our Vue variables. Let's create one in the "),e("code",[t._v("<script>")]),t._v(" block. Overwrite the current "),e("code",[t._v("<script>")]),t._v(" block in "),e("code",[t._v("App.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentDogLink")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("At this point you can remove the "),e("code",[t._v("HelloWorld.vue")]),t._v(" file from the "),e("code",[t._v("components")]),t._v(" folder as we won't need it. Right-click the file in CodeSandbox and click 'delete'.")])]),t._v(" "),e("p",[t._v("Now you have a variable called "),e("code",[t._v("currentDogLink")]),t._v(" and its default value is an empty string. We will use this variable to provide a link to a current dog in "),e("code",[t._v("v-img")]),t._v(". First, we will set the "),e("code",[t._v("currentDogLink")]),t._v(" value by overwriting the data block we just added in "),e("code",[t._v("App.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentDogLink")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://images.dog.ceo/breeds/chihuahua/n02085620_3407.jpg"')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br")])]),e("p",[t._v("Now we have to change the template to make the "),e("code",[t._v("src")]),t._v(" property "),e("em",[t._v("dynamic")]),t._v(" so it can use the value of the variable we just populated above. To do this we need a "),e("code",[t._v("v-bind")]),t._v(" directive or its shortcut, "),e("code",[t._v(":")]),t._v(". Again in "),e("code",[t._v("App.vue")]),t._v(", edit the "),e("code",[t._v("<v-img>")]),t._v(" tag to remove its hard-coded value:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("400px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentDogLink"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-img")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("The "),e("code",[t._v("v-bind")]),t._v(" directive dynamically binds one or more attributes, or a component prop to an expression. That little "),e("code",[t._v(":")]),t._v(" makes all the difference!")])]),t._v(" "),e("p",[t._v("Great! Now it's time to load some dogs from an API!")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("☕️ Take a break! ☕️")]),t._v(" "),e("p",[t._v("Now's a great time to join a breakout room if you're joining us on Zoom!")])]),t._v(" "),e("h2",{attrs:{id:"add-axios"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add-axios"}},[t._v("#")]),t._v(" Add Axios")]),t._v(" "),e("p",[t._v("To perform API calls we will need a library called "),e("a",{attrs:{href:"https://github.com/axios/axios",target:"_blank",rel:"noopener noreferrer"}},[t._v("Axios"),e("OutboundLink")],1),t._v(". It's a promise-based HTTP client that works both in the browser and in other node.js environments.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Originally, Vue supported its own way of making API calls using .ajax; but this resource was deprecated as Axios's standalone library worked very well for this purpose, removing the need for an integrated solution. Read more about this decision "),e("a",{attrs:{href:"https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),e("OutboundLink")],1),t._v(".")])]),t._v(" "),e("p",[t._v("First, add Axios's library to your project dependencies. To do so in CodeSandbox, click on the "),e("code",[t._v("Add Dependency")]),t._v(" button and search for "),e("code",[t._v("axios")]),t._v(". Install the latest version.")]),t._v(" "),e("p",[t._v("Import Axios into the component where we will perform our API call - "),e("code",[t._v("App.vue")]),t._v(". In that component's script block, add this line right under "),e("code",[t._v("<script>")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" axios "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'axios'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("At this point your script part of "),e("code",[t._v("App.vue")]),t._v(" should look like this:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" axios "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"axios"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentDogLink")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://images.dog.ceo/breeds/chihuahua/n02085620_3407.jpg"')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br"),e("span",{staticClass:"line-number"},[t._v("11")]),e("br")])]),e("p",[t._v("Now we are ready to load an image from the API.")]),t._v(" "),e("h2",{attrs:{id:"call-the-api"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#call-the-api"}},[t._v("#")]),t._v(" Call the API")]),t._v(" "),e("p",[t._v("Let's perform our first API call. To do so, we will create a "),e("code",[t._v("loadNewDog")]),t._v(" "),e("em",[t._v("method")]),t._v(" inside our component.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("The "),e("code",[t._v("methods")]),t._v(" property is a list of functions that hang off of an object — typically the Vue instance itself or a Vue component.")])]),t._v(" "),e("p",[t._v("Let's add it right after the "),e("code",[t._v("data")]),t._v(" function:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentDogLink")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://images.dog.ceo/breeds/chihuahua/n02085620_3407.jpg"')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadNewDog")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br")])]),e("p",[t._v("For now this method does nothing but we want it to load a new dog from the API. First we have to check which endpoint we have to use. Looking at the API's "),e("a",{attrs:{href:"https://dog.ceo/dog-api/",target:"_blank",rel:"noopener noreferrer"}},[t._v("documentation"),e("OutboundLink")],1),t._v(", we learn that we need to use "),e("code",[t._v("https://dog.ceo/api/breeds/image/random")]),t._v(" as our endpoint. It will provide a random dog image.")]),t._v(" "),e("p",[t._v("To perform a GET request Axios uses the "),e("code",[t._v("axios.get")]),t._v(" method. The result will be a JavaScript promise, so we have to provide success and failure callbacks to manage its lifecycle. For now, let's simply print the query result to console. Still in "),e("code",[t._v("App.vue")]),t._v(", edit the "),e("code",[t._v("loadNewDog(){}")]),t._v(" method by placing this snippet between the curly brackets:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v("axios\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://dog.ceo/api/breeds/image/random'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("response")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\tconsole"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("response"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("catch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("error")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\tconsole"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("error"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br")])]),e("p",[t._v("We want a new image to replace the old one right when the component is created, so let's add a "),e("code",[t._v("created()")]),t._v(" hook right after "),e("code",[t._v("methods")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("created")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Note: Make sure to add a comma after the methods object and then add the created() hook!")])]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("This is our app's first lifecycle hook! These are very useful when you want fine control over when to run blocks of code. Read more "),e("a",{attrs:{href:"https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),e("OutboundLink")],1)])]),t._v(" "),e("p",[t._v("Inside the created hook we will call our method.")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("created")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadNewDog")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Now after clicking the refresh button in the browser window, you should see an object in your console. Drill into it by clicking its left-hand arrow. We are interested in its "),e("code",[t._v("data")]),t._v(" field. You can see we have a status "),e("code",[t._v("success")]),t._v(" and a message with an image URL.")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("☕️ Take a break! ☕️")]),t._v(" "),e("p",[t._v("Now's a great time to join a breakout room if you're joining us on Zoom!")])]),t._v(" "),e("h2",{attrs:{id:"use-the-api"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#use-the-api"}},[t._v("#")]),t._v(" Use the API")]),t._v(" "),e("p",[t._v("Let's replace our "),e("code",[t._v("currentDogLink")]),t._v(" with the loaded one. At this point we can remove its static value:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentDogLink")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br")])]),e("p",[t._v("Inside the "),e("code",[t._v("loadNewDog")]),t._v(" method instead of printing result to the console we will assign "),e("code",[t._v("response.data.message")]),t._v(" (which is actually the image URL) to the "),e("code",[t._v("currentDogLink")]),t._v(" property:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadNewDog")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n axios\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://dog.ceo/api/breeds/image/random"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("response")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentDogLink "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" response"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("message"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("catch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("error")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("error"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br")])]),e("p",[t._v("Now every time you refresh the page, you will have a shiny new dog image! 🎉")]),t._v(" "),e("p",[t._v("We also want to call the same method when the 'Next' arrow is clicked. Let's add a click handler to this button. We can use the "),e("code",[t._v("v-on")]),t._v(" directive or its shortcut "),e("code",[t._v("@")]),t._v('. In the template, edit the "forward" icon '),e("code",[t._v("v-btn")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-btn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("loadNewDog"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("forward"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Now we can load new images simply by clicking on the 'Next' button.")]),t._v(" "),e("h2",{attrs:{id:"build-the-favorites-list"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#build-the-favorites-list"}},[t._v("#")]),t._v(" Build the Favorites List")]),t._v(" "),e("p",[t._v("We want to let a user add dog images to a personal list of their favorites and show the gallery of these images right below our current dog view. To store the links we need one more data property - an array called "),e("code",[t._v("favoriteDogs")]),t._v(". Let's add it right after "),e("code",[t._v("currentDogLink")]),t._v(" and make it empty by default:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentDogLink")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("favoriteDogs")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br")])]),e("p",[t._v("To display the favorite dogs we should make changes to our template. Let's add the following code snippet right after the closing "),e("code",[t._v("</v-card>")]),t._v(" tag")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-container")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("grid-list-md")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("fluid")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-layout")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("wrap")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-flex")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("xs6")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("sm4")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("md2")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-card")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dog-card"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("150px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-img")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-card-actions")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-spacer")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-spacer")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-btn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("delete"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-card-actions")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-card")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-flex")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-layout")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-container")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br"),e("span",{staticClass:"line-number"},[t._v("11")]),e("br"),e("span",{staticClass:"line-number"},[t._v("12")]),e("br"),e("span",{staticClass:"line-number"},[t._v("13")]),e("br"),e("span",{staticClass:"line-number"},[t._v("14")]),e("br"),e("span",{staticClass:"line-number"},[t._v("15")]),e("br")])]),e("p",[t._v("You can see an empty card with a 'Delete' button right after the current dog view. Now we need to find a way to show "),e("code",[t._v("favoriteDogs")]),t._v(" items inside of these cards.")]),t._v(" "),e("p",[t._v("To render a list of items based on an array Vue has a "),e("code",[t._v("v-for")]),t._v(" directive, which will iterate through this array and render each item. Let's add this directive to our opening "),e("code",[t._v("v-flex")]),t._v(" element that will show the array of favorite cards in the new container you just added:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-flex")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("xs6")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("sm4")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("md2")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(pet, index) in favoriteDogs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pet"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Here "),e("code",[t._v("pet")]),t._v(" is the reference to the "),e("em",[t._v("current array element")]),t._v(" and "),e("code",[t._v("index")]),t._v(" is the "),e("em",[t._v("index of this element")]),t._v(" inside the array.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Remember, we chose this name inside the directive; if we had written "),e("code",[t._v('v-for="(dog, number) in favoriteDogs"')]),t._v(" each item would be called "),e("code",[t._v("dog")]),t._v(" and its index would be called "),e("code",[t._v("number")]),t._v(").")])]),t._v(" "),e("p",[t._v("To properly loop over your array of favorite dogs and append another one, you need to provide a unique key attribute for each item. In our case, the "),e("code",[t._v("pet")]),t._v(" itself will be the key.")]),t._v(" "),e("p",[t._v("You can see that our empty card disappeared. It's fine! We have an empty "),e("code",[t._v("favoriteDogs")]),t._v(" array so there's simply nothing to render right now.")]),t._v(" "),e("p",[t._v("One thing left to do is to bind "),e("code",[t._v("pet")]),t._v(" (which will be the image link) to the "),e("code",[t._v("src")]),t._v(" property of the "),e("code",[t._v("v-img")]),t._v(" component in the cards you're building:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("150px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pet"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-img")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Now it's time to like some dogs 💖🐶!")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("☕️ Take a break! ☕️")]),t._v(" "),e("p",[t._v("Now's a great time to join a breakout room if you're joining us on Zoom!")])]),t._v(" "),e("h2",{attrs:{id:"adding-dogs-to-favorites"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#adding-dogs-to-favorites"}},[t._v("#")]),t._v(" Adding Dogs to Favorites")]),t._v(" "),e("p",[t._v("We will create a new method called "),e("code",[t._v("addToFavorites")]),t._v(". It will add the value of "),e("code",[t._v("currentDogLink")]),t._v(" to the "),e("code",[t._v("favoriteDogs")]),t._v(" array (JavaScript has a "),e("code",[t._v("push")]),t._v(" array method for this purpose). Let's place it after the "),e("code",[t._v("loadNewDog")]),t._v(" one "),e("em",[t._v("(don't miss the comma!)")])]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("addToFavorites")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("favoriteDogs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentDogLink"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("And of course we need to bind it to the 'Like' button in the top card:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-btn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("addToFavorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("favorite"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Now try to click on the 'favorite' button! You can see how our gallery is filling with the dogs' images 🖼️")]),t._v(" "),e("p",[t._v("There is one issue: now we can add one image a few times. To prevent this we should check if the "),e("code",[t._v("currentDogLink")]),t._v(" is already inside the "),e("code",[t._v("favoriteDogs")]),t._v(" array and if it's is, we will disable the 'favorite' button. Instead of placing this complex logic inside the template, we will create a "),e("em",[t._v("computed")]),t._v(" property.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Computed properties can be used to do quick calculations of properties that are displayed in the view. These calculations will be cached and will only update when their dependencies are changed.")])]),t._v(" "),e("p",[t._v("Let's add "),e("code",[t._v("computed")]),t._v(" right after the "),e("code",[t._v("created()")]),t._v(" hook (don't forget the comma after the close of "),e("code",[t._v("created()")]),t._v(") and create a property named "),e("code",[t._v("isAlreadyInFavorites")]),t._v(" in it.")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v(" "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("isAlreadyInFavorites")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Any computed property should be a function returning the result of calculations. Let's check the index of "),e("code",[t._v("currentDogLink")]),t._v(" inside the "),e("code",[t._v("favoriteDogs")]),t._v(" array. If it is greater than -1 (in other words if the array contains such an element), the function will return "),e("code",[t._v("true")]),t._v(", otherwise it will return "),e("code",[t._v("false")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("isAlreadyInFavorites")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("favoriteDogs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("indexOf")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentDogLink"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br")])]),e("p",[t._v("Now we can add a dynamic "),e("code",[t._v("disabled")]),t._v(" attribute to the 'Like' button in the top card and set it equal to "),e("code",[t._v("isAlreadyInFavorites")]),t._v(".")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-btn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("addToFavorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":disabled")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("isAlreadyInFavorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("favorite"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Try to add the dog to favorites. Now you can see that the 'favorite' icon is greyed-out and you cannot click it again.")]),t._v(" "),e("h2",{attrs:{id:"removing-dogs-from-favorites"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removing-dogs-from-favorites"}},[t._v("#")]),t._v(" Removing Dogs from Favorites")]),t._v(" "),e("p",[t._v("What if you stopped liking one of the dogs' images? In this unlikely event, you will need a way to remove it from the "),e("code",[t._v("favoriteDogs")]),t._v(" array. We need one more method for this, so let's add it after the "),e("code",[t._v("addToFavorites")]),t._v(" (add a comma after "),e("code",[t._v("addToFavorites")]),t._v(" closing bracket):")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeFromFavorites")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Of course we should specify somehow what dog we want to remove from the array. Fortunately, we have the "),e("code",[t._v("index")]),t._v(" parameter. Let's pass it to our method and remove the element with the given index from the "),e("code",[t._v("favoriteDogs")]),t._v(" array:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeFromFavorites")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("index")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("favoriteDogs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("splice")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Here the splice() method changes the contents of an array by removing existing elements. The first argument is the index of the element we want to start with and the second argument is the number of elements we want to remove.")])]),t._v(" "),e("p",[t._v("Now we have to bind this new method to the 'Delete' button with a click handler:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-btn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("removeFromFavorites(index)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("delete"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Don't forget to pass "),e("code",[t._v("index")]),t._v(" to the "),e("code",[t._v("removeFromFavorites")]),t._v(" method! When we don't pass any parameters, we can simply skip the brackets as we did for the "),e("code",[t._v("addToFavorites")]),t._v(" method.")])]),t._v(" "),e("p",[t._v("Try to add and remove some dogs from favorites. IT WORKS!")]),t._v(" "),e("p",[e("strong",[t._v("🎊Congratulations, you've finished the base project!🎊")])]),t._v(" "),e("h2",{attrs:{id:"push-your-work-to-a-repository-on-your-github-account"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#push-your-work-to-a-repository-on-your-github-account"}},[t._v("#")]),t._v(" Push your work to a repository on your GitHub account")]),t._v(" "),e("p",[e("strong",[t._v("Step 1")]),t._v(": In CodeSandbox, click the Github icon in the sidebar, and grant permissions if necessary.")]),t._v(" "),e("p",[e("strong",[t._v("Step 2")]),t._v(": Enter a name for your repository.")]),t._v(" "),e("p",[e("strong",[t._v("Step 3")]),t._v(": Click create repository.")]),t._v(" "),e("h2",{attrs:{id:"supplement-1-creating-a-dog-component"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#supplement-1-creating-a-dog-component"}},[t._v("#")]),t._v(" Supplement 1: Creating a Dog Component")]),t._v(" "),e("p",[t._v("At this point we want to abstract a single dog card from the Favorites grid into a separate component to learn how parent and child components communicate.")]),t._v(" "),e("p",[t._v("We have a "),e("code",[t._v("components")]),t._v(" folder but for now it's empty. Let's create a new file here and name it "),e("code",[t._v("Dog.vue")]),t._v(".")]),t._v(" "),e("p",[t._v("Open this file and add "),e("code",[t._v("<template></template>")]),t._v(" and "),e("code",[t._v("<script><\/script>")]),t._v(" tags. Now our file looks this way:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}}),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Now copy the whole "),e("code",[t._v("v-card")]),t._v(" component that contains the favorite dogs (it's near the bottom, and has the css class "),e("code",[t._v("dog-card")]),t._v(") from "),e("code",[t._v("App.vue")]),t._v(" and paste it inside the template tag. You can delete it from "),e("code",[t._v("App.vue")]),t._v(".")]),t._v(" "),e("p",[t._v("We now need a way to pass the dog image we want to view from the parent to the child. To do so, Vue uses "),e("code",[t._v("props")]),t._v(".")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a _prop_erty on that component instance. In our case the "),e("code",[t._v("Dog")]),t._v(" component will have a "),e("code",[t._v("dog")]),t._v(" property, passed from its parent "),e("code",[t._v("App")]),t._v(" component.")])]),t._v(" "),e("p",[t._v("Let's add a "),e("code",[t._v("props")]),t._v(" option to our "),e("code",[t._v("Dog.vue")]),t._v(" component. First, we need to create an export statement inside our "),e("code",[t._v("script")]),t._v(" tag (so later we will be able to import our "),e("code",[t._v("Dog")]),t._v(" component inside the "),e("code",[t._v("App")]),t._v(" one). Add this code block to "),e("code",[t._v("Dog.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Now we can add a "),e("code",[t._v("props")]),t._v(" option to this object and a prop "),e("code",[t._v("dog")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("props")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("dog")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br")])]),e("p",[t._v("Here we are also specifying the type of our dog - it will be a string containing the dog image URL.")]),t._v(" "),e("p",[t._v("In our template in "),e("code",[t._v("Dog.vue")]),t._v(" we should replace "),e("code",[t._v("pet")]),t._v(" with "),e("code",[t._v("dog")]),t._v(", because we don't have any "),e("code",[t._v("pet")]),t._v("s inside the "),e("code",[t._v("Dog")]),t._v(" component, only a passed "),e("code",[t._v("dog")]),t._v(" property. Now our template should look like this:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-card")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dog-card"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("150px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dog"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-img")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-card-actions")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-spacer")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-spacer")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-btn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("removeFromFavorites(index)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("delete"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-card-actions")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-card")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br"),e("span",{staticClass:"line-number"},[t._v("11")]),e("br")])]),e("p",[t._v("Now let's move back to our "),e("code",[t._v("App.vue")]),t._v(" component and make some changes. First of all we should import our newly created "),e("code",[t._v("Dog")]),t._v(" component into "),e("code",[t._v("App.vue")]),t._v(". Add this string before the "),e("code",[t._v("export default")]),t._v(" statement in the "),e("code",[t._v("<script>")]),t._v(" block:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Dog "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./components/Dog'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Now we have to 'explain' to the "),e("code",[t._v("App")]),t._v(" component that it has a child component inside it. Vue uses a "),e("code",[t._v("components")]),t._v(" option for this. Let's add a component option above the "),e("code",[t._v("data()")]),t._v(" one:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("components")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("appDog")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Dog\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentDogLink")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("favoriteDogs")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("For each property in the components object, the key will be the name of the custom element, while the value will contain the options object for the component")])]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("For the component name you can either use a camel-case ("),e("code",[t._v("appDog")]),t._v(") or kebab-case ("),e("code",[t._v("'app-dog'")]),t._v("). Keep in mind that a camel-case name will be 'translated' to kebab-case in HTML tag names. So we will use the HTML custom tag "),e("code",[t._v("<app-dog>")]),t._v(" and it will render a "),e("code",[t._v("Dog")]),t._v(" component")])]),t._v(" "),e("p",[t._v("In "),e("code",[t._v("App.vue")]),t._v(", place the custom tag in the space where you deleted the card earlier, overwriting the "),e("code",[t._v("<v-flex>")]),t._v(" tag:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-flex")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("xs6")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("sm4")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("md2")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(pet, index) in favoriteDogs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pet"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("app-dog")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("app-dog")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-flex")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("We have to pass a "),e("code",[t._v("dog")]),t._v(" prop to our "),e("code",[t._v("Dog")]),t._v(" component. It will be done with the familiar "),e("code",[t._v("v-bind")]),t._v(" directive (remember, you can use its "),e("code",[t._v(":")]),t._v(" shortcut). Edit the code you just added to "),e("code",[t._v("App.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-flex")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("xs6")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("sm4")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("md2")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(pet, index) in favoriteDogs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pet"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("app-dog")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":dog")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pet"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@remove")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("removeFromFavorites(index)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("app-dog")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-flex")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Now if you try to add a dog to Favorites you will see the dogs in the grid again! But we have one issue: deleting a dog will cause a bunch of errors in console. The reason is we don't have a "),e("code",[t._v("removeFromFavorites")]),t._v(" method inside the "),e("code",[t._v("Dog.vue")]),t._v(" and it knows nothing about "),e("code",[t._v("index")]),t._v(" as well.")]),t._v(" "),e("p",[t._v("Instead of using the method, we will replace it with an "),e("em",[t._v("event emitter")]),t._v(" to the "),e("code",[t._v("delete")]),t._v(" button inside the Dog component.")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-btn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("$emit('remove')"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("By using "),e("code",[t._v("$emit")]),t._v(", we are sending a message to our parent component (in this case it's "),e("code",[t._v("App.vue")]),t._v("): 'Hi, something is happening here! Please read this message and react to it'.")]),t._v(" "),e("p",[t._v("Now when the "),e("code",[t._v("Dog")]),t._v(" component emits the "),e("code",[t._v("remove")]),t._v(" event (i.e. on 'Delete' button click), its parent "),e("code",[t._v("App")]),t._v(" component will call "),e("code",[t._v("removeFromFavorites")]),t._v(" method (which removes a certain dog from its favorites array).")]),t._v(" "),e("p",[e("strong",[t._v("🎊You've finished Supplement 1!🎊")])]),t._v(" "),e("h2",{attrs:{id:"supplement-2-add-animations"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#supplement-2-add-animations"}},[t._v("#")]),t._v(" Supplement 2: Add Animations")]),t._v(" "),e("p",[t._v("Now let's make our application more appealing by adding some animation effects to it.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Vue provides a "),e("code",[t._v("transition")]),t._v(" wrapper component, allowing you to add entering/leaving transitions for any element or component in the following contexts:")]),t._v(" "),e("ul",[e("li",[t._v("Conditional rendering (using "),e("code",[t._v("v-if")]),t._v(")")]),t._v(" "),e("li",[t._v("Conditional display (using "),e("code",[t._v("v-show")]),t._v(")")]),t._v(" "),e("li",[t._v("Dynamic components")]),t._v(" "),e("li",[t._v("Component root nodes")])])]),t._v(" "),e("p",[t._v("Let's try to animate the image of the current dog. First, we need to add a "),e("code",[t._v("v-if")]),t._v(" directive to it to provide the proper context for the future transition. In "),e("code",[t._v("App.vue")]),t._v(", edit the main dog's card:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-if")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentDogLink"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("400px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentDogLink"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-img")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("But now "),e("code",[t._v("currentDogLink")]),t._v(" will always return "),e("code",[t._v("true")]),t._v("! Let's set it to the empty string every time we're clicking the 'Next' button, so before the next image is loaded, "),e("code",[t._v("currentDogLink")]),t._v(" will return "),e("code",[t._v("false")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadNewDog")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentDogLink "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n axios"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://dog.ceo/api/breeds/image/random"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("response")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentDogLink "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" response"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("message"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br")])]),e("p",[t._v("Now you can observe this ugly effect: the image disappears every time the user clicks 'Next'. We will fix it with the fade animation effect. Let's wrap the "),e("code",[t._v("v-img")]),t._v(" in a "),e("code",[t._v("<transition>")]),t._v(" tag and provide it with a name attribute "),e("code",[t._v("fade")]),t._v(".")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("transition")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fade"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-if")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentDogLink"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("400px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentDogLink"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-img")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("transition")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("This will give us a bunch of CSS classes starting from "),e("code",[t._v("fade-")]),t._v(". There will be "),e("code",[t._v("enter")]),t._v("/"),e("code",[t._v("leave")]),t._v(" which is the position that the animation starts with on the first frame, "),e("code",[t._v("enter-active")]),t._v("/"),e("code",[t._v("leave-active")]),t._v(" while the animation is running - this is the one you’d place the animation properties themselves on, and "),e("code",[t._v("enter-to")]),t._v("/"),e("code",[t._v("leave-to")]),t._v(", which specifies where the element should be on the last frame.")]),t._v(" "),e("p",[t._v("Now that we have our hooks, we can create the transition using them. Edit the CSS in "),e("code",[t._v("App.vue")]),t._v(" by adding the following classes:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-css line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".fade-enter-active,\n.fade-leave-active")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" opacity 1s ease"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".fade-enter,\n.fade-leave-to")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("opacity")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br")])]),e("p",[t._v("The "),e("code",[t._v(".fade-enter-active")]),t._v(" and "),e("code",[t._v(".fade-leave-active")]),t._v(" classes will be where we apply the actual transition. This isn't anything Vue-specific - just normal CSS. The "),e("code",[t._v("ease")]),t._v(" property specifies a transition effect with a slow start, then fast, then ending slowly.")]),t._v(" "),e("p",[t._v("Now you can see that the dog picture has a nice fade effect when you click 'next'!")]),t._v(" "),e("p",[t._v("Let's also add some effects to our favorite dogs grid. To animate the list rendered with "),e("code",[t._v("v-for")]),t._v(", Vue uses the "),e("code",[t._v("transition-group")]),t._v(" tag.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Unlike "),e("code",[t._v("<transition>")]),t._v(", "),e("code",[t._v("transition-group")]),t._v(" renders an actual element: a "),e("code",[t._v("<span>")]),t._v(" by default. You can change the element that’s rendered with the tag attribute.\nElements inside are "),e("em",[t._v("always")]),t._v(" required to have a unique key attribute")])]),t._v(" "),e("p",[t._v("In "),e("code",[t._v("App.vue")]),t._v(", replace the "),e("code",[t._v("<v-layout>")]),t._v(" component surrounding the "),e("code",[t._v("<app-dog>")]),t._v(" nested component with "),e("code",[t._v("v-transition-group")]),t._v(" and provide it with a proper tag attribute and class:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("transition-group")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("slide"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("tag")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("v-layout"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("wrap"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-flex")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("xs6")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("sm4")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("md2")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(pet, index) in favoriteDogs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pet"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("app-dog")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":dog")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pet"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@remove")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("removeFromFavorites(index)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("app-dog")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-flex")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("transition-group")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br")])]),e("p",[e("code",[t._v("transition-group")]),t._v(" will render as a "),e("code",[t._v("v-layout")]),t._v(" component now. The class "),e("code",[t._v("wrap")]),t._v(" is needed to wrap grid elements to the next row (it replaces the "),e("code",[t._v("wrap")]),t._v(" attribute of "),e("code",[t._v("v-layout")]),t._v("). We also gave our new transition a name "),e("code",[t._v("slide")]),t._v(".")]),t._v(" "),e("p",[t._v("Now we can use CSS classes to describe the slide transition - add these classes to the CSS in "),e("code",[t._v("App.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-css line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".slide-enter-active")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" all 0.3s ease"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".slide-enter,\n.slide-leave-to")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("translateX")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("10px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("opacity")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br")])]),e("p",[t._v("Great! We have a nice animation when we add a new dog to the grid. But there are no effects on delete. There is a "),e("code",[t._v("-move")]),t._v(" class, which is added when items are changing positions. Like the other classes, its prefix will match the value of a provided "),e("code",[t._v("name")]),t._v(" attribute ("),e("code",[t._v("slide")]),t._v(" in our case). So we need to add some more styles:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-css line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".slide-leave-active")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" absolute"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".slide-move")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" transform 0.5s"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Notice the "),e("code",[t._v("position: absolute")]),t._v(" on items that are leaving! It's done to remove them from the natural flow, triggering the move transition on the rest of the items.")])]),t._v(" "),e("p",[t._v("Now our list has a nice move animation after deleting its element!")]),t._v(" "),e("p",[e("strong",[t._v("🎊You've finished Supplement 2!🎊")])]),t._v(" "),e("h2",{attrs:{id:"author"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#author"}},[t._v("#")]),t._v(" Author")]),t._v(" "),e("p",[t._v("Made with ❤️ by Natalia Tepluhina, updated by Jen Looper")])])}),[],!1,null,null,null);e.default=s.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[58],{391:function(t,e,n){t.exports=n.p+"assets/img/mini2_1.97e0e6ec.png"},430:function(t,e,n){"use strict";n.r(e);var a=n(14),s=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"🖥️-1-build-a-simple-pet-fetching-web-app"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#🖥️-1-build-a-simple-pet-fetching-web-app"}},[t._v("#")]),t._v(" 🖥️ 1: Build A Simple Pet Fetching Web App")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[e("strong",[t._v("Project Goal")])]),t._v(" "),e("th",[t._v("Get started with Vue.js basics and simple API calls")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[e("strong",[t._v("What you’ll learn")])]),t._v(" "),e("td",[t._v("Setting up your Vue app, components basics, performing simple REST API calls using Axios")])]),t._v(" "),e("tr",[e("td",[e("strong",[t._v("Tools you’ll need")])]),t._v(" "),e("td",[t._v("A modern browser like Chrome. A "),e("a",{attrs:{href:"https://github.com",target:"_blank",rel:"noopener noreferrer"}},[t._v("GitHub"),e("OutboundLink")],1),t._v(" account which can be used to login to "),e("a",{attrs:{href:"https://codesandbox.io",target:"_blank",rel:"noopener noreferrer"}},[t._v("CodeSandbox"),e("OutboundLink")],1),t._v(".")])]),t._v(" "),e("tr",[e("td",[e("strong",[t._v("Time needed to complete")])]),t._v(" "),e("td",[t._v("1 hour")])]),t._v(" "),e("tr",[e("td",[e("strong",[t._v("Just want to try the app?")])]),t._v(" "),e("td",[e("a",{attrs:{href:"https://codesandbox.io/s/web-1-mini-workshop-koj8w",target:"_blank",rel:"noopener noreferrer"}},[t._v("CodeSandbox link"),e("OutboundLink")],1)])])])]),t._v(" "),e("h1",{attrs:{id:"instructions"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#instructions"}},[t._v("#")]),t._v(" Instructions")]),t._v(" "),e("h2",{attrs:{id:"scaffold-your-app"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#scaffold-your-app"}},[t._v("#")]),t._v(" Scaffold your app")]),t._v(" "),e("p",[t._v("We'll start from scratch in "),e("a",{attrs:{href:"http://codesandbox.io",target:"_blank",rel:"noopener noreferrer"}},[t._v("CodeSandbox"),e("OutboundLink")],1),t._v(". Create a CodeSandbox account and scaffold a starter Vue.js template by clicking "),e("a",{attrs:{href:"https://codesandbox.io/s/vue",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),e("OutboundLink")],1),t._v(".")]),t._v(" "),e("p",[t._v("We're going to build an application to load random dog images and store them to a favorites list:")]),t._v(" "),e("p",[e("img",{attrs:{src:n(391),alt:"random dog app"}})]),t._v(" "),e("p",[t._v("Take a look at the code that was scaffolded by CodeSandbox for a basic Vue.js app. The file "),e("code",[t._v("main.js")]),t._v(" is open by default. This is the main starting point of a Vue.js app. Note that in this file you import Vue from its npm package: "),e("code",[t._v('import Vue from "vue";')]),t._v(". CodeSandbox imports all the needed dependencies from npm to build the app. You can always check out the root "),e("code",[t._v("package.json")]),t._v(" to find out which dependencies are needed.")]),t._v(" "),e("p",[e("code",[t._v("main.js")]),t._v(" also initializes the app as a new Vue.js app and sets the div into which the app code will be injected.")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("render")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("h")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("h")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("App"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#app'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Open up "),e("code",[t._v("App.vue")]),t._v(". In this file, the 'home' component is built. It contains the three main parts of a Vue.js Single File Component (SFC): a template, a script block, and a style block.")]),t._v(" "),e("p",[t._v("Note the first div in the template block has the id of 'app' - this is the div where the app code will be injected. There's also a "),e("code",[t._v("<HelloWorld>")]),t._v(" component included underneath the logo image. This is an example of an SFC being included into "),e("code",[t._v("App.vue")]),t._v(".")]),t._v(" "),e("p",[t._v("Open "),e("code",[t._v("components/HelloWorld.vue")]),t._v(" and you'll find the source of the list of links that appears embedded in "),e("code",[t._v("App.vue")]),t._v(". This file also includes a script block with a "),e("code",[t._v("msg")]),t._v(" variable and some more styles in a "),e("code",[t._v("<style>")]),t._v(" block.")]),t._v(" "),e("p",[t._v("We're going to rip this sample app apart and recreate it! Let's get started.")]),t._v(" "),e("h2",{attrs:{id:"add-the-styles"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add-the-styles"}},[t._v("#")]),t._v(" Add the Styles")]),t._v(" "),e("p",[t._v("Let's start in "),e("code",[t._v("App.vue")]),t._v(", since we don't have to make any changes to "),e("code",[t._v("main.js")]),t._v(". Add the following style block at the bottom of the file, replacing the current "),e("code",[t._v("<style>")]),t._v(" block:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-css line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token selector"}},[t._v("<style>\nimg")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("max-width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100%"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v("h1")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding-bottom")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 15px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".dogs-layout")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100%"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #fff center repeat"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token url"}},[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://github.com/FrontEndFoxes/projects/blob/main/petshop/images/bg3.jpg?raw=true"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".dogs-overlay")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100%"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 20px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #fff"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-direction")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" column"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token atrule"}},[e("span",{pre:!0,attrs:{class:"token rule"}},[t._v("@media")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("max-width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 768px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".dogs-overlay")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".dog-card")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100%"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("max-width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 600px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n</style>\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br"),e("span",{staticClass:"line-number"},[t._v("11")]),e("br"),e("span",{staticClass:"line-number"},[t._v("12")]),e("br"),e("span",{staticClass:"line-number"},[t._v("13")]),e("br"),e("span",{staticClass:"line-number"},[t._v("14")]),e("br"),e("span",{staticClass:"line-number"},[t._v("15")]),e("br"),e("span",{staticClass:"line-number"},[t._v("16")]),e("br"),e("span",{staticClass:"line-number"},[t._v("17")]),e("br"),e("span",{staticClass:"line-number"},[t._v("18")]),e("br"),e("span",{staticClass:"line-number"},[t._v("19")]),e("br"),e("span",{staticClass:"line-number"},[t._v("20")]),e("br"),e("span",{staticClass:"line-number"},[t._v("21")]),e("br"),e("span",{staticClass:"line-number"},[t._v("22")]),e("br"),e("span",{staticClass:"line-number"},[t._v("23")]),e("br"),e("span",{staticClass:"line-number"},[t._v("24")]),e("br"),e("span",{staticClass:"line-number"},[t._v("25")]),e("br"),e("span",{staticClass:"line-number"},[t._v("26")]),e("br"),e("span",{staticClass:"line-number"},[t._v("27")]),e("br"),e("span",{staticClass:"line-number"},[t._v("28")]),e("br"),e("span",{staticClass:"line-number"},[t._v("29")]),e("br"),e("span",{staticClass:"line-number"},[t._v("30")]),e("br"),e("span",{staticClass:"line-number"},[t._v("31")]),e("br"),e("span",{staticClass:"line-number"},[t._v("32")]),e("br"),e("span",{staticClass:"line-number"},[t._v("33")]),e("br"),e("span",{staticClass:"line-number"},[t._v("34")]),e("br"),e("span",{staticClass:"line-number"},[t._v("35")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Notice we don't use "),e("code",[t._v("<scoped>")]),t._v(" as part of the style block. The 'scoped' keyword ensures that your styles will remain valid only for the current SFC, but we're going to make these styles universal.")])]),t._v(" "),e("p",[t._v("This style block uses a path to an external image hosted on Github, rather than to a relative path. This is because CodeSandbox doesn't host images easily; normally you'd just add an image on a relative path such as "),e("code",[t._v("/images/myImage.png")]),t._v(".")]),t._v(" "),e("p",[t._v("Adding the stylesheet didn't do much to our template except break the existing styles. Let's fix the template!")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("☕️ Take a break! ☕️")]),t._v(" "),e("p",[t._v("Now's a great time to join a breakout room if you're joining us on Zoom!")])]),t._v(" "),e("h2",{attrs:{id:"install-vuetify"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#install-vuetify"}},[t._v("#")]),t._v(" Install Vuetify")]),t._v(" "),e("p",[t._v("Before we edit the template, we're going to install Vuetify. Vuetify is a cool library that gives a Material Design styling to your Vue apps.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Vuetify is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components for building your application. You can find full documentation for it "),e("a",{attrs:{href:"https://vuetifyjs.com/en/getting-started/quick-start",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),e("OutboundLink")],1)])]),t._v(" "),e("p",[t._v("Install it by clicking the 'Add Dependency' button in the Dependency dropdown area on the left in CodeSandbox. Search for 'Vuetify'.")]),t._v(" "),e("p",[t._v("Then click on the library in the list to install it.")]),t._v(" "),e("p",[t._v("Check whether the dependency is installed by opening "),e("code",[t._v("package.json")]),t._v(' and checking the "dependencies" object. It should look like this:')]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-json line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-json"}},[e("code",[e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"dependencies"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"vue"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.6.10"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v('"vuetify"')]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"^2.0.19"')]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br")])]),e("p",[t._v("Vuetify works via a plugin structure. In the "),e("code",[t._v("/src")]),t._v(" folder of your project, create a new folder called "),e("code",[t._v("plugins")]),t._v(" and inside that a new file called "),e("code",[t._v("vuetify.js")]),t._v(".")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("In CodeSandbox, right click on the new folder to create a new file. Be careful to create these new assets in the "),e("code",[t._v("/src")]),t._v(" folder!")])]),t._v(" "),e("p",[t._v("In the new "),e("code",[t._v("vuetify.js")]),t._v(" file, add this code to bootstrap the plugin:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Vue "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Vuetify "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vuetify'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vuetify/dist/vuetify.min.css'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nVue"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Vuetify"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vuetify")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br")])]),e("p",[t._v("Next, initialize Vuetify by opening "),e("code",[t._v("main.js")]),t._v(" and adding these lines under the second "),e("code",[t._v("import")]),t._v(" (line 3):")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" vuetify "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/plugins/vuetify'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Then, change the Vue initialization at the bottom of "),e("code",[t._v("main.js")]),t._v(" to this:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tvuetify"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("render")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("h")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("h")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("App"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#app'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br")])]),e("p",[t._v("This ensures that Vuetify's themes and components will be available throughout the Vue app.")]),t._v(" "),e("p",[t._v("We are going to use icons in this app, so we also have to add Material icons into the "),e("code",[t._v("head")]),t._v(" part of the "),e("code",[t._v("index.html")]),t._v(" file. This file is in the "),e("code",[t._v("public")]),t._v(" folder. Insert this line after the "),e("code",[t._v("<title>")]),t._v(" tag:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("link")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("rel")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylesheet"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Let's also change the page title to "),e("code",[t._v("Dog Lover")]),t._v(". To do so, we have to change the content of the "),e("code",[t._v("title")]),t._v(" tag:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("title")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Dog Lover"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("title")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Then, overwrite the current template in "),e("code",[t._v("App.vue")]),t._v(" with this markup:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-app")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-main")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dogs-layout"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-container")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("fill-height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dogs-overlay"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("h1")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("display-2 text-xs-center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Choose your favorite dogs"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("h1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-card")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dog-card"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("400px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-img")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-card-actions")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-spacer")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-spacer")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-btn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("favorite"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-btn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("forward"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-card-actions")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-card")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-container")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-main")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-app")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br"),e("span",{staticClass:"line-number"},[t._v("11")]),e("br"),e("span",{staticClass:"line-number"},[t._v("12")]),e("br"),e("span",{staticClass:"line-number"},[t._v("13")]),e("br"),e("span",{staticClass:"line-number"},[t._v("14")]),e("br"),e("span",{staticClass:"line-number"},[t._v("15")]),e("br"),e("span",{staticClass:"line-number"},[t._v("16")]),e("br"),e("span",{staticClass:"line-number"},[t._v("17")]),e("br"),e("span",{staticClass:"line-number"},[t._v("18")]),e("br"),e("span",{staticClass:"line-number"},[t._v("19")]),e("br"),e("span",{staticClass:"line-number"},[t._v("20")]),e("br"),e("span",{staticClass:"line-number"},[t._v("21")]),e("br"),e("span",{staticClass:"line-number"},[t._v("22")]),e("br"),e("span",{staticClass:"line-number"},[t._v("23")]),e("br")])]),e("p",[t._v("Your app should refresh (if it doesn't, use the manual refresh button in the app preview address bar). Wow, that made a big change!")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Note the use of "),e("code",[t._v("<v-app>")]),t._v(" in this template markup - this is a requirement of Vuetify and is a sure sign you'll have a Vuetify-themed app. We're also using a bunch of Vuetify layout elements like "),e("code",[t._v("v-container")]),t._v(" and UI components like "),e("code",[t._v("v-card")]),t._v(" and "),e("code",[t._v("v-btn")]),t._v(".")])]),t._v(" "),e("h2",{attrs:{id:"add-some-data"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add-some-data"}},[t._v("#")]),t._v(" Add some data")]),t._v(" "),e("p",[t._v("At this point, we need to start populating our UI with some data. First thing we want to do is to display a dog image inside our "),e("code",[t._v("v-card")]),t._v(". Let's add a static link just to test how it looks. In "),e("code",[t._v("App.vue")]),t._v("'s template, change the "),e("code",[t._v("src")]),t._v(" property of "),e("code",[t._v("v-img")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("400px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("https://images.dog.ceo/breeds/chihuahua/n02085620_3407.jpg"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-img")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("How cute! 🐶")]),t._v(" "),e("p",[t._v("But the idea is to make this link dynamic, so it's time to create your first Vue variable. First, you have to add "),e("code",[t._v("data()")]),t._v(" to your Vue component. This function should return an object of our Vue variables. Let's create one in the "),e("code",[t._v("<script>")]),t._v(" block. Overwrite the current "),e("code",[t._v("<script>")]),t._v(" block in "),e("code",[t._v("App.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentDogLink")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("At this point you can remove the "),e("code",[t._v("HelloWorld.vue")]),t._v(" file from the "),e("code",[t._v("components")]),t._v(" folder as we won't need it. Right-click the file in CodeSandbox and click 'delete'.")])]),t._v(" "),e("p",[t._v("Now you have a variable called "),e("code",[t._v("currentDogLink")]),t._v(" and its default value is an empty string. We will use this variable to provide a link to a current dog in "),e("code",[t._v("v-img")]),t._v(". First, we will set the "),e("code",[t._v("currentDogLink")]),t._v(" value by overwriting the data block we just added in "),e("code",[t._v("App.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentDogLink")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://images.dog.ceo/breeds/chihuahua/n02085620_3407.jpg"')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br")])]),e("p",[t._v("Now we have to change the template to make the "),e("code",[t._v("src")]),t._v(" property "),e("em",[t._v("dynamic")]),t._v(" so it can use the value of the variable we just populated above. To do this we need a "),e("code",[t._v("v-bind")]),t._v(" directive or its shortcut, "),e("code",[t._v(":")]),t._v(". Again in "),e("code",[t._v("App.vue")]),t._v(", edit the "),e("code",[t._v("<v-img>")]),t._v(" tag to remove its hard-coded value:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("400px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentDogLink"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-img")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("The "),e("code",[t._v("v-bind")]),t._v(" directive dynamically binds one or more attributes, or a component prop to an expression. That little "),e("code",[t._v(":")]),t._v(" makes all the difference!")])]),t._v(" "),e("p",[t._v("Great! Now it's time to load some dogs from an API!")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("☕️ Take a break! ☕️")]),t._v(" "),e("p",[t._v("Now's a great time to join a breakout room if you're joining us on Zoom!")])]),t._v(" "),e("h2",{attrs:{id:"add-axios"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add-axios"}},[t._v("#")]),t._v(" Add Axios")]),t._v(" "),e("p",[t._v("To perform API calls we will need a library called "),e("a",{attrs:{href:"https://github.com/axios/axios",target:"_blank",rel:"noopener noreferrer"}},[t._v("Axios"),e("OutboundLink")],1),t._v(". It's a promise-based HTTP client that works both in the browser and in other node.js environments.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Originally, Vue supported its own way of making API calls using .ajax; but this resource was deprecated as Axios's standalone library worked very well for this purpose, removing the need for an integrated solution. Read more about this decision "),e("a",{attrs:{href:"https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),e("OutboundLink")],1),t._v(".")])]),t._v(" "),e("p",[t._v("First, add Axios's library to your project dependencies. To do so in CodeSandbox, click on the "),e("code",[t._v("Add Dependency")]),t._v(" button and search for "),e("code",[t._v("axios")]),t._v(". Install the latest version.")]),t._v(" "),e("p",[t._v("Import Axios into the component where we will perform our API call - "),e("code",[t._v("App.vue")]),t._v(". In that component's script block, add this line right under "),e("code",[t._v("<script>")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" axios "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'axios'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("At this point your script part of "),e("code",[t._v("App.vue")]),t._v(" should look like this:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" axios "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"axios"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentDogLink")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://images.dog.ceo/breeds/chihuahua/n02085620_3407.jpg"')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br"),e("span",{staticClass:"line-number"},[t._v("11")]),e("br")])]),e("p",[t._v("Now we are ready to load an image from the API.")]),t._v(" "),e("h2",{attrs:{id:"call-the-api"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#call-the-api"}},[t._v("#")]),t._v(" Call the API")]),t._v(" "),e("p",[t._v("Let's perform our first API call. To do so, we will create a "),e("code",[t._v("loadNewDog")]),t._v(" "),e("em",[t._v("method")]),t._v(" inside our component.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("The "),e("code",[t._v("methods")]),t._v(" property is a list of functions that hang off of an object — typically the Vue instance itself or a Vue component.")])]),t._v(" "),e("p",[t._v("Let's add it right after the "),e("code",[t._v("data")]),t._v(" function:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentDogLink")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://images.dog.ceo/breeds/chihuahua/n02085620_3407.jpg"')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadNewDog")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br")])]),e("p",[t._v("For now this method does nothing but we want it to load a new dog from the API. First we have to check which endpoint we have to use. Looking at the API's "),e("a",{attrs:{href:"https://dog.ceo/dog-api/",target:"_blank",rel:"noopener noreferrer"}},[t._v("documentation"),e("OutboundLink")],1),t._v(", we learn that we need to use "),e("code",[t._v("https://dog.ceo/api/breeds/image/random")]),t._v(" as our endpoint. It will provide a random dog image.")]),t._v(" "),e("p",[t._v("To perform a GET request Axios uses the "),e("code",[t._v("axios.get")]),t._v(" method. The result will be a JavaScript promise, so we have to provide success and failure callbacks to manage its lifecycle. For now, let's simply print the query result to console. Still in "),e("code",[t._v("App.vue")]),t._v(", edit the "),e("code",[t._v("loadNewDog(){}")]),t._v(" method by placing this snippet between the curly brackets:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v("axios\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://dog.ceo/api/breeds/image/random'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("response")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\tconsole"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("response"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("catch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("error")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\tconsole"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("error"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br")])]),e("p",[t._v("We want a new image to replace the old one right when the component is created, so let's add a "),e("code",[t._v("created()")]),t._v(" hook right after "),e("code",[t._v("methods")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("created")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Note: Make sure to add a comma after the methods object and then add the created() hook!")])]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("This is our app's first lifecycle hook! These are very useful when you want fine control over when to run blocks of code. Read more "),e("a",{attrs:{href:"https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),e("OutboundLink")],1)])]),t._v(" "),e("p",[t._v("Inside the created hook we will call our method.")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("created")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadNewDog")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Now after clicking the refresh button in the browser window, you should see an object in your console. Drill into it by clicking its left-hand arrow. We are interested in its "),e("code",[t._v("data")]),t._v(" field. You can see we have a status "),e("code",[t._v("success")]),t._v(" and a message with an image URL.")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("☕️ Take a break! ☕️")]),t._v(" "),e("p",[t._v("Now's a great time to join a breakout room if you're joining us on Zoom!")])]),t._v(" "),e("h2",{attrs:{id:"use-the-api"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#use-the-api"}},[t._v("#")]),t._v(" Use the API")]),t._v(" "),e("p",[t._v("Let's replace our "),e("code",[t._v("currentDogLink")]),t._v(" with the loaded one. At this point we can remove its static value:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentDogLink")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br")])]),e("p",[t._v("Inside the "),e("code",[t._v("loadNewDog")]),t._v(" method instead of printing result to the console we will assign "),e("code",[t._v("response.data.message")]),t._v(" (which is actually the image URL) to the "),e("code",[t._v("currentDogLink")]),t._v(" property:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadNewDog")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n axios\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://dog.ceo/api/breeds/image/random"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("response")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentDogLink "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" response"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("message"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("catch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("error")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("error"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br")])]),e("p",[t._v("Now every time you refresh the page, you will have a shiny new dog image! 🎉")]),t._v(" "),e("p",[t._v("We also want to call the same method when the 'Next' arrow is clicked. Let's add a click handler to this button. We can use the "),e("code",[t._v("v-on")]),t._v(" directive or its shortcut "),e("code",[t._v("@")]),t._v('. In the template, edit the "forward" icon '),e("code",[t._v("v-btn")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-btn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("loadNewDog"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("forward"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Now we can load new images simply by clicking on the 'Next' button.")]),t._v(" "),e("h2",{attrs:{id:"build-the-favorites-list"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#build-the-favorites-list"}},[t._v("#")]),t._v(" Build the Favorites List")]),t._v(" "),e("p",[t._v("We want to let a user add dog images to a personal list of their favorites and show the gallery of these images right below our current dog view. To store the links we need one more data property - an array called "),e("code",[t._v("favoriteDogs")]),t._v(". Let's add it right after "),e("code",[t._v("currentDogLink")]),t._v(" and make it empty by default:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentDogLink")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("favoriteDogs")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br")])]),e("p",[t._v("To display the favorite dogs we should make changes to our template. Let's add the following code snippet right after the closing "),e("code",[t._v("</v-card>")]),t._v(" tag")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-container")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("grid-list-md")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("fluid")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-layout")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("wrap")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-flex")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("xs6")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("sm4")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("md2")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-card")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dog-card"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("150px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-img")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-card-actions")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-spacer")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-spacer")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-btn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("delete"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-card-actions")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-card")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-flex")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-layout")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-container")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br"),e("span",{staticClass:"line-number"},[t._v("11")]),e("br"),e("span",{staticClass:"line-number"},[t._v("12")]),e("br"),e("span",{staticClass:"line-number"},[t._v("13")]),e("br"),e("span",{staticClass:"line-number"},[t._v("14")]),e("br"),e("span",{staticClass:"line-number"},[t._v("15")]),e("br")])]),e("p",[t._v("You can see an empty card with a 'Delete' button right after the current dog view. Now we need to find a way to show "),e("code",[t._v("favoriteDogs")]),t._v(" items inside of these cards.")]),t._v(" "),e("p",[t._v("To render a list of items based on an array Vue has a "),e("code",[t._v("v-for")]),t._v(" directive, which will iterate through this array and render each item. Let's add this directive to our opening "),e("code",[t._v("v-flex")]),t._v(" element that will show the array of favorite cards in the new container you just added:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-flex")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("xs6")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("sm4")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("md2")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(pet, index) in favoriteDogs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pet"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Here "),e("code",[t._v("pet")]),t._v(" is the reference to the "),e("em",[t._v("current array element")]),t._v(" and "),e("code",[t._v("index")]),t._v(" is the "),e("em",[t._v("index of this element")]),t._v(" inside the array.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Remember, we chose this name inside the directive; if we had written "),e("code",[t._v('v-for="(dog, number) in favoriteDogs"')]),t._v(" each item would be called "),e("code",[t._v("dog")]),t._v(" and its index would be called "),e("code",[t._v("number")]),t._v(").")])]),t._v(" "),e("p",[t._v("To properly loop over your array of favorite dogs and append another one, you need to provide a unique key attribute for each item. In our case, the "),e("code",[t._v("pet")]),t._v(" itself will be the key.")]),t._v(" "),e("p",[t._v("You can see that our empty card disappeared. It's fine! We have an empty "),e("code",[t._v("favoriteDogs")]),t._v(" array so there's simply nothing to render right now.")]),t._v(" "),e("p",[t._v("One thing left to do is to bind "),e("code",[t._v("pet")]),t._v(" (which will be the image link) to the "),e("code",[t._v("src")]),t._v(" property of the "),e("code",[t._v("v-img")]),t._v(" component in the cards you're building:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("150px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pet"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-img")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Now it's time to like some dogs 💖🐶!")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("☕️ Take a break! ☕️")]),t._v(" "),e("p",[t._v("Now's a great time to join a breakout room if you're joining us on Zoom!")])]),t._v(" "),e("h2",{attrs:{id:"adding-dogs-to-favorites"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#adding-dogs-to-favorites"}},[t._v("#")]),t._v(" Adding Dogs to Favorites")]),t._v(" "),e("p",[t._v("We will create a new method called "),e("code",[t._v("addToFavorites")]),t._v(". It will add the value of "),e("code",[t._v("currentDogLink")]),t._v(" to the "),e("code",[t._v("favoriteDogs")]),t._v(" array (JavaScript has a "),e("code",[t._v("push")]),t._v(" array method for this purpose). Let's place it after the "),e("code",[t._v("loadNewDog")]),t._v(" one "),e("em",[t._v("(don't miss the comma!)")])]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("addToFavorites")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("favoriteDogs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentDogLink"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("And of course we need to bind it to the 'Like' button in the top card:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-btn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("addToFavorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("favorite"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Now try to click on the 'favorite' button! You can see how our gallery is filling with the dogs' images 🖼️")]),t._v(" "),e("p",[t._v("There is one issue: now we can add one image a few times. To prevent this we should check if the "),e("code",[t._v("currentDogLink")]),t._v(" is already inside the "),e("code",[t._v("favoriteDogs")]),t._v(" array and if it's is, we will disable the 'favorite' button. Instead of placing this complex logic inside the template, we will create a "),e("em",[t._v("computed")]),t._v(" property.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Computed properties can be used to do quick calculations of properties that are displayed in the view. These calculations will be cached and will only update when their dependencies are changed.")])]),t._v(" "),e("p",[t._v("Let's add "),e("code",[t._v("computed")]),t._v(" right after the "),e("code",[t._v("created()")]),t._v(" hook (don't forget the comma after the close of "),e("code",[t._v("created()")]),t._v(") and create a property named "),e("code",[t._v("isAlreadyInFavorites")]),t._v(" in it.")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v(" "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("isAlreadyInFavorites")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Any computed property should be a function returning the result of calculations. Let's check the index of "),e("code",[t._v("currentDogLink")]),t._v(" inside the "),e("code",[t._v("favoriteDogs")]),t._v(" array. If it is greater than -1 (in other words if the array contains such an element), the function will return "),e("code",[t._v("true")]),t._v(", otherwise it will return "),e("code",[t._v("false")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("isAlreadyInFavorites")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("favoriteDogs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("indexOf")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentDogLink"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br")])]),e("p",[t._v("Now we can add a dynamic "),e("code",[t._v("disabled")]),t._v(" attribute to the 'Like' button in the top card and set it equal to "),e("code",[t._v("isAlreadyInFavorites")]),t._v(".")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-btn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("addToFavorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":disabled")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("isAlreadyInFavorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("favorite"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Try to add the dog to favorites. Now you can see that the 'favorite' icon is greyed-out and you cannot click it again.")]),t._v(" "),e("h2",{attrs:{id:"removing-dogs-from-favorites"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removing-dogs-from-favorites"}},[t._v("#")]),t._v(" Removing Dogs from Favorites")]),t._v(" "),e("p",[t._v("What if you stopped liking one of the dogs' images? In this unlikely event, you will need a way to remove it from the "),e("code",[t._v("favoriteDogs")]),t._v(" array. We need one more method for this, so let's add it after the "),e("code",[t._v("addToFavorites")]),t._v(" (add a comma after "),e("code",[t._v("addToFavorites")]),t._v(" closing bracket):")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeFromFavorites")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Of course we should specify somehow what dog we want to remove from the array. Fortunately, we have the "),e("code",[t._v("index")]),t._v(" parameter. Let's pass it to our method and remove the element with the given index from the "),e("code",[t._v("favoriteDogs")]),t._v(" array:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeFromFavorites")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("index")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("favoriteDogs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("splice")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Here the splice() method changes the contents of an array by removing existing elements. The first argument is the index of the element we want to start with and the second argument is the number of elements we want to remove.")])]),t._v(" "),e("p",[t._v("Now we have to bind this new method to the 'Delete' button with a click handler:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-btn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("removeFromFavorites(index)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("delete"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Don't forget to pass "),e("code",[t._v("index")]),t._v(" to the "),e("code",[t._v("removeFromFavorites")]),t._v(" method! When we don't pass any parameters, we can simply skip the brackets as we did for the "),e("code",[t._v("addToFavorites")]),t._v(" method.")])]),t._v(" "),e("p",[t._v("Try to add and remove some dogs from favorites. IT WORKS!")]),t._v(" "),e("p",[e("strong",[t._v("🎊Congratulations, you've finished the base project!🎊")])]),t._v(" "),e("h2",{attrs:{id:"push-your-work-to-a-repository-on-your-github-account"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#push-your-work-to-a-repository-on-your-github-account"}},[t._v("#")]),t._v(" Push your work to a repository on your GitHub account")]),t._v(" "),e("p",[e("strong",[t._v("Step 1")]),t._v(": In CodeSandbox, click the Github icon in the sidebar, and grant permissions if necessary.")]),t._v(" "),e("p",[e("strong",[t._v("Step 2")]),t._v(": Enter a name for your repository.")]),t._v(" "),e("p",[e("strong",[t._v("Step 3")]),t._v(": Click create repository.")]),t._v(" "),e("h2",{attrs:{id:"supplement-1-creating-a-dog-component"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#supplement-1-creating-a-dog-component"}},[t._v("#")]),t._v(" Supplement 1: Creating a Dog Component")]),t._v(" "),e("p",[t._v("At this point we want to abstract a single dog card from the Favorites grid into a separate component to learn how parent and child components communicate.")]),t._v(" "),e("p",[t._v("We have a "),e("code",[t._v("components")]),t._v(" folder but for now it's empty. Let's create a new file here and name it "),e("code",[t._v("Dog.vue")]),t._v(".")]),t._v(" "),e("p",[t._v("Open this file and add "),e("code",[t._v("<template></template>")]),t._v(" and "),e("code",[t._v("<script><\/script>")]),t._v(" tags. Now our file looks this way:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}}),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Now copy the whole "),e("code",[t._v("v-card")]),t._v(" component that contains the favorite dogs (it's near the bottom, and has the css class "),e("code",[t._v("dog-card")]),t._v(") from "),e("code",[t._v("App.vue")]),t._v(" and paste it inside the template tag. You can delete it from "),e("code",[t._v("App.vue")]),t._v(".")]),t._v(" "),e("p",[t._v("We now need a way to pass the dog image we want to view from the parent to the child. To do so, Vue uses "),e("code",[t._v("props")]),t._v(".")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a _prop_erty on that component instance. In our case the "),e("code",[t._v("Dog")]),t._v(" component will have a "),e("code",[t._v("dog")]),t._v(" property, passed from its parent "),e("code",[t._v("App")]),t._v(" component.")])]),t._v(" "),e("p",[t._v("Let's add a "),e("code",[t._v("props")]),t._v(" option to our "),e("code",[t._v("Dog.vue")]),t._v(" component. First, we need to create an export statement inside our "),e("code",[t._v("script")]),t._v(" tag (so later we will be able to import our "),e("code",[t._v("Dog")]),t._v(" component inside the "),e("code",[t._v("App")]),t._v(" one). Add this code block to "),e("code",[t._v("Dog.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Now we can add a "),e("code",[t._v("props")]),t._v(" option to this object and a prop "),e("code",[t._v("dog")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("props")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("dog")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br")])]),e("p",[t._v("Here we are also specifying the type of our dog - it will be a string containing the dog image URL.")]),t._v(" "),e("p",[t._v("In our template in "),e("code",[t._v("Dog.vue")]),t._v(" we should replace "),e("code",[t._v("pet")]),t._v(" with "),e("code",[t._v("dog")]),t._v(", because we don't have any "),e("code",[t._v("pet")]),t._v("s inside the "),e("code",[t._v("Dog")]),t._v(" component, only a passed "),e("code",[t._v("dog")]),t._v(" property. Now our template should look like this:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-card")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dog-card"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("150px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dog"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-img")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-card-actions")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-spacer")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-spacer")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-btn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("removeFromFavorites(index)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("delete"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-icon")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-card-actions")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-card")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br"),e("span",{staticClass:"line-number"},[t._v("11")]),e("br")])]),e("p",[t._v("Now let's move back to our "),e("code",[t._v("App.vue")]),t._v(" component and make some changes. First of all we should import our newly created "),e("code",[t._v("Dog")]),t._v(" component into "),e("code",[t._v("App.vue")]),t._v(". Add this string before the "),e("code",[t._v("export default")]),t._v(" statement in the "),e("code",[t._v("<script>")]),t._v(" block:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Dog "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./components/Dog'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Now we have to 'explain' to the "),e("code",[t._v("App")]),t._v(" component that it has a child component inside it. Vue uses a "),e("code",[t._v("components")]),t._v(" option for this. Let's add a component option above the "),e("code",[t._v("data()")]),t._v(" one:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("components")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("appDog")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Dog\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentDogLink")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("favoriteDogs")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("For each property in the components object, the key will be the name of the custom element, while the value will contain the options object for the component")])]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("For the component name you can either use a camel-case ("),e("code",[t._v("appDog")]),t._v(") or kebab-case ("),e("code",[t._v("'app-dog'")]),t._v("). Keep in mind that a camel-case name will be 'translated' to kebab-case in HTML tag names. So we will use the HTML custom tag "),e("code",[t._v("<app-dog>")]),t._v(" and it will render a "),e("code",[t._v("Dog")]),t._v(" component")])]),t._v(" "),e("p",[t._v("In "),e("code",[t._v("App.vue")]),t._v(", place the custom tag in the space where you deleted the card earlier, overwriting the "),e("code",[t._v("<v-flex>")]),t._v(" tag:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-flex")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("xs6")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("sm4")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("md2")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(pet, index) in favoriteDogs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pet"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("app-dog")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("app-dog")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-flex")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("We have to pass a "),e("code",[t._v("dog")]),t._v(" prop to our "),e("code",[t._v("Dog")]),t._v(" component. It will be done with the familiar "),e("code",[t._v("v-bind")]),t._v(" directive (remember, you can use its "),e("code",[t._v(":")]),t._v(" shortcut). Edit the code you just added to "),e("code",[t._v("App.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-flex")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("xs6")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("sm4")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("md2")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(pet, index) in favoriteDogs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pet"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("app-dog")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":dog")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pet"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@remove")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("removeFromFavorites(index)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("app-dog")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-flex")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Now if you try to add a dog to Favorites you will see the dogs in the grid again! But we have one issue: deleting a dog will cause a bunch of errors in console. The reason is we don't have a "),e("code",[t._v("removeFromFavorites")]),t._v(" method inside the "),e("code",[t._v("Dog.vue")]),t._v(" and it knows nothing about "),e("code",[t._v("index")]),t._v(" as well.")]),t._v(" "),e("p",[t._v("Instead of using the method, we will replace it with an "),e("em",[t._v("event emitter")]),t._v(" to the "),e("code",[t._v("delete")]),t._v(" button inside the Dog component.")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-btn")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("icon")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("$emit('remove')"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("By using "),e("code",[t._v("$emit")]),t._v(", we are sending a message to our parent component (in this case it's "),e("code",[t._v("App.vue")]),t._v("): 'Hi, something is happening here! Please read this message and react to it'.")]),t._v(" "),e("p",[t._v("Now when the "),e("code",[t._v("Dog")]),t._v(" component emits the "),e("code",[t._v("remove")]),t._v(" event (i.e. on 'Delete' button click), its parent "),e("code",[t._v("App")]),t._v(" component will call "),e("code",[t._v("removeFromFavorites")]),t._v(" method (which removes a certain dog from its favorites array).")]),t._v(" "),e("p",[e("strong",[t._v("🎊You've finished Supplement 1!🎊")])]),t._v(" "),e("h2",{attrs:{id:"supplement-2-add-animations"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#supplement-2-add-animations"}},[t._v("#")]),t._v(" Supplement 2: Add Animations")]),t._v(" "),e("p",[t._v("Now let's make our application more appealing by adding some animation effects to it.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Vue provides a "),e("code",[t._v("transition")]),t._v(" wrapper component, allowing you to add entering/leaving transitions for any element or component in the following contexts:")]),t._v(" "),e("ul",[e("li",[t._v("Conditional rendering (using "),e("code",[t._v("v-if")]),t._v(")")]),t._v(" "),e("li",[t._v("Conditional display (using "),e("code",[t._v("v-show")]),t._v(")")]),t._v(" "),e("li",[t._v("Dynamic components")]),t._v(" "),e("li",[t._v("Component root nodes")])])]),t._v(" "),e("p",[t._v("Let's try to animate the image of the current dog. First, we need to add a "),e("code",[t._v("v-if")]),t._v(" directive to it to provide the proper context for the future transition. In "),e("code",[t._v("App.vue")]),t._v(", edit the main dog's card:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-if")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentDogLink"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("400px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentDogLink"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-img")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("But now "),e("code",[t._v("currentDogLink")]),t._v(" will always return "),e("code",[t._v("true")]),t._v("! Let's set it to the empty string every time we're clicking the 'Next' button, so before the next image is loaded, "),e("code",[t._v("currentDogLink")]),t._v(" will return "),e("code",[t._v("false")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadNewDog")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentDogLink "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n axios"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://dog.ceo/api/breeds/image/random"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("response")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentDogLink "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" response"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("data"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("message"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br")])]),e("p",[t._v("Now you can observe this ugly effect: the image disappears every time the user clicks 'Next'. We will fix it with the fade animation effect. Let's wrap the "),e("code",[t._v("v-img")]),t._v(" in a "),e("code",[t._v("<transition>")]),t._v(" tag and provide it with a name attribute "),e("code",[t._v("fade")]),t._v(".")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("transition")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fade"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-if")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentDogLink"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("400px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentDogLink"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-img")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("transition")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("This will give us a bunch of CSS classes starting from "),e("code",[t._v("fade-")]),t._v(". There will be "),e("code",[t._v("enter")]),t._v("/"),e("code",[t._v("leave")]),t._v(" which is the position that the animation starts with on the first frame, "),e("code",[t._v("enter-active")]),t._v("/"),e("code",[t._v("leave-active")]),t._v(" while the animation is running - this is the one you’d place the animation properties themselves on, and "),e("code",[t._v("enter-to")]),t._v("/"),e("code",[t._v("leave-to")]),t._v(", which specifies where the element should be on the last frame.")]),t._v(" "),e("p",[t._v("Now that we have our hooks, we can create the transition using them. Edit the CSS in "),e("code",[t._v("App.vue")]),t._v(" by adding the following classes:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-css line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".fade-enter-active,\n.fade-leave-active")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" opacity 1s ease"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".fade-enter,\n.fade-leave-to")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("opacity")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br")])]),e("p",[t._v("The "),e("code",[t._v(".fade-enter-active")]),t._v(" and "),e("code",[t._v(".fade-leave-active")]),t._v(" classes will be where we apply the actual transition. This isn't anything Vue-specific - just normal CSS. The "),e("code",[t._v("ease")]),t._v(" property specifies a transition effect with a slow start, then fast, then ending slowly.")]),t._v(" "),e("p",[t._v("Now you can see that the dog picture has a nice fade effect when you click 'next'!")]),t._v(" "),e("p",[t._v("Let's also add some effects to our favorite dogs grid. To animate the list rendered with "),e("code",[t._v("v-for")]),t._v(", Vue uses the "),e("code",[t._v("transition-group")]),t._v(" tag.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Unlike "),e("code",[t._v("<transition>")]),t._v(", "),e("code",[t._v("transition-group")]),t._v(" renders an actual element: a "),e("code",[t._v("<span>")]),t._v(" by default. You can change the element that’s rendered with the tag attribute.\nElements inside are "),e("em",[t._v("always")]),t._v(" required to have a unique key attribute")])]),t._v(" "),e("p",[t._v("In "),e("code",[t._v("App.vue")]),t._v(", replace the "),e("code",[t._v("<v-layout>")]),t._v(" component surrounding the "),e("code",[t._v("<app-dog>")]),t._v(" nested component with "),e("code",[t._v("v-transition-group")]),t._v(" and provide it with a proper tag attribute and class:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("transition-group")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("slide"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("tag")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("v-layout"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("wrap"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("v-flex")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("xs6")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("sm4")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("md2")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(pet, index) in favoriteDogs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pet"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("app-dog")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":dog")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("pet"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@remove")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("removeFromFavorites(index)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("app-dog")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("v-flex")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("transition-group")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br")])]),e("p",[e("code",[t._v("transition-group")]),t._v(" will render as a "),e("code",[t._v("v-layout")]),t._v(" component now. The class "),e("code",[t._v("wrap")]),t._v(" is needed to wrap grid elements to the next row (it replaces the "),e("code",[t._v("wrap")]),t._v(" attribute of "),e("code",[t._v("v-layout")]),t._v("). We also gave our new transition a name "),e("code",[t._v("slide")]),t._v(".")]),t._v(" "),e("p",[t._v("Now we can use CSS classes to describe the slide transition - add these classes to the CSS in "),e("code",[t._v("App.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-css line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".slide-enter-active")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" all 0.3s ease"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".slide-enter,\n.slide-leave-to")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("translateX")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("10px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("opacity")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br")])]),e("p",[t._v("Great! We have a nice animation when we add a new dog to the grid. But there are no effects on delete. There is a "),e("code",[t._v("-move")]),t._v(" class, which is added when items are changing positions. Like the other classes, its prefix will match the value of a provided "),e("code",[t._v("name")]),t._v(" attribute ("),e("code",[t._v("slide")]),t._v(" in our case). So we need to add some more styles:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-css line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".slide-leave-active")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" absolute"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".slide-move")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" transform 0.5s"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Notice the "),e("code",[t._v("position: absolute")]),t._v(" on items that are leaving! It's done to remove them from the natural flow, triggering the move transition on the rest of the items.")])]),t._v(" "),e("p",[t._v("Now our list has a nice move animation after deleting its element!")]),t._v(" "),e("p",[e("strong",[t._v("🎊You've finished Supplement 2!🎊")])]),t._v(" "),e("h2",{attrs:{id:"author"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#author"}},[t._v("#")]),t._v(" Author")]),t._v(" "),e("p",[t._v("Made with ❤️ by Natalia Tepluhina, updated by Jen Looper")])])}),[],!1,null,null,null);e.default=s.exports}}]); \ No newline at end of file diff --git a/assets/js/59.9b5570f0.js b/assets/js/59.38e95dc8.js similarity index 99% rename from assets/js/59.9b5570f0.js rename to assets/js/59.38e95dc8.js index 1db130d..ad3ada3 100644 --- a/assets/js/59.9b5570f0.js +++ b/assets/js/59.38e95dc8.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[59],{391:function(t,e,n){t.exports=n.p+"assets/img/minifox_1.547b2f58.png"},430:function(t,e,n){"use strict";n.r(e);var a=n(14),s=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"🖥️-2-build-a-simple-fox-liking-web-app-with-grid-styling"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#🖥️-2-build-a-simple-fox-liking-web-app-with-grid-styling"}},[t._v("#")]),t._v(" 🖥️ 2: Build A Simple Fox Liking Web App with Grid Styling")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[e("strong",[t._v("Project Goal")])]),t._v(" "),e("th",[t._v("Get started with Vue.js basics and simple API calls")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[e("strong",[t._v("What you’ll learn")])]),t._v(" "),e("td",[t._v("Setting up your Vue app, components basics, performing simple REST API calls using fetch")])]),t._v(" "),e("tr",[e("td",[e("strong",[t._v("Tools you’ll need")])]),t._v(" "),e("td",[t._v("A modern browser like Chrome. A "),e("a",{attrs:{href:"https://github.com",target:"_blank",rel:"noopener noreferrer"}},[t._v("GitHub"),e("OutboundLink")],1),t._v(" account which can be used to login to "),e("a",{attrs:{href:"https://codesandbox.io",target:"_blank",rel:"noopener noreferrer"}},[t._v("CodeSandbox"),e("OutboundLink")],1),t._v(".")])]),t._v(" "),e("tr",[e("td",[e("strong",[t._v("Time needed to complete")])]),t._v(" "),e("td",[t._v("1 hour + refactor time")])]),t._v(" "),e("tr",[e("td",[e("strong",[t._v("Just want to try the app?")])]),t._v(" "),e("td",[e("a",{attrs:{href:"https://codesandbox.io/s/web-2-mini-workshop-zq436",target:"_blank",rel:"noopener noreferrer"}},[t._v("CodeSandbox link"),e("OutboundLink")],1)])])])]),t._v(" "),e("h1",{attrs:{id:"instructions"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#instructions"}},[t._v("#")]),t._v(" Instructions")]),t._v(" "),e("h2",{attrs:{id:"scaffold-your-app"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#scaffold-your-app"}},[t._v("#")]),t._v(" Scaffold your app")]),t._v(" "),e("p",[t._v("We'll start from scratch in "),e("a",{attrs:{href:"http://codesandbox.io",target:"_blank",rel:"noopener noreferrer"}},[t._v("CodeSandbox"),e("OutboundLink")],1),t._v(". Create a CodeSandbox account and scaffold a starter Vue.js template by clicking "),e("a",{attrs:{href:"https://codesandbox.io/s/vue",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),e("OutboundLink")],1),t._v(".")]),t._v(" "),e("p",[t._v("We're going to build an application to load random fox images and store them to a favorites list:")]),t._v(" "),e("p",[e("img",{attrs:{src:n(391),alt:"random fox app"}})]),t._v(" "),e("p",[t._v("Take a look at the code that was scaffolded by CodeSandbox for a basic Vue.js app. The file "),e("code",[t._v("main.js")]),t._v(" is open by default. This is the main starting point of a Vue.js app. Note that in this file you import Vue from its npm package: "),e("code",[t._v('import Vue from "vue";')]),t._v(". CodeSandbox imports all the needed dependencies from npm to build the app. You can always check out the root "),e("code",[t._v("package.json")]),t._v(" to find out which dependencies are needed.")]),t._v(" "),e("p",[e("code",[t._v("main.js")]),t._v(" also initializes the app as a new Vue.js app and sets the div into which the app code will be injected.")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("render")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("h")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("h")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("App"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#app'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("blockquote",[e("p",[t._v("Note, since we are using the 'Vue' sandbox template from CodeSandbox, we scaffolded a default Vue 2 app. This workshop will also work with the Vue 3 sandbox since the Vue 2 Options API is supported in Vue 3, but the above code snippet will look different:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language- line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("import { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br")])])]),t._v(" "),e("p",[t._v("Open up "),e("code",[t._v("App.vue")]),t._v(". In this file, the 'home' component is built. It contains the three main parts of a Vue.js Single File Component (SFC): a template, a script block, and a style block.")]),t._v(" "),e("p",[t._v("Note the first div in the template block has the id of 'app' - this is the div where the app code will be injected. There's also a "),e("code",[t._v("<HelloWorld>")]),t._v(" component included underneath the logo image. This is an example of an SFC being included into "),e("code",[t._v("App.vue")]),t._v(".")]),t._v(" "),e("p",[t._v("Open "),e("code",[t._v("components/HelloWorld.vue")]),t._v(" and you'll find the source of the list of links that appears embedded in "),e("code",[t._v("App.vue")]),t._v(". This file also includes a script block with a "),e("code",[t._v("msg")]),t._v(" variable and some more styles in a "),e("code",[t._v("<style>")]),t._v(" block.")]),t._v(" "),e("p",[t._v("We're going to rip this sample app apart and recreate it! Let's get started.")]),t._v(" "),e("h2",{attrs:{id:"add-the-styles"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add-the-styles"}},[t._v("#")]),t._v(" Add the Styles")]),t._v(" "),e("p",[t._v("Let's start in "),e("code",[t._v("App.vue")]),t._v(", since we don't have to make any changes to "),e("code",[t._v("main.js")]),t._v(". This is a Vue SFC, or 'Single File Component'. It has three 'blocks': a template block for HTML, a script block for JavaScript, and a style block for CSS. Add the following style block at the bottom of the file, replacing the current "),e("code",[t._v("<style>")]),t._v(" block:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-css line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token selector"}},[t._v("<style>\nbody")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgb")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("255"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 102"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-family")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" arial"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgb")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("71"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 36"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 23"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token url"}},[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string url"}},[t._v("\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ff9999' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\"")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".app")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" grid"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-template-columns")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1fr 1fr"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-template-rows")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" auto 500px 100px 1fr"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-template-areas")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"title title"')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"card card"')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"fav next"')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"favorites favorites"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".title")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-area")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" title"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2em"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".card")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-area")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" card"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" block"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100%"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("max-width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 400px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 500px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" auto"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-radius")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 8px solid white"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("object-fit")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" cover"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("overflow")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" hidden"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" white"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 70px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 70px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 20px 5px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 8px solid white"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-radius")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50%"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" bold"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" transparent"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("cursor")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" pointer"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v("button:disabled")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("opacity")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0.5"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".next")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-area")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" next"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token url"}},[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://github.com/FrontEndFoxes/curriculum/blob/main/workshops/vue/minis/images/next.jpeg?raw=true"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v("\n center no-repeat"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 70px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".fav")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-area")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" fav"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token url"}},[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://github.com/FrontEndFoxes/curriculum/blob/main/workshops/vue/minis/images/heart.png?raw=true"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v("\n no-repeat center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 70px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("justify-self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" end"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".fav:hover,\n.next:hover")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("opacity")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0.5"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v("h2")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".favorites")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-area")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" favorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("overflow-y")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" auto"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".favorites-list")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-wrap")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" wrap"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("justify-content")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".favorites-item")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" relative"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("list-style")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 15px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".favorites-img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 150px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 150px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("object-fit")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" cover"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".remove")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" absolute"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("bottom")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" -8px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("right")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" -15px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 30px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 30px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px solid white"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token url"}},[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://github.com/FrontEndFoxes/curriculum/blob/main/workshops/vue/minis/images/x.png?raw=true"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v("\n #F44F63 center no-repeat"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n</style>\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br"),e("span",{staticClass:"line-number"},[t._v("11")]),e("br"),e("span",{staticClass:"line-number"},[t._v("12")]),e("br"),e("span",{staticClass:"line-number"},[t._v("13")]),e("br"),e("span",{staticClass:"line-number"},[t._v("14")]),e("br"),e("span",{staticClass:"line-number"},[t._v("15")]),e("br"),e("span",{staticClass:"line-number"},[t._v("16")]),e("br"),e("span",{staticClass:"line-number"},[t._v("17")]),e("br"),e("span",{staticClass:"line-number"},[t._v("18")]),e("br"),e("span",{staticClass:"line-number"},[t._v("19")]),e("br"),e("span",{staticClass:"line-number"},[t._v("20")]),e("br"),e("span",{staticClass:"line-number"},[t._v("21")]),e("br"),e("span",{staticClass:"line-number"},[t._v("22")]),e("br"),e("span",{staticClass:"line-number"},[t._v("23")]),e("br"),e("span",{staticClass:"line-number"},[t._v("24")]),e("br"),e("span",{staticClass:"line-number"},[t._v("25")]),e("br"),e("span",{staticClass:"line-number"},[t._v("26")]),e("br"),e("span",{staticClass:"line-number"},[t._v("27")]),e("br"),e("span",{staticClass:"line-number"},[t._v("28")]),e("br"),e("span",{staticClass:"line-number"},[t._v("29")]),e("br"),e("span",{staticClass:"line-number"},[t._v("30")]),e("br"),e("span",{staticClass:"line-number"},[t._v("31")]),e("br"),e("span",{staticClass:"line-number"},[t._v("32")]),e("br"),e("span",{staticClass:"line-number"},[t._v("33")]),e("br"),e("span",{staticClass:"line-number"},[t._v("34")]),e("br"),e("span",{staticClass:"line-number"},[t._v("35")]),e("br"),e("span",{staticClass:"line-number"},[t._v("36")]),e("br"),e("span",{staticClass:"line-number"},[t._v("37")]),e("br"),e("span",{staticClass:"line-number"},[t._v("38")]),e("br"),e("span",{staticClass:"line-number"},[t._v("39")]),e("br"),e("span",{staticClass:"line-number"},[t._v("40")]),e("br"),e("span",{staticClass:"line-number"},[t._v("41")]),e("br"),e("span",{staticClass:"line-number"},[t._v("42")]),e("br"),e("span",{staticClass:"line-number"},[t._v("43")]),e("br"),e("span",{staticClass:"line-number"},[t._v("44")]),e("br"),e("span",{staticClass:"line-number"},[t._v("45")]),e("br"),e("span",{staticClass:"line-number"},[t._v("46")]),e("br"),e("span",{staticClass:"line-number"},[t._v("47")]),e("br"),e("span",{staticClass:"line-number"},[t._v("48")]),e("br"),e("span",{staticClass:"line-number"},[t._v("49")]),e("br"),e("span",{staticClass:"line-number"},[t._v("50")]),e("br"),e("span",{staticClass:"line-number"},[t._v("51")]),e("br"),e("span",{staticClass:"line-number"},[t._v("52")]),e("br"),e("span",{staticClass:"line-number"},[t._v("53")]),e("br"),e("span",{staticClass:"line-number"},[t._v("54")]),e("br"),e("span",{staticClass:"line-number"},[t._v("55")]),e("br"),e("span",{staticClass:"line-number"},[t._v("56")]),e("br"),e("span",{staticClass:"line-number"},[t._v("57")]),e("br"),e("span",{staticClass:"line-number"},[t._v("58")]),e("br"),e("span",{staticClass:"line-number"},[t._v("59")]),e("br"),e("span",{staticClass:"line-number"},[t._v("60")]),e("br"),e("span",{staticClass:"line-number"},[t._v("61")]),e("br"),e("span",{staticClass:"line-number"},[t._v("62")]),e("br"),e("span",{staticClass:"line-number"},[t._v("63")]),e("br"),e("span",{staticClass:"line-number"},[t._v("64")]),e("br"),e("span",{staticClass:"line-number"},[t._v("65")]),e("br"),e("span",{staticClass:"line-number"},[t._v("66")]),e("br"),e("span",{staticClass:"line-number"},[t._v("67")]),e("br"),e("span",{staticClass:"line-number"},[t._v("68")]),e("br"),e("span",{staticClass:"line-number"},[t._v("69")]),e("br"),e("span",{staticClass:"line-number"},[t._v("70")]),e("br"),e("span",{staticClass:"line-number"},[t._v("71")]),e("br"),e("span",{staticClass:"line-number"},[t._v("72")]),e("br"),e("span",{staticClass:"line-number"},[t._v("73")]),e("br"),e("span",{staticClass:"line-number"},[t._v("74")]),e("br"),e("span",{staticClass:"line-number"},[t._v("75")]),e("br"),e("span",{staticClass:"line-number"},[t._v("76")]),e("br"),e("span",{staticClass:"line-number"},[t._v("77")]),e("br"),e("span",{staticClass:"line-number"},[t._v("78")]),e("br"),e("span",{staticClass:"line-number"},[t._v("79")]),e("br"),e("span",{staticClass:"line-number"},[t._v("80")]),e("br"),e("span",{staticClass:"line-number"},[t._v("81")]),e("br"),e("span",{staticClass:"line-number"},[t._v("82")]),e("br"),e("span",{staticClass:"line-number"},[t._v("83")]),e("br"),e("span",{staticClass:"line-number"},[t._v("84")]),e("br"),e("span",{staticClass:"line-number"},[t._v("85")]),e("br"),e("span",{staticClass:"line-number"},[t._v("86")]),e("br"),e("span",{staticClass:"line-number"},[t._v("87")]),e("br"),e("span",{staticClass:"line-number"},[t._v("88")]),e("br"),e("span",{staticClass:"line-number"},[t._v("89")]),e("br"),e("span",{staticClass:"line-number"},[t._v("90")]),e("br"),e("span",{staticClass:"line-number"},[t._v("91")]),e("br"),e("span",{staticClass:"line-number"},[t._v("92")]),e("br"),e("span",{staticClass:"line-number"},[t._v("93")]),e("br"),e("span",{staticClass:"line-number"},[t._v("94")]),e("br"),e("span",{staticClass:"line-number"},[t._v("95")]),e("br"),e("span",{staticClass:"line-number"},[t._v("96")]),e("br"),e("span",{staticClass:"line-number"},[t._v("97")]),e("br"),e("span",{staticClass:"line-number"},[t._v("98")]),e("br"),e("span",{staticClass:"line-number"},[t._v("99")]),e("br"),e("span",{staticClass:"line-number"},[t._v("100")]),e("br"),e("span",{staticClass:"line-number"},[t._v("101")]),e("br"),e("span",{staticClass:"line-number"},[t._v("102")]),e("br"),e("span",{staticClass:"line-number"},[t._v("103")]),e("br"),e("span",{staticClass:"line-number"},[t._v("104")]),e("br"),e("span",{staticClass:"line-number"},[t._v("105")]),e("br"),e("span",{staticClass:"line-number"},[t._v("106")]),e("br"),e("span",{staticClass:"line-number"},[t._v("107")]),e("br"),e("span",{staticClass:"line-number"},[t._v("108")]),e("br"),e("span",{staticClass:"line-number"},[t._v("109")]),e("br"),e("span",{staticClass:"line-number"},[t._v("110")]),e("br"),e("span",{staticClass:"line-number"},[t._v("111")]),e("br"),e("span",{staticClass:"line-number"},[t._v("112")]),e("br"),e("span",{staticClass:"line-number"},[t._v("113")]),e("br"),e("span",{staticClass:"line-number"},[t._v("114")]),e("br"),e("span",{staticClass:"line-number"},[t._v("115")]),e("br"),e("span",{staticClass:"line-number"},[t._v("116")]),e("br"),e("span",{staticClass:"line-number"},[t._v("117")]),e("br"),e("span",{staticClass:"line-number"},[t._v("118")]),e("br"),e("span",{staticClass:"line-number"},[t._v("119")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Notice we don't use "),e("code",[t._v("<scoped>")]),t._v(" as part of the style block. The 'scoped' keyword ensures that your styles will remain valid only for the current SFC, but we're going to make these styles universal.")])]),t._v(" "),e("blockquote",[e("p",[t._v("This style block uses some paths to external images hosted on GitHub, rather than to a relative path. This is because it's a bit time consuming to host images on CodeSandbox. Normally you'd just add an image on a relative path to images hosted in the app.")])]),t._v(" "),e("p",[t._v("This stylesheet is an example of using CSS Grid and Flexbox in a basic responsive layout populated by cards. It also uses "),e("code",[t._v("grid-templates")]),t._v(" in the "),e("code",[t._v(".app")]),t._v(" styles, which are worth taking a minute to look at. This styling identifies 'grid template areas' and builds the page as a two column layout with the title, card, and favorites areas spanning the 'fav' and 'next' areas, where the two action buttons live. Take a minute to walk through the CSS and understand how it's built.")]),t._v(" "),e("p",[t._v("Adding the stylesheet didn't do much to our template except add colors to the text and the background pattern. Let's fix the template!")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("☕️ Take a break! ☕️")]),t._v(" "),e("p",[t._v("Now's a great time to join a breakout room if you're joining us on Zoom!")])]),t._v(" "),e("h2",{attrs:{id:"edit-the-html"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#edit-the-html"}},[t._v("#")]),t._v(" Edit the HTML")]),t._v(" "),e("p",[t._v("In a Vue app, there is usually a 'public' folder where assets are kept that are "),e("em",[t._v("not")]),t._v(" bundled by the Webpack bundler that works behind the scenes to parse Single File Components (the ones with the "),e("code",[t._v(".vue")]),t._v(" suffix). Find the public folder and edit the "),e("code",[t._v("index.html")]),t._v(" file. There's not much to do but to change the page title to "),e("code",[t._v("Fox Lover")]),t._v(". To do so, we have to change the content of the "),e("code",[t._v("title")]),t._v(" tag:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("title")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Fox Lover"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("title")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v('Notice the existence of the div with the id "app". Here\'s where the component content is injected during the build process.')]),t._v(" "),e("p",[t._v("Now, let's go to work in "),e("code",[t._v("App.vue")]),t._v(". Let's edit the template block. Overwrite the current template in "),e("code",[t._v("App.vue")]),t._v(" with this markup:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("h1")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("title"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("🦊 Choose your favorite foxes! 🦊"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("h1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("alt")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("So floofy!"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("card"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fav"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Fave"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("next"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Next"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br")])]),e("p",[t._v("Save your changes, and your app should refresh (if it doesn't, use the manual refresh button in the app preview address bar). Now, you can see an h1 title, a card, and two buttons.")]),t._v(" "),e("h2",{attrs:{id:"add-some-data"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add-some-data"}},[t._v("#")]),t._v(" Add some data")]),t._v(" "),e("p",[t._v("At this point, we need to start populating our UI with some data. The first thing we want to do is to display a fox image inside our card. Let's add a static link just to test how it looks. In "),e("code",[t._v("App.vue")]),t._v("'s template, change the "),e("code",[t._v("src")]),t._v(" property of "),e("code",[t._v("img")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("card"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("alt")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("So floofy!"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("https://randomfox.ca/images/21.jpg"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("How cute! 🦊")]),t._v(" "),e("p",[t._v("But the idea is to make this image dynamic, so it's time to create your first Vue variable. First, you have to add "),e("code",[t._v("data()")]),t._v(" to your Vue component. This function should return an object of our Vue variables. Let's create one in the "),e("code",[t._v("<script>")]),t._v(" block. Overwrite the current "),e("code",[t._v("<script>")]),t._v(" block in "),e("code",[t._v("App.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentFoxUrl")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("At this point you can remove the "),e("code",[t._v("HelloWorld.vue")]),t._v(" file from the "),e("code",[t._v("components")]),t._v(" folder as we won't need it. Right-click the file in CodeSandbox and click 'delete'.")])]),t._v(" "),e("p",[t._v("Now you have a variable called "),e("code",[t._v("currentFoxUrl")]),t._v(" and its default value is null. We will use this variable to provide a url to a current fox to populate "),e("code",[t._v("img")]),t._v(". First, we will set the "),e("code",[t._v("currentFoxUrl")]),t._v(" value by overwriting the data block we just added in "),e("code",[t._v("App.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentFoxUrl")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://randomfox.ca/images/21.jpg"')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br")])]),e("p",[t._v("Now we have to change the template to make the image's "),e("code",[t._v("src")]),t._v(" property "),e("em",[t._v("dynamic")]),t._v(" so it can use the value of the variable we just populated above. To do this we need a "),e("code",[t._v("v-bind")]),t._v(" directive or its shortcut, "),e("code",[t._v(":")]),t._v(". Again in "),e("code",[t._v("App.vue")]),t._v(", edit the "),e("code",[t._v("img")]),t._v(" tag to remove its hard-coded value:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[t._v(" "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("card"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("alt")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("So floofy!"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentFoxUrl"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("The "),e("code",[t._v("v-bind")]),t._v(" directive dynamically binds one or more attributes, or a component prop to an expression. That little "),e("code",[t._v(":")]),t._v(" shortcut makes all the difference!")])]),t._v(" "),e("p",[t._v("Great! Now it's time to load some foxes from an API!")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("☕️ Take a break! ☕️")]),t._v(" "),e("p",[t._v("Now's a great time to join a breakout room if you're joining us on Zoom!")])]),t._v(" "),e("h2",{attrs:{id:"call-an-api"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#call-an-api"}},[t._v("#")]),t._v(" Call an API")]),t._v(" "),e("p",[t._v("To perform API calls we will use a built-in library called "),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch",target:"_blank",rel:"noopener noreferrer"}},[t._v("fetch"),e("OutboundLink")],1),t._v(". It's a promise-based HTTP client that works both in the browser and in other node.js environments.")]),t._v(" "),e("p",[t._v("Let's perform our first API call. To do so, we will create a "),e("code",[t._v("loadNewFox")]),t._v(" "),e("em",[t._v("method")]),t._v(" inside our component.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("The "),e("code",[t._v("methods")]),t._v(" property is a list of functions that hang off of an object — typically the Vue instance itself or a Vue component.")])]),t._v(" "),e("p",[t._v("Let's add it right after the "),e("code",[t._v("data")]),t._v(" function:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentFoxUrl")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://randomfox.ca/images/21.jpg"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadFox")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br")])]),e("p",[t._v("For now this method does nothing, but we want it to load a new fox from the "),e("a",{attrs:{href:"https://randomfox.ca",target:"_blank",rel:"noopener noreferrer"}},[t._v("randomfox.ca API"),e("OutboundLink")],1),t._v(". First we have to check which endpoint we have to use. Looking at the "),e("a",{attrs:{href:"https://randomfox.ca/floof/",target:"_blank",rel:"noopener noreferrer"}},[t._v("API"),e("OutboundLink")],1),t._v(", we learn that we need to use "),e("code",[t._v("https://randomfox.ca/floof")]),t._v(" as our endpoint. It will provide a random fox image.")]),t._v(" "),e("p",[t._v("To query this very simple API, we will perform a GET request via fetch. We will wrap our function with "),e("code",[t._v("async")]),t._v(" and "),e("code",[t._v("await")]),t._v(" to ensure that the front end awaits the result of the image fetch nicely. For now, let's simply print the query result to console. Still in "),e("code",[t._v("App.vue")]),t._v(", overwrite the "),e("code",[t._v("loadFox(){}")]),t._v(" method by placing this snippet between the curly brackets:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v(" "),e("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("loadFox")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" response "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://randomfox.ca/floof/"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foxData "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" response"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("json")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("foxData"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br")])]),e("p",[t._v("We want a new image to replace the old one right when the component is created, so let's add a "),e("code",[t._v("created()")]),t._v(" hook right after "),e("code",[t._v("methods")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("created")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Note: Make sure to add a comma after the methods object and then add the created() hook!")])]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("This is our app's first lifecycle hook! These are very useful when you want fine control over when to run blocks of code. Read more "),e("a",{attrs:{href:"https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),e("OutboundLink")],1)])]),t._v(" "),e("p",[t._v("Inside the created hook we will call our method.")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("created")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadFox")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Now after clicking the refresh button in the browser window, you should see a JSON object in your console. Drill into it by clicking its left-hand arrow. We are interested in its "),e("code",[t._v("image")]),t._v(" field. This is the fox image URL.")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("☕️ Take a break! ☕️")]),t._v(" "),e("p",[t._v("Now's a great time to join a breakout room if you're joining us on Zoom!")])]),t._v(" "),e("h2",{attrs:{id:"use-the-api"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#use-the-api"}},[t._v("#")]),t._v(" Use the API")]),t._v(" "),e("p",[t._v("Let's replace our "),e("code",[t._v("currentFoxUrl")]),t._v(" with the loaded one. At this point we can remove its static value:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentFoxUrl")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br")])]),e("p",[t._v("Inside the "),e("code",[t._v("loadFox")]),t._v(" method instead of printing result to the console we will assign its "),e("code",[t._v("response")]),t._v(", formatted with json (this is actually the image URL) to the "),e("code",[t._v("currentFoxUrl")]),t._v(" property:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("loadFox")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" response "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://randomfox.ca/floof/"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foxData "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" response"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("json")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentFoxUrl "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" foxData"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("image"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br")])]),e("p",[t._v("Now every time you refresh the page, you will have a shiny new fox image! 🎉")]),t._v(" "),e("p",[t._v("We also want to call the same method when the 'Next' arrow is clicked. Let's add a click handler to this button. We can use the "),e("code",[t._v("v-on")]),t._v(" directive or its shortcut "),e("code",[t._v("@")]),t._v('. In the template, edit the "next" button\'s html:')]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("loadFox"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("next"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Next"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Now we can load new images simply by clicking the 'Next' button.")]),t._v(" "),e("h2",{attrs:{id:"build-the-favorites-list"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#build-the-favorites-list"}},[t._v("#")]),t._v(" Build the Favorites List")]),t._v(" "),e("p",[t._v("We want to let a user add fox images to a personal list of their favorites and show the gallery of these images right below our current fox view. To store the links we need one more data property - an array called "),e("code",[t._v("favorites")]),t._v(". Let's add it right after "),e("code",[t._v("currentFoxUrl")]),t._v(" and make it empty by default:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentFoxUrl")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("favorites")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br")])]),e("p",[t._v("To display the favorite foxes we should make changes to our template. Let's add the following code snippet right after the Next button's closing "),e("code",[t._v("</button>")]),t._v(" tag")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("section")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("h2")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Favorite Floofs"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("h2")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ul")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-list"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-item"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-img"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("remove"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Remove"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("li")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("ul")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("section")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br"),e("span",{staticClass:"line-number"},[t._v("11")]),e("br")])]),e("p",[t._v("You can see an empty card with a 'Delete' button right after the current fox view buttons. Now we need to find a way to show "),e("code",[t._v("favorites")]),t._v(" inside these cards.")]),t._v(" "),e("p",[t._v("To render a list of items based on an array, Vue has a "),e("code",[t._v("v-for")]),t._v(" directive, which will iterate through this array and render each item. Let's add this directive to our opening "),e("code",[t._v("li")]),t._v(" element that will show the array of favorite cards in the new container you just added:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(floof, index) in favorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("floof"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-item"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Here "),e("code",[t._v("floof")]),t._v(" is the reference to the "),e("em",[t._v("current array element")]),t._v(" and "),e("code",[t._v("index")]),t._v(" is the "),e("em",[t._v("index of this element")]),t._v(" inside the array.")]),t._v(" "),e("blockquote",[e("p",[t._v("Note: there's an error at this point in console, because "),e("code",[t._v("index")]),t._v(" is not yet defined. We'll fix it in a minute")])]),t._v(" "),e("p",[t._v("To properly loop over your array of favorite foxes and append another one, you need to provide a unique key attribute for each item. In our case, the "),e("code",[t._v("floof")]),t._v(" reference will be the key.")]),t._v(" "),e("p",[t._v("You can see that our empty card disappeared. It's fine! We have an empty "),e("code",[t._v("favorites")]),t._v(" array so there's simply nothing to render right now.")]),t._v(" "),e("p",[t._v("One thing left to do is to bind "),e("code",[t._v("floof")]),t._v(" (which will be the image link) to the "),e("code",[t._v("src")]),t._v(" property of the image element in the cards you're building:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("alt")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("nice fox"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("floof"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-img"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Now it's time to like some foxes 💖🦊!")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("☕️ Take a break! ☕️")]),t._v(" "),e("p",[t._v("Now's a great time to join a breakout room if you're joining us on Zoom!")])]),t._v(" "),e("h2",{attrs:{id:"adding-foxes-to-favorites"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#adding-foxes-to-favorites"}},[t._v("#")]),t._v(" Adding Foxes to Favorites")]),t._v(" "),e("p",[t._v("We will create a new method called "),e("code",[t._v("addFave")]),t._v(". It will add the value of "),e("code",[t._v("currentFoxUrl")]),t._v(" to the "),e("code",[t._v("favorites")]),t._v(" array (JavaScript has a "),e("code",[t._v("push")]),t._v(" array method for this purpose). Let's place it after the "),e("code",[t._v("loadFox")]),t._v(" one "),e("em",[t._v("(don't miss the comma!)")])]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("addFave")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("favorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentFoxUrl"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("And of course we need to bind it to the 'Like' button in the top card:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("addFave"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fav"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Fave"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Now try to click on the 'favorite' button! You can see how our gallery is filling with the fox images 🖼️")]),t._v(" "),e("p",[t._v("There is one issue: now we can add one image many times. To prevent this we should check if the "),e("code",[t._v("currentFoxUrl")]),t._v(" is already inside the "),e("code",[t._v("favorites")]),t._v(" array and if it is, we will disable the 'favorite' button. Instead of placing this complex logic inside the template, we will create a "),e("em",[t._v("computed")]),t._v(" property.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Computed properties can be used to do quick calculations of properties that are displayed in the view. These calculations will be cached and will only update when their dependencies are changed.")])]),t._v(" "),e("p",[t._v("Let's add "),e("code",[t._v("computed")]),t._v(" right after the "),e("code",[t._v("data")]),t._v(" function (don't forget the comma after the close of "),e("code",[t._v("data")]),t._v(") and create a property named "),e("code",[t._v("isAlreadyInFavorites")]),t._v(" in it:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v(" "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("isAlreadyInFavorites")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Any computed property should be a function returning the result of calculations. Let's check the index of "),e("code",[t._v("currentFoxUrl")]),t._v(" inside the "),e("code",[t._v("favorites")]),t._v(" array. If it is greater than -1 (in other words if the array contains such an element), the function will return "),e("code",[t._v("true")]),t._v(", otherwise it will return "),e("code",[t._v("false")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("isAlreadyInFavorites")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("favorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("indexOf")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentFoxUrl"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br")])]),e("p",[t._v("Now we can add a dynamic "),e("code",[t._v("disabled")]),t._v(" attribute to the 'Fave' button in the top card and set it equal to "),e("code",[t._v("isAlreadyInFavorites")]),t._v(".")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("addFave"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":disabled")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("isAlreadyInFavorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fav"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Fave"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Try to add a fox to your favorites list. Now you can see that the 'fave' image is greyed-out and you cannot click it again.")]),t._v(" "),e("h2",{attrs:{id:"removing-foxes-from-favorites"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removing-foxes-from-favorites"}},[t._v("#")]),t._v(" Removing Foxes from Favorites")]),t._v(" "),e("p",[t._v("What if you stopped liking one of the fox images? In this unlikely event, you will need a way to remove it from the "),e("code",[t._v("favorites")]),t._v(" array. We need one more method for this, so let's add it after the "),e("code",[t._v("addFave")]),t._v(" (add a comma after "),e("code",[t._v("addFave")]),t._v(" closing bracket):")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeFave")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Of course we should specify somehow what fox we want to remove from the array. Fortunately, we have the "),e("code",[t._v("index")]),t._v(" parameter. Let's pass it to our method and remove the element with the given index from the "),e("code",[t._v("favorites")]),t._v(" array:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeFave")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("index")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("favorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("splice")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Here the splice() method changes the contents of an array by removing existing elements. The first argument is the index of the element we want to start with and the second argument is the number of elements we want to remove.")])]),t._v(" "),e("p",[t._v("Now we have to bind this new method to the 'Delete' button with a click handler:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("removeFave(index)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("remove"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Remove"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("blockquote",[e("p",[t._v("Note, you may have noticed the error has gone away, because we finally are making use of "),e("code",[t._v("index")]),t._v(" - passing it to the method on button click.")])]),t._v(" "),e("p",[t._v("Try to add and remove some foxes from favorites. IT WORKS!")]),t._v(" "),e("p",[e("strong",[t._v("🎊Congratulations, you've finished the base project!🎊")])]),t._v(" "),e("h2",{attrs:{id:"push-your-work-to-a-repository-on-your-github-account"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#push-your-work-to-a-repository-on-your-github-account"}},[t._v("#")]),t._v(" Push your work to a repository on your GitHub account")]),t._v(" "),e("p",[e("strong",[t._v("Step 1")]),t._v(": In CodeSandbox, click the GitHub icon in the sidebar, and grant permissions if necessary.")]),t._v(" "),e("p",[e("strong",[t._v("Step 2")]),t._v(": Enter a name for your repository.")]),t._v(" "),e("p",[e("strong",[t._v("Step 3")]),t._v(": Click "),e("code",[t._v("create repository")]),t._v(".")]),t._v(" "),e("h2",{attrs:{id:"refactor-1-creating-a-fox-component"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#refactor-1-creating-a-fox-component"}},[t._v("#")]),t._v(" Refactor 1: Creating a Fox Component")]),t._v(" "),e("p",[t._v("At this point we want to abstract a single fox card from the favorites grid into a separate component to learn how parent and child components communicate.")]),t._v(" "),e("p",[t._v("We have a "),e("code",[t._v("components")]),t._v(" folder but for now it's empty. Let's create a new file here and name it "),e("code",[t._v("Fox.vue")]),t._v(".")]),t._v(" "),e("p",[t._v("Open this file and add "),e("code",[t._v("<template></template>")]),t._v(" and "),e("code",[t._v("<script><\/script>")]),t._v(" tags. Now our file looks this way:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}}),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Now copy the image and delete button area that contains the favorite foxes from "),e("code",[t._v("App.vue")]),t._v(" and paste it inside the template block. You can delete it from "),e("code",[t._v("App.vue")]),t._v(". Paste it into the template in "),e("code",[t._v("Fox.vue")]),t._v(" with a surrounding "),e("code",[t._v("<span>")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[t._v(" "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fox"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-img"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("removeFave(index)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("remove"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Remove"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("span")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br")])]),e("blockquote",[e("p",[t._v("Note, you need to add this span tag as in Vue 2 you need to surround all template html with at least one surrounding tag.")])]),t._v(" "),e("p",[t._v("We now need a way to pass the fox image we want to view from the parent to the child. To do so, Vue uses "),e("code",[t._v("props")]),t._v(".")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a _prop_erty on that component instance. In our case the "),e("code",[t._v("Fox")]),t._v(" component will have a "),e("code",[t._v("fox")]),t._v(" property, passed from its parent "),e("code",[t._v("App")]),t._v(" component.")]),t._v(" "),e("p",[t._v("✨Remember!✨ Props down, events up!")])]),t._v(" "),e("p",[t._v("Let's add a "),e("code",[t._v("props")]),t._v(" option to our "),e("code",[t._v("Fox.vue")]),t._v(" component. First, we need to create an export statement inside our "),e("code",[t._v("script")]),t._v(" tag (so later we will be able to import our "),e("code",[t._v("Fox")]),t._v(" component inside the "),e("code",[t._v("App")]),t._v(" one). Add this code block to "),e("code",[t._v("Fox.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Now we can add a "),e("code",[t._v("props")]),t._v(" option to this object and a prop "),e("code",[t._v("fox")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("props")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fox")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br")])]),e("p",[t._v("Here we are also specifying the type of our fox - it will be a string containing the fox image URL.")]),t._v(" "),e("p",[t._v("Now let's move back to our "),e("code",[t._v("App.vue")]),t._v(" component and make some changes. First of all we should import our newly created "),e("code",[t._v("Fox")]),t._v(" component into "),e("code",[t._v("App.vue")]),t._v(". Add this string before the "),e("code",[t._v("export default")]),t._v(" statement in the "),e("code",[t._v("<script>")]),t._v(" block:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Fox "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./components/Fox'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Now we have to 'explain' to the "),e("code",[t._v("App")]),t._v(" component that it has a child component inside it. Vue uses a "),e("code",[t._v("components")]),t._v(" option for this. Let's add a component option above the "),e("code",[t._v("data()")]),t._v(" one:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("components")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("appFox")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Fox\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentFoxUrl")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("favorites")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("For each property in the components object, the key will be the name of the custom element, while the value will contain the options object for the component")])]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("For the component name you can either use a camel-case ("),e("code",[t._v("appFox")]),t._v(") or kebab-case ("),e("code",[t._v("app-fox")]),t._v("). Keep in mind that a camel-case name will be 'translated' to kebab-case in HTML tag names. So we will use the HTML custom tag "),e("code",[t._v("<app-fox>")]),t._v(" and it will render a "),e("code",[t._v("Fox")]),t._v(" component")])]),t._v(" "),e("p",[t._v("In "),e("code",[t._v("App.vue")]),t._v(", place the custom tag in the space where you deleted the card earlier:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[t._v("\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("app-fox")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("app-fox")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("We have to pass a "),e("code",[t._v("fox")]),t._v(" prop to our "),e("code",[t._v("Fox")]),t._v(" component. It will be done with the familiar "),e("code",[t._v("v-bind")]),t._v(" directive (remember, you can use its "),e("code",[t._v(":")]),t._v(" shortcut). Edit the code you just added to "),e("code",[t._v("App.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ul")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-list"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(floof, index) in favorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("floof"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-item"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("app-fox")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":fox")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("floof"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@remove")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("removeFave(index)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("app-fox")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("li")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("ul")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br")])]),e("p",[t._v("Now if you try to add a fox to Favorites you will see the foxes in the grid again! But we have one issue: deleting a fox will cause a bunch of errors in console. The reason is we don't have a "),e("code",[t._v("removeFave")]),t._v(" method inside the "),e("code",[t._v("Fox.vue")]),t._v(" and it knows nothing about "),e("code",[t._v("index")]),t._v(" as well.")]),t._v(" "),e("p",[t._v("Instead of using the method, we will add an "),e("em",[t._v("event emitter")]),t._v(" to the "),e("code",[t._v("delete")]),t._v(" button inside the Fox component.")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("$emit('remove')"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("remove"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Remove"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("By using "),e("code",[t._v("$emit")]),t._v(", we are sending a message to our parent component (in this case it's "),e("code",[t._v("App.vue")]),t._v("): 'Hi, something is happening here! Please read this message and react to it'.")]),t._v(" "),e("p",[t._v("Now when the "),e("code",[t._v("Fox")]),t._v(" component emits the "),e("code",[t._v("remove")]),t._v(" event (i.e. on the 'Delete' button click), its parent "),e("code",[t._v("App")]),t._v(" component will call the "),e("code",[t._v("removeFave")]),t._v(" method (which removes a certain fox from the favorites array).")]),t._v(" "),e("p",[e("strong",[t._v("🎊You've finished Refactor 1!🎊")])]),t._v(" "),e("h2",{attrs:{id:"refactor-2-add-animations"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#refactor-2-add-animations"}},[t._v("#")]),t._v(" Refactor 2: Add Animations")]),t._v(" "),e("p",[t._v("Now let's make our application more appealing by adding some animation effects to it.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Vue provides a "),e("code",[t._v("transition")]),t._v(" wrapper component, allowing you to add entering/leaving transitions for any element or component in the following contexts:")]),t._v(" "),e("ul",[e("li",[t._v("Conditional rendering (using "),e("code",[t._v("v-if")]),t._v(")")]),t._v(" "),e("li",[t._v("Conditional display (using "),e("code",[t._v("v-show")]),t._v(")")]),t._v(" "),e("li",[t._v("Dynamic components")]),t._v(" "),e("li",[t._v("Component root nodes")])])]),t._v(" "),e("p",[t._v("Let's try to animate the image of the current fox. First, we need to add a "),e("code",[t._v("v-if")]),t._v(" directive to it to provide the proper context for the future transition. In "),e("code",[t._v("App.vue")]),t._v(", edit the main fox's card:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-if")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentFoxUrl"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("card"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("alt")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("So floofy!"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentFoxUrl"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br")])]),e("p",[t._v("But now "),e("code",[t._v("currentFoxUrl")]),t._v(" will always return "),e("code",[t._v("true")]),t._v("! Let's set it to an empty string in the loadFox() method so that every time we click the 'Next' button, so before the next image is loaded, "),e("code",[t._v("currentFoxUrl")]),t._v(" will return "),e("code",[t._v("false")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("loadFox")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentFoxUrl "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" response "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://randomfox.ca/floof/"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foxData "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" response"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("json")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentFoxUrl "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" foxData"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("image"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br")])]),e("p",[t._v("Now you can observe this ugly effect: the image disappears every time the user clicks 'Next'. We will fix it with the fade animation effect. Let's wrap the image in a "),e("code",[t._v("<transition>")]),t._v(" tag and provide it with a name attribute "),e("code",[t._v("fade")]),t._v(".")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("transition")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fade"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-if")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentFoxUrl"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("card"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("alt")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("So floofy!"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentFoxUrl"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("transition")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br")])]),e("p",[t._v("This will give us a bunch of CSS classes starting from "),e("code",[t._v("fade-")]),t._v(". There will be "),e("code",[t._v("enter")]),t._v("/"),e("code",[t._v("leave")]),t._v(" which is the position that the animation starts with on the first frame, "),e("code",[t._v("enter-active")]),t._v("/"),e("code",[t._v("leave-active")]),t._v(" while the animation is running - this is the one you’d place the animation properties themselves on, and "),e("code",[t._v("enter-to")]),t._v("/"),e("code",[t._v("leave-to")]),t._v(", which specifies where the element should be on the last frame.")]),t._v(" "),e("p",[t._v("Now that we have our hooks, we can create the transition using them. Edit the CSS in "),e("code",[t._v("App.vue")]),t._v(" by adding the following classes:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-css line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".fade-enter-active,\n.fade-leave-active")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" opacity 1s ease"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".fade-enter,\n.fade-leave-to")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("opacity")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br")])]),e("p",[t._v("The "),e("code",[t._v(".fade-enter-active")]),t._v(" and "),e("code",[t._v(".fade-leave-active")]),t._v(" classes will be where we apply the actual transition. This isn't anything Vue-specific - just normal CSS. The "),e("code",[t._v("ease")]),t._v(" property specifies a transition effect with a slow start, then fast, then ending slowly.")]),t._v(" "),e("p",[t._v("Now you can see that the fox picture has a nice fade effect when you click 'next'!")]),t._v(" "),e("p",[t._v("Let's also add some effects to our favorite fox grid. To animate the list rendered with "),e("code",[t._v("v-for")]),t._v(", Vue uses the "),e("code",[t._v("transition-group")]),t._v(" tag.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Unlike "),e("code",[t._v("<transition>")]),t._v(", "),e("code",[t._v("transition-group")]),t._v(" renders an actual element: a "),e("code",[t._v("<span>")]),t._v(" by default. You can change the element that’s rendered with the tag attribute.\nElements inside are "),e("em",[t._v("always")]),t._v(" required to have a unique key attribute.")])]),t._v(" "),e("p",[t._v("In "),e("code",[t._v("App.vue")]),t._v(", surround the ul element surrounding the "),e("code",[t._v("<app-fox>")]),t._v(" nested component with "),e("code",[t._v("transition-group")]),t._v(" and provide it with a proper tag attribute and class:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("transition-group")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-listwrap favorites-list"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("slide"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("tag")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ul"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(floof, index) in favorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("floof"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-item"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("app-fox")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":fox")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("floof"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@remove")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("removeFave(index)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("app-fox")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("li")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("transition-group")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br"),e("span",{staticClass:"line-number"},[t._v("11")]),e("br"),e("span",{staticClass:"line-number"},[t._v("12")]),e("br")])]),e("p",[t._v("With the "),e("code",[t._v("tag")]),t._v(", "),e("code",[t._v("transition-group")]),t._v(" will render as a "),e("code",[t._v("ul")]),t._v(" component now. The class "),e("code",[t._v("wrap")]),t._v(" is needed to wrap the grid elements to the next row (it replaces the "),e("code",[t._v("wrap")]),t._v(" attribute of "),e("code",[t._v("ul")]),t._v("). We also gave our new transition a name, "),e("code",[t._v("slide")]),t._v(".")]),t._v(" "),e("p",[t._v("Now we can use CSS classes to describe the slide transition - add these classes to the CSS in "),e("code",[t._v("App.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-css line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".slide-enter-active")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" all 0.3s ease"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".slide-enter,\n.slide-leave-to")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("translateX")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("10px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("opacity")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br")])]),e("p",[t._v("Great! We have a nice animation when we add a new fox to the grid. But there are no effects on delete. There is a "),e("code",[t._v("-move")]),t._v(" class, which is added when items are changing positions. Like the other classes, its prefix will match the value of a provided "),e("code",[t._v("name")]),t._v(" attribute ("),e("code",[t._v("slide")]),t._v(" in our case). So we need to add some more styles:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-css line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".slide-leave-active")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" absolute"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" all 0.3s ease"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".slide-move")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" transform 0.5s"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Notice the "),e("code",[t._v("position: absolute")]),t._v(" on items that are leaving! It's done to remove them from the natural flow, triggering the move transition on the rest of the items.")])]),t._v(" "),e("p",[t._v("Now our list has a move animation after deleting its element!")]),t._v(" "),e("p",[e("strong",[t._v("🎊You've finished Refactor 2!🎊")])]),t._v(" "),e("h2",{attrs:{id:"authors"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#authors"}},[t._v("#")]),t._v(" Authors")]),t._v(" "),e("p",[t._v("Made with ❤️ by Jen Looper with CSS from Jo Franchetti, from the original Mini 1 by Natalia Tepluhina, updated by Jen Looper")])])}),[],!1,null,null,null);e.default=s.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[59],{392:function(t,e,n){t.exports=n.p+"assets/img/minifox_1.547b2f58.png"},433:function(t,e,n){"use strict";n.r(e);var a=n(14),s=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"🖥️-2-build-a-simple-fox-liking-web-app-with-grid-styling"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#🖥️-2-build-a-simple-fox-liking-web-app-with-grid-styling"}},[t._v("#")]),t._v(" 🖥️ 2: Build A Simple Fox Liking Web App with Grid Styling")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[e("strong",[t._v("Project Goal")])]),t._v(" "),e("th",[t._v("Get started with Vue.js basics and simple API calls")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[e("strong",[t._v("What you’ll learn")])]),t._v(" "),e("td",[t._v("Setting up your Vue app, components basics, performing simple REST API calls using fetch")])]),t._v(" "),e("tr",[e("td",[e("strong",[t._v("Tools you’ll need")])]),t._v(" "),e("td",[t._v("A modern browser like Chrome. A "),e("a",{attrs:{href:"https://github.com",target:"_blank",rel:"noopener noreferrer"}},[t._v("GitHub"),e("OutboundLink")],1),t._v(" account which can be used to login to "),e("a",{attrs:{href:"https://codesandbox.io",target:"_blank",rel:"noopener noreferrer"}},[t._v("CodeSandbox"),e("OutboundLink")],1),t._v(".")])]),t._v(" "),e("tr",[e("td",[e("strong",[t._v("Time needed to complete")])]),t._v(" "),e("td",[t._v("1 hour + refactor time")])]),t._v(" "),e("tr",[e("td",[e("strong",[t._v("Just want to try the app?")])]),t._v(" "),e("td",[e("a",{attrs:{href:"https://codesandbox.io/s/web-2-mini-workshop-zq436",target:"_blank",rel:"noopener noreferrer"}},[t._v("CodeSandbox link"),e("OutboundLink")],1)])])])]),t._v(" "),e("h1",{attrs:{id:"instructions"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#instructions"}},[t._v("#")]),t._v(" Instructions")]),t._v(" "),e("h2",{attrs:{id:"scaffold-your-app"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#scaffold-your-app"}},[t._v("#")]),t._v(" Scaffold your app")]),t._v(" "),e("p",[t._v("We'll start from scratch in "),e("a",{attrs:{href:"http://codesandbox.io",target:"_blank",rel:"noopener noreferrer"}},[t._v("CodeSandbox"),e("OutboundLink")],1),t._v(". Create a CodeSandbox account and scaffold a starter Vue.js template by clicking "),e("a",{attrs:{href:"https://codesandbox.io/s/vue",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),e("OutboundLink")],1),t._v(".")]),t._v(" "),e("p",[t._v("We're going to build an application to load random fox images and store them to a favorites list:")]),t._v(" "),e("p",[e("img",{attrs:{src:n(392),alt:"random fox app"}})]),t._v(" "),e("p",[t._v("Take a look at the code that was scaffolded by CodeSandbox for a basic Vue.js app. The file "),e("code",[t._v("main.js")]),t._v(" is open by default. This is the main starting point of a Vue.js app. Note that in this file you import Vue from its npm package: "),e("code",[t._v('import Vue from "vue";')]),t._v(". CodeSandbox imports all the needed dependencies from npm to build the app. You can always check out the root "),e("code",[t._v("package.json")]),t._v(" to find out which dependencies are needed.")]),t._v(" "),e("p",[e("code",[t._v("main.js")]),t._v(" also initializes the app as a new Vue.js app and sets the div into which the app code will be injected.")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("render")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("h")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("h")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("App"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#app'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("blockquote",[e("p",[t._v("Note, since we are using the 'Vue' sandbox template from CodeSandbox, we scaffolded a default Vue 2 app. This workshop will also work with the Vue 3 sandbox since the Vue 2 Options API is supported in Vue 3, but the above code snippet will look different:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language- line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-text"}},[e("code",[t._v("import { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br")])])]),t._v(" "),e("p",[t._v("Open up "),e("code",[t._v("App.vue")]),t._v(". In this file, the 'home' component is built. It contains the three main parts of a Vue.js Single File Component (SFC): a template, a script block, and a style block.")]),t._v(" "),e("p",[t._v("Note the first div in the template block has the id of 'app' - this is the div where the app code will be injected. There's also a "),e("code",[t._v("<HelloWorld>")]),t._v(" component included underneath the logo image. This is an example of an SFC being included into "),e("code",[t._v("App.vue")]),t._v(".")]),t._v(" "),e("p",[t._v("Open "),e("code",[t._v("components/HelloWorld.vue")]),t._v(" and you'll find the source of the list of links that appears embedded in "),e("code",[t._v("App.vue")]),t._v(". This file also includes a script block with a "),e("code",[t._v("msg")]),t._v(" variable and some more styles in a "),e("code",[t._v("<style>")]),t._v(" block.")]),t._v(" "),e("p",[t._v("We're going to rip this sample app apart and recreate it! Let's get started.")]),t._v(" "),e("h2",{attrs:{id:"add-the-styles"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add-the-styles"}},[t._v("#")]),t._v(" Add the Styles")]),t._v(" "),e("p",[t._v("Let's start in "),e("code",[t._v("App.vue")]),t._v(", since we don't have to make any changes to "),e("code",[t._v("main.js")]),t._v(". This is a Vue SFC, or 'Single File Component'. It has three 'blocks': a template block for HTML, a script block for JavaScript, and a style block for CSS. Add the following style block at the bottom of the file, replacing the current "),e("code",[t._v("<style>")]),t._v(" block:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-css line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token selector"}},[t._v("<style>\nbody")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgb")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("255"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 102"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-family")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" arial"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("rgb")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("71"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 36"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" 23"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-image")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token url"}},[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string url"}},[t._v("\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ff9999' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\"")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".app")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" grid"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-template-columns")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1fr 1fr"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-template-rows")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" auto 500px 100px 1fr"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-template-areas")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"title title"')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"card card"')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"fav next"')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"favorites favorites"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".title")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-area")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" title"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2em"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".card")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-area")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" card"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" block"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100%"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("max-width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 400px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 500px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" auto"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-radius")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 8px solid white"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("object-fit")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" cover"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("overflow")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" hidden"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" white"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 70px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 70px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 20px 5px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 8px solid white"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-radius")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 50%"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" bold"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" transparent"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("cursor")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" pointer"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v("button:disabled")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("opacity")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0.5"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".next")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-area")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" next"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token url"}},[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://github.com/FrontEndFoxes/curriculum/blob/main/workshops/vue/minis/images/next.jpeg?raw=true"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v("\n center no-repeat"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 70px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".fav")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-area")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" fav"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token url"}},[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://github.com/FrontEndFoxes/curriculum/blob/main/workshops/vue/minis/images/heart.png?raw=true"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v("\n no-repeat center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 70px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("justify-self")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" end"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".fav:hover,\n.next:hover")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("opacity")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0.5"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v("h2")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".favorites")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-area")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" favorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("overflow-y")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" auto"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".favorites-list")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-wrap")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" wrap"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("justify-content")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".favorites-item")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" relative"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("list-style")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" none"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 15px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".favorites-img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 150px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 150px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("object-fit")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" cover"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".remove")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" absolute"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("bottom")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" -8px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("right")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" -15px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 30px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 30px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 2px solid white"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token url"}},[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("url")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string url"}},[t._v('"https://github.com/FrontEndFoxes/curriculum/blob/main/workshops/vue/minis/images/x.png?raw=true"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v("\n #F44F63 center no-repeat"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-size")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n</style>\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br"),e("span",{staticClass:"line-number"},[t._v("11")]),e("br"),e("span",{staticClass:"line-number"},[t._v("12")]),e("br"),e("span",{staticClass:"line-number"},[t._v("13")]),e("br"),e("span",{staticClass:"line-number"},[t._v("14")]),e("br"),e("span",{staticClass:"line-number"},[t._v("15")]),e("br"),e("span",{staticClass:"line-number"},[t._v("16")]),e("br"),e("span",{staticClass:"line-number"},[t._v("17")]),e("br"),e("span",{staticClass:"line-number"},[t._v("18")]),e("br"),e("span",{staticClass:"line-number"},[t._v("19")]),e("br"),e("span",{staticClass:"line-number"},[t._v("20")]),e("br"),e("span",{staticClass:"line-number"},[t._v("21")]),e("br"),e("span",{staticClass:"line-number"},[t._v("22")]),e("br"),e("span",{staticClass:"line-number"},[t._v("23")]),e("br"),e("span",{staticClass:"line-number"},[t._v("24")]),e("br"),e("span",{staticClass:"line-number"},[t._v("25")]),e("br"),e("span",{staticClass:"line-number"},[t._v("26")]),e("br"),e("span",{staticClass:"line-number"},[t._v("27")]),e("br"),e("span",{staticClass:"line-number"},[t._v("28")]),e("br"),e("span",{staticClass:"line-number"},[t._v("29")]),e("br"),e("span",{staticClass:"line-number"},[t._v("30")]),e("br"),e("span",{staticClass:"line-number"},[t._v("31")]),e("br"),e("span",{staticClass:"line-number"},[t._v("32")]),e("br"),e("span",{staticClass:"line-number"},[t._v("33")]),e("br"),e("span",{staticClass:"line-number"},[t._v("34")]),e("br"),e("span",{staticClass:"line-number"},[t._v("35")]),e("br"),e("span",{staticClass:"line-number"},[t._v("36")]),e("br"),e("span",{staticClass:"line-number"},[t._v("37")]),e("br"),e("span",{staticClass:"line-number"},[t._v("38")]),e("br"),e("span",{staticClass:"line-number"},[t._v("39")]),e("br"),e("span",{staticClass:"line-number"},[t._v("40")]),e("br"),e("span",{staticClass:"line-number"},[t._v("41")]),e("br"),e("span",{staticClass:"line-number"},[t._v("42")]),e("br"),e("span",{staticClass:"line-number"},[t._v("43")]),e("br"),e("span",{staticClass:"line-number"},[t._v("44")]),e("br"),e("span",{staticClass:"line-number"},[t._v("45")]),e("br"),e("span",{staticClass:"line-number"},[t._v("46")]),e("br"),e("span",{staticClass:"line-number"},[t._v("47")]),e("br"),e("span",{staticClass:"line-number"},[t._v("48")]),e("br"),e("span",{staticClass:"line-number"},[t._v("49")]),e("br"),e("span",{staticClass:"line-number"},[t._v("50")]),e("br"),e("span",{staticClass:"line-number"},[t._v("51")]),e("br"),e("span",{staticClass:"line-number"},[t._v("52")]),e("br"),e("span",{staticClass:"line-number"},[t._v("53")]),e("br"),e("span",{staticClass:"line-number"},[t._v("54")]),e("br"),e("span",{staticClass:"line-number"},[t._v("55")]),e("br"),e("span",{staticClass:"line-number"},[t._v("56")]),e("br"),e("span",{staticClass:"line-number"},[t._v("57")]),e("br"),e("span",{staticClass:"line-number"},[t._v("58")]),e("br"),e("span",{staticClass:"line-number"},[t._v("59")]),e("br"),e("span",{staticClass:"line-number"},[t._v("60")]),e("br"),e("span",{staticClass:"line-number"},[t._v("61")]),e("br"),e("span",{staticClass:"line-number"},[t._v("62")]),e("br"),e("span",{staticClass:"line-number"},[t._v("63")]),e("br"),e("span",{staticClass:"line-number"},[t._v("64")]),e("br"),e("span",{staticClass:"line-number"},[t._v("65")]),e("br"),e("span",{staticClass:"line-number"},[t._v("66")]),e("br"),e("span",{staticClass:"line-number"},[t._v("67")]),e("br"),e("span",{staticClass:"line-number"},[t._v("68")]),e("br"),e("span",{staticClass:"line-number"},[t._v("69")]),e("br"),e("span",{staticClass:"line-number"},[t._v("70")]),e("br"),e("span",{staticClass:"line-number"},[t._v("71")]),e("br"),e("span",{staticClass:"line-number"},[t._v("72")]),e("br"),e("span",{staticClass:"line-number"},[t._v("73")]),e("br"),e("span",{staticClass:"line-number"},[t._v("74")]),e("br"),e("span",{staticClass:"line-number"},[t._v("75")]),e("br"),e("span",{staticClass:"line-number"},[t._v("76")]),e("br"),e("span",{staticClass:"line-number"},[t._v("77")]),e("br"),e("span",{staticClass:"line-number"},[t._v("78")]),e("br"),e("span",{staticClass:"line-number"},[t._v("79")]),e("br"),e("span",{staticClass:"line-number"},[t._v("80")]),e("br"),e("span",{staticClass:"line-number"},[t._v("81")]),e("br"),e("span",{staticClass:"line-number"},[t._v("82")]),e("br"),e("span",{staticClass:"line-number"},[t._v("83")]),e("br"),e("span",{staticClass:"line-number"},[t._v("84")]),e("br"),e("span",{staticClass:"line-number"},[t._v("85")]),e("br"),e("span",{staticClass:"line-number"},[t._v("86")]),e("br"),e("span",{staticClass:"line-number"},[t._v("87")]),e("br"),e("span",{staticClass:"line-number"},[t._v("88")]),e("br"),e("span",{staticClass:"line-number"},[t._v("89")]),e("br"),e("span",{staticClass:"line-number"},[t._v("90")]),e("br"),e("span",{staticClass:"line-number"},[t._v("91")]),e("br"),e("span",{staticClass:"line-number"},[t._v("92")]),e("br"),e("span",{staticClass:"line-number"},[t._v("93")]),e("br"),e("span",{staticClass:"line-number"},[t._v("94")]),e("br"),e("span",{staticClass:"line-number"},[t._v("95")]),e("br"),e("span",{staticClass:"line-number"},[t._v("96")]),e("br"),e("span",{staticClass:"line-number"},[t._v("97")]),e("br"),e("span",{staticClass:"line-number"},[t._v("98")]),e("br"),e("span",{staticClass:"line-number"},[t._v("99")]),e("br"),e("span",{staticClass:"line-number"},[t._v("100")]),e("br"),e("span",{staticClass:"line-number"},[t._v("101")]),e("br"),e("span",{staticClass:"line-number"},[t._v("102")]),e("br"),e("span",{staticClass:"line-number"},[t._v("103")]),e("br"),e("span",{staticClass:"line-number"},[t._v("104")]),e("br"),e("span",{staticClass:"line-number"},[t._v("105")]),e("br"),e("span",{staticClass:"line-number"},[t._v("106")]),e("br"),e("span",{staticClass:"line-number"},[t._v("107")]),e("br"),e("span",{staticClass:"line-number"},[t._v("108")]),e("br"),e("span",{staticClass:"line-number"},[t._v("109")]),e("br"),e("span",{staticClass:"line-number"},[t._v("110")]),e("br"),e("span",{staticClass:"line-number"},[t._v("111")]),e("br"),e("span",{staticClass:"line-number"},[t._v("112")]),e("br"),e("span",{staticClass:"line-number"},[t._v("113")]),e("br"),e("span",{staticClass:"line-number"},[t._v("114")]),e("br"),e("span",{staticClass:"line-number"},[t._v("115")]),e("br"),e("span",{staticClass:"line-number"},[t._v("116")]),e("br"),e("span",{staticClass:"line-number"},[t._v("117")]),e("br"),e("span",{staticClass:"line-number"},[t._v("118")]),e("br"),e("span",{staticClass:"line-number"},[t._v("119")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Notice we don't use "),e("code",[t._v("<scoped>")]),t._v(" as part of the style block. The 'scoped' keyword ensures that your styles will remain valid only for the current SFC, but we're going to make these styles universal.")])]),t._v(" "),e("blockquote",[e("p",[t._v("This style block uses some paths to external images hosted on GitHub, rather than to a relative path. This is because it's a bit time consuming to host images on CodeSandbox. Normally you'd just add an image on a relative path to images hosted in the app.")])]),t._v(" "),e("p",[t._v("This stylesheet is an example of using CSS Grid and Flexbox in a basic responsive layout populated by cards. It also uses "),e("code",[t._v("grid-templates")]),t._v(" in the "),e("code",[t._v(".app")]),t._v(" styles, which are worth taking a minute to look at. This styling identifies 'grid template areas' and builds the page as a two column layout with the title, card, and favorites areas spanning the 'fav' and 'next' areas, where the two action buttons live. Take a minute to walk through the CSS and understand how it's built.")]),t._v(" "),e("p",[t._v("Adding the stylesheet didn't do much to our template except add colors to the text and the background pattern. Let's fix the template!")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("☕️ Take a break! ☕️")]),t._v(" "),e("p",[t._v("Now's a great time to join a breakout room if you're joining us on Zoom!")])]),t._v(" "),e("h2",{attrs:{id:"edit-the-html"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#edit-the-html"}},[t._v("#")]),t._v(" Edit the HTML")]),t._v(" "),e("p",[t._v("In a Vue app, there is usually a 'public' folder where assets are kept that are "),e("em",[t._v("not")]),t._v(" bundled by the Webpack bundler that works behind the scenes to parse Single File Components (the ones with the "),e("code",[t._v(".vue")]),t._v(" suffix). Find the public folder and edit the "),e("code",[t._v("index.html")]),t._v(" file. There's not much to do but to change the page title to "),e("code",[t._v("Fox Lover")]),t._v(". To do so, we have to change the content of the "),e("code",[t._v("title")]),t._v(" tag:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("title")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Fox Lover"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("title")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v('Notice the existence of the div with the id "app". Here\'s where the component content is injected during the build process.')]),t._v(" "),e("p",[t._v("Now, let's go to work in "),e("code",[t._v("App.vue")]),t._v(". Let's edit the template block. Overwrite the current template in "),e("code",[t._v("App.vue")]),t._v(" with this markup:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("h1")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("title"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("🦊 Choose your favorite foxes! 🦊"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("h1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("alt")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("So floofy!"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("card"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fav"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Fave"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("next"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Next"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br")])]),e("p",[t._v("Save your changes, and your app should refresh (if it doesn't, use the manual refresh button in the app preview address bar). Now, you can see an h1 title, a card, and two buttons.")]),t._v(" "),e("h2",{attrs:{id:"add-some-data"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add-some-data"}},[t._v("#")]),t._v(" Add some data")]),t._v(" "),e("p",[t._v("At this point, we need to start populating our UI with some data. The first thing we want to do is to display a fox image inside our card. Let's add a static link just to test how it looks. In "),e("code",[t._v("App.vue")]),t._v("'s template, change the "),e("code",[t._v("src")]),t._v(" property of "),e("code",[t._v("img")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("card"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("alt")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("So floofy!"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("https://randomfox.ca/images/21.jpg"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("How cute! 🦊")]),t._v(" "),e("p",[t._v("But the idea is to make this image dynamic, so it's time to create your first Vue variable. First, you have to add "),e("code",[t._v("data()")]),t._v(" to your Vue component. This function should return an object of our Vue variables. Let's create one in the "),e("code",[t._v("<script>")]),t._v(" block. Overwrite the current "),e("code",[t._v("<script>")]),t._v(" block in "),e("code",[t._v("App.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentFoxUrl")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("At this point you can remove the "),e("code",[t._v("HelloWorld.vue")]),t._v(" file from the "),e("code",[t._v("components")]),t._v(" folder as we won't need it. Right-click the file in CodeSandbox and click 'delete'.")])]),t._v(" "),e("p",[t._v("Now you have a variable called "),e("code",[t._v("currentFoxUrl")]),t._v(" and its default value is null. We will use this variable to provide a url to a current fox to populate "),e("code",[t._v("img")]),t._v(". First, we will set the "),e("code",[t._v("currentFoxUrl")]),t._v(" value by overwriting the data block we just added in "),e("code",[t._v("App.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentFoxUrl")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://randomfox.ca/images/21.jpg"')]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br")])]),e("p",[t._v("Now we have to change the template to make the image's "),e("code",[t._v("src")]),t._v(" property "),e("em",[t._v("dynamic")]),t._v(" so it can use the value of the variable we just populated above. To do this we need a "),e("code",[t._v("v-bind")]),t._v(" directive or its shortcut, "),e("code",[t._v(":")]),t._v(". Again in "),e("code",[t._v("App.vue")]),t._v(", edit the "),e("code",[t._v("img")]),t._v(" tag to remove its hard-coded value:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[t._v(" "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("card"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("alt")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("So floofy!"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentFoxUrl"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("The "),e("code",[t._v("v-bind")]),t._v(" directive dynamically binds one or more attributes, or a component prop to an expression. That little "),e("code",[t._v(":")]),t._v(" shortcut makes all the difference!")])]),t._v(" "),e("p",[t._v("Great! Now it's time to load some foxes from an API!")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("☕️ Take a break! ☕️")]),t._v(" "),e("p",[t._v("Now's a great time to join a breakout room if you're joining us on Zoom!")])]),t._v(" "),e("h2",{attrs:{id:"call-an-api"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#call-an-api"}},[t._v("#")]),t._v(" Call an API")]),t._v(" "),e("p",[t._v("To perform API calls we will use a built-in library called "),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch",target:"_blank",rel:"noopener noreferrer"}},[t._v("fetch"),e("OutboundLink")],1),t._v(". It's a promise-based HTTP client that works both in the browser and in other node.js environments.")]),t._v(" "),e("p",[t._v("Let's perform our first API call. To do so, we will create a "),e("code",[t._v("loadNewFox")]),t._v(" "),e("em",[t._v("method")]),t._v(" inside our component.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("The "),e("code",[t._v("methods")]),t._v(" property is a list of functions that hang off of an object — typically the Vue instance itself or a Vue component.")])]),t._v(" "),e("p",[t._v("Let's add it right after the "),e("code",[t._v("data")]),t._v(" function:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentFoxUrl")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://randomfox.ca/images/21.jpg"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("methods")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadFox")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br")])]),e("p",[t._v("For now this method does nothing, but we want it to load a new fox from the "),e("a",{attrs:{href:"https://randomfox.ca",target:"_blank",rel:"noopener noreferrer"}},[t._v("randomfox.ca API"),e("OutboundLink")],1),t._v(". First we have to check which endpoint we have to use. Looking at the "),e("a",{attrs:{href:"https://randomfox.ca/floof/",target:"_blank",rel:"noopener noreferrer"}},[t._v("API"),e("OutboundLink")],1),t._v(", we learn that we need to use "),e("code",[t._v("https://randomfox.ca/floof")]),t._v(" as our endpoint. It will provide a random fox image.")]),t._v(" "),e("p",[t._v("To query this very simple API, we will perform a GET request via fetch. We will wrap our function with "),e("code",[t._v("async")]),t._v(" and "),e("code",[t._v("await")]),t._v(" to ensure that the front end awaits the result of the image fetch nicely. For now, let's simply print the query result to console. Still in "),e("code",[t._v("App.vue")]),t._v(", overwrite the "),e("code",[t._v("loadFox(){}")]),t._v(" method by placing this snippet between the curly brackets:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v(" "),e("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("loadFox")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" response "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://randomfox.ca/floof/"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foxData "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" response"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("json")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("foxData"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br")])]),e("p",[t._v("We want a new image to replace the old one right when the component is created, so let's add a "),e("code",[t._v("created()")]),t._v(" hook right after "),e("code",[t._v("methods")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("created")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Note: Make sure to add a comma after the methods object and then add the created() hook!")])]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("This is our app's first lifecycle hook! These are very useful when you want fine control over when to run blocks of code. Read more "),e("a",{attrs:{href:"https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),e("OutboundLink")],1)])]),t._v(" "),e("p",[t._v("Inside the created hook we will call our method.")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("created")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadFox")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Now after clicking the refresh button in the browser window, you should see a JSON object in your console. Drill into it by clicking its left-hand arrow. We are interested in its "),e("code",[t._v("image")]),t._v(" field. This is the fox image URL.")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("☕️ Take a break! ☕️")]),t._v(" "),e("p",[t._v("Now's a great time to join a breakout room if you're joining us on Zoom!")])]),t._v(" "),e("h2",{attrs:{id:"use-the-api"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#use-the-api"}},[t._v("#")]),t._v(" Use the API")]),t._v(" "),e("p",[t._v("Let's replace our "),e("code",[t._v("currentFoxUrl")]),t._v(" with the loaded one. At this point we can remove its static value:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentFoxUrl")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br")])]),e("p",[t._v("Inside the "),e("code",[t._v("loadFox")]),t._v(" method instead of printing result to the console we will assign its "),e("code",[t._v("response")]),t._v(", formatted with json (this is actually the image URL) to the "),e("code",[t._v("currentFoxUrl")]),t._v(" property:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("loadFox")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" response "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://randomfox.ca/floof/"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foxData "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" response"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("json")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentFoxUrl "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" foxData"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("image"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br")])]),e("p",[t._v("Now every time you refresh the page, you will have a shiny new fox image! 🎉")]),t._v(" "),e("p",[t._v("We also want to call the same method when the 'Next' arrow is clicked. Let's add a click handler to this button. We can use the "),e("code",[t._v("v-on")]),t._v(" directive or its shortcut "),e("code",[t._v("@")]),t._v('. In the template, edit the "next" button\'s html:')]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("loadFox"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("next"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Next"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Now we can load new images simply by clicking the 'Next' button.")]),t._v(" "),e("h2",{attrs:{id:"build-the-favorites-list"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#build-the-favorites-list"}},[t._v("#")]),t._v(" Build the Favorites List")]),t._v(" "),e("p",[t._v("We want to let a user add fox images to a personal list of their favorites and show the gallery of these images right below our current fox view. To store the links we need one more data property - an array called "),e("code",[t._v("favorites")]),t._v(". Let's add it right after "),e("code",[t._v("currentFoxUrl")]),t._v(" and make it empty by default:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentFoxUrl")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("favorites")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br")])]),e("p",[t._v("To display the favorite foxes we should make changes to our template. Let's add the following code snippet right after the Next button's closing "),e("code",[t._v("</button>")]),t._v(" tag")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("section")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("h2")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Favorite Floofs"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("h2")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ul")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-list"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-item"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-img"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("remove"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Remove"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("li")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("ul")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("section")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br"),e("span",{staticClass:"line-number"},[t._v("11")]),e("br")])]),e("p",[t._v("You can see an empty card with a 'Delete' button right after the current fox view buttons. Now we need to find a way to show "),e("code",[t._v("favorites")]),t._v(" inside these cards.")]),t._v(" "),e("p",[t._v("To render a list of items based on an array, Vue has a "),e("code",[t._v("v-for")]),t._v(" directive, which will iterate through this array and render each item. Let's add this directive to our opening "),e("code",[t._v("li")]),t._v(" element that will show the array of favorite cards in the new container you just added:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(floof, index) in favorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("floof"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-item"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Here "),e("code",[t._v("floof")]),t._v(" is the reference to the "),e("em",[t._v("current array element")]),t._v(" and "),e("code",[t._v("index")]),t._v(" is the "),e("em",[t._v("index of this element")]),t._v(" inside the array.")]),t._v(" "),e("blockquote",[e("p",[t._v("Note: there's an error at this point in console, because "),e("code",[t._v("index")]),t._v(" is not yet defined. We'll fix it in a minute")])]),t._v(" "),e("p",[t._v("To properly loop over your array of favorite foxes and append another one, you need to provide a unique key attribute for each item. In our case, the "),e("code",[t._v("floof")]),t._v(" reference will be the key.")]),t._v(" "),e("p",[t._v("You can see that our empty card disappeared. It's fine! We have an empty "),e("code",[t._v("favorites")]),t._v(" array so there's simply nothing to render right now.")]),t._v(" "),e("p",[t._v("One thing left to do is to bind "),e("code",[t._v("floof")]),t._v(" (which will be the image link) to the "),e("code",[t._v("src")]),t._v(" property of the image element in the cards you're building:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("alt")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("nice fox"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("floof"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-img"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Now it's time to like some foxes 💖🦊!")]),t._v(" "),e("div",{staticClass:"custom-block warning"},[e("p",{staticClass:"custom-block-title"},[t._v("☕️ Take a break! ☕️")]),t._v(" "),e("p",[t._v("Now's a great time to join a breakout room if you're joining us on Zoom!")])]),t._v(" "),e("h2",{attrs:{id:"adding-foxes-to-favorites"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#adding-foxes-to-favorites"}},[t._v("#")]),t._v(" Adding Foxes to Favorites")]),t._v(" "),e("p",[t._v("We will create a new method called "),e("code",[t._v("addFave")]),t._v(". It will add the value of "),e("code",[t._v("currentFoxUrl")]),t._v(" to the "),e("code",[t._v("favorites")]),t._v(" array (JavaScript has a "),e("code",[t._v("push")]),t._v(" array method for this purpose). Let's place it after the "),e("code",[t._v("loadFox")]),t._v(" one "),e("em",[t._v("(don't miss the comma!)")])]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("addFave")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("favorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentFoxUrl"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("And of course we need to bind it to the 'Like' button in the top card:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("addFave"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fav"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Fave"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Now try to click on the 'favorite' button! You can see how our gallery is filling with the fox images 🖼️")]),t._v(" "),e("p",[t._v("There is one issue: now we can add one image many times. To prevent this we should check if the "),e("code",[t._v("currentFoxUrl")]),t._v(" is already inside the "),e("code",[t._v("favorites")]),t._v(" array and if it is, we will disable the 'favorite' button. Instead of placing this complex logic inside the template, we will create a "),e("em",[t._v("computed")]),t._v(" property.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Computed properties can be used to do quick calculations of properties that are displayed in the view. These calculations will be cached and will only update when their dependencies are changed.")])]),t._v(" "),e("p",[t._v("Let's add "),e("code",[t._v("computed")]),t._v(" right after the "),e("code",[t._v("data")]),t._v(" function (don't forget the comma after the close of "),e("code",[t._v("data")]),t._v(") and create a property named "),e("code",[t._v("isAlreadyInFavorites")]),t._v(" in it:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[t._v(" "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("isAlreadyInFavorites")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Any computed property should be a function returning the result of calculations. Let's check the index of "),e("code",[t._v("currentFoxUrl")]),t._v(" inside the "),e("code",[t._v("favorites")]),t._v(" array. If it is greater than -1 (in other words if the array contains such an element), the function will return "),e("code",[t._v("true")]),t._v(", otherwise it will return "),e("code",[t._v("false")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("isAlreadyInFavorites")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("favorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("indexOf")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentFoxUrl"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br")])]),e("p",[t._v("Now we can add a dynamic "),e("code",[t._v("disabled")]),t._v(" attribute to the 'Fave' button in the top card and set it equal to "),e("code",[t._v("isAlreadyInFavorites")]),t._v(".")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("addFave"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":disabled")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("isAlreadyInFavorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fav"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Fave"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Try to add a fox to your favorites list. Now you can see that the 'fave' image is greyed-out and you cannot click it again.")]),t._v(" "),e("h2",{attrs:{id:"removing-foxes-from-favorites"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removing-foxes-from-favorites"}},[t._v("#")]),t._v(" Removing Foxes from Favorites")]),t._v(" "),e("p",[t._v("What if you stopped liking one of the fox images? In this unlikely event, you will need a way to remove it from the "),e("code",[t._v("favorites")]),t._v(" array. We need one more method for this, so let's add it after the "),e("code",[t._v("addFave")]),t._v(" (add a comma after "),e("code",[t._v("addFave")]),t._v(" closing bracket):")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeFave")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Of course we should specify somehow what fox we want to remove from the array. Fortunately, we have the "),e("code",[t._v("index")]),t._v(" parameter. Let's pass it to our method and remove the element with the given index from the "),e("code",[t._v("favorites")]),t._v(" array:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeFave")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("index")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("favorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("splice")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Here the splice() method changes the contents of an array by removing existing elements. The first argument is the index of the element we want to start with and the second argument is the number of elements we want to remove.")])]),t._v(" "),e("p",[t._v("Now we have to bind this new method to the 'Delete' button with a click handler:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("removeFave(index)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("remove"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Remove"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("blockquote",[e("p",[t._v("Note, you may have noticed the error has gone away, because we finally are making use of "),e("code",[t._v("index")]),t._v(" - passing it to the method on button click.")])]),t._v(" "),e("p",[t._v("Try to add and remove some foxes from favorites. IT WORKS!")]),t._v(" "),e("p",[e("strong",[t._v("🎊Congratulations, you've finished the base project!🎊")])]),t._v(" "),e("h2",{attrs:{id:"push-your-work-to-a-repository-on-your-github-account"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#push-your-work-to-a-repository-on-your-github-account"}},[t._v("#")]),t._v(" Push your work to a repository on your GitHub account")]),t._v(" "),e("p",[e("strong",[t._v("Step 1")]),t._v(": In CodeSandbox, click the GitHub icon in the sidebar, and grant permissions if necessary.")]),t._v(" "),e("p",[e("strong",[t._v("Step 2")]),t._v(": Enter a name for your repository.")]),t._v(" "),e("p",[e("strong",[t._v("Step 3")]),t._v(": Click "),e("code",[t._v("create repository")]),t._v(".")]),t._v(" "),e("h2",{attrs:{id:"refactor-1-creating-a-fox-component"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#refactor-1-creating-a-fox-component"}},[t._v("#")]),t._v(" Refactor 1: Creating a Fox Component")]),t._v(" "),e("p",[t._v("At this point we want to abstract a single fox card from the favorites grid into a separate component to learn how parent and child components communicate.")]),t._v(" "),e("p",[t._v("We have a "),e("code",[t._v("components")]),t._v(" folder but for now it's empty. Let's create a new file here and name it "),e("code",[t._v("Fox.vue")]),t._v(".")]),t._v(" "),e("p",[t._v("Open this file and add "),e("code",[t._v("<template></template>")]),t._v(" and "),e("code",[t._v("<script><\/script>")]),t._v(" tags. Now our file looks this way:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token script"}}),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br")])]),e("p",[t._v("Now copy the image and delete button area that contains the favorite foxes from "),e("code",[t._v("App.vue")]),t._v(" and paste it inside the template block. You can delete it from "),e("code",[t._v("App.vue")]),t._v(". Paste it into the template in "),e("code",[t._v("Fox.vue")]),t._v(" with a surrounding "),e("code",[t._v("<span>")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[t._v(" "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fox"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-img"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("removeFave(index)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("remove"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Remove"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("span")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br")])]),e("blockquote",[e("p",[t._v("Note, you need to add this span tag as in Vue 2 you need to surround all template html with at least one surrounding tag.")])]),t._v(" "),e("p",[t._v("We now need a way to pass the fox image we want to view from the parent to the child. To do so, Vue uses "),e("code",[t._v("props")]),t._v(".")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a _prop_erty on that component instance. In our case the "),e("code",[t._v("Fox")]),t._v(" component will have a "),e("code",[t._v("fox")]),t._v(" property, passed from its parent "),e("code",[t._v("App")]),t._v(" component.")]),t._v(" "),e("p",[t._v("✨Remember!✨ Props down, events up!")])]),t._v(" "),e("p",[t._v("Let's add a "),e("code",[t._v("props")]),t._v(" option to our "),e("code",[t._v("Fox.vue")]),t._v(" component. First, we need to create an export statement inside our "),e("code",[t._v("script")]),t._v(" tag (so later we will be able to import our "),e("code",[t._v("Fox")]),t._v(" component inside the "),e("code",[t._v("App")]),t._v(" one). Add this code block to "),e("code",[t._v("Fox.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Now we can add a "),e("code",[t._v("props")]),t._v(" option to this object and a prop "),e("code",[t._v("fox")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("props")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fox")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br")])]),e("p",[t._v("Here we are also specifying the type of our fox - it will be a string containing the fox image URL.")]),t._v(" "),e("p",[t._v("Now let's move back to our "),e("code",[t._v("App.vue")]),t._v(" component and make some changes. First of all we should import our newly created "),e("code",[t._v("Fox")]),t._v(" component into "),e("code",[t._v("App.vue")]),t._v(". Add this string before the "),e("code",[t._v("export default")]),t._v(" statement in the "),e("code",[t._v("<script>")]),t._v(" block:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Fox "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./components/Fox'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("Now we have to 'explain' to the "),e("code",[t._v("App")]),t._v(" component that it has a child component inside it. Vue uses a "),e("code",[t._v("components")]),t._v(" option for this. Let's add a component option above the "),e("code",[t._v("data()")]),t._v(" one:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("components")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("appFox")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Fox\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currentFoxUrl")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("favorites")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("For each property in the components object, the key will be the name of the custom element, while the value will contain the options object for the component")])]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("For the component name you can either use a camel-case ("),e("code",[t._v("appFox")]),t._v(") or kebab-case ("),e("code",[t._v("app-fox")]),t._v("). Keep in mind that a camel-case name will be 'translated' to kebab-case in HTML tag names. So we will use the HTML custom tag "),e("code",[t._v("<app-fox>")]),t._v(" and it will render a "),e("code",[t._v("Fox")]),t._v(" component")])]),t._v(" "),e("p",[t._v("In "),e("code",[t._v("App.vue")]),t._v(", place the custom tag in the space where you deleted the card earlier:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[t._v("\t"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("app-fox")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("app-fox")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("We have to pass a "),e("code",[t._v("fox")]),t._v(" prop to our "),e("code",[t._v("Fox")]),t._v(" component. It will be done with the familiar "),e("code",[t._v("v-bind")]),t._v(" directive (remember, you can use its "),e("code",[t._v(":")]),t._v(" shortcut). Edit the code you just added to "),e("code",[t._v("App.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ul")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-list"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(floof, index) in favorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("floof"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-item"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("app-fox")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":fox")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("floof"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@remove")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("removeFave(index)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("app-fox")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("li")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("ul")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br")])]),e("p",[t._v("Now if you try to add a fox to Favorites you will see the foxes in the grid again! But we have one issue: deleting a fox will cause a bunch of errors in console. The reason is we don't have a "),e("code",[t._v("removeFave")]),t._v(" method inside the "),e("code",[t._v("Fox.vue")]),t._v(" and it knows nothing about "),e("code",[t._v("index")]),t._v(" as well.")]),t._v(" "),e("p",[t._v("Instead of using the method, we will add an "),e("em",[t._v("event emitter")]),t._v(" to the "),e("code",[t._v("delete")]),t._v(" button inside the Fox component.")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("$emit('remove')"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("remove"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Remove"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("button")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br")])]),e("p",[t._v("By using "),e("code",[t._v("$emit")]),t._v(", we are sending a message to our parent component (in this case it's "),e("code",[t._v("App.vue")]),t._v("): 'Hi, something is happening here! Please read this message and react to it'.")]),t._v(" "),e("p",[t._v("Now when the "),e("code",[t._v("Fox")]),t._v(" component emits the "),e("code",[t._v("remove")]),t._v(" event (i.e. on the 'Delete' button click), its parent "),e("code",[t._v("App")]),t._v(" component will call the "),e("code",[t._v("removeFave")]),t._v(" method (which removes a certain fox from the favorites array).")]),t._v(" "),e("p",[e("strong",[t._v("🎊You've finished Refactor 1!🎊")])]),t._v(" "),e("h2",{attrs:{id:"refactor-2-add-animations"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#refactor-2-add-animations"}},[t._v("#")]),t._v(" Refactor 2: Add Animations")]),t._v(" "),e("p",[t._v("Now let's make our application more appealing by adding some animation effects to it.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Vue provides a "),e("code",[t._v("transition")]),t._v(" wrapper component, allowing you to add entering/leaving transitions for any element or component in the following contexts:")]),t._v(" "),e("ul",[e("li",[t._v("Conditional rendering (using "),e("code",[t._v("v-if")]),t._v(")")]),t._v(" "),e("li",[t._v("Conditional display (using "),e("code",[t._v("v-show")]),t._v(")")]),t._v(" "),e("li",[t._v("Dynamic components")]),t._v(" "),e("li",[t._v("Component root nodes")])])]),t._v(" "),e("p",[t._v("Let's try to animate the image of the current fox. First, we need to add a "),e("code",[t._v("v-if")]),t._v(" directive to it to provide the proper context for the future transition. In "),e("code",[t._v("App.vue")]),t._v(", edit the main fox's card:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-if")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentFoxUrl"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("card"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("alt")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("So floofy!"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentFoxUrl"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br")])]),e("p",[t._v("But now "),e("code",[t._v("currentFoxUrl")]),t._v(" will always return "),e("code",[t._v("true")]),t._v("! Let's set it to an empty string in the loadFox() method so that every time we click the 'Next' button, so before the next image is loaded, "),e("code",[t._v("currentFoxUrl")]),t._v(" will return "),e("code",[t._v("false")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-js line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("loadFox")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentFoxUrl "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('""')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" response "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetch")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://randomfox.ca/floof/"')]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" foxData "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" response"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("json")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentFoxUrl "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" foxData"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("image"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br")])]),e("p",[t._v("Now you can observe this ugly effect: the image disappears every time the user clicks 'Next'. We will fix it with the fade animation effect. Let's wrap the image in a "),e("code",[t._v("<transition>")]),t._v(" tag and provide it with a name attribute "),e("code",[t._v("fade")]),t._v(".")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("transition")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fade"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-if")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentFoxUrl"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("card"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("alt")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("So floofy!"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentFoxUrl"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("transition")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br")])]),e("p",[t._v("This will give us a bunch of CSS classes starting from "),e("code",[t._v("fade-")]),t._v(". There will be "),e("code",[t._v("enter")]),t._v("/"),e("code",[t._v("leave")]),t._v(" which is the position that the animation starts with on the first frame, "),e("code",[t._v("enter-active")]),t._v("/"),e("code",[t._v("leave-active")]),t._v(" while the animation is running - this is the one you’d place the animation properties themselves on, and "),e("code",[t._v("enter-to")]),t._v("/"),e("code",[t._v("leave-to")]),t._v(", which specifies where the element should be on the last frame.")]),t._v(" "),e("p",[t._v("Now that we have our hooks, we can create the transition using them. Edit the CSS in "),e("code",[t._v("App.vue")]),t._v(" by adding the following classes:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-css line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".fade-enter-active,\n.fade-leave-active")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" opacity 1s ease"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".fade-enter,\n.fade-leave-to")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("opacity")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br")])]),e("p",[t._v("The "),e("code",[t._v(".fade-enter-active")]),t._v(" and "),e("code",[t._v(".fade-leave-active")]),t._v(" classes will be where we apply the actual transition. This isn't anything Vue-specific - just normal CSS. The "),e("code",[t._v("ease")]),t._v(" property specifies a transition effect with a slow start, then fast, then ending slowly.")]),t._v(" "),e("p",[t._v("Now you can see that the fox picture has a nice fade effect when you click 'next'!")]),t._v(" "),e("p",[t._v("Let's also add some effects to our favorite fox grid. To animate the list rendered with "),e("code",[t._v("v-for")]),t._v(", Vue uses the "),e("code",[t._v("transition-group")]),t._v(" tag.")]),t._v(" "),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Unlike "),e("code",[t._v("<transition>")]),t._v(", "),e("code",[t._v("transition-group")]),t._v(" renders an actual element: a "),e("code",[t._v("<span>")]),t._v(" by default. You can change the element that’s rendered with the tag attribute.\nElements inside are "),e("em",[t._v("always")]),t._v(" required to have a unique key attribute.")])]),t._v(" "),e("p",[t._v("In "),e("code",[t._v("App.vue")]),t._v(", surround the ul element surrounding the "),e("code",[t._v("<app-fox>")]),t._v(" nested component with "),e("code",[t._v("transition-group")]),t._v(" and provide it with a proper tag attribute and class:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-html line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("transition-group")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-listwrap favorites-list"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("slide"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("tag")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ul"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(floof, index) in favorites"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("floof"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("favorites-item"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("app-fox")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":fox")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("floof"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@remove")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("removeFave(index)"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("app-fox")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("li")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("transition-group")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br"),e("span",{staticClass:"line-number"},[t._v("9")]),e("br"),e("span",{staticClass:"line-number"},[t._v("10")]),e("br"),e("span",{staticClass:"line-number"},[t._v("11")]),e("br"),e("span",{staticClass:"line-number"},[t._v("12")]),e("br")])]),e("p",[t._v("With the "),e("code",[t._v("tag")]),t._v(", "),e("code",[t._v("transition-group")]),t._v(" will render as a "),e("code",[t._v("ul")]),t._v(" component now. The class "),e("code",[t._v("wrap")]),t._v(" is needed to wrap the grid elements to the next row (it replaces the "),e("code",[t._v("wrap")]),t._v(" attribute of "),e("code",[t._v("ul")]),t._v("). We also gave our new transition a name, "),e("code",[t._v("slide")]),t._v(".")]),t._v(" "),e("p",[t._v("Now we can use CSS classes to describe the slide transition - add these classes to the CSS in "),e("code",[t._v("App.vue")]),t._v(":")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-css line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".slide-enter-active")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" all 0.3s ease"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".slide-enter,\n.slide-leave-to")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transform")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("translateX")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("10px"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("opacity")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br")])]),e("p",[t._v("Great! We have a nice animation when we add a new fox to the grid. But there are no effects on delete. There is a "),e("code",[t._v("-move")]),t._v(" class, which is added when items are changing positions. Like the other classes, its prefix will match the value of a provided "),e("code",[t._v("name")]),t._v(" attribute ("),e("code",[t._v("slide")]),t._v(" in our case). So we need to add some more styles:")]),t._v(" "),e("script",[t._v("\n function copyText(event, node) {\n // So we don't go anywhere\n event.preventDefault();\n\n const toCopy = node.parentElement.nextElementSibling.querySelector('code');\n const el = document.createElement('textarea');\n el.value = toCopy.innerText;\n document.body.appendChild(el);\n el.select();\n document.execCommand('copy');\n document.body.removeChild(el);\n }\n ")]),t._v(" "),e("div",{staticStyle:{display:"flex","justify-content":"flex-end"}},[e("a",{attrs:{href:"#",onclick:"copyText(event, this)"}},[t._v("\n Copy\n ")])]),t._v(" "),e("div",{staticClass:"language-css line-numbers-mode"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".slide-leave-active")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("position")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" absolute"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" all 0.3s ease"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".slide-move")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token property"}},[t._v("transition")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" transform 0.5s"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),t._v(" "),e("div",{staticClass:"line-numbers-wrapper"},[e("span",{staticClass:"line-number"},[t._v("1")]),e("br"),e("span",{staticClass:"line-number"},[t._v("2")]),e("br"),e("span",{staticClass:"line-number"},[t._v("3")]),e("br"),e("span",{staticClass:"line-number"},[t._v("4")]),e("br"),e("span",{staticClass:"line-number"},[t._v("5")]),e("br"),e("span",{staticClass:"line-number"},[t._v("6")]),e("br"),e("span",{staticClass:"line-number"},[t._v("7")]),e("br"),e("span",{staticClass:"line-number"},[t._v("8")]),e("br")])]),e("div",{staticClass:"custom-block tip"},[e("p",{staticClass:"custom-block-title"},[t._v("💡")]),t._v(" "),e("p",[t._v("Notice the "),e("code",[t._v("position: absolute")]),t._v(" on items that are leaving! It's done to remove them from the natural flow, triggering the move transition on the rest of the items.")])]),t._v(" "),e("p",[t._v("Now our list has a move animation after deleting its element!")]),t._v(" "),e("p",[e("strong",[t._v("🎊You've finished Refactor 2!🎊")])]),t._v(" "),e("h2",{attrs:{id:"authors"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#authors"}},[t._v("#")]),t._v(" Authors")]),t._v(" "),e("p",[t._v("Made with ❤️ by Jen Looper with CSS from Jo Franchetti, from the original Mini 1 by Natalia Tepluhina, updated by Jen Looper")])])}),[],!1,null,null,null);e.default=s.exports}}]); \ No newline at end of file diff --git a/assets/js/app.9731be1c.js b/assets/js/app.708b59da.js similarity index 98% rename from assets/js/app.9731be1c.js rename to assets/js/app.708b59da.js index a2f5b96..96e34fc 100644 --- a/assets/js/app.9731be1c.js +++ b/assets/js/app.708b59da.js @@ -1,4 +1,4 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);!function(e){function t(t){for(var r,a,s=t[0],l=t[1],u=t[2],p=0,f=[];p<s.length;p++)a=s[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&f.push(o[a][0]),o[a]=0;for(r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r]);for(c&&c(t);f.length;)f.shift()();return i.push.apply(i,u||[]),n()}function n(){for(var e,t=0;t<i.length;t++){for(var n=i[t],r=!0,s=1;s<n.length;s++){var l=n[s];0!==o[l]&&(r=!1)}r&&(i.splice(t--,1),e=a(a.s=n[0]))}return e}var r={},o={8:0},i=[];function a(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.e=function(e){var t=[],n=o[e];if(0!==n)if(n)t.push(n[2]);else{var r=new Promise((function(t,r){n=o[e]=[t,r]}));t.push(n[2]=r);var i,s=document.createElement("script");s.charset="utf-8",s.timeout=120,a.nc&&s.setAttribute("nonce",a.nc),s.src=function(e){return a.p+"assets/js/"+({9:"vendors~docsearch"}[e]||e)+"."+{1:"e58b189b",2:"31700463",3:"d2d52895",4:"df2bbd5a",5:"77acca49",6:"a4b2b61c",7:"da6345b3",9:"6f140a46",10:"745c23d7",11:"fddb7258",12:"7bb3c885",13:"16d2ed7b",14:"f2001be5",15:"b654a4b7",16:"6d53e8c9",17:"200838f4",18:"cb7ddc93",19:"b205dfbe",20:"e0ce5fdf",21:"07bf2bd2",22:"7b58d08d",23:"91d2b584",24:"4c608df4",25:"6494940f",26:"0b8da5eb",27:"7c4f8b3c",28:"1a700b9c",29:"593477ee",30:"67045ac8",31:"16dc0db7",32:"2d673e2d",33:"bd2a7b4b",34:"ab1a52be",35:"0c150a2f",36:"c6385503",37:"4ed085e5",38:"1e5dcace",39:"b01b2adb",40:"486c2625",41:"3ad56d94",42:"85859696",43:"b768f2d9",44:"a4d0a50b",45:"e1088147",46:"40412734",47:"ee10c959",48:"88edca03",49:"7a5ead4d",50:"55827105",51:"4fef1cc4",52:"4bf02870",53:"54b8cfbc",54:"9e245086",55:"f17dc5b8",56:"86aa06d9",57:"be0aa56c",58:"97fa300d",59:"9b5570f0",60:"7bf941a3",61:"6e8b4eca",62:"b7a4350b",63:"8b45e0ab",64:"eb6fb88e",65:"68dfc4a0",66:"3dc620d5",67:"87dcaf99",68:"d4b74534",69:"bb02b634",70:"791c9a7a",71:"796a9e78",72:"868e3dbf",73:"38bfce19",74:"a892403a",75:"cbac1b03",76:"aaf5f098",77:"1abe0be2",78:"be989ff0",79:"f85cf793"}[e]+".js"}(e);var l=new Error;i=function(t){s.onerror=s.onload=null,clearTimeout(u);var n=o[e];if(0!==n){if(n){var r=t&&("load"===t.type?"missing":t.type),i=t&&t.target&&t.target.src;l.message="Loading chunk "+e+" failed.\n("+r+": "+i+")",l.name="ChunkLoadError",l.type=r,l.request=i,n[1](l)}o[e]=void 0}};var u=setTimeout((function(){i({type:"timeout",target:s})}),12e4);s.onerror=s.onload=i,document.head.appendChild(s)}return Promise.all(t)},a.m=e,a.c=r,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(n,r,function(t){return e[t]}.bind(null,r));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/curriculum/",a.oe=function(e){throw console.error(e),e};var s=window.webpackJsonp=window.webpackJsonp||[],l=s.push.bind(s);s.push=t,s=s.slice();for(var u=0;u<s.length;u++)t(s[u]);var c=l;i.push([96,0]),n()}([function(e,t,n){"use strict";var r=n(50),o=r.all;e.exports=r.IS_HTMLDDA?function(e){return"function"==typeof e||e===o}:function(e){return"function"==typeof e}},function(e,t,n){"use strict";var r=function(e){return e&&e.Math===Math&&e};e.exports=r("object"==typeof globalThis&&globalThis)||r("object"==typeof window&&window)||r("object"==typeof self&&self)||r("object"==typeof global&&global)||function(){return this}()||this||Function("return this")()},function(e,t,n){"use strict";var r=n(25),o=Function.prototype,i=o.call,a=r&&o.bind.bind(i,i);e.exports=r?a:function(e){return function(){return i.apply(e,arguments)}}},function(e,t,n){"use strict";e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t){var n=Array.isArray;e.exports=n},function(e,t,n){"use strict";var r=n(3);e.exports=!r((function(){return 7!==Object.defineProperty({},1,{get:function(){return 7}})[1]}))},function(e,t,n){var r=n(65),o="object"==typeof self&&self&&self.Object===Object&&self,i=r||o||Function("return this")();e.exports=i},function(e,t,n){"use strict";var r=n(2),o=n(33),i=r({}.hasOwnProperty);e.exports=Object.hasOwn||function(e,t){return i(o(e),t)}},function(e,t,n){"use strict";var r=n(0),o=n(50),i=o.all;e.exports=o.IS_HTMLDDA?function(e){return"object"==typeof e?null!==e:r(e)||e===i}:function(e){return"object"==typeof e?null!==e:r(e)}},function(e,t,n){var r=n(159),o=n(162);e.exports=function(e,t){var n=o(e,t);return r(n)?n:void 0}},function(e,t){e.exports=function(e){return null!=e&&"object"==typeof e}},function(e,t,n){var r=n(13),o=n(144),i=n(145),a=r?r.toStringTag:void 0;e.exports=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":a&&a in Object(e)?o(e):i(e)}},function(e,t,n){"use strict";var r=n(5),o=n(15),i=n(26);e.exports=r?function(e,t,n){return o.f(e,t,i(1,n))}:function(e,t,n){return e[t]=n,e}},function(e,t,n){var r=n(6).Symbol;e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r,o,i,a,s){var l,u="function"==typeof e?e.options:e;if(t&&(u.render=t,u.staticRenderFns=n,u._compiled=!0),r&&(u.functional=!0),i&&(u._scopeId="data-v-"+i),a?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},u._ssrRegister=l):o&&(l=s?function(){o.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:o),l)if(u.functional){u._injectStyles=l;var c=u.render;u.render=function(e,t){return l.call(t),c(e,t)}}else{var p=u.beforeCreate;u.beforeCreate=p?[].concat(p,l):[l]}return{exports:e,options:u}}n.d(t,"a",(function(){return r}))},function(e,t,n){"use strict";var r=n(5),o=n(59),i=n(105),a=n(34),s=n(49),l=TypeError,u=Object.defineProperty,c=Object.getOwnPropertyDescriptor;t.f=r?i?function(e,t,n){if(a(e),t=s(t),a(n),"function"==typeof e&&"prototype"===t&&"value"in n&&"writable"in n&&!n.writable){var r=c(e,t);r&&r.writable&&(e[t]=n.value,n={configurable:"configurable"in n?n.configurable:r.configurable,enumerable:"enumerable"in n?n.enumerable:r.enumerable,writable:!1})}return u(e,t,n)}:u:function(e,t,n){if(a(e),t=s(t),a(n),o)try{return u(e,t,n)}catch(e){}if("get"in n||"set"in n)throw l("Accessors not supported");return"value"in n&&(e[t]=n.value),e}},function(e,t,n){"use strict";var r=n(2),o=r({}.toString),i=r("".slice);e.exports=function(e){return i(o(e),8,-1)}},function(e,t,n){var r=n(149),o=n(150),i=n(151),a=n(152),s=n(153);function l(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}l.prototype.clear=r,l.prototype.delete=o,l.prototype.get=i,l.prototype.has=a,l.prototype.set=s,e.exports=l},function(e,t,n){var r=n(67);e.exports=function(e,t){for(var n=e.length;n--;)if(r(e[n][0],t))return n;return-1}},function(e,t,n){var r=n(9)(Object,"create");e.exports=r},function(e,t,n){var r=n(171);e.exports=function(e,t){var n=e.__data__;return r(t)?n["string"==typeof t?"string":"hash"]:n.map}},function(e,t,n){var r=n(43);e.exports=function(e){if("string"==typeof e||r(e))return e;var t=e+"";return"0"==t&&1/e==-1/0?"-0":t}},function(e,t,n){var r,o; +(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);!function(e){function t(t){for(var r,a,s=t[0],l=t[1],u=t[2],p=0,f=[];p<s.length;p++)a=s[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&f.push(o[a][0]),o[a]=0;for(r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r]);for(c&&c(t);f.length;)f.shift()();return i.push.apply(i,u||[]),n()}function n(){for(var e,t=0;t<i.length;t++){for(var n=i[t],r=!0,s=1;s<n.length;s++){var l=n[s];0!==o[l]&&(r=!1)}r&&(i.splice(t--,1),e=a(a.s=n[0]))}return e}var r={},o={8:0},i=[];function a(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.e=function(e){var t=[],n=o[e];if(0!==n)if(n)t.push(n[2]);else{var r=new Promise((function(t,r){n=o[e]=[t,r]}));t.push(n[2]=r);var i,s=document.createElement("script");s.charset="utf-8",s.timeout=120,a.nc&&s.setAttribute("nonce",a.nc),s.src=function(e){return a.p+"assets/js/"+({9:"vendors~docsearch"}[e]||e)+"."+{1:"e58b189b",2:"31700463",3:"d2d52895",4:"df2bbd5a",5:"77acca49",6:"a4b2b61c",7:"da6345b3",9:"6f140a46",10:"745c23d7",11:"fddb7258",12:"7bb3c885",13:"16d2ed7b",14:"f2001be5",15:"b654a4b7",16:"6d53e8c9",17:"200838f4",18:"cb7ddc93",19:"b205dfbe",20:"e0ce5fdf",21:"07bf2bd2",22:"7b58d08d",23:"91d2b584",24:"4c608df4",25:"6494940f",26:"0b8da5eb",27:"7c4f8b3c",28:"1a700b9c",29:"593477ee",30:"67045ac8",31:"16dc0db7",32:"2d673e2d",33:"bd2a7b4b",34:"ab1a52be",35:"0c150a2f",36:"c6385503",37:"4ed085e5",38:"1e5dcace",39:"e0f1278a",40:"486c2625",41:"3ad56d94",42:"85859696",43:"b768f2d9",44:"a4d0a50b",45:"e1088147",46:"40412734",47:"ee10c959",48:"88edca03",49:"7a5ead4d",50:"55827105",51:"4fef1cc4",52:"4bf02870",53:"54b8cfbc",54:"9e245086",55:"f17dc5b8",56:"86aa06d9",57:"be0aa56c",58:"bd6af85c",59:"38e95dc8",60:"7bf941a3",61:"6e8b4eca",62:"b7a4350b",63:"8b45e0ab",64:"eb6fb88e",65:"68dfc4a0",66:"3dc620d5",67:"87dcaf99",68:"d4b74534",69:"bb02b634",70:"791c9a7a",71:"796a9e78",72:"868e3dbf",73:"38bfce19",74:"a892403a",75:"cbac1b03",76:"aaf5f098",77:"1abe0be2",78:"be989ff0",79:"f85cf793"}[e]+".js"}(e);var l=new Error;i=function(t){s.onerror=s.onload=null,clearTimeout(u);var n=o[e];if(0!==n){if(n){var r=t&&("load"===t.type?"missing":t.type),i=t&&t.target&&t.target.src;l.message="Loading chunk "+e+" failed.\n("+r+": "+i+")",l.name="ChunkLoadError",l.type=r,l.request=i,n[1](l)}o[e]=void 0}};var u=setTimeout((function(){i({type:"timeout",target:s})}),12e4);s.onerror=s.onload=i,document.head.appendChild(s)}return Promise.all(t)},a.m=e,a.c=r,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(n,r,function(t){return e[t]}.bind(null,r));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/curriculum/",a.oe=function(e){throw console.error(e),e};var s=window.webpackJsonp=window.webpackJsonp||[],l=s.push.bind(s);s.push=t,s=s.slice();for(var u=0;u<s.length;u++)t(s[u]);var c=l;i.push([96,0]),n()}([function(e,t,n){"use strict";var r=n(50),o=r.all;e.exports=r.IS_HTMLDDA?function(e){return"function"==typeof e||e===o}:function(e){return"function"==typeof e}},function(e,t,n){"use strict";var r=function(e){return e&&e.Math===Math&&e};e.exports=r("object"==typeof globalThis&&globalThis)||r("object"==typeof window&&window)||r("object"==typeof self&&self)||r("object"==typeof global&&global)||function(){return this}()||this||Function("return this")()},function(e,t,n){"use strict";var r=n(25),o=Function.prototype,i=o.call,a=r&&o.bind.bind(i,i);e.exports=r?a:function(e){return function(){return i.apply(e,arguments)}}},function(e,t,n){"use strict";e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t){var n=Array.isArray;e.exports=n},function(e,t,n){"use strict";var r=n(3);e.exports=!r((function(){return 7!==Object.defineProperty({},1,{get:function(){return 7}})[1]}))},function(e,t,n){var r=n(65),o="object"==typeof self&&self&&self.Object===Object&&self,i=r||o||Function("return this")();e.exports=i},function(e,t,n){"use strict";var r=n(2),o=n(33),i=r({}.hasOwnProperty);e.exports=Object.hasOwn||function(e,t){return i(o(e),t)}},function(e,t,n){"use strict";var r=n(0),o=n(50),i=o.all;e.exports=o.IS_HTMLDDA?function(e){return"object"==typeof e?null!==e:r(e)||e===i}:function(e){return"object"==typeof e?null!==e:r(e)}},function(e,t,n){var r=n(159),o=n(162);e.exports=function(e,t){var n=o(e,t);return r(n)?n:void 0}},function(e,t){e.exports=function(e){return null!=e&&"object"==typeof e}},function(e,t,n){var r=n(13),o=n(144),i=n(145),a=r?r.toStringTag:void 0;e.exports=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":a&&a in Object(e)?o(e):i(e)}},function(e,t,n){"use strict";var r=n(5),o=n(15),i=n(26);e.exports=r?function(e,t,n){return o.f(e,t,i(1,n))}:function(e,t,n){return e[t]=n,e}},function(e,t,n){var r=n(6).Symbol;e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r,o,i,a,s){var l,u="function"==typeof e?e.options:e;if(t&&(u.render=t,u.staticRenderFns=n,u._compiled=!0),r&&(u.functional=!0),i&&(u._scopeId="data-v-"+i),a?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},u._ssrRegister=l):o&&(l=s?function(){o.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:o),l)if(u.functional){u._injectStyles=l;var c=u.render;u.render=function(e,t){return l.call(t),c(e,t)}}else{var p=u.beforeCreate;u.beforeCreate=p?[].concat(p,l):[l]}return{exports:e,options:u}}n.d(t,"a",(function(){return r}))},function(e,t,n){"use strict";var r=n(5),o=n(59),i=n(105),a=n(34),s=n(49),l=TypeError,u=Object.defineProperty,c=Object.getOwnPropertyDescriptor;t.f=r?i?function(e,t,n){if(a(e),t=s(t),a(n),"function"==typeof e&&"prototype"===t&&"value"in n&&"writable"in n&&!n.writable){var r=c(e,t);r&&r.writable&&(e[t]=n.value,n={configurable:"configurable"in n?n.configurable:r.configurable,enumerable:"enumerable"in n?n.enumerable:r.enumerable,writable:!1})}return u(e,t,n)}:u:function(e,t,n){if(a(e),t=s(t),a(n),o)try{return u(e,t,n)}catch(e){}if("get"in n||"set"in n)throw l("Accessors not supported");return"value"in n&&(e[t]=n.value),e}},function(e,t,n){"use strict";var r=n(2),o=r({}.toString),i=r("".slice);e.exports=function(e){return i(o(e),8,-1)}},function(e,t,n){var r=n(149),o=n(150),i=n(151),a=n(152),s=n(153);function l(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}l.prototype.clear=r,l.prototype.delete=o,l.prototype.get=i,l.prototype.has=a,l.prototype.set=s,e.exports=l},function(e,t,n){var r=n(67);e.exports=function(e,t){for(var n=e.length;n--;)if(r(e[n][0],t))return n;return-1}},function(e,t,n){var r=n(9)(Object,"create");e.exports=r},function(e,t,n){var r=n(171);e.exports=function(e,t){var n=e.__data__;return r(t)?n["string"==typeof t?"string":"hash"]:n.map}},function(e,t,n){var r=n(43);e.exports=function(e){if("string"==typeof e||r(e))return e;var t=e+"";return"0"==t&&1/e==-1/0?"-0":t}},function(e,t,n){var r,o; /* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress * @license MIT */void 0===(o="function"==typeof(r=function(){var e,t,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'};function o(e,t,n){return e<t?t:e>n?n:e}function i(e){return 100*(-1+e)}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(r[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=o(e,r.minimum,1),n.status=1===e?null:e;var l=n.render(!t),u=l.querySelector(r.barSelector),c=r.speed,p=r.easing;return l.offsetWidth,a((function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),s(u,function(e,t,n){var o;return(o="translate3d"===r.positionUsing?{transform:"translate3d("+i(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+i(e)+"%,0)"}:{"margin-left":i(e)+"%"}).transition="all "+t+"ms "+n,o}(e,c,p)),1===e?(s(l,{transition:"none",opacity:1}),l.offsetWidth,setTimeout((function(){s(l,{transition:"all "+c+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),c)}),c)):setTimeout(t,c)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),r.trickleSpeed)};return r.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*o(Math.random()*t,.1,.95)),t=o(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},e=0,t=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===t&&n.start(),e++,t++,r.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=r.template;var o,a=t.querySelector(r.barSelector),l=e?"-100":i(n.status||0),c=document.querySelector(r.parent);return s(a,{transition:"all 0 linear",transform:"translate3d("+l+"%,0,0)"}),r.showSpinner||(o=t.querySelector(r.spinnerSelector))&&f(o),c!=document.body&&u(c,"nprogress-custom-parent"),c.appendChild(t),t},n.remove=function(){c(document.documentElement,"nprogress-busy"),c(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var a=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),s=function(){var e=["Webkit","O","Moz","ms"],t={};function n(n){return n=n.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()})),t[n]||(t[n]=function(t){var n=document.body.style;if(t in n)return t;for(var r,o=e.length,i=t.charAt(0).toUpperCase()+t.slice(1);o--;)if((r=e[o]+i)in n)return r;return t}(n))}function r(e,t,r){t=n(t),e.style[t]=r}return function(e,t){var n,o,i=arguments;if(2==i.length)for(n in t)void 0!==(o=t[n])&&t.hasOwnProperty(n)&&r(e,n,o);else r(e,i[1],i[2])}}();function l(e,t){return("string"==typeof e?e:p(e)).indexOf(" "+t+" ")>=0}function u(e,t){var n=p(e),r=n+t;l(n,t)||(e.className=r.substring(1))}function c(e,t){var n,r=p(e);l(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n})?r.call(t,n,t,e):r)||(e.exports=o)},function(e,t,n){"use strict";var r=n(1),o=n(45).f,i=n(12),a=n(92),s=n(32),l=n(61),u=n(120);e.exports=function(e,t){var n,c,p,f,h,d=e.target,v=e.global,m=e.stat;if(n=v?r:m?r[d]||s(d,{}):(r[d]||{}).prototype)for(c in t){if(f=t[c],p=e.dontCallGetSet?(h=o(n,c))&&h.value:n[c],!u(v?c:d+(m?".":"#")+c,e.forced)&&void 0!==p){if(typeof f==typeof p)continue;l(f,p)}(e.sham||p&&p.sham)&&i(f,"sham",!0),a(n,c,f,e)}}},function(e,t,n){"use strict";var r=n(25),o=Function.prototype.call;e.exports=r?o.bind(o):function(){return o.apply(o,arguments)}},function(e,t,n){"use strict";var r=n(3);e.exports=!r((function(){var e=function(){}.bind();return"function"!=typeof e||e.hasOwnProperty("prototype")}))},function(e,t,n){"use strict";e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,n){"use strict";var r=n(46),o=n(47);e.exports=function(e){return r(o(e))}},function(e,t,n){"use strict";var r=n(1),o=n(0),i=function(e){return o(e)?e:void 0};e.exports=function(e,t){return arguments.length<2?i(r[e]):r[e]&&r[e][t]}},function(e,t,n){"use strict";var r=n(0),o=n(102),i=TypeError;e.exports=function(e){if(r(e))return e;throw i(o(e)+" is not a function")}},function(e,t,n){"use strict";var r=n(1),o=n(56),i=n(7),a=n(58),s=n(54),l=n(53),u=r.Symbol,c=o("wks"),p=l?u.for||u:u&&u.withoutSetter||a;e.exports=function(e){return i(c,e)||(c[e]=s&&i(u,e)?u[e]:p("Symbol."+e)),c[e]}},function(e,t,n){"use strict";var r=n(1),o=n(32),i=r["__core-js_shared__"]||o("__core-js_shared__",{});e.exports=i},function(e,t,n){"use strict";var r=n(1),o=Object.defineProperty;e.exports=function(e,t){try{o(r,e,{value:t,configurable:!0,writable:!0})}catch(n){r[e]=t}return t}},function(e,t,n){"use strict";var r=n(47),o=Object;e.exports=function(e){return o(r(e))}},function(e,t,n){"use strict";var r=n(8),o=String,i=TypeError;e.exports=function(e){if(r(e))return e;throw i(o(e)+" is not an object")}},function(e,t,n){"use strict";var r=n(117);e.exports=function(e){return r(e.length)}},function(e,t,n){var r=n(143),o=n(10),i=Object.prototype,a=i.hasOwnProperty,s=i.propertyIsEnumerable,l=r(function(){return arguments}())?r:function(e){return o(e)&&a.call(e,"callee")&&!s.call(e,"callee")};e.exports=l},function(e,t,n){var r=n(9)(n(6),"Map");e.exports=r},function(e,t){e.exports=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}},function(e,t,n){var r=n(163),o=n(170),i=n(172),a=n(173),s=n(174);function l(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}l.prototype.clear=r,l.prototype.delete=o,l.prototype.get=i,l.prototype.has=a,l.prototype.set=s,e.exports=l},function(e,t){e.exports=function(e){var t=-1,n=Array(e.size);return e.forEach((function(e){n[++t]=e})),n}},function(e,t){e.exports=function(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=9007199254740991}},function(e,t,n){var r=n(4),o=n(43),i=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,a=/^\w*$/;e.exports=function(e,t){if(r(e))return!1;var n=typeof e;return!("number"!=n&&"symbol"!=n&&"boolean"!=n&&null!=e&&!o(e))||(a.test(e)||!i.test(e)||null!=t&&e in Object(t))}},function(e,t,n){var r=n(11),o=n(10);e.exports=function(e){return"symbol"==typeof e||o(e)&&"[object Symbol]"==r(e)}},function(e,t){e.exports=function(e){return e}},function(e,t,n){"use strict";var r=n(5),o=n(24),i=n(98),a=n(26),s=n(27),l=n(49),u=n(7),c=n(59),p=Object.getOwnPropertyDescriptor;t.f=r?p:function(e,t){if(e=s(e),t=l(t),c)try{return p(e,t)}catch(e){}if(u(e,t))return a(!o(i.f,e,t),e[t])}},function(e,t,n){"use strict";var r=n(2),o=n(3),i=n(16),a=Object,s=r("".split);e.exports=o((function(){return!a("z").propertyIsEnumerable(0)}))?function(e){return"String"===i(e)?s(e,""):a(e)}:a},function(e,t,n){"use strict";var r=n(48),o=TypeError;e.exports=function(e){if(r(e))throw o("Can't call method on "+e);return e}},function(e,t,n){"use strict";e.exports=function(e){return null==e}},function(e,t,n){"use strict";var r=n(99),o=n(51);e.exports=function(e){var t=r(e,"string");return o(t)?t:t+""}},function(e,t,n){"use strict";var r="object"==typeof document&&document.all,o=void 0===r&&void 0!==r;e.exports={all:r,IS_HTMLDDA:o}},function(e,t,n){"use strict";var r=n(28),o=n(0),i=n(52),a=n(53),s=Object;e.exports=a?function(e){return"symbol"==typeof e}:function(e){var t=r("Symbol");return o(t)&&i(t.prototype,s(e))}},function(e,t,n){"use strict";var r=n(2);e.exports=r({}.isPrototypeOf)},function(e,t,n){"use strict";var r=n(54);e.exports=r&&!Symbol.sham&&"symbol"==typeof Symbol.iterator},function(e,t,n){"use strict";var r=n(55),o=n(3),i=n(1).String;e.exports=!!Object.getOwnPropertySymbols&&!o((function(){var e=Symbol("symbol detection");return!i(e)||!(Object(e)instanceof Symbol)||!Symbol.sham&&r&&r<41}))},function(e,t,n){"use strict";var r,o,i=n(1),a=n(100),s=i.process,l=i.Deno,u=s&&s.versions||l&&l.version,c=u&&u.v8;c&&(o=(r=c.split("."))[0]>0&&r[0]<4?1:+(r[0]+r[1])),!o&&a&&(!(r=a.match(/Edge\/(\d+)/))||r[1]>=74)&&(r=a.match(/Chrome\/(\d+)/))&&(o=+r[1]),e.exports=o},function(e,t,n){"use strict";var r=n(57),o=n(31);(e.exports=function(e,t){return o[e]||(o[e]=void 0!==t?t:{})})("versions",[]).push({version:"3.32.2",mode:r?"pure":"global",copyright:"© 2014-2023 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.32.2/LICENSE",source:"https://github.com/zloirock/core-js"})},function(e,t,n){"use strict";e.exports=!1},function(e,t,n){"use strict";var r=n(2),o=0,i=Math.random(),a=r(1..toString);e.exports=function(e){return"Symbol("+(void 0===e?"":e)+")_"+a(++o+i,36)}},function(e,t,n){"use strict";var r=n(5),o=n(3),i=n(104);e.exports=!r&&!o((function(){return 7!==Object.defineProperty(i("div"),"a",{get:function(){return 7}}).a}))},function(e,t,n){"use strict";e.exports={}},function(e,t,n){"use strict";var r=n(7),o=n(111),i=n(45),a=n(15);e.exports=function(e,t,n){for(var s=o(t),l=a.f,u=i.f,c=0;c<s.length;c++){var p=s[c];r(e,p)||n&&r(n,p)||l(e,p,u(t,p))}}},function(e,t,n){"use strict";var r=n(116);e.exports=function(e){var t=+e;return t!=t||0===t?0:r(t)}},function(e,t,n){"use strict";var r=n(130),o=n(34),i=n(131);e.exports=Object.setPrototypeOf||("__proto__"in{}?function(){var e,t=!1,n={};try{(e=r(Object.prototype,"__proto__","set"))(n,[]),t=n instanceof Array}catch(e){}return function(n,r){return o(n),i(r),t?e(n,r):n.__proto__=r,n}}():void 0)},function(e,t){e.exports=function(e,t){for(var n=-1,r=t.length,o=e.length;++n<r;)e[o+n]=t[n];return e}},function(e,t){var n="object"==typeof global&&global&&global.Object===Object&&global;e.exports=n},function(e,t,n){var r=n(17),o=n(154),i=n(155),a=n(156),s=n(157),l=n(158);function u(e){var t=this.__data__=new r(e);this.size=t.size}u.prototype.clear=o,u.prototype.delete=i,u.prototype.get=a,u.prototype.has=s,u.prototype.set=l,e.exports=u},function(e,t){e.exports=function(e,t){return e===t||e!=e&&t!=t}},function(e,t,n){var r=n(11),o=n(38);e.exports=function(e){if(!o(e))return!1;var t=r(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t}},function(e,t){var n=Function.prototype.toString;e.exports=function(e){if(null!=e){try{return n.call(e)}catch(e){}try{return e+""}catch(e){}}return""}},function(e,t,n){var r=n(175),o=n(10);e.exports=function e(t,n,i,a,s){return t===n||(null==t||null==n||!o(t)&&!o(n)?t!=t&&n!=n:r(t,n,i,a,e,s))}},function(e,t,n){var r=n(72),o=n(178),i=n(73);e.exports=function(e,t,n,a,s,l){var u=1&n,c=e.length,p=t.length;if(c!=p&&!(u&&p>c))return!1;var f=l.get(e),h=l.get(t);if(f&&h)return f==t&&h==e;var d=-1,v=!0,m=2&n?new r:void 0;for(l.set(e,t),l.set(t,e);++d<c;){var g=e[d],y=t[d];if(a)var b=u?a(y,g,d,t,e,l):a(g,y,d,e,t,l);if(void 0!==b){if(b)continue;v=!1;break}if(m){if(!o(t,(function(e,t){if(!i(m,t)&&(g===e||s(g,e,n,a,l)))return m.push(t)}))){v=!1;break}}else if(g!==y&&!s(g,y,n,a,l)){v=!1;break}}return l.delete(e),l.delete(t),v}},function(e,t,n){var r=n(39),o=n(176),i=n(177);function a(e){var t=-1,n=null==e?0:e.length;for(this.__data__=new r;++t<n;)this.add(e[t])}a.prototype.add=a.prototype.push=o,a.prototype.has=i,e.exports=a},function(e,t){e.exports=function(e,t){return e.has(t)}},function(e,t,n){var r=n(188),o=n(194),i=n(79);e.exports=function(e){return i(e)?r(e):o(e)}},function(e,t,n){(function(e){var r=n(6),o=n(190),i=t&&!t.nodeType&&t,a=i&&"object"==typeof e&&e&&!e.nodeType&&e,s=a&&a.exports===i?r.Buffer:void 0,l=(s?s.isBuffer:void 0)||o;e.exports=l}).call(this,n(76)(e))},function(e,t){e.exports=function(e){return e.webpackPolyfill||(e.deprecate=function(){},e.paths=[],e.children||(e.children=[]),Object.defineProperty(e,"loaded",{enumerable:!0,get:function(){return e.l}}),Object.defineProperty(e,"id",{enumerable:!0,get:function(){return e.i}}),e.webpackPolyfill=1),e}},function(e,t){var n=/^(?:0|[1-9]\d*)$/;e.exports=function(e,t){var r=typeof e;return!!(t=null==t?9007199254740991:t)&&("number"==r||"symbol"!=r&&n.test(e))&&e>-1&&e%1==0&&e<t}},function(e,t,n){var r=n(191),o=n(192),i=n(193),a=i&&i.isTypedArray,s=a?o(a):r;e.exports=s},function(e,t,n){var r=n(68),o=n(41);e.exports=function(e){return null!=e&&o(e.length)&&!r(e)}},function(e,t,n){var r=n(9)(n(6),"Set");e.exports=r},function(e,t,n){var r=n(38);e.exports=function(e){return e==e&&!r(e)}},function(e,t){e.exports=function(e,t){return function(n){return null!=n&&(n[e]===t&&(void 0!==t||e in Object(n)))}}},function(e,t,n){var r=n(84),o=n(21);e.exports=function(e,t){for(var n=0,i=(t=r(t,e)).length;null!=e&&n<i;)e=e[o(t[n++])];return n&&n==i?e:void 0}},function(e,t,n){var r=n(4),o=n(42),i=n(204),a=n(207);e.exports=function(e,t){return r(e)?e:o(e,t)?[e]:i(a(e))}},function(e,t,n){},function(e,t,n){},function(e,t,n){var r=n(141),o=n(146),i=n(216),a=n(224),s=n(233),l=n(91),u=i((function(e){var t=l(e);return s(t)&&(t=void 0),a(r(e,1,s,!0),o(t,2))}));e.exports=u},function(e,t,n){"use strict"; /*! @@ -13,4 +13,4 @@ * (c) 2014-2022 Evan You * Released under the MIT License. */ -var r=Object.freeze({}),o=Array.isArray;function i(e){return null==e}function a(e){return null!=e}function s(e){return!0===e}function l(e){return"string"==typeof e||"number"==typeof e||"symbol"==typeof e||"boolean"==typeof e}function u(e){return"function"==typeof e}function c(e){return null!==e&&"object"==typeof e}var p=Object.prototype.toString;function f(e){return"[object Object]"===p.call(e)}function h(e){return"[object RegExp]"===p.call(e)}function d(e){var t=parseFloat(String(e));return t>=0&&Math.floor(t)===t&&isFinite(e)}function v(e){return a(e)&&"function"==typeof e.then&&"function"==typeof e.catch}function m(e){return null==e?"":Array.isArray(e)||f(e)&&e.toString===p?JSON.stringify(e,null,2):String(e)}function g(e){var t=parseFloat(e);return isNaN(t)?e:t}function y(e,t){for(var n=Object.create(null),r=e.split(","),o=0;o<r.length;o++)n[r[o]]=!0;return t?function(e){return n[e.toLowerCase()]}:function(e){return n[e]}}y("slot,component",!0);var b=y("key,ref,slot,slot-scope,is");function _(e,t){var n=e.length;if(n){if(t===e[n-1])return void(e.length=n-1);var r=e.indexOf(t);if(r>-1)return e.splice(r,1)}}var w=Object.prototype.hasOwnProperty;function k(e,t){return w.call(e,t)}function x(e){var t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}var C=/-(\w)/g,A=x((function(e){return e.replace(C,(function(e,t){return t?t.toUpperCase():""}))})),S=x((function(e){return e.charAt(0).toUpperCase()+e.slice(1)})),P=/\B([A-Z])/g,j=x((function(e){return e.replace(P,"-$1").toLowerCase()}));var O=Function.prototype.bind?function(e,t){return e.bind(t)}:function(e,t){function n(n){var r=arguments.length;return r?r>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n};function E(e,t){t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function $(e,t){for(var n in t)e[n]=t[n];return e}function T(e){for(var t={},n=0;n<e.length;n++)e[n]&&$(t,e[n]);return t}function L(e,t,n){}var I=function(e,t,n){return!1},R=function(e){return e};function D(e,t){if(e===t)return!0;var n=c(e),r=c(t);if(!n||!r)return!n&&!r&&String(e)===String(t);try{var o=Array.isArray(e),i=Array.isArray(t);if(o&&i)return e.length===t.length&&e.every((function(e,n){return D(e,t[n])}));if(e instanceof Date&&t instanceof Date)return e.getTime()===t.getTime();if(o||i)return!1;var a=Object.keys(e),s=Object.keys(t);return a.length===s.length&&a.every((function(n){return D(e[n],t[n])}))}catch(e){return!1}}function M(e,t){for(var n=0;n<e.length;n++)if(D(e[n],t))return n;return-1}function F(e){var t=!1;return function(){t||(t=!0,e.apply(this,arguments))}}function U(e,t){return e===t?0===e&&1/e!=1/t:e==e||t==t}var B=["component","directive","filter"],z=["beforeCreate","created","beforeMount","mounted","beforeUpdate","updated","beforeDestroy","destroyed","activated","deactivated","errorCaptured","serverPrefetch","renderTracked","renderTriggered"],N={optionMergeStrategies:Object.create(null),silent:!1,productionTip:!1,devtools:!1,performance:!1,errorHandler:null,warnHandler:null,ignoredElements:[],keyCodes:Object.create(null),isReservedTag:I,isReservedAttr:I,isUnknownElement:I,getTagNamespace:L,parsePlatformTagName:R,mustUseProp:I,async:!0,_lifecycleHooks:z},V=/a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/;function W(e){var t=(e+"").charCodeAt(0);return 36===t||95===t}function q(e,t,n,r){Object.defineProperty(e,t,{value:n,enumerable:!!r,writable:!0,configurable:!0})}var H=new RegExp("[^".concat(V.source,".$_\\d]"));var G="__proto__"in{},K="undefined"!=typeof window,Y=K&&window.navigator.userAgent.toLowerCase(),Q=Y&&/msie|trident/.test(Y),J=Y&&Y.indexOf("msie 9.0")>0,X=Y&&Y.indexOf("edge/")>0;Y&&Y.indexOf("android");var Z=Y&&/iphone|ipad|ipod|ios/.test(Y);Y&&/chrome\/\d+/.test(Y),Y&&/phantomjs/.test(Y);var ee,te=Y&&Y.match(/firefox\/(\d+)/),ne={}.watch,re=!1;if(K)try{var oe={};Object.defineProperty(oe,"passive",{get:function(){re=!0}}),window.addEventListener("test-passive",null,oe)}catch(e){}var ie=function(){return void 0===ee&&(ee=!K&&"undefined"!=typeof global&&(global.process&&"server"===global.process.env.VUE_ENV)),ee},ae=K&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function se(e){return"function"==typeof e&&/native code/.test(e.toString())}var le,ue="undefined"!=typeof Symbol&&se(Symbol)&&"undefined"!=typeof Reflect&&se(Reflect.ownKeys);le="undefined"!=typeof Set&&se(Set)?Set:function(){function e(){this.set=Object.create(null)}return e.prototype.has=function(e){return!0===this.set[e]},e.prototype.add=function(e){this.set[e]=!0},e.prototype.clear=function(){this.set=Object.create(null)},e}();var ce=null;function pe(e){void 0===e&&(e=null),e||ce&&ce._scope.off(),ce=e,e&&e._scope.on()}var fe=function(){function e(e,t,n,r,o,i,a,s){this.tag=e,this.data=t,this.children=n,this.text=r,this.elm=o,this.ns=void 0,this.context=i,this.fnContext=void 0,this.fnOptions=void 0,this.fnScopeId=void 0,this.key=t&&t.key,this.componentOptions=a,this.componentInstance=void 0,this.parent=void 0,this.raw=!1,this.isStatic=!1,this.isRootInsert=!0,this.isComment=!1,this.isCloned=!1,this.isOnce=!1,this.asyncFactory=s,this.asyncMeta=void 0,this.isAsyncPlaceholder=!1}return Object.defineProperty(e.prototype,"child",{get:function(){return this.componentInstance},enumerable:!1,configurable:!0}),e}(),he=function(e){void 0===e&&(e="");var t=new fe;return t.text=e,t.isComment=!0,t};function de(e){return new fe(void 0,void 0,void 0,String(e))}function ve(e){var t=new fe(e.tag,e.data,e.children&&e.children.slice(),e.text,e.elm,e.context,e.componentOptions,e.asyncFactory);return t.ns=e.ns,t.isStatic=e.isStatic,t.key=e.key,t.isComment=e.isComment,t.fnContext=e.fnContext,t.fnOptions=e.fnOptions,t.fnScopeId=e.fnScopeId,t.asyncMeta=e.asyncMeta,t.isCloned=!0,t}var me=0,ge=[],ye=function(){function e(){this._pending=!1,this.id=me++,this.subs=[]}return e.prototype.addSub=function(e){this.subs.push(e)},e.prototype.removeSub=function(e){this.subs[this.subs.indexOf(e)]=null,this._pending||(this._pending=!0,ge.push(this))},e.prototype.depend=function(t){e.target&&e.target.addDep(this)},e.prototype.notify=function(e){var t=this.subs.filter((function(e){return e}));for(var n=0,r=t.length;n<r;n++){0,t[n].update()}},e}();ye.target=null;var be=[];function _e(e){be.push(e),ye.target=e}function we(){be.pop(),ye.target=be[be.length-1]}var ke=Array.prototype,xe=Object.create(ke);["push","pop","shift","unshift","splice","sort","reverse"].forEach((function(e){var t=ke[e];q(xe,e,(function(){for(var n=[],r=0;r<arguments.length;r++)n[r]=arguments[r];var o,i=t.apply(this,n),a=this.__ob__;switch(e){case"push":case"unshift":o=n;break;case"splice":o=n.slice(2)}return o&&a.observeArray(o),a.dep.notify(),i}))}));var Ce=Object.getOwnPropertyNames(xe),Ae={},Se=!0;function Pe(e){Se=e}var je={notify:L,depend:L,addSub:L,removeSub:L},Oe=function(){function e(e,t,n){if(void 0===t&&(t=!1),void 0===n&&(n=!1),this.value=e,this.shallow=t,this.mock=n,this.dep=n?je:new ye,this.vmCount=0,q(e,"__ob__",this),o(e)){if(!n)if(G)e.__proto__=xe;else for(var r=0,i=Ce.length;r<i;r++){q(e,s=Ce[r],xe[s])}t||this.observeArray(e)}else{var a=Object.keys(e);for(r=0;r<a.length;r++){var s;$e(e,s=a[r],Ae,void 0,t,n)}}}return e.prototype.observeArray=function(e){for(var t=0,n=e.length;t<n;t++)Ee(e[t],!1,this.mock)},e}();function Ee(e,t,n){return e&&k(e,"__ob__")&&e.__ob__ instanceof Oe?e.__ob__:!Se||!n&&ie()||!o(e)&&!f(e)||!Object.isExtensible(e)||e.__v_skip||Fe(e)||e instanceof fe?void 0:new Oe(e,t,n)}function $e(e,t,n,r,i,a){var s=new ye,l=Object.getOwnPropertyDescriptor(e,t);if(!l||!1!==l.configurable){var u=l&&l.get,c=l&&l.set;u&&!c||n!==Ae&&2!==arguments.length||(n=e[t]);var p=!i&&Ee(n,!1,a);return Object.defineProperty(e,t,{enumerable:!0,configurable:!0,get:function(){var t=u?u.call(e):n;return ye.target&&(s.depend(),p&&(p.dep.depend(),o(t)&&Ie(t))),Fe(t)&&!i?t.value:t},set:function(t){var r=u?u.call(e):n;if(U(r,t)){if(c)c.call(e,t);else{if(u)return;if(!i&&Fe(r)&&!Fe(t))return void(r.value=t);n=t}p=!i&&Ee(t,!1,a),s.notify()}}}),s}}function Te(e,t,n){if(!Me(e)){var r=e.__ob__;return o(e)&&d(t)?(e.length=Math.max(e.length,t),e.splice(t,1,n),r&&!r.shallow&&r.mock&&Ee(n,!1,!0),n):t in e&&!(t in Object.prototype)?(e[t]=n,n):e._isVue||r&&r.vmCount?n:r?($e(r.value,t,n,void 0,r.shallow,r.mock),r.dep.notify(),n):(e[t]=n,n)}}function Le(e,t){if(o(e)&&d(t))e.splice(t,1);else{var n=e.__ob__;e._isVue||n&&n.vmCount||Me(e)||k(e,t)&&(delete e[t],n&&n.dep.notify())}}function Ie(e){for(var t=void 0,n=0,r=e.length;n<r;n++)(t=e[n])&&t.__ob__&&t.__ob__.dep.depend(),o(t)&&Ie(t)}function Re(e){return De(e,!0),q(e,"__v_isShallow",!0),e}function De(e,t){if(!Me(e)){Ee(e,t,ie());0}}function Me(e){return!(!e||!e.__v_isReadonly)}function Fe(e){return!(!e||!0!==e.__v_isRef)}function Ue(e,t,n){Object.defineProperty(e,n,{enumerable:!0,configurable:!0,get:function(){var e=t[n];if(Fe(e))return e.value;var r=e&&e.__ob__;return r&&r.dep.depend(),e},set:function(e){var r=t[n];Fe(r)&&!Fe(e)?r.value=e:t[n]=e}})}"".concat("watcher"," callback"),"".concat("watcher"," getter"),"".concat("watcher"," cleanup");var Be;var ze=function(){function e(e){void 0===e&&(e=!1),this.detached=e,this.active=!0,this.effects=[],this.cleanups=[],this.parent=Be,!e&&Be&&(this.index=(Be.scopes||(Be.scopes=[])).push(this)-1)}return e.prototype.run=function(e){if(this.active){var t=Be;try{return Be=this,e()}finally{Be=t}}else 0},e.prototype.on=function(){Be=this},e.prototype.off=function(){Be=this.parent},e.prototype.stop=function(e){if(this.active){var t=void 0,n=void 0;for(t=0,n=this.effects.length;t<n;t++)this.effects[t].teardown();for(t=0,n=this.cleanups.length;t<n;t++)this.cleanups[t]();if(this.scopes)for(t=0,n=this.scopes.length;t<n;t++)this.scopes[t].stop(!0);if(!this.detached&&this.parent&&!e){var r=this.parent.scopes.pop();r&&r!==this&&(this.parent.scopes[this.index]=r,r.index=this.index)}this.parent=void 0,this.active=!1}},e}();function Ne(e){var t=e._provided,n=e.$parent&&e.$parent._provided;return n===t?e._provided=Object.create(n):t}var Ve=x((function(e){var t="&"===e.charAt(0),n="~"===(e=t?e.slice(1):e).charAt(0),r="!"===(e=n?e.slice(1):e).charAt(0);return{name:e=r?e.slice(1):e,once:n,capture:r,passive:t}}));function We(e,t){function n(){var e=n.fns;if(!o(e))return St(e,null,arguments,t,"v-on handler");for(var r=e.slice(),i=0;i<r.length;i++)St(r[i],null,arguments,t,"v-on handler")}return n.fns=e,n}function qe(e,t,n,r,o,a){var l,u,c,p;for(l in e)u=e[l],c=t[l],p=Ve(l),i(u)||(i(c)?(i(u.fns)&&(u=e[l]=We(u,a)),s(p.once)&&(u=e[l]=o(p.name,u,p.capture)),n(p.name,u,p.capture,p.passive,p.params)):u!==c&&(c.fns=u,e[l]=c));for(l in t)i(e[l])&&r((p=Ve(l)).name,t[l],p.capture)}function He(e,t,n){var r;e instanceof fe&&(e=e.data.hook||(e.data.hook={}));var o=e[t];function l(){n.apply(this,arguments),_(r.fns,l)}i(o)?r=We([l]):a(o.fns)&&s(o.merged)?(r=o).fns.push(l):r=We([o,l]),r.merged=!0,e[t]=r}function Ge(e,t,n,r,o){if(a(t)){if(k(t,n))return e[n]=t[n],o||delete t[n],!0;if(k(t,r))return e[n]=t[r],o||delete t[r],!0}return!1}function Ke(e){return l(e)?[de(e)]:o(e)?function e(t,n){var r,u,c,p,f=[];for(r=0;r<t.length;r++)i(u=t[r])||"boolean"==typeof u||(c=f.length-1,p=f[c],o(u)?u.length>0&&(Ye((u=e(u,"".concat(n||"","_").concat(r)))[0])&&Ye(p)&&(f[c]=de(p.text+u[0].text),u.shift()),f.push.apply(f,u)):l(u)?Ye(p)?f[c]=de(p.text+u):""!==u&&f.push(de(u)):Ye(u)&&Ye(p)?f[c]=de(p.text+u.text):(s(t._isVList)&&a(u.tag)&&i(u.key)&&a(n)&&(u.key="__vlist".concat(n,"_").concat(r,"__")),f.push(u)));return f}(e):void 0}function Ye(e){return a(e)&&a(e.text)&&!1===e.isComment}function Qe(e,t){var n,r,i,s,l=null;if(o(e)||"string"==typeof e)for(l=new Array(e.length),n=0,r=e.length;n<r;n++)l[n]=t(e[n],n);else if("number"==typeof e)for(l=new Array(e),n=0;n<e;n++)l[n]=t(n+1,n);else if(c(e))if(ue&&e[Symbol.iterator]){l=[];for(var u=e[Symbol.iterator](),p=u.next();!p.done;)l.push(t(p.value,l.length)),p=u.next()}else for(i=Object.keys(e),l=new Array(i.length),n=0,r=i.length;n<r;n++)s=i[n],l[n]=t(e[s],s,n);return a(l)||(l=[]),l._isVList=!0,l}function Je(e,t,n,r){var o,i=this.$scopedSlots[e];i?(n=n||{},r&&(n=$($({},r),n)),o=i(n)||(u(t)?t():t)):o=this.$slots[e]||(u(t)?t():t);var a=n&&n.slot;return a?this.$createElement("template",{slot:a},o):o}function Xe(e){return En(this.$options,"filters",e,!0)||R}function Ze(e,t){return o(e)?-1===e.indexOf(t):e!==t}function et(e,t,n,r,o){var i=N.keyCodes[t]||n;return o&&r&&!N.keyCodes[t]?Ze(o,r):i?Ze(i,e):r?j(r)!==t:void 0===e}function tt(e,t,n,r,i){if(n)if(c(n)){o(n)&&(n=T(n));var a=void 0,s=function(o){if("class"===o||"style"===o||b(o))a=e;else{var s=e.attrs&&e.attrs.type;a=r||N.mustUseProp(t,s,o)?e.domProps||(e.domProps={}):e.attrs||(e.attrs={})}var l=A(o),u=j(o);l in a||u in a||(a[o]=n[o],i&&((e.on||(e.on={}))["update:".concat(o)]=function(e){n[o]=e}))};for(var l in n)s(l)}else;return e}function nt(e,t){var n=this._staticTrees||(this._staticTrees=[]),r=n[e];return r&&!t||ot(r=n[e]=this.$options.staticRenderFns[e].call(this._renderProxy,this._c,this),"__static__".concat(e),!1),r}function rt(e,t,n){return ot(e,"__once__".concat(t).concat(n?"_".concat(n):""),!0),e}function ot(e,t,n){if(o(e))for(var r=0;r<e.length;r++)e[r]&&"string"!=typeof e[r]&&it(e[r],"".concat(t,"_").concat(r),n);else it(e,t,n)}function it(e,t,n){e.isStatic=!0,e.key=t,e.isOnce=n}function at(e,t){if(t)if(f(t)){var n=e.on=e.on?$({},e.on):{};for(var r in t){var o=n[r],i=t[r];n[r]=o?[].concat(o,i):i}}else;return e}function st(e,t,n,r){t=t||{$stable:!n};for(var i=0;i<e.length;i++){var a=e[i];o(a)?st(a,t,n):a&&(a.proxy&&(a.fn.proxy=!0),t[a.key]=a.fn)}return r&&(t.$key=r),t}function lt(e,t){for(var n=0;n<t.length;n+=2){var r=t[n];"string"==typeof r&&r&&(e[t[n]]=t[n+1])}return e}function ut(e,t){return"string"==typeof e?t+e:e}function ct(e){e._o=rt,e._n=g,e._s=m,e._l=Qe,e._t=Je,e._q=D,e._i=M,e._m=nt,e._f=Xe,e._k=et,e._b=tt,e._v=de,e._e=he,e._u=st,e._g=at,e._d=lt,e._p=ut}function pt(e,t){if(!e||!e.length)return{};for(var n={},r=0,o=e.length;r<o;r++){var i=e[r],a=i.data;if(a&&a.attrs&&a.attrs.slot&&delete a.attrs.slot,i.context!==t&&i.fnContext!==t||!a||null==a.slot)(n.default||(n.default=[])).push(i);else{var s=a.slot,l=n[s]||(n[s]=[]);"template"===i.tag?l.push.apply(l,i.children||[]):l.push(i)}}for(var u in n)n[u].every(ft)&&delete n[u];return n}function ft(e){return e.isComment&&!e.asyncFactory||" "===e.text}function ht(e){return e.isComment&&e.asyncFactory}function dt(e,t,n,o){var i,a=Object.keys(n).length>0,s=t?!!t.$stable:!a,l=t&&t.$key;if(t){if(t._normalized)return t._normalized;if(s&&o&&o!==r&&l===o.$key&&!a&&!o.$hasNormal)return o;for(var u in i={},t)t[u]&&"$"!==u[0]&&(i[u]=vt(e,n,u,t[u]))}else i={};for(var c in n)c in i||(i[c]=mt(n,c));return t&&Object.isExtensible(t)&&(t._normalized=i),q(i,"$stable",s),q(i,"$key",l),q(i,"$hasNormal",a),i}function vt(e,t,n,r){var i=function(){var t=ce;pe(e);var n=arguments.length?r.apply(null,arguments):r({}),i=(n=n&&"object"==typeof n&&!o(n)?[n]:Ke(n))&&n[0];return pe(t),n&&(!i||1===n.length&&i.isComment&&!ht(i))?void 0:n};return r.proxy&&Object.defineProperty(t,n,{get:i,enumerable:!0,configurable:!0}),i}function mt(e,t){return function(){return e[t]}}function gt(e){return{get attrs(){if(!e._attrsProxy){var t=e._attrsProxy={};q(t,"_v_attr_proxy",!0),yt(t,e.$attrs,r,e,"$attrs")}return e._attrsProxy},get listeners(){e._listenersProxy||yt(e._listenersProxy={},e.$listeners,r,e,"$listeners");return e._listenersProxy},get slots(){return function(e){e._slotsProxy||_t(e._slotsProxy={},e.$scopedSlots);return e._slotsProxy}(e)},emit:O(e.$emit,e),expose:function(t){t&&Object.keys(t).forEach((function(n){return Ue(e,t,n)}))}}}function yt(e,t,n,r,o){var i=!1;for(var a in t)a in e?t[a]!==n[a]&&(i=!0):(i=!0,bt(e,a,r,o));for(var a in e)a in t||(i=!0,delete e[a]);return i}function bt(e,t,n,r){Object.defineProperty(e,t,{enumerable:!0,configurable:!0,get:function(){return n[r][t]}})}function _t(e,t){for(var n in t)e[n]=t[n];for(var n in e)n in t||delete e[n]}var wt=null;function kt(e,t){return(e.__esModule||ue&&"Module"===e[Symbol.toStringTag])&&(e=e.default),c(e)?t.extend(e):e}function xt(e){if(o(e))for(var t=0;t<e.length;t++){var n=e[t];if(a(n)&&(a(n.componentOptions)||ht(n)))return n}}function Ct(e,t,n,r,p,f){return(o(n)||l(n))&&(p=r,r=n,n=void 0),s(f)&&(p=2),function(e,t,n,r,l){if(a(n)&&a(n.__ob__))return he();a(n)&&a(n.is)&&(t=n.is);if(!t)return he();0;o(r)&&u(r[0])&&((n=n||{}).scopedSlots={default:r[0]},r.length=0);2===l?r=Ke(r):1===l&&(r=function(e){for(var t=0;t<e.length;t++)if(o(e[t]))return Array.prototype.concat.apply([],e);return e}(r));var p,f;if("string"==typeof t){var h=void 0;f=e.$vnode&&e.$vnode.ns||N.getTagNamespace(t),p=N.isReservedTag(t)?new fe(N.parsePlatformTagName(t),n,r,void 0,void 0,e):n&&n.pre||!a(h=En(e.$options,"components",t))?new fe(t,n,r,void 0,void 0,e):_n(h,n,e,r,t)}else p=_n(t,n,e,r);return o(p)?p:a(p)?(a(f)&&function e(t,n,r){t.ns=n,"foreignObject"===t.tag&&(n=void 0,r=!0);if(a(t.children))for(var o=0,l=t.children.length;o<l;o++){var u=t.children[o];a(u.tag)&&(i(u.ns)||s(r)&&"svg"!==u.tag)&&e(u,n,r)}}(p,f),a(n)&&function(e){c(e.style)&&zt(e.style);c(e.class)&&zt(e.class)}(n),p):he()}(e,t,n,r,p)}function At(e,t,n){_e();try{if(t)for(var r=t;r=r.$parent;){var o=r.$options.errorCaptured;if(o)for(var i=0;i<o.length;i++)try{if(!1===o[i].call(r,e,t,n))return}catch(e){Pt(e,r,"errorCaptured hook")}}Pt(e,t,n)}finally{we()}}function St(e,t,n,r,o){var i;try{(i=n?e.apply(t,n):e.call(t))&&!i._isVue&&v(i)&&!i._handled&&(i.catch((function(e){return At(e,r,o+" (Promise/async)")})),i._handled=!0)}catch(e){At(e,r,o)}return i}function Pt(e,t,n){if(N.errorHandler)try{return N.errorHandler.call(null,e,t,n)}catch(t){t!==e&&jt(t,null,"config.errorHandler")}jt(e,t,n)}function jt(e,t,n){if(!K||"undefined"==typeof console)throw e;console.error(e)}var Ot,Et=!1,$t=[],Tt=!1;function Lt(){Tt=!1;var e=$t.slice(0);$t.length=0;for(var t=0;t<e.length;t++)e[t]()}if("undefined"!=typeof Promise&&se(Promise)){var It=Promise.resolve();Ot=function(){It.then(Lt),Z&&setTimeout(L)},Et=!0}else if(Q||"undefined"==typeof MutationObserver||!se(MutationObserver)&&"[object MutationObserverConstructor]"!==MutationObserver.toString())Ot="undefined"!=typeof setImmediate&&se(setImmediate)?function(){setImmediate(Lt)}:function(){setTimeout(Lt,0)};else{var Rt=1,Dt=new MutationObserver(Lt),Mt=document.createTextNode(String(Rt));Dt.observe(Mt,{characterData:!0}),Ot=function(){Rt=(Rt+1)%2,Mt.data=String(Rt)},Et=!0}function Ft(e,t){var n;if($t.push((function(){if(e)try{e.call(t)}catch(e){At(e,t,"nextTick")}else n&&n(t)})),Tt||(Tt=!0,Ot()),!e&&"undefined"!=typeof Promise)return new Promise((function(e){n=e}))}function Ut(e){return function(t,n){if(void 0===n&&(n=ce),n)return function(e,t,n){var r=e.$options;r[t]=Sn(r[t],n)}(n,e,t)}}Ut("beforeMount"),Ut("mounted"),Ut("beforeUpdate"),Ut("updated"),Ut("beforeDestroy"),Ut("destroyed"),Ut("activated"),Ut("deactivated"),Ut("serverPrefetch"),Ut("renderTracked"),Ut("renderTriggered"),Ut("errorCaptured");var Bt=new le;function zt(e){return function e(t,n){var r,i,a=o(t);if(!a&&!c(t)||t.__v_skip||Object.isFrozen(t)||t instanceof fe)return;if(t.__ob__){var s=t.__ob__.dep.id;if(n.has(s))return;n.add(s)}if(a)for(r=t.length;r--;)e(t[r],n);else if(Fe(t))e(t.value,n);else for(i=Object.keys(t),r=i.length;r--;)e(t[i[r]],n)}(e,Bt),Bt.clear(),e}var Nt,Vt=0,Wt=function(){function e(e,t,n,r,o){var i,a;i=this,void 0===(a=Be&&!Be._vm?Be:e?e._scope:void 0)&&(a=Be),a&&a.active&&a.effects.push(i),(this.vm=e)&&o&&(e._watcher=this),r?(this.deep=!!r.deep,this.user=!!r.user,this.lazy=!!r.lazy,this.sync=!!r.sync,this.before=r.before):this.deep=this.user=this.lazy=this.sync=!1,this.cb=n,this.id=++Vt,this.active=!0,this.post=!1,this.dirty=this.lazy,this.deps=[],this.newDeps=[],this.depIds=new le,this.newDepIds=new le,this.expression="",u(t)?this.getter=t:(this.getter=function(e){if(!H.test(e)){var t=e.split(".");return function(e){for(var n=0;n<t.length;n++){if(!e)return;e=e[t[n]]}return e}}}(t),this.getter||(this.getter=L)),this.value=this.lazy?void 0:this.get()}return e.prototype.get=function(){var e;_e(this);var t=this.vm;try{e=this.getter.call(t,t)}catch(e){if(!this.user)throw e;At(e,t,'getter for watcher "'.concat(this.expression,'"'))}finally{this.deep&&zt(e),we(),this.cleanupDeps()}return e},e.prototype.addDep=function(e){var t=e.id;this.newDepIds.has(t)||(this.newDepIds.add(t),this.newDeps.push(e),this.depIds.has(t)||e.addSub(this))},e.prototype.cleanupDeps=function(){for(var e=this.deps.length;e--;){var t=this.deps[e];this.newDepIds.has(t.id)||t.removeSub(this)}var n=this.depIds;this.depIds=this.newDepIds,this.newDepIds=n,this.newDepIds.clear(),n=this.deps,this.deps=this.newDeps,this.newDeps=n,this.newDeps.length=0},e.prototype.update=function(){this.lazy?this.dirty=!0:this.sync?this.run():fn(this)},e.prototype.run=function(){if(this.active){var e=this.get();if(e!==this.value||c(e)||this.deep){var t=this.value;if(this.value=e,this.user){var n='callback for watcher "'.concat(this.expression,'"');St(this.cb,this.vm,[e,t],this.vm,n)}else this.cb.call(this.vm,e,t)}}},e.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},e.prototype.depend=function(){for(var e=this.deps.length;e--;)this.deps[e].depend()},e.prototype.teardown=function(){if(this.vm&&!this.vm._isBeingDestroyed&&_(this.vm._scope.effects,this),this.active){for(var e=this.deps.length;e--;)this.deps[e].removeSub(this);this.active=!1,this.onStop&&this.onStop()}},e}();function qt(e,t){Nt.$on(e,t)}function Ht(e,t){Nt.$off(e,t)}function Gt(e,t){var n=Nt;return function r(){var o=t.apply(null,arguments);null!==o&&n.$off(e,r)}}function Kt(e,t,n){Nt=e,qe(t,n||{},qt,Ht,Gt,e),Nt=void 0}var Yt=null;function Qt(e){var t=Yt;return Yt=e,function(){Yt=t}}function Jt(e){for(;e&&(e=e.$parent);)if(e._inactive)return!0;return!1}function Xt(e,t){if(t){if(e._directInactive=!1,Jt(e))return}else if(e._directInactive)return;if(e._inactive||null===e._inactive){e._inactive=!1;for(var n=0;n<e.$children.length;n++)Xt(e.$children[n]);Zt(e,"activated")}}function Zt(e,t,n,r){void 0===r&&(r=!0),_e();var o=ce;r&&pe(e);var i=e.$options[t],a="".concat(t," hook");if(i)for(var s=0,l=i.length;s<l;s++)St(i[s],e,n||null,e,a);e._hasHookEvent&&e.$emit("hook:"+t),r&&pe(o),we()}var en=[],tn=[],nn={},rn=!1,on=!1,an=0;var sn=0,ln=Date.now;if(K&&!Q){var un=window.performance;un&&"function"==typeof un.now&&ln()>document.createEvent("Event").timeStamp&&(ln=function(){return un.now()})}var cn=function(e,t){if(e.post){if(!t.post)return 1}else if(t.post)return-1;return e.id-t.id};function pn(){var e,t;for(sn=ln(),on=!0,en.sort(cn),an=0;an<en.length;an++)(e=en[an]).before&&e.before(),t=e.id,nn[t]=null,e.run();var n=tn.slice(),r=en.slice();an=en.length=tn.length=0,nn={},rn=on=!1,function(e){for(var t=0;t<e.length;t++)e[t]._inactive=!0,Xt(e[t],!0)}(n),function(e){var t=e.length;for(;t--;){var n=e[t],r=n.vm;r&&r._watcher===n&&r._isMounted&&!r._isDestroyed&&Zt(r,"updated")}}(r),function(){for(var e=0;e<ge.length;e++){var t=ge[e];t.subs=t.subs.filter((function(e){return e})),t._pending=!1}ge.length=0}(),ae&&N.devtools&&ae.emit("flush")}function fn(e){var t=e.id;if(null==nn[t]&&(e!==ye.target||!e.noRecurse)){if(nn[t]=!0,on){for(var n=en.length-1;n>an&&en[n].id>e.id;)n--;en.splice(n+1,0,e)}else en.push(e);rn||(rn=!0,Ft(pn))}}function hn(e,t){if(e){for(var n=Object.create(null),r=ue?Reflect.ownKeys(e):Object.keys(e),o=0;o<r.length;o++){var i=r[o];if("__ob__"!==i){var a=e[i].from;if(a in t._provided)n[i]=t._provided[a];else if("default"in e[i]){var s=e[i].default;n[i]=u(s)?s.call(t):s}else 0}}return n}}function dn(e,t,n,i,a){var l,u=this,c=a.options;k(i,"_uid")?(l=Object.create(i))._original=i:(l=i,i=i._original);var p=s(c._compiled),f=!p;this.data=e,this.props=t,this.children=n,this.parent=i,this.listeners=e.on||r,this.injections=hn(c.inject,i),this.slots=function(){return u.$slots||dt(i,e.scopedSlots,u.$slots=pt(n,i)),u.$slots},Object.defineProperty(this,"scopedSlots",{enumerable:!0,get:function(){return dt(i,e.scopedSlots,this.slots())}}),p&&(this.$options=c,this.$slots=this.slots(),this.$scopedSlots=dt(i,e.scopedSlots,this.$slots)),c._scopeId?this._c=function(e,t,n,r){var a=Ct(l,e,t,n,r,f);return a&&!o(a)&&(a.fnScopeId=c._scopeId,a.fnContext=i),a}:this._c=function(e,t,n,r){return Ct(l,e,t,n,r,f)}}function vn(e,t,n,r,o){var i=ve(e);return i.fnContext=n,i.fnOptions=r,t.slot&&((i.data||(i.data={})).slot=t.slot),i}function mn(e,t){for(var n in t)e[A(n)]=t[n]}function gn(e){return e.name||e.__name||e._componentTag}ct(dn.prototype);var yn={init:function(e,t){if(e.componentInstance&&!e.componentInstance._isDestroyed&&e.data.keepAlive){var n=e;yn.prepatch(n,n)}else{(e.componentInstance=function(e,t){var n={_isComponent:!0,_parentVnode:e,parent:t},r=e.data.inlineTemplate;a(r)&&(n.render=r.render,n.staticRenderFns=r.staticRenderFns);return new e.componentOptions.Ctor(n)}(e,Yt)).$mount(t?e.elm:void 0,t)}},prepatch:function(e,t){var n=t.componentOptions;!function(e,t,n,o,i){var a=o.data.scopedSlots,s=e.$scopedSlots,l=!!(a&&!a.$stable||s!==r&&!s.$stable||a&&e.$scopedSlots.$key!==a.$key||!a&&e.$scopedSlots.$key),u=!!(i||e.$options._renderChildren||l),c=e.$vnode;e.$options._parentVnode=o,e.$vnode=o,e._vnode&&(e._vnode.parent=o),e.$options._renderChildren=i;var p=o.data.attrs||r;e._attrsProxy&&yt(e._attrsProxy,p,c.data&&c.data.attrs||r,e,"$attrs")&&(u=!0),e.$attrs=p,n=n||r;var f=e.$options._parentListeners;if(e._listenersProxy&&yt(e._listenersProxy,n,f||r,e,"$listeners"),e.$listeners=e.$options._parentListeners=n,Kt(e,n,f),t&&e.$options.props){Pe(!1);for(var h=e._props,d=e.$options._propKeys||[],v=0;v<d.length;v++){var m=d[v],g=e.$options.props;h[m]=$n(m,g,t,e)}Pe(!0),e.$options.propsData=t}u&&(e.$slots=pt(i,o.context),e.$forceUpdate())}(t.componentInstance=e.componentInstance,n.propsData,n.listeners,t,n.children)},insert:function(e){var t,n=e.context,r=e.componentInstance;r._isMounted||(r._isMounted=!0,Zt(r,"mounted")),e.data.keepAlive&&(n._isMounted?((t=r)._inactive=!1,tn.push(t)):Xt(r,!0))},destroy:function(e){var t=e.componentInstance;t._isDestroyed||(e.data.keepAlive?function e(t,n){if(!(n&&(t._directInactive=!0,Jt(t))||t._inactive)){t._inactive=!0;for(var r=0;r<t.$children.length;r++)e(t.$children[r]);Zt(t,"deactivated")}}(t,!0):t.$destroy())}},bn=Object.keys(yn);function _n(e,t,n,l,u){if(!i(e)){var p=n.$options._base;if(c(e)&&(e=p.extend(e)),"function"==typeof e){var f;if(i(e.cid)&&void 0===(e=function(e,t){if(s(e.error)&&a(e.errorComp))return e.errorComp;if(a(e.resolved))return e.resolved;var n=wt;if(n&&a(e.owners)&&-1===e.owners.indexOf(n)&&e.owners.push(n),s(e.loading)&&a(e.loadingComp))return e.loadingComp;if(n&&!a(e.owners)){var r=e.owners=[n],o=!0,l=null,u=null;n.$on("hook:destroyed",(function(){return _(r,n)}));var p=function(e){for(var t=0,n=r.length;t<n;t++)r[t].$forceUpdate();e&&(r.length=0,null!==l&&(clearTimeout(l),l=null),null!==u&&(clearTimeout(u),u=null))},f=F((function(n){e.resolved=kt(n,t),o?r.length=0:p(!0)})),h=F((function(t){a(e.errorComp)&&(e.error=!0,p(!0))})),d=e(f,h);return c(d)&&(v(d)?i(e.resolved)&&d.then(f,h):v(d.component)&&(d.component.then(f,h),a(d.error)&&(e.errorComp=kt(d.error,t)),a(d.loading)&&(e.loadingComp=kt(d.loading,t),0===d.delay?e.loading=!0:l=setTimeout((function(){l=null,i(e.resolved)&&i(e.error)&&(e.loading=!0,p(!1))}),d.delay||200)),a(d.timeout)&&(u=setTimeout((function(){u=null,i(e.resolved)&&h(null)}),d.timeout)))),o=!1,e.loading?e.loadingComp:e.resolved}}(f=e,p)))return function(e,t,n,r,o){var i=he();return i.asyncFactory=e,i.asyncMeta={data:t,context:n,children:r,tag:o},i}(f,t,n,l,u);t=t||{},qn(e),a(t.model)&&function(e,t){var n=e.model&&e.model.prop||"value",r=e.model&&e.model.event||"input";(t.attrs||(t.attrs={}))[n]=t.model.value;var i=t.on||(t.on={}),s=i[r],l=t.model.callback;a(s)?(o(s)?-1===s.indexOf(l):s!==l)&&(i[r]=[l].concat(s)):i[r]=l}(e.options,t);var h=function(e,t,n){var r=t.options.props;if(!i(r)){var o={},s=e.attrs,l=e.props;if(a(s)||a(l))for(var u in r){var c=j(u);Ge(o,l,u,c,!0)||Ge(o,s,u,c,!1)}return o}}(t,e);if(s(e.options.functional))return function(e,t,n,i,s){var l=e.options,u={},c=l.props;if(a(c))for(var p in c)u[p]=$n(p,c,t||r);else a(n.attrs)&&mn(u,n.attrs),a(n.props)&&mn(u,n.props);var f=new dn(n,u,s,i,e),h=l.render.call(null,f._c,f);if(h instanceof fe)return vn(h,n,f.parent,l,f);if(o(h)){for(var d=Ke(h)||[],v=new Array(d.length),m=0;m<d.length;m++)v[m]=vn(d[m],n,f.parent,l,f);return v}}(e,h,t,n,l);var d=t.on;if(t.on=t.nativeOn,s(e.options.abstract)){var m=t.slot;t={},m&&(t.slot=m)}!function(e){for(var t=e.hook||(e.hook={}),n=0;n<bn.length;n++){var r=bn[n],o=t[r],i=yn[r];o===i||o&&o._merged||(t[r]=o?wn(i,o):i)}}(t);var g=gn(e.options)||u;return new fe("vue-component-".concat(e.cid).concat(g?"-".concat(g):""),t,void 0,void 0,void 0,n,{Ctor:e,propsData:h,listeners:d,tag:u,children:l},f)}}}function wn(e,t){var n=function(n,r){e(n,r),t(n,r)};return n._merged=!0,n}var kn=L,xn=N.optionMergeStrategies;function Cn(e,t,n){if(void 0===n&&(n=!0),!t)return e;for(var r,o,i,a=ue?Reflect.ownKeys(t):Object.keys(t),s=0;s<a.length;s++)"__ob__"!==(r=a[s])&&(o=e[r],i=t[r],n&&k(e,r)?o!==i&&f(o)&&f(i)&&Cn(o,i):Te(e,r,i));return e}function An(e,t,n){return n?function(){var r=u(t)?t.call(n,n):t,o=u(e)?e.call(n,n):e;return r?Cn(r,o):o}:t?e?function(){return Cn(u(t)?t.call(this,this):t,u(e)?e.call(this,this):e)}:t:e}function Sn(e,t){var n=t?e?e.concat(t):o(t)?t:[t]:e;return n?function(e){for(var t=[],n=0;n<e.length;n++)-1===t.indexOf(e[n])&&t.push(e[n]);return t}(n):n}function Pn(e,t,n,r){var o=Object.create(e||null);return t?$(o,t):o}xn.data=function(e,t,n){return n?An(e,t,n):t&&"function"!=typeof t?e:An(e,t)},z.forEach((function(e){xn[e]=Sn})),B.forEach((function(e){xn[e+"s"]=Pn})),xn.watch=function(e,t,n,r){if(e===ne&&(e=void 0),t===ne&&(t=void 0),!t)return Object.create(e||null);if(!e)return t;var i={};for(var a in $(i,e),t){var s=i[a],l=t[a];s&&!o(s)&&(s=[s]),i[a]=s?s.concat(l):o(l)?l:[l]}return i},xn.props=xn.methods=xn.inject=xn.computed=function(e,t,n,r){if(!e)return t;var o=Object.create(null);return $(o,e),t&&$(o,t),o},xn.provide=function(e,t){return e?function(){var n=Object.create(null);return Cn(n,u(e)?e.call(this):e),t&&Cn(n,u(t)?t.call(this):t,!1),n}:t};var jn=function(e,t){return void 0===t?e:t};function On(e,t,n){if(u(t)&&(t=t.options),function(e,t){var n=e.props;if(n){var r,i,a={};if(o(n))for(r=n.length;r--;)"string"==typeof(i=n[r])&&(a[A(i)]={type:null});else if(f(n))for(var s in n)i=n[s],a[A(s)]=f(i)?i:{type:i};else 0;e.props=a}}(t),function(e,t){var n=e.inject;if(n){var r=e.inject={};if(o(n))for(var i=0;i<n.length;i++)r[n[i]]={from:n[i]};else if(f(n))for(var a in n){var s=n[a];r[a]=f(s)?$({from:a},s):{from:s}}else 0}}(t),function(e){var t=e.directives;if(t)for(var n in t){var r=t[n];u(r)&&(t[n]={bind:r,update:r})}}(t),!t._base&&(t.extends&&(e=On(e,t.extends,n)),t.mixins))for(var r=0,i=t.mixins.length;r<i;r++)e=On(e,t.mixins[r],n);var a,s={};for(a in e)l(a);for(a in t)k(e,a)||l(a);function l(r){var o=xn[r]||jn;s[r]=o(e[r],t[r],n,r)}return s}function En(e,t,n,r){if("string"==typeof n){var o=e[t];if(k(o,n))return o[n];var i=A(n);if(k(o,i))return o[i];var a=S(i);return k(o,a)?o[a]:o[n]||o[i]||o[a]}}function $n(e,t,n,r){var o=t[e],i=!k(n,e),a=n[e],s=Rn(Boolean,o.type);if(s>-1)if(i&&!k(o,"default"))a=!1;else if(""===a||a===j(e)){var l=Rn(String,o.type);(l<0||s<l)&&(a=!0)}if(void 0===a){a=function(e,t,n){if(!k(t,"default"))return;var r=t.default;0;if(e&&e.$options.propsData&&void 0===e.$options.propsData[n]&&void 0!==e._props[n])return e._props[n];return u(r)&&"Function"!==Ln(t.type)?r.call(e):r}(r,o,e);var c=Se;Pe(!0),Ee(a),Pe(c)}return a}var Tn=/^\s*function (\w+)/;function Ln(e){var t=e&&e.toString().match(Tn);return t?t[1]:""}function In(e,t){return Ln(e)===Ln(t)}function Rn(e,t){if(!o(t))return In(t,e)?0:-1;for(var n=0,r=t.length;n<r;n++)if(In(t[n],e))return n;return-1}var Dn={enumerable:!0,configurable:!0,get:L,set:L};function Mn(e,t,n){Dn.get=function(){return this[t][n]},Dn.set=function(e){this[t][n]=e},Object.defineProperty(e,n,Dn)}function Fn(e){var t=e.$options;if(t.props&&function(e,t){var n=e.$options.propsData||{},r=e._props=Re({}),o=e.$options._propKeys=[];e.$parent&&Pe(!1);var i=function(i){o.push(i);var a=$n(i,t,n,e);$e(r,i,a),i in e||Mn(e,"_props",i)};for(var a in t)i(a);Pe(!0)}(e,t.props),function(e){var t=e.$options,n=t.setup;if(n){var r=e._setupContext=gt(e);pe(e),_e();var o=St(n,null,[e._props||Re({}),r],e,"setup");if(we(),pe(),u(o))t.render=o;else if(c(o))if(e._setupState=o,o.__sfc){var i=e._setupProxy={};for(var a in o)"__sfc"!==a&&Ue(i,o,a)}else for(var a in o)W(a)||Ue(e,o,a);else 0}}(e),t.methods&&function(e,t){e.$options.props;for(var n in t)e[n]="function"!=typeof t[n]?L:O(t[n],e)}(e,t.methods),t.data)!function(e){var t=e.$options.data;f(t=e._data=u(t)?function(e,t){_e();try{return e.call(t,t)}catch(e){return At(e,t,"data()"),{}}finally{we()}}(t,e):t||{})||(t={});var n=Object.keys(t),r=e.$options.props,o=(e.$options.methods,n.length);for(;o--;){var i=n[o];0,r&&k(r,i)||W(i)||Mn(e,"_data",i)}var a=Ee(t);a&&a.vmCount++}(e);else{var n=Ee(e._data={});n&&n.vmCount++}t.computed&&function(e,t){var n=e._computedWatchers=Object.create(null),r=ie();for(var o in t){var i=t[o],a=u(i)?i:i.get;0,r||(n[o]=new Wt(e,a||L,L,Un)),o in e||Bn(e,o,i)}}(e,t.computed),t.watch&&t.watch!==ne&&function(e,t){for(var n in t){var r=t[n];if(o(r))for(var i=0;i<r.length;i++)Vn(e,n,r[i]);else Vn(e,n,r)}}(e,t.watch)}var Un={lazy:!0};function Bn(e,t,n){var r=!ie();u(n)?(Dn.get=r?zn(t):Nn(n),Dn.set=L):(Dn.get=n.get?r&&!1!==n.cache?zn(t):Nn(n.get):L,Dn.set=n.set||L),Object.defineProperty(e,t,Dn)}function zn(e){return function(){var t=this._computedWatchers&&this._computedWatchers[e];if(t)return t.dirty&&t.evaluate(),ye.target&&t.depend(),t.value}}function Nn(e){return function(){return e.call(this,this)}}function Vn(e,t,n,r){return f(n)&&(r=n,n=n.handler),"string"==typeof n&&(n=e[n]),e.$watch(t,n,r)}var Wn=0;function qn(e){var t=e.options;if(e.super){var n=qn(e.super);if(n!==e.superOptions){e.superOptions=n;var r=function(e){var t,n=e.options,r=e.sealedOptions;for(var o in n)n[o]!==r[o]&&(t||(t={}),t[o]=n[o]);return t}(e);r&&$(e.extendOptions,r),(t=e.options=On(n,e.extendOptions)).name&&(t.components[t.name]=e)}}return t}function Hn(e){this._init(e)}function Gn(e){e.cid=0;var t=1;e.extend=function(e){e=e||{};var n=this,r=n.cid,o=e._Ctor||(e._Ctor={});if(o[r])return o[r];var i=gn(e)||gn(n.options);var a=function(e){this._init(e)};return(a.prototype=Object.create(n.prototype)).constructor=a,a.cid=t++,a.options=On(n.options,e),a.super=n,a.options.props&&function(e){var t=e.options.props;for(var n in t)Mn(e.prototype,"_props",n)}(a),a.options.computed&&function(e){var t=e.options.computed;for(var n in t)Bn(e.prototype,n,t[n])}(a),a.extend=n.extend,a.mixin=n.mixin,a.use=n.use,B.forEach((function(e){a[e]=n[e]})),i&&(a.options.components[i]=a),a.superOptions=n.options,a.extendOptions=e,a.sealedOptions=$({},a.options),o[r]=a,a}}function Kn(e){return e&&(gn(e.Ctor.options)||e.tag)}function Yn(e,t){return o(e)?e.indexOf(t)>-1:"string"==typeof e?e.split(",").indexOf(t)>-1:!!h(e)&&e.test(t)}function Qn(e,t){var n=e.cache,r=e.keys,o=e._vnode;for(var i in n){var a=n[i];if(a){var s=a.name;s&&!t(s)&&Jn(n,i,r,o)}}}function Jn(e,t,n,r){var o=e[t];!o||r&&o.tag===r.tag||o.componentInstance.$destroy(),e[t]=null,_(n,t)}Hn.prototype._init=function(e){var t=this;t._uid=Wn++,t._isVue=!0,t.__v_skip=!0,t._scope=new ze(!0),t._scope._vm=!0,e&&e._isComponent?function(e,t){var n=e.$options=Object.create(e.constructor.options),r=t._parentVnode;n.parent=t.parent,n._parentVnode=r;var o=r.componentOptions;n.propsData=o.propsData,n._parentListeners=o.listeners,n._renderChildren=o.children,n._componentTag=o.tag,t.render&&(n.render=t.render,n.staticRenderFns=t.staticRenderFns)}(t,e):t.$options=On(qn(t.constructor),e||{},t),t._renderProxy=t,t._self=t,function(e){var t=e.$options,n=t.parent;if(n&&!t.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(e)}e.$parent=n,e.$root=n?n.$root:e,e.$children=[],e.$refs={},e._provided=n?n._provided:Object.create(null),e._watcher=null,e._inactive=null,e._directInactive=!1,e._isMounted=!1,e._isDestroyed=!1,e._isBeingDestroyed=!1}(t),function(e){e._events=Object.create(null),e._hasHookEvent=!1;var t=e.$options._parentListeners;t&&Kt(e,t)}(t),function(e){e._vnode=null,e._staticTrees=null;var t=e.$options,n=e.$vnode=t._parentVnode,o=n&&n.context;e.$slots=pt(t._renderChildren,o),e.$scopedSlots=n?dt(e.$parent,n.data.scopedSlots,e.$slots):r,e._c=function(t,n,r,o){return Ct(e,t,n,r,o,!1)},e.$createElement=function(t,n,r,o){return Ct(e,t,n,r,o,!0)};var i=n&&n.data;$e(e,"$attrs",i&&i.attrs||r,null,!0),$e(e,"$listeners",t._parentListeners||r,null,!0)}(t),Zt(t,"beforeCreate",void 0,!1),function(e){var t=hn(e.$options.inject,e);t&&(Pe(!1),Object.keys(t).forEach((function(n){$e(e,n,t[n])})),Pe(!0))}(t),Fn(t),function(e){var t=e.$options.provide;if(t){var n=u(t)?t.call(e):t;if(!c(n))return;for(var r=Ne(e),o=ue?Reflect.ownKeys(n):Object.keys(n),i=0;i<o.length;i++){var a=o[i];Object.defineProperty(r,a,Object.getOwnPropertyDescriptor(n,a))}}}(t),Zt(t,"created"),t.$options.el&&t.$mount(t.$options.el)},function(e){var t={get:function(){return this._data}},n={get:function(){return this._props}};Object.defineProperty(e.prototype,"$data",t),Object.defineProperty(e.prototype,"$props",n),e.prototype.$set=Te,e.prototype.$delete=Le,e.prototype.$watch=function(e,t,n){if(f(t))return Vn(this,e,t,n);(n=n||{}).user=!0;var r=new Wt(this,e,t,n);if(n.immediate){var o='callback for immediate watcher "'.concat(r.expression,'"');_e(),St(t,this,[r.value],this,o),we()}return function(){r.teardown()}}}(Hn),function(e){var t=/^hook:/;e.prototype.$on=function(e,n){var r=this;if(o(e))for(var i=0,a=e.length;i<a;i++)r.$on(e[i],n);else(r._events[e]||(r._events[e]=[])).push(n),t.test(e)&&(r._hasHookEvent=!0);return r},e.prototype.$once=function(e,t){var n=this;function r(){n.$off(e,r),t.apply(n,arguments)}return r.fn=t,n.$on(e,r),n},e.prototype.$off=function(e,t){var n=this;if(!arguments.length)return n._events=Object.create(null),n;if(o(e)){for(var r=0,i=e.length;r<i;r++)n.$off(e[r],t);return n}var a,s=n._events[e];if(!s)return n;if(!t)return n._events[e]=null,n;for(var l=s.length;l--;)if((a=s[l])===t||a.fn===t){s.splice(l,1);break}return n},e.prototype.$emit=function(e){var t=this,n=t._events[e];if(n){n=n.length>1?E(n):n;for(var r=E(arguments,1),o='event handler for "'.concat(e,'"'),i=0,a=n.length;i<a;i++)St(n[i],t,r,t,o)}return t}}(Hn),function(e){e.prototype._update=function(e,t){var n=this,r=n.$el,o=n._vnode,i=Qt(n);n._vnode=e,n.$el=o?n.__patch__(o,e):n.__patch__(n.$el,e,t,!1),i(),r&&(r.__vue__=null),n.$el&&(n.$el.__vue__=n);for(var a=n;a&&a.$vnode&&a.$parent&&a.$vnode===a.$parent._vnode;)a.$parent.$el=a.$el,a=a.$parent},e.prototype.$forceUpdate=function(){this._watcher&&this._watcher.update()},e.prototype.$destroy=function(){var e=this;if(!e._isBeingDestroyed){Zt(e,"beforeDestroy"),e._isBeingDestroyed=!0;var t=e.$parent;!t||t._isBeingDestroyed||e.$options.abstract||_(t.$children,e),e._scope.stop(),e._data.__ob__&&e._data.__ob__.vmCount--,e._isDestroyed=!0,e.__patch__(e._vnode,null),Zt(e,"destroyed"),e.$off(),e.$el&&(e.$el.__vue__=null),e.$vnode&&(e.$vnode.parent=null)}}}(Hn),function(e){ct(e.prototype),e.prototype.$nextTick=function(e){return Ft(e,this)},e.prototype._render=function(){var e,t=this,n=t.$options,r=n.render,i=n._parentVnode;i&&t._isMounted&&(t.$scopedSlots=dt(t.$parent,i.data.scopedSlots,t.$slots,t.$scopedSlots),t._slotsProxy&&_t(t._slotsProxy,t.$scopedSlots)),t.$vnode=i;try{pe(t),wt=t,e=r.call(t._renderProxy,t.$createElement)}catch(n){At(n,t,"render"),e=t._vnode}finally{wt=null,pe()}return o(e)&&1===e.length&&(e=e[0]),e instanceof fe||(e=he()),e.parent=i,e}}(Hn);var Xn=[String,RegExp,Array],Zn={KeepAlive:{name:"keep-alive",abstract:!0,props:{include:Xn,exclude:Xn,max:[String,Number]},methods:{cacheVNode:function(){var e=this.cache,t=this.keys,n=this.vnodeToCache,r=this.keyToCache;if(n){var o=n.tag,i=n.componentInstance,a=n.componentOptions;e[r]={name:Kn(a),tag:o,componentInstance:i},t.push(r),this.max&&t.length>parseInt(this.max)&&Jn(e,t[0],t,this._vnode),this.vnodeToCache=null}}},created:function(){this.cache=Object.create(null),this.keys=[]},destroyed:function(){for(var e in this.cache)Jn(this.cache,e,this.keys)},mounted:function(){var e=this;this.cacheVNode(),this.$watch("include",(function(t){Qn(e,(function(e){return Yn(t,e)}))})),this.$watch("exclude",(function(t){Qn(e,(function(e){return!Yn(t,e)}))}))},updated:function(){this.cacheVNode()},render:function(){var e=this.$slots.default,t=xt(e),n=t&&t.componentOptions;if(n){var r=Kn(n),o=this.include,i=this.exclude;if(o&&(!r||!Yn(o,r))||i&&r&&Yn(i,r))return t;var a=this.cache,s=this.keys,l=null==t.key?n.Ctor.cid+(n.tag?"::".concat(n.tag):""):t.key;a[l]?(t.componentInstance=a[l].componentInstance,_(s,l),s.push(l)):(this.vnodeToCache=t,this.keyToCache=l),t.data.keepAlive=!0}return t||e&&e[0]}}};!function(e){var t={get:function(){return N}};Object.defineProperty(e,"config",t),e.util={warn:kn,extend:$,mergeOptions:On,defineReactive:$e},e.set=Te,e.delete=Le,e.nextTick=Ft,e.observable=function(e){return Ee(e),e},e.options=Object.create(null),B.forEach((function(t){e.options[t+"s"]=Object.create(null)})),e.options._base=e,$(e.options.components,Zn),function(e){e.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(t.indexOf(e)>-1)return this;var n=E(arguments,1);return n.unshift(this),u(e.install)?e.install.apply(e,n):u(e)&&e.apply(null,n),t.push(e),this}}(e),function(e){e.mixin=function(e){return this.options=On(this.options,e),this}}(e),Gn(e),function(e){B.forEach((function(t){e[t]=function(e,n){return n?("component"===t&&f(n)&&(n.name=n.name||e,n=this.options._base.extend(n)),"directive"===t&&u(n)&&(n={bind:n,update:n}),this.options[t+"s"][e]=n,n):this.options[t+"s"][e]}}))}(e)}(Hn),Object.defineProperty(Hn.prototype,"$isServer",{get:ie}),Object.defineProperty(Hn.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(Hn,"FunctionalRenderContext",{value:dn}),Hn.version="2.7.14";var er=y("style,class"),tr=y("input,textarea,option,select,progress"),nr=y("contenteditable,draggable,spellcheck"),rr=y("events,caret,typing,plaintext-only"),or=y("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,truespeed,typemustmatch,visible"),ir="http://www.w3.org/1999/xlink",ar=function(e){return":"===e.charAt(5)&&"xlink"===e.slice(0,5)},sr=function(e){return ar(e)?e.slice(6,e.length):""},lr=function(e){return null==e||!1===e};function ur(e){for(var t=e.data,n=e,r=e;a(r.componentInstance);)(r=r.componentInstance._vnode)&&r.data&&(t=cr(r.data,t));for(;a(n=n.parent);)n&&n.data&&(t=cr(t,n.data));return function(e,t){if(a(e)||a(t))return pr(e,fr(t));return""}(t.staticClass,t.class)}function cr(e,t){return{staticClass:pr(e.staticClass,t.staticClass),class:a(e.class)?[e.class,t.class]:t.class}}function pr(e,t){return e?t?e+" "+t:e:t||""}function fr(e){return Array.isArray(e)?function(e){for(var t,n="",r=0,o=e.length;r<o;r++)a(t=fr(e[r]))&&""!==t&&(n&&(n+=" "),n+=t);return n}(e):c(e)?function(e){var t="";for(var n in e)e[n]&&(t&&(t+=" "),t+=n);return t}(e):"string"==typeof e?e:""}var hr={svg:"http://www.w3.org/2000/svg",math:"http://www.w3.org/1998/Math/MathML"},dr=y("html,body,base,head,link,meta,style,title,address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,menuitem,summary,content,element,shadow,template,blockquote,iframe,tfoot"),vr=y("svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,foreignobject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view",!0),mr=function(e){return dr(e)||vr(e)};var gr=Object.create(null);var yr=y("text,number,password,search,email,tel,url");var br=Object.freeze({__proto__:null,createElement:function(e,t){var n=document.createElement(e);return"select"!==e||t.data&&t.data.attrs&&void 0!==t.data.attrs.multiple&&n.setAttribute("multiple","multiple"),n},createElementNS:function(e,t){return document.createElementNS(hr[e],t)},createTextNode:function(e){return document.createTextNode(e)},createComment:function(e){return document.createComment(e)},insertBefore:function(e,t,n){e.insertBefore(t,n)},removeChild:function(e,t){e.removeChild(t)},appendChild:function(e,t){e.appendChild(t)},parentNode:function(e){return e.parentNode},nextSibling:function(e){return e.nextSibling},tagName:function(e){return e.tagName},setTextContent:function(e,t){e.textContent=t},setStyleScope:function(e,t){e.setAttribute(t,"")}}),_r={create:function(e,t){wr(t)},update:function(e,t){e.data.ref!==t.data.ref&&(wr(e,!0),wr(t))},destroy:function(e){wr(e,!0)}};function wr(e,t){var n=e.data.ref;if(a(n)){var r=e.context,i=e.componentInstance||e.elm,s=t?null:i,l=t?void 0:i;if(u(n))St(n,r,[s],r,"template ref function");else{var c=e.data.refInFor,p="string"==typeof n||"number"==typeof n,f=Fe(n),h=r.$refs;if(p||f)if(c){var d=p?h[n]:n.value;t?o(d)&&_(d,i):o(d)?d.includes(i)||d.push(i):p?(h[n]=[i],kr(r,n,h[n])):n.value=[i]}else if(p){if(t&&h[n]!==i)return;h[n]=l,kr(r,n,s)}else if(f){if(t&&n.value!==i)return;n.value=s}else 0}}}function kr(e,t,n){var r=e._setupState;r&&k(r,t)&&(Fe(r[t])?r[t].value=n:r[t]=n)}var xr=new fe("",{},[]),Cr=["create","activate","update","remove","destroy"];function Ar(e,t){return e.key===t.key&&e.asyncFactory===t.asyncFactory&&(e.tag===t.tag&&e.isComment===t.isComment&&a(e.data)===a(t.data)&&function(e,t){if("input"!==e.tag)return!0;var n,r=a(n=e.data)&&a(n=n.attrs)&&n.type,o=a(n=t.data)&&a(n=n.attrs)&&n.type;return r===o||yr(r)&&yr(o)}(e,t)||s(e.isAsyncPlaceholder)&&i(t.asyncFactory.error))}function Sr(e,t,n){var r,o,i={};for(r=t;r<=n;++r)a(o=e[r].key)&&(i[o]=r);return i}var Pr={create:jr,update:jr,destroy:function(e){jr(e,xr)}};function jr(e,t){(e.data.directives||t.data.directives)&&function(e,t){var n,r,o,i=e===xr,a=t===xr,s=Er(e.data.directives,e.context),l=Er(t.data.directives,t.context),u=[],c=[];for(n in l)r=s[n],o=l[n],r?(o.oldValue=r.value,o.oldArg=r.arg,Tr(o,"update",t,e),o.def&&o.def.componentUpdated&&c.push(o)):(Tr(o,"bind",t,e),o.def&&o.def.inserted&&u.push(o));if(u.length){var p=function(){for(var n=0;n<u.length;n++)Tr(u[n],"inserted",t,e)};i?He(t,"insert",p):p()}c.length&&He(t,"postpatch",(function(){for(var n=0;n<c.length;n++)Tr(c[n],"componentUpdated",t,e)}));if(!i)for(n in s)l[n]||Tr(s[n],"unbind",e,e,a)}(e,t)}var Or=Object.create(null);function Er(e,t){var n,r,o=Object.create(null);if(!e)return o;for(n=0;n<e.length;n++){if((r=e[n]).modifiers||(r.modifiers=Or),o[$r(r)]=r,t._setupState&&t._setupState.__sfc){var i=r.def||En(t,"_setupState","v-"+r.name);r.def="function"==typeof i?{bind:i,update:i}:i}r.def=r.def||En(t.$options,"directives",r.name)}return o}function $r(e){return e.rawName||"".concat(e.name,".").concat(Object.keys(e.modifiers||{}).join("."))}function Tr(e,t,n,r,o){var i=e.def&&e.def[t];if(i)try{i(n.elm,e,n,r,o)}catch(r){At(r,n.context,"directive ".concat(e.name," ").concat(t," hook"))}}var Lr=[_r,Pr];function Ir(e,t){var n=t.componentOptions;if(!(a(n)&&!1===n.Ctor.options.inheritAttrs||i(e.data.attrs)&&i(t.data.attrs))){var r,o,l=t.elm,u=e.data.attrs||{},c=t.data.attrs||{};for(r in(a(c.__ob__)||s(c._v_attr_proxy))&&(c=t.data.attrs=$({},c)),c)o=c[r],u[r]!==o&&Rr(l,r,o,t.data.pre);for(r in(Q||X)&&c.value!==u.value&&Rr(l,"value",c.value),u)i(c[r])&&(ar(r)?l.removeAttributeNS(ir,sr(r)):nr(r)||l.removeAttribute(r))}}function Rr(e,t,n,r){r||e.tagName.indexOf("-")>-1?Dr(e,t,n):or(t)?lr(n)?e.removeAttribute(t):(n="allowfullscreen"===t&&"EMBED"===e.tagName?"true":t,e.setAttribute(t,n)):nr(t)?e.setAttribute(t,function(e,t){return lr(t)||"false"===t?"false":"contenteditable"===e&&rr(t)?t:"true"}(t,n)):ar(t)?lr(n)?e.removeAttributeNS(ir,sr(t)):e.setAttributeNS(ir,t,n):Dr(e,t,n)}function Dr(e,t,n){if(lr(n))e.removeAttribute(t);else{if(Q&&!J&&"TEXTAREA"===e.tagName&&"placeholder"===t&&""!==n&&!e.__ieph){var r=function(t){t.stopImmediatePropagation(),e.removeEventListener("input",r)};e.addEventListener("input",r),e.__ieph=!0}e.setAttribute(t,n)}}var Mr={create:Ir,update:Ir};function Fr(e,t){var n=t.elm,r=t.data,o=e.data;if(!(i(r.staticClass)&&i(r.class)&&(i(o)||i(o.staticClass)&&i(o.class)))){var s=ur(t),l=n._transitionClasses;a(l)&&(s=pr(s,fr(l))),s!==n._prevClass&&(n.setAttribute("class",s),n._prevClass=s)}}var Ur,Br={create:Fr,update:Fr};function zr(e,t,n){var r=Ur;return function o(){var i=t.apply(null,arguments);null!==i&&Wr(e,o,n,r)}}var Nr=Et&&!(te&&Number(te[1])<=53);function Vr(e,t,n,r){if(Nr){var o=sn,i=t;t=i._wrapper=function(e){if(e.target===e.currentTarget||e.timeStamp>=o||e.timeStamp<=0||e.target.ownerDocument!==document)return i.apply(this,arguments)}}Ur.addEventListener(e,t,re?{capture:n,passive:r}:n)}function Wr(e,t,n,r){(r||Ur).removeEventListener(e,t._wrapper||t,n)}function qr(e,t){if(!i(e.data.on)||!i(t.data.on)){var n=t.data.on||{},r=e.data.on||{};Ur=t.elm||e.elm,function(e){if(a(e.__r)){var t=Q?"change":"input";e[t]=[].concat(e.__r,e[t]||[]),delete e.__r}a(e.__c)&&(e.change=[].concat(e.__c,e.change||[]),delete e.__c)}(n),qe(n,r,Vr,Wr,zr,t.context),Ur=void 0}}var Hr,Gr={create:qr,update:qr,destroy:function(e){return qr(e,xr)}};function Kr(e,t){if(!i(e.data.domProps)||!i(t.data.domProps)){var n,r,o=t.elm,l=e.data.domProps||{},u=t.data.domProps||{};for(n in(a(u.__ob__)||s(u._v_attr_proxy))&&(u=t.data.domProps=$({},u)),l)n in u||(o[n]="");for(n in u){if(r=u[n],"textContent"===n||"innerHTML"===n){if(t.children&&(t.children.length=0),r===l[n])continue;1===o.childNodes.length&&o.removeChild(o.childNodes[0])}if("value"===n&&"PROGRESS"!==o.tagName){o._value=r;var c=i(r)?"":String(r);Yr(o,c)&&(o.value=c)}else if("innerHTML"===n&&vr(o.tagName)&&i(o.innerHTML)){(Hr=Hr||document.createElement("div")).innerHTML="<svg>".concat(r,"</svg>");for(var p=Hr.firstChild;o.firstChild;)o.removeChild(o.firstChild);for(;p.firstChild;)o.appendChild(p.firstChild)}else if(r!==l[n])try{o[n]=r}catch(e){}}}}function Yr(e,t){return!e.composing&&("OPTION"===e.tagName||function(e,t){var n=!0;try{n=document.activeElement!==e}catch(e){}return n&&e.value!==t}(e,t)||function(e,t){var n=e.value,r=e._vModifiers;if(a(r)){if(r.number)return g(n)!==g(t);if(r.trim)return n.trim()!==t.trim()}return n!==t}(e,t))}var Qr={create:Kr,update:Kr},Jr=x((function(e){var t={},n=/:(.+)/;return e.split(/;(?![^(]*\))/g).forEach((function(e){if(e){var r=e.split(n);r.length>1&&(t[r[0].trim()]=r[1].trim())}})),t}));function Xr(e){var t=Zr(e.style);return e.staticStyle?$(e.staticStyle,t):t}function Zr(e){return Array.isArray(e)?T(e):"string"==typeof e?Jr(e):e}var eo,to=/^--/,no=/\s*!important$/,ro=function(e,t,n){if(to.test(t))e.style.setProperty(t,n);else if(no.test(n))e.style.setProperty(j(t),n.replace(no,""),"important");else{var r=io(t);if(Array.isArray(n))for(var o=0,i=n.length;o<i;o++)e.style[r]=n[o];else e.style[r]=n}},oo=["Webkit","Moz","ms"],io=x((function(e){if(eo=eo||document.createElement("div").style,"filter"!==(e=A(e))&&e in eo)return e;for(var t=e.charAt(0).toUpperCase()+e.slice(1),n=0;n<oo.length;n++){var r=oo[n]+t;if(r in eo)return r}}));function ao(e,t){var n=t.data,r=e.data;if(!(i(n.staticStyle)&&i(n.style)&&i(r.staticStyle)&&i(r.style))){var o,s,l=t.elm,u=r.staticStyle,c=r.normalizedStyle||r.style||{},p=u||c,f=Zr(t.data.style)||{};t.data.normalizedStyle=a(f.__ob__)?$({},f):f;var h=function(e,t){var n,r={};if(t)for(var o=e;o.componentInstance;)(o=o.componentInstance._vnode)&&o.data&&(n=Xr(o.data))&&$(r,n);(n=Xr(e.data))&&$(r,n);for(var i=e;i=i.parent;)i.data&&(n=Xr(i.data))&&$(r,n);return r}(t,!0);for(s in p)i(h[s])&&ro(l,s,"");for(s in h)(o=h[s])!==p[s]&&ro(l,s,null==o?"":o)}}var so={create:ao,update:ao},lo=/\s+/;function uo(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(lo).forEach((function(t){return e.classList.add(t)})):e.classList.add(t);else{var n=" ".concat(e.getAttribute("class")||""," ");n.indexOf(" "+t+" ")<0&&e.setAttribute("class",(n+t).trim())}}function co(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(lo).forEach((function(t){return e.classList.remove(t)})):e.classList.remove(t),e.classList.length||e.removeAttribute("class");else{for(var n=" ".concat(e.getAttribute("class")||""," "),r=" "+t+" ";n.indexOf(r)>=0;)n=n.replace(r," ");(n=n.trim())?e.setAttribute("class",n):e.removeAttribute("class")}}function po(e){if(e){if("object"==typeof e){var t={};return!1!==e.css&&$(t,fo(e.name||"v")),$(t,e),t}return"string"==typeof e?fo(e):void 0}}var fo=x((function(e){return{enterClass:"".concat(e,"-enter"),enterToClass:"".concat(e,"-enter-to"),enterActiveClass:"".concat(e,"-enter-active"),leaveClass:"".concat(e,"-leave"),leaveToClass:"".concat(e,"-leave-to"),leaveActiveClass:"".concat(e,"-leave-active")}})),ho=K&&!J,vo="transition",mo="transitionend",go="animation",yo="animationend";ho&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(vo="WebkitTransition",mo="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(go="WebkitAnimation",yo="webkitAnimationEnd"));var bo=K?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(e){return e()};function _o(e){bo((function(){bo(e)}))}function wo(e,t){var n=e._transitionClasses||(e._transitionClasses=[]);n.indexOf(t)<0&&(n.push(t),uo(e,t))}function ko(e,t){e._transitionClasses&&_(e._transitionClasses,t),co(e,t)}function xo(e,t,n){var r=Ao(e,t),o=r.type,i=r.timeout,a=r.propCount;if(!o)return n();var s="transition"===o?mo:yo,l=0,u=function(){e.removeEventListener(s,c),n()},c=function(t){t.target===e&&++l>=a&&u()};setTimeout((function(){l<a&&u()}),i+1),e.addEventListener(s,c)}var Co=/\b(transform|all)(,|$)/;function Ao(e,t){var n,r=window.getComputedStyle(e),o=(r[vo+"Delay"]||"").split(", "),i=(r[vo+"Duration"]||"").split(", "),a=So(o,i),s=(r[go+"Delay"]||"").split(", "),l=(r[go+"Duration"]||"").split(", "),u=So(s,l),c=0,p=0;return"transition"===t?a>0&&(n="transition",c=a,p=i.length):"animation"===t?u>0&&(n="animation",c=u,p=l.length):p=(n=(c=Math.max(a,u))>0?a>u?"transition":"animation":null)?"transition"===n?i.length:l.length:0,{type:n,timeout:c,propCount:p,hasTransform:"transition"===n&&Co.test(r[vo+"Property"])}}function So(e,t){for(;e.length<t.length;)e=e.concat(e);return Math.max.apply(null,t.map((function(t,n){return Po(t)+Po(e[n])})))}function Po(e){return 1e3*Number(e.slice(0,-1).replace(",","."))}function jo(e,t){var n=e.elm;a(n._leaveCb)&&(n._leaveCb.cancelled=!0,n._leaveCb());var r=po(e.data.transition);if(!i(r)&&!a(n._enterCb)&&1===n.nodeType){for(var o=r.css,s=r.type,l=r.enterClass,p=r.enterToClass,f=r.enterActiveClass,h=r.appearClass,d=r.appearToClass,v=r.appearActiveClass,m=r.beforeEnter,y=r.enter,b=r.afterEnter,_=r.enterCancelled,w=r.beforeAppear,k=r.appear,x=r.afterAppear,C=r.appearCancelled,A=r.duration,S=Yt,P=Yt.$vnode;P&&P.parent;)S=P.context,P=P.parent;var j=!S._isMounted||!e.isRootInsert;if(!j||k||""===k){var O=j&&h?h:l,E=j&&v?v:f,$=j&&d?d:p,T=j&&w||m,L=j&&u(k)?k:y,I=j&&x||b,R=j&&C||_,D=g(c(A)?A.enter:A);0;var M=!1!==o&&!J,U=$o(L),B=n._enterCb=F((function(){M&&(ko(n,$),ko(n,E)),B.cancelled?(M&&ko(n,O),R&&R(n)):I&&I(n),n._enterCb=null}));e.data.show||He(e,"insert",(function(){var t=n.parentNode,r=t&&t._pending&&t._pending[e.key];r&&r.tag===e.tag&&r.elm._leaveCb&&r.elm._leaveCb(),L&&L(n,B)})),T&&T(n),M&&(wo(n,O),wo(n,E),_o((function(){ko(n,O),B.cancelled||(wo(n,$),U||(Eo(D)?setTimeout(B,D):xo(n,s,B)))}))),e.data.show&&(t&&t(),L&&L(n,B)),M||U||B()}}}function Oo(e,t){var n=e.elm;a(n._enterCb)&&(n._enterCb.cancelled=!0,n._enterCb());var r=po(e.data.transition);if(i(r)||1!==n.nodeType)return t();if(!a(n._leaveCb)){var o=r.css,s=r.type,l=r.leaveClass,u=r.leaveToClass,p=r.leaveActiveClass,f=r.beforeLeave,h=r.leave,d=r.afterLeave,v=r.leaveCancelled,m=r.delayLeave,y=r.duration,b=!1!==o&&!J,_=$o(h),w=g(c(y)?y.leave:y);0;var k=n._leaveCb=F((function(){n.parentNode&&n.parentNode._pending&&(n.parentNode._pending[e.key]=null),b&&(ko(n,u),ko(n,p)),k.cancelled?(b&&ko(n,l),v&&v(n)):(t(),d&&d(n)),n._leaveCb=null}));m?m(x):x()}function x(){k.cancelled||(!e.data.show&&n.parentNode&&((n.parentNode._pending||(n.parentNode._pending={}))[e.key]=e),f&&f(n),b&&(wo(n,l),wo(n,p),_o((function(){ko(n,l),k.cancelled||(wo(n,u),_||(Eo(w)?setTimeout(k,w):xo(n,s,k)))}))),h&&h(n,k),b||_||k())}}function Eo(e){return"number"==typeof e&&!isNaN(e)}function $o(e){if(i(e))return!1;var t=e.fns;return a(t)?$o(Array.isArray(t)?t[0]:t):(e._length||e.length)>1}function To(e,t){!0!==t.data.show&&jo(t)}var Lo=function(e){var t,n,r={},u=e.modules,c=e.nodeOps;for(t=0;t<Cr.length;++t)for(r[Cr[t]]=[],n=0;n<u.length;++n)a(u[n][Cr[t]])&&r[Cr[t]].push(u[n][Cr[t]]);function p(e){var t=c.parentNode(e);a(t)&&c.removeChild(t,e)}function f(e,t,n,o,i,l,u){if(a(e.elm)&&a(l)&&(e=l[u]=ve(e)),e.isRootInsert=!i,!function(e,t,n,o){var i=e.data;if(a(i)){var l=a(e.componentInstance)&&i.keepAlive;if(a(i=i.hook)&&a(i=i.init)&&i(e,!1),a(e.componentInstance))return h(e,t),d(n,e.elm,o),s(l)&&function(e,t,n,o){var i,s=e;for(;s.componentInstance;)if(s=s.componentInstance._vnode,a(i=s.data)&&a(i=i.transition)){for(i=0;i<r.activate.length;++i)r.activate[i](xr,s);t.push(s);break}d(n,e.elm,o)}(e,t,n,o),!0}}(e,t,n,o)){var p=e.data,f=e.children,m=e.tag;a(m)?(e.elm=e.ns?c.createElementNS(e.ns,m):c.createElement(m,e),b(e),v(e,f,t),a(p)&&g(e,t),d(n,e.elm,o)):s(e.isComment)?(e.elm=c.createComment(e.text),d(n,e.elm,o)):(e.elm=c.createTextNode(e.text),d(n,e.elm,o))}}function h(e,t){a(e.data.pendingInsert)&&(t.push.apply(t,e.data.pendingInsert),e.data.pendingInsert=null),e.elm=e.componentInstance.$el,m(e)?(g(e,t),b(e)):(wr(e),t.push(e))}function d(e,t,n){a(e)&&(a(n)?c.parentNode(n)===e&&c.insertBefore(e,t,n):c.appendChild(e,t))}function v(e,t,n){if(o(t)){0;for(var r=0;r<t.length;++r)f(t[r],n,e.elm,null,!0,t,r)}else l(e.text)&&c.appendChild(e.elm,c.createTextNode(String(e.text)))}function m(e){for(;e.componentInstance;)e=e.componentInstance._vnode;return a(e.tag)}function g(e,n){for(var o=0;o<r.create.length;++o)r.create[o](xr,e);a(t=e.data.hook)&&(a(t.create)&&t.create(xr,e),a(t.insert)&&n.push(e))}function b(e){var t;if(a(t=e.fnScopeId))c.setStyleScope(e.elm,t);else for(var n=e;n;)a(t=n.context)&&a(t=t.$options._scopeId)&&c.setStyleScope(e.elm,t),n=n.parent;a(t=Yt)&&t!==e.context&&t!==e.fnContext&&a(t=t.$options._scopeId)&&c.setStyleScope(e.elm,t)}function _(e,t,n,r,o,i){for(;r<=o;++r)f(n[r],i,e,t,!1,n,r)}function w(e){var t,n,o=e.data;if(a(o))for(a(t=o.hook)&&a(t=t.destroy)&&t(e),t=0;t<r.destroy.length;++t)r.destroy[t](e);if(a(t=e.children))for(n=0;n<e.children.length;++n)w(e.children[n])}function k(e,t,n){for(;t<=n;++t){var r=e[t];a(r)&&(a(r.tag)?(x(r),w(r)):p(r.elm))}}function x(e,t){if(a(t)||a(e.data)){var n,o=r.remove.length+1;for(a(t)?t.listeners+=o:t=function(e,t){function n(){0==--n.listeners&&p(e)}return n.listeners=t,n}(e.elm,o),a(n=e.componentInstance)&&a(n=n._vnode)&&a(n.data)&&x(n,t),n=0;n<r.remove.length;++n)r.remove[n](e,t);a(n=e.data.hook)&&a(n=n.remove)?n(e,t):t()}else p(e.elm)}function C(e,t,n,r){for(var o=n;o<r;o++){var i=t[o];if(a(i)&&Ar(e,i))return o}}function A(e,t,n,o,l,u){if(e!==t){a(t.elm)&&a(o)&&(t=o[l]=ve(t));var p=t.elm=e.elm;if(s(e.isAsyncPlaceholder))a(t.asyncFactory.resolved)?j(e.elm,t,n):t.isAsyncPlaceholder=!0;else if(s(t.isStatic)&&s(e.isStatic)&&t.key===e.key&&(s(t.isCloned)||s(t.isOnce)))t.componentInstance=e.componentInstance;else{var h,d=t.data;a(d)&&a(h=d.hook)&&a(h=h.prepatch)&&h(e,t);var v=e.children,g=t.children;if(a(d)&&m(t)){for(h=0;h<r.update.length;++h)r.update[h](e,t);a(h=d.hook)&&a(h=h.update)&&h(e,t)}i(t.text)?a(v)&&a(g)?v!==g&&function(e,t,n,r,o){var s,l,u,p=0,h=0,d=t.length-1,v=t[0],m=t[d],g=n.length-1,y=n[0],b=n[g],w=!o;for(0;p<=d&&h<=g;)i(v)?v=t[++p]:i(m)?m=t[--d]:Ar(v,y)?(A(v,y,r,n,h),v=t[++p],y=n[++h]):Ar(m,b)?(A(m,b,r,n,g),m=t[--d],b=n[--g]):Ar(v,b)?(A(v,b,r,n,g),w&&c.insertBefore(e,v.elm,c.nextSibling(m.elm)),v=t[++p],b=n[--g]):Ar(m,y)?(A(m,y,r,n,h),w&&c.insertBefore(e,m.elm,v.elm),m=t[--d],y=n[++h]):(i(s)&&(s=Sr(t,p,d)),i(l=a(y.key)?s[y.key]:C(y,t,p,d))?f(y,r,e,v.elm,!1,n,h):Ar(u=t[l],y)?(A(u,y,r,n,h),t[l]=void 0,w&&c.insertBefore(e,u.elm,v.elm)):f(y,r,e,v.elm,!1,n,h),y=n[++h]);p>d?_(e,i(n[g+1])?null:n[g+1].elm,n,h,g,r):h>g&&k(t,p,d)}(p,v,g,n,u):a(g)?(a(e.text)&&c.setTextContent(p,""),_(p,null,g,0,g.length-1,n)):a(v)?k(v,0,v.length-1):a(e.text)&&c.setTextContent(p,""):e.text!==t.text&&c.setTextContent(p,t.text),a(d)&&a(h=d.hook)&&a(h=h.postpatch)&&h(e,t)}}}function S(e,t,n){if(s(n)&&a(e.parent))e.parent.data.pendingInsert=t;else for(var r=0;r<t.length;++r)t[r].data.hook.insert(t[r])}var P=y("attrs,class,staticClass,staticStyle,key");function j(e,t,n,r){var o,i=t.tag,l=t.data,u=t.children;if(r=r||l&&l.pre,t.elm=e,s(t.isComment)&&a(t.asyncFactory))return t.isAsyncPlaceholder=!0,!0;if(a(l)&&(a(o=l.hook)&&a(o=o.init)&&o(t,!0),a(o=t.componentInstance)))return h(t,n),!0;if(a(i)){if(a(u))if(e.hasChildNodes())if(a(o=l)&&a(o=o.domProps)&&a(o=o.innerHTML)){if(o!==e.innerHTML)return!1}else{for(var c=!0,p=e.firstChild,f=0;f<u.length;f++){if(!p||!j(p,u[f],n,r)){c=!1;break}p=p.nextSibling}if(!c||p)return!1}else v(t,u,n);if(a(l)){var d=!1;for(var m in l)if(!P(m)){d=!0,g(t,n);break}!d&&l.class&&zt(l.class)}}else e.data!==t.text&&(e.data=t.text);return!0}return function(e,t,n,o){if(!i(t)){var l,u=!1,p=[];if(i(e))u=!0,f(t,p);else{var h=a(e.nodeType);if(!h&&Ar(e,t))A(e,t,p,null,null,o);else{if(h){if(1===e.nodeType&&e.hasAttribute("data-server-rendered")&&(e.removeAttribute("data-server-rendered"),n=!0),s(n)&&j(e,t,p))return S(t,p,!0),e;l=e,e=new fe(c.tagName(l).toLowerCase(),{},[],void 0,l)}var d=e.elm,v=c.parentNode(d);if(f(t,p,d._leaveCb?null:v,c.nextSibling(d)),a(t.parent))for(var g=t.parent,y=m(t);g;){for(var b=0;b<r.destroy.length;++b)r.destroy[b](g);if(g.elm=t.elm,y){for(var _=0;_<r.create.length;++_)r.create[_](xr,g);var x=g.data.hook.insert;if(x.merged)for(var C=1;C<x.fns.length;C++)x.fns[C]()}else wr(g);g=g.parent}a(v)?k([e],0,0):a(e.tag)&&w(e)}}return S(t,p,u),t.elm}a(e)&&w(e)}}({nodeOps:br,modules:[Mr,Br,Gr,Qr,so,K?{create:To,activate:To,remove:function(e,t){!0!==e.data.show?Oo(e,t):t()}}:{}].concat(Lr)});J&&document.addEventListener("selectionchange",(function(){var e=document.activeElement;e&&e.vmodel&&zo(e,"input")}));var Io={inserted:function(e,t,n,r){"select"===n.tag?(r.elm&&!r.elm._vOptions?He(n,"postpatch",(function(){Io.componentUpdated(e,t,n)})):Ro(e,t,n.context),e._vOptions=[].map.call(e.options,Fo)):("textarea"===n.tag||yr(e.type))&&(e._vModifiers=t.modifiers,t.modifiers.lazy||(e.addEventListener("compositionstart",Uo),e.addEventListener("compositionend",Bo),e.addEventListener("change",Bo),J&&(e.vmodel=!0)))},componentUpdated:function(e,t,n){if("select"===n.tag){Ro(e,t,n.context);var r=e._vOptions,o=e._vOptions=[].map.call(e.options,Fo);if(o.some((function(e,t){return!D(e,r[t])})))(e.multiple?t.value.some((function(e){return Mo(e,o)})):t.value!==t.oldValue&&Mo(t.value,o))&&zo(e,"change")}}};function Ro(e,t,n){Do(e,t,n),(Q||X)&&setTimeout((function(){Do(e,t,n)}),0)}function Do(e,t,n){var r=t.value,o=e.multiple;if(!o||Array.isArray(r)){for(var i,a,s=0,l=e.options.length;s<l;s++)if(a=e.options[s],o)i=M(r,Fo(a))>-1,a.selected!==i&&(a.selected=i);else if(D(Fo(a),r))return void(e.selectedIndex!==s&&(e.selectedIndex=s));o||(e.selectedIndex=-1)}}function Mo(e,t){return t.every((function(t){return!D(t,e)}))}function Fo(e){return"_value"in e?e._value:e.value}function Uo(e){e.target.composing=!0}function Bo(e){e.target.composing&&(e.target.composing=!1,zo(e.target,"input"))}function zo(e,t){var n=document.createEvent("HTMLEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)}function No(e){return!e.componentInstance||e.data&&e.data.transition?e:No(e.componentInstance._vnode)}var Vo={model:Io,show:{bind:function(e,t,n){var r=t.value,o=(n=No(n)).data&&n.data.transition,i=e.__vOriginalDisplay="none"===e.style.display?"":e.style.display;r&&o?(n.data.show=!0,jo(n,(function(){e.style.display=i}))):e.style.display=r?i:"none"},update:function(e,t,n){var r=t.value;!r!=!t.oldValue&&((n=No(n)).data&&n.data.transition?(n.data.show=!0,r?jo(n,(function(){e.style.display=e.__vOriginalDisplay})):Oo(n,(function(){e.style.display="none"}))):e.style.display=r?e.__vOriginalDisplay:"none")},unbind:function(e,t,n,r,o){o||(e.style.display=e.__vOriginalDisplay)}}},Wo={name:String,appear:Boolean,css:Boolean,mode:String,type:String,enterClass:String,leaveClass:String,enterToClass:String,leaveToClass:String,enterActiveClass:String,leaveActiveClass:String,appearClass:String,appearActiveClass:String,appearToClass:String,duration:[Number,String,Object]};function qo(e){var t=e&&e.componentOptions;return t&&t.Ctor.options.abstract?qo(xt(t.children)):e}function Ho(e){var t={},n=e.$options;for(var r in n.propsData)t[r]=e[r];var o=n._parentListeners;for(var r in o)t[A(r)]=o[r];return t}function Go(e,t){if(/\d-keep-alive$/.test(t.tag))return e("keep-alive",{props:t.componentOptions.propsData})}var Ko=function(e){return e.tag||ht(e)},Yo=function(e){return"show"===e.name},Qo={name:"transition",props:Wo,abstract:!0,render:function(e){var t=this,n=this.$slots.default;if(n&&(n=n.filter(Ko)).length){0;var r=this.mode;0;var o=n[0];if(function(e){for(;e=e.parent;)if(e.data.transition)return!0}(this.$vnode))return o;var i=qo(o);if(!i)return o;if(this._leaving)return Go(e,o);var a="__transition-".concat(this._uid,"-");i.key=null==i.key?i.isComment?a+"comment":a+i.tag:l(i.key)?0===String(i.key).indexOf(a)?i.key:a+i.key:i.key;var s=(i.data||(i.data={})).transition=Ho(this),u=this._vnode,c=qo(u);if(i.data.directives&&i.data.directives.some(Yo)&&(i.data.show=!0),c&&c.data&&!function(e,t){return t.key===e.key&&t.tag===e.tag}(i,c)&&!ht(c)&&(!c.componentInstance||!c.componentInstance._vnode.isComment)){var p=c.data.transition=$({},s);if("out-in"===r)return this._leaving=!0,He(p,"afterLeave",(function(){t._leaving=!1,t.$forceUpdate()})),Go(e,o);if("in-out"===r){if(ht(i))return u;var f,h=function(){f()};He(s,"afterEnter",h),He(s,"enterCancelled",h),He(p,"delayLeave",(function(e){f=e}))}}return o}}},Jo=$({tag:String,moveClass:String},Wo);function Xo(e){e.elm._moveCb&&e.elm._moveCb(),e.elm._enterCb&&e.elm._enterCb()}function Zo(e){e.data.newPos=e.elm.getBoundingClientRect()}function ei(e){var t=e.data.pos,n=e.data.newPos,r=t.left-n.left,o=t.top-n.top;if(r||o){e.data.moved=!0;var i=e.elm.style;i.transform=i.WebkitTransform="translate(".concat(r,"px,").concat(o,"px)"),i.transitionDuration="0s"}}delete Jo.mode;var ti={Transition:Qo,TransitionGroup:{props:Jo,beforeMount:function(){var e=this,t=this._update;this._update=function(n,r){var o=Qt(e);e.__patch__(e._vnode,e.kept,!1,!0),e._vnode=e.kept,o(),t.call(e,n,r)}},render:function(e){for(var t=this.tag||this.$vnode.data.tag||"span",n=Object.create(null),r=this.prevChildren=this.children,o=this.$slots.default||[],i=this.children=[],a=Ho(this),s=0;s<o.length;s++){if((c=o[s]).tag)if(null!=c.key&&0!==String(c.key).indexOf("__vlist"))i.push(c),n[c.key]=c,(c.data||(c.data={})).transition=a;else;}if(r){var l=[],u=[];for(s=0;s<r.length;s++){var c;(c=r[s]).data.transition=a,c.data.pos=c.elm.getBoundingClientRect(),n[c.key]?l.push(c):u.push(c)}this.kept=e(t,null,l),this.removed=u}return e(t,null,i)},updated:function(){var e=this.prevChildren,t=this.moveClass||(this.name||"v")+"-move";e.length&&this.hasMove(e[0].elm,t)&&(e.forEach(Xo),e.forEach(Zo),e.forEach(ei),this._reflow=document.body.offsetHeight,e.forEach((function(e){if(e.data.moved){var n=e.elm,r=n.style;wo(n,t),r.transform=r.WebkitTransform=r.transitionDuration="",n.addEventListener(mo,n._moveCb=function e(r){r&&r.target!==n||r&&!/transform$/.test(r.propertyName)||(n.removeEventListener(mo,e),n._moveCb=null,ko(n,t))})}})))},methods:{hasMove:function(e,t){if(!ho)return!1;if(this._hasMove)return this._hasMove;var n=e.cloneNode();e._transitionClasses&&e._transitionClasses.forEach((function(e){co(n,e)})),uo(n,t),n.style.display="none",this.$el.appendChild(n);var r=Ao(n);return this.$el.removeChild(n),this._hasMove=r.hasTransform}}}};function ni(e,t){for(var n in t)e[n]=t[n];return e}Hn.config.mustUseProp=function(e,t,n){return"value"===n&&tr(e)&&"button"!==t||"selected"===n&&"option"===e||"checked"===n&&"input"===e||"muted"===n&&"video"===e},Hn.config.isReservedTag=mr,Hn.config.isReservedAttr=er,Hn.config.getTagNamespace=function(e){return vr(e)?"svg":"math"===e?"math":void 0},Hn.config.isUnknownElement=function(e){if(!K)return!0;if(mr(e))return!1;if(e=e.toLowerCase(),null!=gr[e])return gr[e];var t=document.createElement(e);return e.indexOf("-")>-1?gr[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:gr[e]=/HTMLUnknownElement/.test(t.toString())},$(Hn.options.directives,Vo),$(Hn.options.components,ti),Hn.prototype.__patch__=K?Lo:L,Hn.prototype.$mount=function(e,t){return function(e,t,n){var r;e.$el=t,e.$options.render||(e.$options.render=he),Zt(e,"beforeMount"),r=function(){e._update(e._render(),n)},new Wt(e,r,L,{before:function(){e._isMounted&&!e._isDestroyed&&Zt(e,"beforeUpdate")}},!0),n=!1;var o=e._preWatchers;if(o)for(var i=0;i<o.length;i++)o[i].run();return null==e.$vnode&&(e._isMounted=!0,Zt(e,"mounted")),e}(this,e=e&&K?function(e){if("string"==typeof e){var t=document.querySelector(e);return t||document.createElement("div")}return e}(e):void 0,t)},K&&setTimeout((function(){N.devtools&&ae&&ae.emit("init",Hn)}),0);var ri=/[!'()*]/g,oi=function(e){return"%"+e.charCodeAt(0).toString(16)},ii=/%2C/g,ai=function(e){return encodeURIComponent(e).replace(ri,oi).replace(ii,",")};function si(e){try{return decodeURIComponent(e)}catch(e){0}return e}var li=function(e){return null==e||"object"==typeof e?e:String(e)};function ui(e){var t={};return(e=e.trim().replace(/^(\?|#|&)/,""))?(e.split("&").forEach((function(e){var n=e.replace(/\+/g," ").split("="),r=si(n.shift()),o=n.length>0?si(n.join("=")):null;void 0===t[r]?t[r]=o:Array.isArray(t[r])?t[r].push(o):t[r]=[t[r],o]})),t):t}function ci(e){var t=e?Object.keys(e).map((function(t){var n=e[t];if(void 0===n)return"";if(null===n)return ai(t);if(Array.isArray(n)){var r=[];return n.forEach((function(e){void 0!==e&&(null===e?r.push(ai(t)):r.push(ai(t)+"="+ai(e)))})),r.join("&")}return ai(t)+"="+ai(n)})).filter((function(e){return e.length>0})).join("&"):null;return t?"?"+t:""}var pi=/\/?$/;function fi(e,t,n,r){var o=r&&r.options.stringifyQuery,i=t.query||{};try{i=hi(i)}catch(e){}var a={name:t.name||e&&e.name,meta:e&&e.meta||{},path:t.path||"/",hash:t.hash||"",query:i,params:t.params||{},fullPath:mi(t,o),matched:e?vi(e):[]};return n&&(a.redirectedFrom=mi(n,o)),Object.freeze(a)}function hi(e){if(Array.isArray(e))return e.map(hi);if(e&&"object"==typeof e){var t={};for(var n in e)t[n]=hi(e[n]);return t}return e}var di=fi(null,{path:"/"});function vi(e){for(var t=[];e;)t.unshift(e),e=e.parent;return t}function mi(e,t){var n=e.path,r=e.query;void 0===r&&(r={});var o=e.hash;return void 0===o&&(o=""),(n||"/")+(t||ci)(r)+o}function gi(e,t,n){return t===di?e===t:!!t&&(e.path&&t.path?e.path.replace(pi,"")===t.path.replace(pi,"")&&(n||e.hash===t.hash&&yi(e.query,t.query)):!(!e.name||!t.name)&&(e.name===t.name&&(n||e.hash===t.hash&&yi(e.query,t.query)&&yi(e.params,t.params))))}function yi(e,t){if(void 0===e&&(e={}),void 0===t&&(t={}),!e||!t)return e===t;var n=Object.keys(e).sort(),r=Object.keys(t).sort();return n.length===r.length&&n.every((function(n,o){var i=e[n];if(r[o]!==n)return!1;var a=t[n];return null==i||null==a?i===a:"object"==typeof i&&"object"==typeof a?yi(i,a):String(i)===String(a)}))}function bi(e){for(var t=0;t<e.matched.length;t++){var n=e.matched[t];for(var r in n.instances){var o=n.instances[r],i=n.enteredCbs[r];if(o&&i){delete n.enteredCbs[r];for(var a=0;a<i.length;a++)o._isBeingDestroyed||i[a](o)}}}}var _i={name:"RouterView",functional:!0,props:{name:{type:String,default:"default"}},render:function(e,t){var n=t.props,r=t.children,o=t.parent,i=t.data;i.routerView=!0;for(var a=o.$createElement,s=n.name,l=o.$route,u=o._routerViewCache||(o._routerViewCache={}),c=0,p=!1;o&&o._routerRoot!==o;){var f=o.$vnode?o.$vnode.data:{};f.routerView&&c++,f.keepAlive&&o._directInactive&&o._inactive&&(p=!0),o=o.$parent}if(i.routerViewDepth=c,p){var h=u[s],d=h&&h.component;return d?(h.configProps&&wi(d,i,h.route,h.configProps),a(d,i,r)):a()}var v=l.matched[c],m=v&&v.components[s];if(!v||!m)return u[s]=null,a();u[s]={component:m},i.registerRouteInstance=function(e,t){var n=v.instances[s];(t&&n!==e||!t&&n===e)&&(v.instances[s]=t)},(i.hook||(i.hook={})).prepatch=function(e,t){v.instances[s]=t.componentInstance},i.hook.init=function(e){e.data.keepAlive&&e.componentInstance&&e.componentInstance!==v.instances[s]&&(v.instances[s]=e.componentInstance),bi(l)};var g=v.props&&v.props[s];return g&&(ni(u[s],{route:l,configProps:g}),wi(m,i,l,g)),a(m,i,r)}};function wi(e,t,n,r){var o=t.props=function(e,t){switch(typeof t){case"undefined":return;case"object":return t;case"function":return t(e);case"boolean":return t?e.params:void 0;default:0}}(n,r);if(o){o=t.props=ni({},o);var i=t.attrs=t.attrs||{};for(var a in o)e.props&&a in e.props||(i[a]=o[a],delete o[a])}}function ki(e,t,n){var r=e.charAt(0);if("/"===r)return e;if("?"===r||"#"===r)return t+e;var o=t.split("/");n&&o[o.length-1]||o.pop();for(var i=e.replace(/^\//,"").split("/"),a=0;a<i.length;a++){var s=i[a];".."===s?o.pop():"."!==s&&o.push(s)}return""!==o[0]&&o.unshift(""),o.join("/")}function xi(e){return e.replace(/\/(?:\s*\/)+/g,"/")}var Ci=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)},Ai=Ui,Si=$i,Pi=function(e,t){return Li($i(e,t),t)},ji=Li,Oi=Fi,Ei=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function $i(e,t){for(var n,r=[],o=0,i=0,a="",s=t&&t.delimiter||"/";null!=(n=Ei.exec(e));){var l=n[0],u=n[1],c=n.index;if(a+=e.slice(i,c),i=c+l.length,u)a+=u[1];else{var p=e[i],f=n[2],h=n[3],d=n[4],v=n[5],m=n[6],g=n[7];a&&(r.push(a),a="");var y=null!=f&&null!=p&&p!==f,b="+"===m||"*"===m,_="?"===m||"*"===m,w=n[2]||s,k=d||v;r.push({name:h||o++,prefix:f||"",delimiter:w,optional:_,repeat:b,partial:y,asterisk:!!g,pattern:k?Ri(k):g?".*":"[^"+Ii(w)+"]+?"})}}return i<e.length&&(a+=e.substr(i)),a&&r.push(a),r}function Ti(e){return encodeURI(e).replace(/[\/?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()}))}function Li(e,t){for(var n=new Array(e.length),r=0;r<e.length;r++)"object"==typeof e[r]&&(n[r]=new RegExp("^(?:"+e[r].pattern+")$",Mi(t)));return function(t,r){for(var o="",i=t||{},a=(r||{}).pretty?Ti:encodeURIComponent,s=0;s<e.length;s++){var l=e[s];if("string"!=typeof l){var u,c=i[l.name];if(null==c){if(l.optional){l.partial&&(o+=l.prefix);continue}throw new TypeError('Expected "'+l.name+'" to be defined')}if(Ci(c)){if(!l.repeat)throw new TypeError('Expected "'+l.name+'" to not repeat, but received `'+JSON.stringify(c)+"`");if(0===c.length){if(l.optional)continue;throw new TypeError('Expected "'+l.name+'" to not be empty')}for(var p=0;p<c.length;p++){if(u=a(c[p]),!n[s].test(u))throw new TypeError('Expected all "'+l.name+'" to match "'+l.pattern+'", but received `'+JSON.stringify(u)+"`");o+=(0===p?l.prefix:l.delimiter)+u}}else{if(u=l.asterisk?encodeURI(c).replace(/[?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()})):a(c),!n[s].test(u))throw new TypeError('Expected "'+l.name+'" to match "'+l.pattern+'", but received "'+u+'"');o+=l.prefix+u}}else o+=l}return o}}function Ii(e){return e.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function Ri(e){return e.replace(/([=!:$\/()])/g,"\\$1")}function Di(e,t){return e.keys=t,e}function Mi(e){return e&&e.sensitive?"":"i"}function Fi(e,t,n){Ci(t)||(n=t||n,t=[]);for(var r=(n=n||{}).strict,o=!1!==n.end,i="",a=0;a<e.length;a++){var s=e[a];if("string"==typeof s)i+=Ii(s);else{var l=Ii(s.prefix),u="(?:"+s.pattern+")";t.push(s),s.repeat&&(u+="(?:"+l+u+")*"),i+=u=s.optional?s.partial?l+"("+u+")?":"(?:"+l+"("+u+"))?":l+"("+u+")"}}var c=Ii(n.delimiter||"/"),p=i.slice(-c.length)===c;return r||(i=(p?i.slice(0,-c.length):i)+"(?:"+c+"(?=$))?"),i+=o?"$":r&&p?"":"(?="+c+"|$)",Di(new RegExp("^"+i,Mi(n)),t)}function Ui(e,t,n){return Ci(t)||(n=t||n,t=[]),n=n||{},e instanceof RegExp?function(e,t){var n=e.source.match(/\((?!\?)/g);if(n)for(var r=0;r<n.length;r++)t.push({name:r,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return Di(e,t)}(e,t):Ci(e)?function(e,t,n){for(var r=[],o=0;o<e.length;o++)r.push(Ui(e[o],t,n).source);return Di(new RegExp("(?:"+r.join("|")+")",Mi(n)),t)}(e,t,n):function(e,t,n){return Fi($i(e,n),t,n)}(e,t,n)}Ai.parse=Si,Ai.compile=Pi,Ai.tokensToFunction=ji,Ai.tokensToRegExp=Oi;var Bi=Object.create(null);function zi(e,t,n){t=t||{};try{var r=Bi[e]||(Bi[e]=Ai.compile(e));return"string"==typeof t.pathMatch&&(t[0]=t.pathMatch),r(t,{pretty:!0})}catch(e){return""}finally{delete t[0]}}function Ni(e,t,n,r){var o="string"==typeof e?{path:e}:e;if(o._normalized)return o;if(o.name){var i=(o=ni({},e)).params;return i&&"object"==typeof i&&(o.params=ni({},i)),o}if(!o.path&&o.params&&t){(o=ni({},o))._normalized=!0;var a=ni(ni({},t.params),o.params);if(t.name)o.name=t.name,o.params=a;else if(t.matched.length){var s=t.matched[t.matched.length-1].path;o.path=zi(s,a,t.path)}else 0;return o}var l=function(e){var t="",n="",r=e.indexOf("#");r>=0&&(t=e.slice(r),e=e.slice(0,r));var o=e.indexOf("?");return o>=0&&(n=e.slice(o+1),e=e.slice(0,o)),{path:e,query:n,hash:t}}(o.path||""),u=t&&t.path||"/",c=l.path?ki(l.path,u,n||o.append):u,p=function(e,t,n){void 0===t&&(t={});var r,o=n||ui;try{r=o(e||"")}catch(e){r={}}for(var i in t){var a=t[i];r[i]=Array.isArray(a)?a.map(li):li(a)}return r}(l.query,o.query,r&&r.options.parseQuery),f=o.hash||l.hash;return f&&"#"!==f.charAt(0)&&(f="#"+f),{_normalized:!0,path:c,query:p,hash:f}}var Vi,Wi=function(){},qi={name:"RouterLink",props:{to:{type:[String,Object],required:!0},tag:{type:String,default:"a"},custom:Boolean,exact:Boolean,exactPath:Boolean,append:Boolean,replace:Boolean,activeClass:String,exactActiveClass:String,ariaCurrentValue:{type:String,default:"page"},event:{type:[String,Array],default:"click"}},render:function(e){var t=this,n=this.$router,r=this.$route,o=n.resolve(this.to,r,this.append),i=o.location,a=o.route,s=o.href,l={},u=n.options.linkActiveClass,c=n.options.linkExactActiveClass,p=null==u?"router-link-active":u,f=null==c?"router-link-exact-active":c,h=null==this.activeClass?p:this.activeClass,d=null==this.exactActiveClass?f:this.exactActiveClass,v=a.redirectedFrom?fi(null,Ni(a.redirectedFrom),null,n):a;l[d]=gi(r,v,this.exactPath),l[h]=this.exact||this.exactPath?l[d]:function(e,t){return 0===e.path.replace(pi,"/").indexOf(t.path.replace(pi,"/"))&&(!t.hash||e.hash===t.hash)&&function(e,t){for(var n in t)if(!(n in e))return!1;return!0}(e.query,t.query)}(r,v);var m=l[d]?this.ariaCurrentValue:null,g=function(e){Hi(e)&&(t.replace?n.replace(i,Wi):n.push(i,Wi))},y={click:Hi};Array.isArray(this.event)?this.event.forEach((function(e){y[e]=g})):y[this.event]=g;var b={class:l},_=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:s,route:a,navigate:g,isActive:l[h],isExactActive:l[d]});if(_){if(1===_.length)return _[0];if(_.length>1||!_.length)return 0===_.length?e():e("span",{},_)}if("a"===this.tag)b.on=y,b.attrs={href:s,"aria-current":m};else{var w=function e(t){var n;if(t)for(var r=0;r<t.length;r++){if("a"===(n=t[r]).tag)return n;if(n.children&&(n=e(n.children)))return n}}(this.$slots.default);if(w){w.isStatic=!1;var k=w.data=ni({},w.data);for(var x in k.on=k.on||{},k.on){var C=k.on[x];x in y&&(k.on[x]=Array.isArray(C)?C:[C])}for(var A in y)A in k.on?k.on[A].push(y[A]):k.on[A]=g;var S=w.data.attrs=ni({},w.data.attrs);S.href=s,S["aria-current"]=m}else b.on=y}return e(this.tag,b,this.$slots.default)}};function Hi(e){if(!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey||e.defaultPrevented||void 0!==e.button&&0!==e.button)){if(e.currentTarget&&e.currentTarget.getAttribute){var t=e.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(t))return}return e.preventDefault&&e.preventDefault(),!0}}var Gi="undefined"!=typeof window;function Ki(e,t,n,r,o){var i=t||[],a=n||Object.create(null),s=r||Object.create(null);e.forEach((function(e){!function e(t,n,r,o,i,a){var s=o.path,l=o.name;0;var u=o.pathToRegexpOptions||{},c=function(e,t,n){n||(e=e.replace(/\/$/,""));if("/"===e[0])return e;if(null==t)return e;return xi(t.path+"/"+e)}(s,i,u.strict);"boolean"==typeof o.caseSensitive&&(u.sensitive=o.caseSensitive);var p={path:c,regex:Yi(c,u),components:o.components||{default:o.component},alias:o.alias?"string"==typeof o.alias?[o.alias]:o.alias:[],instances:{},enteredCbs:{},name:l,parent:i,matchAs:a,redirect:o.redirect,beforeEnter:o.beforeEnter,meta:o.meta||{},props:null==o.props?{}:o.components?o.props:{default:o.props}};o.children&&o.children.forEach((function(o){var i=a?xi(a+"/"+o.path):void 0;e(t,n,r,o,p,i)}));n[p.path]||(t.push(p.path),n[p.path]=p);if(void 0!==o.alias)for(var f=Array.isArray(o.alias)?o.alias:[o.alias],h=0;h<f.length;++h){0;var d={path:f[h],children:o.children};e(t,n,r,d,i,p.path||"/")}l&&(r[l]||(r[l]=p))}(i,a,s,e,o)}));for(var l=0,u=i.length;l<u;l++)"*"===i[l]&&(i.push(i.splice(l,1)[0]),u--,l--);return{pathList:i,pathMap:a,nameMap:s}}function Yi(e,t){return Ai(e,[],t)}function Qi(e,t){var n=Ki(e),r=n.pathList,o=n.pathMap,i=n.nameMap;function a(e,n,a){var s=Ni(e,n,!1,t),u=s.name;if(u){var c=i[u];if(!c)return l(null,s);var p=c.regex.keys.filter((function(e){return!e.optional})).map((function(e){return e.name}));if("object"!=typeof s.params&&(s.params={}),n&&"object"==typeof n.params)for(var f in n.params)!(f in s.params)&&p.indexOf(f)>-1&&(s.params[f]=n.params[f]);return s.path=zi(c.path,s.params),l(c,s,a)}if(s.path){s.params={};for(var h=0;h<r.length;h++){var d=r[h],v=o[d];if(Ji(v.regex,s.path,s.params))return l(v,s,a)}}return l(null,s)}function s(e,n){var r=e.redirect,o="function"==typeof r?r(fi(e,n,null,t)):r;if("string"==typeof o&&(o={path:o}),!o||"object"!=typeof o)return l(null,n);var s=o,u=s.name,c=s.path,p=n.query,f=n.hash,h=n.params;if(p=s.hasOwnProperty("query")?s.query:p,f=s.hasOwnProperty("hash")?s.hash:f,h=s.hasOwnProperty("params")?s.params:h,u){i[u];return a({_normalized:!0,name:u,query:p,hash:f,params:h},void 0,n)}if(c){var d=function(e,t){return ki(e,t.parent?t.parent.path:"/",!0)}(c,e);return a({_normalized:!0,path:zi(d,h),query:p,hash:f},void 0,n)}return l(null,n)}function l(e,n,r){return e&&e.redirect?s(e,r||n):e&&e.matchAs?function(e,t,n){var r=a({_normalized:!0,path:zi(n,t.params)});if(r){var o=r.matched,i=o[o.length-1];return t.params=r.params,l(i,t)}return l(null,t)}(0,n,e.matchAs):fi(e,n,r,t)}return{match:a,addRoute:function(e,t){var n="object"!=typeof e?i[e]:void 0;Ki([t||e],r,o,i,n),n&&n.alias.length&&Ki(n.alias.map((function(e){return{path:e,children:[t]}})),r,o,i,n)},getRoutes:function(){return r.map((function(e){return o[e]}))},addRoutes:function(e){Ki(e,r,o,i)}}}function Ji(e,t,n){var r=t.match(e);if(!r)return!1;if(!n)return!0;for(var o=1,i=r.length;o<i;++o){var a=e.keys[o-1];a&&(n[a.name||"pathMatch"]="string"==typeof r[o]?si(r[o]):r[o])}return!0}var Xi=Gi&&window.performance&&window.performance.now?window.performance:Date;function Zi(){return Xi.now().toFixed(3)}var ea=Zi();function ta(){return ea}function na(e){return ea=e}var ra=Object.create(null);function oa(){"scrollRestoration"in window.history&&(window.history.scrollRestoration="manual");var e=window.location.protocol+"//"+window.location.host,t=window.location.href.replace(e,""),n=ni({},window.history.state);return n.key=ta(),window.history.replaceState(n,"",t),window.addEventListener("popstate",sa),function(){window.removeEventListener("popstate",sa)}}function ia(e,t,n,r){if(e.app){var o=e.options.scrollBehavior;o&&e.app.$nextTick((function(){var i=function(){var e=ta();if(e)return ra[e]}(),a=o.call(e,t,n,r?i:null);a&&("function"==typeof a.then?a.then((function(e){fa(e,i)})).catch((function(e){0})):fa(a,i))}))}}function aa(){var e=ta();e&&(ra[e]={x:window.pageXOffset,y:window.pageYOffset})}function sa(e){aa(),e.state&&e.state.key&&na(e.state.key)}function la(e){return ca(e.x)||ca(e.y)}function ua(e){return{x:ca(e.x)?e.x:window.pageXOffset,y:ca(e.y)?e.y:window.pageYOffset}}function ca(e){return"number"==typeof e}var pa=/^#\d/;function fa(e,t){var n,r="object"==typeof e;if(r&&"string"==typeof e.selector){var o=pa.test(e.selector)?document.getElementById(e.selector.slice(1)):document.querySelector(e.selector);if(o){var i=e.offset&&"object"==typeof e.offset?e.offset:{};t=function(e,t){var n=document.documentElement.getBoundingClientRect(),r=e.getBoundingClientRect();return{x:r.left-n.left-t.x,y:r.top-n.top-t.y}}(o,i={x:ca((n=i).x)?n.x:0,y:ca(n.y)?n.y:0})}else la(e)&&(t=ua(e))}else r&&la(e)&&(t=ua(e));t&&("scrollBehavior"in document.documentElement.style?window.scrollTo({left:t.x,top:t.y,behavior:e.behavior}):window.scrollTo(t.x,t.y))}var ha,da=Gi&&((-1===(ha=window.navigator.userAgent).indexOf("Android 2.")&&-1===ha.indexOf("Android 4.0")||-1===ha.indexOf("Mobile Safari")||-1!==ha.indexOf("Chrome")||-1!==ha.indexOf("Windows Phone"))&&window.history&&"function"==typeof window.history.pushState);function va(e,t){aa();var n=window.history;try{if(t){var r=ni({},n.state);r.key=ta(),n.replaceState(r,"",e)}else n.pushState({key:na(Zi())},"",e)}catch(n){window.location[t?"replace":"assign"](e)}}function ma(e){va(e,!0)}var ga={redirected:2,aborted:4,cancelled:8,duplicated:16};function ya(e,t){return _a(e,t,ga.redirected,'Redirected when going from "'+e.fullPath+'" to "'+function(e){if("string"==typeof e)return e;if("path"in e)return e.path;var t={};return wa.forEach((function(n){n in e&&(t[n]=e[n])})),JSON.stringify(t,null,2)}(t)+'" via a navigation guard.')}function ba(e,t){return _a(e,t,ga.cancelled,'Navigation cancelled from "'+e.fullPath+'" to "'+t.fullPath+'" with a new navigation.')}function _a(e,t,n,r){var o=new Error(r);return o._isRouter=!0,o.from=e,o.to=t,o.type=n,o}var wa=["params","query","hash"];function ka(e){return Object.prototype.toString.call(e).indexOf("Error")>-1}function xa(e,t){return ka(e)&&e._isRouter&&(null==t||e.type===t)}function Ca(e,t,n){var r=function(o){o>=e.length?n():e[o]?t(e[o],(function(){r(o+1)})):r(o+1)};r(0)}function Aa(e){return function(t,n,r){var o=!1,i=0,a=null;Sa(e,(function(e,t,n,s){if("function"==typeof e&&void 0===e.cid){o=!0,i++;var l,u=Oa((function(t){var o;((o=t).__esModule||ja&&"Module"===o[Symbol.toStringTag])&&(t=t.default),e.resolved="function"==typeof t?t:Vi.extend(t),n.components[s]=t,--i<=0&&r()})),c=Oa((function(e){var t="Failed to resolve async component "+s+": "+e;a||(a=ka(e)?e:new Error(t),r(a))}));try{l=e(u,c)}catch(e){c(e)}if(l)if("function"==typeof l.then)l.then(u,c);else{var p=l.component;p&&"function"==typeof p.then&&p.then(u,c)}}})),o||r()}}function Sa(e,t){return Pa(e.map((function(e){return Object.keys(e.components).map((function(n){return t(e.components[n],e.instances[n],e,n)}))})))}function Pa(e){return Array.prototype.concat.apply([],e)}var ja="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function Oa(e){var t=!1;return function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];if(!t)return t=!0,e.apply(this,n)}}var Ea=function(e,t){this.router=e,this.base=function(e){if(!e)if(Gi){var t=document.querySelector("base");e=(e=t&&t.getAttribute("href")||"/").replace(/^https?:\/\/[^\/]+/,"")}else e="/";"/"!==e.charAt(0)&&(e="/"+e);return e.replace(/\/$/,"")}(t),this.current=di,this.pending=null,this.ready=!1,this.readyCbs=[],this.readyErrorCbs=[],this.errorCbs=[],this.listeners=[]};function $a(e,t,n,r){var o=Sa(e,(function(e,r,o,i){var a=function(e,t){"function"!=typeof e&&(e=Vi.extend(e));return e.options[t]}(e,t);if(a)return Array.isArray(a)?a.map((function(e){return n(e,r,o,i)})):n(a,r,o,i)}));return Pa(r?o.reverse():o)}function Ta(e,t){if(t)return function(){return e.apply(t,arguments)}}Ea.prototype.listen=function(e){this.cb=e},Ea.prototype.onReady=function(e,t){this.ready?e():(this.readyCbs.push(e),t&&this.readyErrorCbs.push(t))},Ea.prototype.onError=function(e){this.errorCbs.push(e)},Ea.prototype.transitionTo=function(e,t,n){var r,o=this;try{r=this.router.match(e,this.current)}catch(e){throw this.errorCbs.forEach((function(t){t(e)})),e}var i=this.current;this.confirmTransition(r,(function(){o.updateRoute(r),t&&t(r),o.ensureURL(),o.router.afterHooks.forEach((function(e){e&&e(r,i)})),o.ready||(o.ready=!0,o.readyCbs.forEach((function(e){e(r)})))}),(function(e){n&&n(e),e&&!o.ready&&(xa(e,ga.redirected)&&i===di||(o.ready=!0,o.readyErrorCbs.forEach((function(t){t(e)}))))}))},Ea.prototype.confirmTransition=function(e,t,n){var r=this,o=this.current;this.pending=e;var i,a,s=function(e){!xa(e)&&ka(e)&&(r.errorCbs.length?r.errorCbs.forEach((function(t){t(e)})):console.error(e)),n&&n(e)},l=e.matched.length-1,u=o.matched.length-1;if(gi(e,o)&&l===u&&e.matched[l]===o.matched[u])return this.ensureURL(),e.hash&&ia(this.router,o,e,!1),s(((a=_a(i=o,e,ga.duplicated,'Avoided redundant navigation to current location: "'+i.fullPath+'".')).name="NavigationDuplicated",a));var c=function(e,t){var n,r=Math.max(e.length,t.length);for(n=0;n<r&&e[n]===t[n];n++);return{updated:t.slice(0,n),activated:t.slice(n),deactivated:e.slice(n)}}(this.current.matched,e.matched),p=c.updated,f=c.deactivated,h=c.activated,d=[].concat(function(e){return $a(e,"beforeRouteLeave",Ta,!0)}(f),this.router.beforeHooks,function(e){return $a(e,"beforeRouteUpdate",Ta)}(p),h.map((function(e){return e.beforeEnter})),Aa(h)),v=function(t,n){if(r.pending!==e)return s(ba(o,e));try{t(e,o,(function(t){!1===t?(r.ensureURL(!0),s(function(e,t){return _a(e,t,ga.aborted,'Navigation aborted from "'+e.fullPath+'" to "'+t.fullPath+'" via a navigation guard.')}(o,e))):ka(t)?(r.ensureURL(!0),s(t)):"string"==typeof t||"object"==typeof t&&("string"==typeof t.path||"string"==typeof t.name)?(s(ya(o,e)),"object"==typeof t&&t.replace?r.replace(t):r.push(t)):n(t)}))}catch(e){s(e)}};Ca(d,v,(function(){Ca(function(e){return $a(e,"beforeRouteEnter",(function(e,t,n,r){return function(e,t,n){return function(r,o,i){return e(r,o,(function(e){"function"==typeof e&&(t.enteredCbs[n]||(t.enteredCbs[n]=[]),t.enteredCbs[n].push(e)),i(e)}))}}(e,n,r)}))}(h).concat(r.router.resolveHooks),v,(function(){if(r.pending!==e)return s(ba(o,e));r.pending=null,t(e),r.router.app&&r.router.app.$nextTick((function(){bi(e)}))}))}))},Ea.prototype.updateRoute=function(e){this.current=e,this.cb&&this.cb(e)},Ea.prototype.setupListeners=function(){},Ea.prototype.teardown=function(){this.listeners.forEach((function(e){e()})),this.listeners=[],this.current=di,this.pending=null};var La=function(e){function t(t,n){e.call(this,t,n),this._startLocation=Ia(this.base)}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.setupListeners=function(){var e=this;if(!(this.listeners.length>0)){var t=this.router,n=t.options.scrollBehavior,r=da&&n;r&&this.listeners.push(oa());var o=function(){var n=e.current,o=Ia(e.base);e.current===di&&o===e._startLocation||e.transitionTo(o,(function(e){r&&ia(t,e,n,!0)}))};window.addEventListener("popstate",o),this.listeners.push((function(){window.removeEventListener("popstate",o)}))}},t.prototype.go=function(e){window.history.go(e)},t.prototype.push=function(e,t,n){var r=this,o=this.current;this.transitionTo(e,(function(e){va(xi(r.base+e.fullPath)),ia(r.router,e,o,!1),t&&t(e)}),n)},t.prototype.replace=function(e,t,n){var r=this,o=this.current;this.transitionTo(e,(function(e){ma(xi(r.base+e.fullPath)),ia(r.router,e,o,!1),t&&t(e)}),n)},t.prototype.ensureURL=function(e){if(Ia(this.base)!==this.current.fullPath){var t=xi(this.base+this.current.fullPath);e?va(t):ma(t)}},t.prototype.getCurrentLocation=function(){return Ia(this.base)},t}(Ea);function Ia(e){var t=window.location.pathname,n=t.toLowerCase(),r=e.toLowerCase();return!e||n!==r&&0!==n.indexOf(xi(r+"/"))||(t=t.slice(e.length)),(t||"/")+window.location.search+window.location.hash}var Ra=function(e){function t(t,n,r){e.call(this,t,n),r&&function(e){var t=Ia(e);if(!/^\/#/.test(t))return window.location.replace(xi(e+"/#"+t)),!0}(this.base)||Da()}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.setupListeners=function(){var e=this;if(!(this.listeners.length>0)){var t=this.router.options.scrollBehavior,n=da&&t;n&&this.listeners.push(oa());var r=function(){var t=e.current;Da()&&e.transitionTo(Ma(),(function(r){n&&ia(e.router,r,t,!0),da||Ba(r.fullPath)}))},o=da?"popstate":"hashchange";window.addEventListener(o,r),this.listeners.push((function(){window.removeEventListener(o,r)}))}},t.prototype.push=function(e,t,n){var r=this,o=this.current;this.transitionTo(e,(function(e){Ua(e.fullPath),ia(r.router,e,o,!1),t&&t(e)}),n)},t.prototype.replace=function(e,t,n){var r=this,o=this.current;this.transitionTo(e,(function(e){Ba(e.fullPath),ia(r.router,e,o,!1),t&&t(e)}),n)},t.prototype.go=function(e){window.history.go(e)},t.prototype.ensureURL=function(e){var t=this.current.fullPath;Ma()!==t&&(e?Ua(t):Ba(t))},t.prototype.getCurrentLocation=function(){return Ma()},t}(Ea);function Da(){var e=Ma();return"/"===e.charAt(0)||(Ba("/"+e),!1)}function Ma(){var e=window.location.href,t=e.indexOf("#");return t<0?"":e=e.slice(t+1)}function Fa(e){var t=window.location.href,n=t.indexOf("#");return(n>=0?t.slice(0,n):t)+"#"+e}function Ua(e){da?va(Fa(e)):window.location.hash=e}function Ba(e){da?ma(Fa(e)):window.location.replace(Fa(e))}var za=function(e){function t(t,n){e.call(this,t,n),this.stack=[],this.index=-1}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.push=function(e,t,n){var r=this;this.transitionTo(e,(function(e){r.stack=r.stack.slice(0,r.index+1).concat(e),r.index++,t&&t(e)}),n)},t.prototype.replace=function(e,t,n){var r=this;this.transitionTo(e,(function(e){r.stack=r.stack.slice(0,r.index).concat(e),t&&t(e)}),n)},t.prototype.go=function(e){var t=this,n=this.index+e;if(!(n<0||n>=this.stack.length)){var r=this.stack[n];this.confirmTransition(r,(function(){var e=t.current;t.index=n,t.updateRoute(r),t.router.afterHooks.forEach((function(t){t&&t(r,e)}))}),(function(e){xa(e,ga.duplicated)&&(t.index=n)}))}},t.prototype.getCurrentLocation=function(){var e=this.stack[this.stack.length-1];return e?e.fullPath:"/"},t.prototype.ensureURL=function(){},t}(Ea),Na=function(e){void 0===e&&(e={}),this.app=null,this.apps=[],this.options=e,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=Qi(e.routes||[],this);var t=e.mode||"hash";switch(this.fallback="history"===t&&!da&&!1!==e.fallback,this.fallback&&(t="hash"),Gi||(t="abstract"),this.mode=t,t){case"history":this.history=new La(this,e.base);break;case"hash":this.history=new Ra(this,e.base,this.fallback);break;case"abstract":this.history=new za(this,e.base);break;default:0}},Va={currentRoute:{configurable:!0}};Na.prototype.match=function(e,t,n){return this.matcher.match(e,t,n)},Va.currentRoute.get=function(){return this.history&&this.history.current},Na.prototype.init=function(e){var t=this;if(this.apps.push(e),e.$once("hook:destroyed",(function(){var n=t.apps.indexOf(e);n>-1&&t.apps.splice(n,1),t.app===e&&(t.app=t.apps[0]||null),t.app||t.history.teardown()})),!this.app){this.app=e;var n=this.history;if(n instanceof La||n instanceof Ra){var r=function(e){n.setupListeners(),function(e){var r=n.current,o=t.options.scrollBehavior;da&&o&&"fullPath"in e&&ia(t,e,r,!1)}(e)};n.transitionTo(n.getCurrentLocation(),r,r)}n.listen((function(e){t.apps.forEach((function(t){t._route=e}))}))}},Na.prototype.beforeEach=function(e){return qa(this.beforeHooks,e)},Na.prototype.beforeResolve=function(e){return qa(this.resolveHooks,e)},Na.prototype.afterEach=function(e){return qa(this.afterHooks,e)},Na.prototype.onReady=function(e,t){this.history.onReady(e,t)},Na.prototype.onError=function(e){this.history.onError(e)},Na.prototype.push=function(e,t,n){var r=this;if(!t&&!n&&"undefined"!=typeof Promise)return new Promise((function(t,n){r.history.push(e,t,n)}));this.history.push(e,t,n)},Na.prototype.replace=function(e,t,n){var r=this;if(!t&&!n&&"undefined"!=typeof Promise)return new Promise((function(t,n){r.history.replace(e,t,n)}));this.history.replace(e,t,n)},Na.prototype.go=function(e){this.history.go(e)},Na.prototype.back=function(){this.go(-1)},Na.prototype.forward=function(){this.go(1)},Na.prototype.getMatchedComponents=function(e){var t=e?e.matched?e:this.resolve(e).route:this.currentRoute;return t?[].concat.apply([],t.matched.map((function(e){return Object.keys(e.components).map((function(t){return e.components[t]}))}))):[]},Na.prototype.resolve=function(e,t,n){var r=Ni(e,t=t||this.history.current,n,this),o=this.match(r,t),i=o.redirectedFrom||o.fullPath;return{location:r,route:o,href:function(e,t,n){var r="hash"===n?"#"+t:t;return e?xi(e+"/"+r):r}(this.history.base,i,this.mode),normalizedTo:r,resolved:o}},Na.prototype.getRoutes=function(){return this.matcher.getRoutes()},Na.prototype.addRoute=function(e,t){this.matcher.addRoute(e,t),this.history.current!==di&&this.history.transitionTo(this.history.getCurrentLocation())},Na.prototype.addRoutes=function(e){this.matcher.addRoutes(e),this.history.current!==di&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(Na.prototype,Va);var Wa=Na;function qa(e,t){return e.push(t),function(){var n=e.indexOf(t);n>-1&&e.splice(n,1)}}Na.install=function e(t){if(!e.installed||Vi!==t){e.installed=!0,Vi=t;var n=function(e){return void 0!==e},r=function(e,t){var r=e.$options._parentVnode;n(r)&&n(r=r.data)&&n(r=r.registerRouteInstance)&&r(e,t)};t.mixin({beforeCreate:function(){n(this.$options.router)?(this._routerRoot=this,this._router=this.$options.router,this._router.init(this),t.util.defineReactive(this,"_route",this._router.history.current)):this._routerRoot=this.$parent&&this.$parent._routerRoot||this,r(this,this)},destroyed:function(){r(this)}}),Object.defineProperty(t.prototype,"$router",{get:function(){return this._routerRoot._router}}),Object.defineProperty(t.prototype,"$route",{get:function(){return this._routerRoot._route}}),t.component("RouterView",_i),t.component("RouterLink",qi);var o=t.config.optionMergeStrategies;o.beforeRouteEnter=o.beforeRouteLeave=o.beforeRouteUpdate=o.created}},Na.version="3.6.5",Na.isNavigationFailure=xa,Na.NavigationFailureType=ga,Na.START_LOCATION=di,Gi&&window.Vue&&window.Vue.use(Na);n(97);n(90),n(127);var Ha={"components/AlgoliaSearchBox":()=>Promise.all([n.e(0),n.e(18)]).then(n.bind(null,423)),"components/DropdownLink":()=>Promise.all([n.e(0),n.e(19)]).then(n.bind(null,254)),"components/DropdownTransition":()=>Promise.all([n.e(0),n.e(35)]).then(n.bind(null,242)),"components/Home":()=>Promise.all([n.e(0),n.e(26)]).then(n.bind(null,286)),"components/NavLink":()=>n.e(49).then(n.bind(null,241)),"components/NavLinks":()=>Promise.all([n.e(0),n.e(15)]).then(n.bind(null,270)),"components/Navbar":()=>Promise.all([n.e(0),n.e(1)]).then(n.bind(null,420)),"components/Page":()=>Promise.all([n.e(0),n.e(14)]).then(n.bind(null,288)),"components/PageEdit":()=>Promise.all([n.e(0),n.e(27)]).then(n.bind(null,271)),"components/PageNav":()=>Promise.all([n.e(0),n.e(20)]).then(n.bind(null,272)),"components/Sidebar":()=>Promise.all([n.e(0),n.e(10)]).then(n.bind(null,287)),"components/SidebarButton":()=>Promise.all([n.e(0),n.e(36)]).then(n.bind(null,289)),"components/SidebarGroup":()=>Promise.all([n.e(0),n.e(3)]).then(n.bind(null,269)),"components/SidebarLink":()=>Promise.all([n.e(0),n.e(28)]).then(n.bind(null,255)),"components/SidebarLinks":()=>Promise.all([n.e(0),n.e(3)]).then(n.bind(null,253)),"global-components/Badge":()=>Promise.all([n.e(0),n.e(4)]).then(n.bind(null,442)),"global-components/CodeBlock":()=>Promise.all([n.e(0),n.e(5)]).then(n.bind(null,426)),"global-components/CodeGroup":()=>Promise.all([n.e(0),n.e(6)]).then(n.bind(null,425)),"layouts/404":()=>n.e(7).then(n.bind(null,427)),"layouts/Layout":()=>Promise.all([n.e(0),n.e(1),n.e(2)]).then(n.bind(null,424)),NotFound:()=>n.e(7).then(n.bind(null,427)),Layout:()=>Promise.all([n.e(0),n.e(1),n.e(2)]).then(n.bind(null,424))},Ga={"v-7c5c7049":()=>n.e(37).then(n.bind(null,451)),"v-53692dae":()=>n.e(63).then(n.bind(null,453)),"v-1454906e":()=>n.e(50).then(n.bind(null,454)),"v-0f3edbec":()=>n.e(29).then(n.bind(null,486)),"v-60b6cb2e":()=>n.e(64).then(n.bind(null,457)),"v-505c456e":()=>n.e(65).then(n.bind(null,459)),"v-35bd2aa9":()=>n.e(55).then(n.bind(null,460)),"v-9f6e988a":()=>n.e(39).then(n.bind(null,462)),"v-bb9567ae":()=>n.e(66).then(n.bind(null,463)),"v-fce449ee":()=>n.e(67).then(n.bind(null,465)),"v-1320a22e":()=>n.e(57).then(n.bind(null,466)),"v-628f5b80":()=>n.e(30).then(n.bind(null,468)),"v-fbcf3c8c":()=>n.e(16).then(n.bind(null,469)),"v-9b3c64bc":()=>n.e(69).then(n.bind(null,471)),"v-330eff7f":()=>n.e(70).then(n.bind(null,472)),"v-9f52bb42":()=>n.e(72).then(n.bind(null,474)),"v-f105383c":()=>n.e(76).then(n.bind(null,475)),"v-4d70d202":()=>n.e(77).then(n.bind(null,477)),"v-33648c5e":()=>n.e(78).then(n.bind(null,478)),"v-38db7182":()=>n.e(32).then(n.bind(null,480)),"v-1fd1b8e2":()=>n.e(79).then(n.bind(null,481)),"v-e76984fc":()=>n.e(60).then(n.bind(null,483)),"v-990ac2bc":()=>n.e(17).then(n.bind(null,484)),"v-1c083702":()=>n.e(62).then(n.bind(null,447)),"v-d8e73a3c":()=>n.e(38).then(n.bind(null,485)),"v-28f802a2":()=>n.e(52).then(n.bind(null,482)),"v-92e1217c":()=>n.e(40).then(n.bind(null,479)),"v-5f953588":()=>n.e(21).then(n.bind(null,476)),"v-25a42004":()=>n.e(22).then(n.bind(null,473)),"v-1f10ec7c":()=>n.e(42).then(n.bind(null,470)),"v-a9a27d18":()=>n.e(31).then(n.bind(null,467)),"v-5d180d6e":()=>n.e(71).then(n.bind(null,464)),"v-2772a840":()=>n.e(33).then(n.bind(null,461)),"v-623abcde":()=>n.e(43).then(n.bind(null,458)),"v-4fa26448":()=>n.e(44).then(n.bind(null,455)),"v-52a27462":()=>n.e(23).then(n.bind(null,452)),"v-23bda522":()=>n.e(24).then(n.bind(null,450)),"v-3b41243c":()=>n.e(61).then(n.bind(null,448)),"v-4aed0642":()=>n.e(48).then(n.bind(null,446)),"v-f6d4613c":()=>n.e(25).then(n.bind(null,444)),"v-25b9307c":()=>n.e(34).then(n.bind(null,441)),"v-5e4232c2":()=>n.e(51).then(n.bind(null,440)),"v-18a45afc":()=>n.e(53).then(n.bind(null,438)),"v-8338bb3c":()=>n.e(54).then(n.bind(null,436)),"v-4e22deda":()=>n.e(45).then(n.bind(null,434)),"v-77d22050":()=>n.e(46).then(n.bind(null,432)),"v-fd7581bc":()=>n.e(41).then(n.bind(null,431)),"v-7ac6aa74":()=>n.e(12).then(n.bind(null,429)),"v-290dbc7c":()=>n.e(73).then(n.bind(null,456)),"v-5b83fdc2":()=>n.e(74).then(n.bind(null,428)),"v-2bd647fc":()=>n.e(59).then(n.bind(null,430)),"v-fcf178bc":()=>n.e(58).then(n.bind(null,433)),"v-899fe67c":()=>n.e(13).then(n.bind(null,435)),"v-49591084":()=>n.e(56).then(n.bind(null,437)),"v-06e47f6c":()=>n.e(68).then(n.bind(null,439)),"v-03b60c7c":()=>n.e(75).then(n.bind(null,443)),"v-f71410dc":()=>n.e(47).then(n.bind(null,445)),"v-164e543c":()=>n.e(11).then(n.bind(null,449))};function Ka(e){const t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}const Ya=/-(\w)/g,Qa=Ka(e=>e.replace(Ya,(e,t)=>t?t.toUpperCase():"")),Ja=/\B([A-Z])/g,Xa=Ka(e=>e.replace(Ja,"-$1").toLowerCase()),Za=Ka(e=>e.charAt(0).toUpperCase()+e.slice(1));function es(e,t){if(!t)return;if(e(t))return e(t);return t.includes("-")?e(Za(Qa(t))):e(Za(t))||e(Xa(t))}const ts=Object.assign({},Ha,Ga),ns=e=>ts[e],rs=e=>Ga[e],os=e=>Ha[e],is=e=>Hn.component(e);function as(e){return es(rs,e)}function ss(e){return es(os,e)}function ls(e){return es(ns,e)}function us(e){return es(is,e)}function cs(...e){return Promise.all(e.filter(e=>e).map(async e=>{if(!us(e)&&ls(e)){const t=await ls(e)();Hn.component(e,t.default)}}))}function ps(e,t){"undefined"!=typeof window&&window.__VUEPRESS__&&(window.__VUEPRESS__[e]=t)}var fs=n(87),hs=n.n(fs),ds=n(88),vs=n.n(ds),ms={created(){if(this.siteMeta=this.$site.headTags.filter(([e])=>"meta"===e).map(([e,t])=>t),this.$ssrContext){const t=this.getMergedMetaTags();this.$ssrContext.title=this.$title,this.$ssrContext.lang=this.$lang,this.$ssrContext.pageMeta=(e=t)?e.map(e=>{let t="<meta";return Object.keys(e).forEach(n=>{t+=` ${n}="${vs()(e[n])}"`}),t+">"}).join("\n "):"",this.$ssrContext.canonicalLink=ys(this.$canonicalUrl)}var e},mounted(){this.currentMetaTags=[...document.querySelectorAll("meta")],this.updateMeta(),this.updateCanonicalLink()},methods:{updateMeta(){document.title=this.$title,document.documentElement.lang=this.$lang;const e=this.getMergedMetaTags();this.currentMetaTags=bs(e,this.currentMetaTags)},getMergedMetaTags(){const e=this.$page.frontmatter.meta||[];return hs()([{name:"description",content:this.$description}],e,this.siteMeta,_s)},updateCanonicalLink(){gs(),this.$canonicalUrl&&document.head.insertAdjacentHTML("beforeend",ys(this.$canonicalUrl))}},watch:{$page(){this.updateMeta(),this.updateCanonicalLink()}},beforeDestroy(){bs(null,this.currentMetaTags),gs()}};function gs(){const e=document.querySelector("link[rel='canonical']");e&&e.remove()}function ys(e=""){return e?`<link href="${e}" rel="canonical" />`:""}function bs(e,t){if(t&&[...t].filter(e=>e.parentNode===document.head).forEach(e=>document.head.removeChild(e)),e)return e.map(e=>{const t=document.createElement("meta");return Object.keys(e).forEach(n=>{t.setAttribute(n,e[n])}),document.head.appendChild(t),t})}function _s(e){for(const t of["name","property","itemprop"])if(e.hasOwnProperty(t))return e[t]+t;return JSON.stringify(e)}var ws=n(89),ks={mounted(){window.addEventListener("scroll",this.onScroll)},methods:{onScroll:n.n(ws)()((function(){this.setActiveHash()}),300),setActiveHash(){const e=[].slice.call(document.querySelectorAll(".sidebar-link")),t=[].slice.call(document.querySelectorAll(".header-anchor")).filter(t=>e.some(e=>e.hash===t.hash)),n=Math.max(window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop),r=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight),o=window.innerHeight+n;for(let e=0;e<t.length;e++){const i=t[e],a=t[e+1],s=0===e&&0===n||n>=i.parentElement.offsetTop+10&&(!a||n<a.parentElement.offsetTop-10),l=decodeURIComponent(this.$route.hash);if(s&&l!==decodeURIComponent(i.hash)){const n=i;if(o===r)for(let n=e+1;n<t.length;n++)if(l===decodeURIComponent(t[n].hash))return;return this.$vuepress.$set("disableScrollBehavior",!0),void this.$router.replace(decodeURIComponent(n.hash),()=>{this.$nextTick(()=>{this.$vuepress.$set("disableScrollBehavior",!1)})})}}}},beforeDestroy(){window.removeEventListener("scroll",this.onScroll)}},xs=n(22),Cs=n.n(xs),As=[ms,ks,{mounted(){Cs.a.configure({showSpinner:!1}),this.$router.beforeEach((e,t,n)=>{e.path===t.path||Hn.component(e.name)||Cs.a.start(),n()}),this.$router.afterEach(()=>{Cs.a.done(),this.isSidebarOpen=!1})}}],Ss={name:"GlobalLayout",computed:{layout(){const e=this.getLayout();return ps("layout",e),Hn.component(e)}},methods:{getLayout(){if(this.$page.path){const e=this.$page.frontmatter.layout;return e&&(this.$vuepress.getLayoutAsyncComponent(e)||this.$vuepress.getVueComponent(e))?e:"Layout"}return"NotFound"}}},Ps=n(14),js=Object(Ps.a)(Ss,(function(){return(0,this._self._c)(this.layout,{tag:"component"})}),[],!1,null,null,null).exports;!function(e,t,n){switch(t){case"components":e[t]||(e[t]={}),Object.assign(e[t],n);break;case"mixins":e[t]||(e[t]=[]),e[t].push(...n);break;default:throw new Error("Unknown option name.")}}(js,"mixins",As);const Os=[{name:"v-7c5c7049",path:"/de/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-7c5c7049").then(n)}},{path:"/de/index.html",redirect:"/de/"},{name:"v-53692dae",path:"/de/workshops/react/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-53692dae").then(n)}},{path:"/de/workshops/react/index.html",redirect:"/de/workshops/react/"},{name:"v-1454906e",path:"/de/workshops/vue/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-1454906e").then(n)}},{path:"/de/workshops/vue/index.html",redirect:"/de/workshops/vue/"},{name:"v-0f3edbec",path:"/de/workshops/vue/full-day/appendix_1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-0f3edbec").then(n)}},{name:"v-60b6cb2e",path:"/fr/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-60b6cb2e").then(n)}},{path:"/fr/index.html",redirect:"/fr/"},{name:"v-505c456e",path:"/fr/workshops/react/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-505c456e").then(n)}},{path:"/fr/workshops/react/index.html",redirect:"/fr/workshops/react/"},{name:"v-35bd2aa9",path:"/fr/workshops/vue/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-35bd2aa9").then(n)}},{path:"/fr/workshops/vue/index.html",redirect:"/fr/workshops/vue/"},{name:"v-9f6e988a",path:"/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-9f6e988a").then(n)}},{path:"/index.html",redirect:"/"},{name:"v-bb9567ae",path:"/jp/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-bb9567ae").then(n)}},{path:"/jp/index.html",redirect:"/jp/"},{name:"v-fce449ee",path:"/jp/workshops/react/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-fce449ee").then(n)}},{path:"/jp/workshops/react/index.html",redirect:"/jp/workshops/react/"},{name:"v-1320a22e",path:"/jp/workshops/vue/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-1320a22e").then(n)}},{path:"/jp/workshops/vue/index.html",redirect:"/jp/workshops/vue/"},{name:"v-628f5b80",path:"/jp/workshops/vue/full-day/appendix_1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-628f5b80").then(n)}},{name:"v-fbcf3c8c",path:"/jp/workshops/vue/nanos/nano3.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-fbcf3c8c").then(n)}},{name:"v-9b3c64bc",path:"/workshops/CODE_OF_CONDUCT.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-9b3c64bc").then(n)}},{name:"v-330eff7f",path:"/workshops/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-330eff7f").then(n)}},{path:"/workshops/index.html",redirect:"/workshops/"},{name:"v-9f52bb42",path:"/workshops/react/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-9f52bb42").then(n)}},{path:"/workshops/react/index.html",redirect:"/workshops/react/"},{name:"v-f105383c",path:"/workshops/templates/mini_template.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-f105383c").then(n)}},{name:"v-4d70d202",path:"/workshops/templates/nano_template.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-4d70d202").then(n)}},{name:"v-33648c5e",path:"/workshops/vue/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-33648c5e").then(n)}},{path:"/workshops/vue/index.html",redirect:"/workshops/vue/"},{name:"v-38db7182",path:"/workshops/vue/full-day/appendix_1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-38db7182").then(n)}},{name:"v-1fd1b8e2",path:"/workshops/vue/full-day/appendix_2.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-1fd1b8e2").then(n)}},{name:"v-e76984fc",path:"/workshops/vue/minis/mini6.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-e76984fc").then(n)}},{name:"v-990ac2bc",path:"/workshops/vue/nanos/nano3.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-990ac2bc").then(n)}},{name:"v-1c083702",path:"/workshops/vue/nanos/nano4.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-1c083702").then(n)}},{name:"v-d8e73a3c",path:"/de/workshops/vue/full-day/ch1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-d8e73a3c").then(n)}},{name:"v-28f802a2",path:"/de/workshops/vue/full-day/ch3.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-28f802a2").then(n)}},{name:"v-92e1217c",path:"/jp/workshops/vue/full-day/ch3.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-92e1217c").then(n)}},{name:"v-5f953588",path:"/jp/workshops/vue/minis/mini2.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-5f953588").then(n)}},{name:"v-25a42004",path:"/jp/workshops/vue/minis/mini4.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-25a42004").then(n)}},{name:"v-1f10ec7c",path:"/jp/workshops/vue/nanos/nano2.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-1f10ec7c").then(n)}},{name:"v-a9a27d18",path:"/jp/workshops/vue/nanos/nano6.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-a9a27d18").then(n)}},{name:"v-5d180d6e",path:"/workshops/TEAM.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-5d180d6e").then(n)}},{name:"v-2772a840",path:"/workshops/vue/full-day/ch1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-2772a840").then(n)}},{name:"v-623abcde",path:"/workshops/vue/full-day/ch2.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-623abcde").then(n)}},{name:"v-4fa26448",path:"/workshops/vue/full-day/ch3.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-4fa26448").then(n)}},{name:"v-52a27462",path:"/workshops/vue/minis/mini3.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-52a27462").then(n)}},{name:"v-23bda522",path:"/workshops/vue/minis/mini5.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-23bda522").then(n)}},{name:"v-3b41243c",path:"/workshops/vue/nanos/nano1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-3b41243c").then(n)}},{name:"v-4aed0642",path:"/workshops/vue/nanos/nano2.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-4aed0642").then(n)}},{name:"v-f6d4613c",path:"/workshops/vue/nanos/nano5.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-f6d4613c").then(n)}},{name:"v-25b9307c",path:"/workshops/vue/nanos/nano6.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-25b9307c").then(n)}},{name:"v-5e4232c2",path:"/de/workshops/vue/full-day/ch2.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-5e4232c2").then(n)}},{name:"v-18a45afc",path:"/de/workshops/vue/full-day/ch4.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-18a45afc").then(n)}},{name:"v-8338bb3c",path:"/de/workshops/vue/full-day/ch5.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-8338bb3c").then(n)}},{name:"v-4e22deda",path:"/workshops/vue/full-day/ch4.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-4e22deda").then(n)}},{name:"v-77d22050",path:"/workshops/vue/full-day/ch5.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-77d22050").then(n)}},{name:"v-fd7581bc",path:"/jp/workshops/vue/full-day/ch4.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-fd7581bc").then(n)}},{name:"v-7ac6aa74",path:"/jp/workshops/vue/minis/mini3.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-7ac6aa74").then(n)}},{name:"v-290dbc7c",path:"/workshops/react/minis/ecommerce.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-290dbc7c").then(n)}},{name:"v-5b83fdc2",path:"/workshops/react/minis/mini1-react.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-5b83fdc2").then(n)}},{name:"v-2bd647fc",path:"/workshops/vue/minis/mini2.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-2bd647fc").then(n)}},{name:"v-fcf178bc",path:"/workshops/vue/minis/mini1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-fcf178bc").then(n)}},{name:"v-899fe67c",path:"/workshops/vue/minis/mini4.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-899fe67c").then(n)}},{name:"v-49591084",path:"/fr/workshops/vue/minis/mini1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-49591084").then(n)}},{name:"v-06e47f6c",path:"/jp/workshops/vue/minis/mini1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-06e47f6c").then(n)}},{name:"v-03b60c7c",path:"/workshops/react/minis/mini2-react-hooks.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-03b60c7c").then(n)}},{name:"v-f71410dc",path:"/workshops/vue/half-day/half-day1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-f71410dc").then(n)}},{name:"v-164e543c",path:"/workshops/vue/minis/mini7.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-164e543c").then(n)}},{path:"*",component:js}],Es={title:"Front-End Foxes Workshops",description:"Workshops to teach web and mobile development to beginners",base:"/curriculum/",headTags:[["link",{rel:"icon",href:"/curriculum/favicon.png"}]],pages:[{title:"About Our Workshops",frontmatter:{},regularPath:"/de/",relativePath:"de/README.md",key:"v-7c5c7049",path:"/de/",headers:[{level:2,title:"FAQ",slug:"faq"}]},{frontmatter:{},regularPath:"/de/workshops/react/",relativePath:"de/workshops/react/README.md",key:"v-53692dae",path:"/de/workshops/react/"},{title:"Vue Workshops",frontmatter:{},regularPath:"/de/workshops/vue/",relativePath:"de/workshops/vue/README.md",key:"v-1454906e",path:"/de/workshops/vue/"},{title:"🤷 Anhang 1: Neuanfang?",frontmatter:{},regularPath:"/de/workshops/vue/full-day/appendix_1.html",relativePath:"de/workshops/vue/full-day/appendix_1.md",key:"v-0f3edbec",path:"/de/workshops/vue/full-day/appendix_1.html"},{frontmatter:{},regularPath:"/fr/",relativePath:"fr/README.md",key:"v-60b6cb2e",path:"/fr/"},{title:"Ateliers React",frontmatter:{},regularPath:"/fr/workshops/react/",relativePath:"fr/workshops/react/README.md",key:"v-505c456e",path:"/fr/workshops/react/"},{title:"Ateliers Vue",frontmatter:{},regularPath:"/fr/workshops/vue/",relativePath:"fr/workshops/vue/README.md",key:"v-35bd2aa9",path:"/fr/workshops/vue/"},{title:"Home",frontmatter:{home:!0,footer:"MIT Licensed | Copyright 2018-present Front-End Foxes Inc, a 501(c)(3) public charity"},regularPath:"/",relativePath:"index.md",key:"v-9f6e988a",path:"/",headers:[{level:2,title:"FAQ",slug:"faq"}]},{title:"Vue Vixens のワークショップについて",frontmatter:{},regularPath:"/jp/",relativePath:"jp/README.md",key:"v-bb9567ae",path:"/jp/",headers:[{level:2,title:"FAQ",slug:"faq"}]},{title:"React Workshops",frontmatter:{},regularPath:"/jp/workshops/react/",relativePath:"jp/workshops/react/README.md",key:"v-fce449ee",path:"/jp/workshops/react/"},{title:"Vue Workshops",frontmatter:{},regularPath:"/jp/workshops/vue/",relativePath:"jp/workshops/vue/README.md",key:"v-1320a22e",path:"/jp/workshops/vue/"},{title:"🤷 Appendix 1: Lost? Confused? Starting fresh?",frontmatter:{},regularPath:"/jp/workshops/vue/full-day/appendix_1.html",relativePath:"jp/workshops/vue/full-day/appendix_1.md",key:"v-628f5b80",path:"/jp/workshops/vue/full-day/appendix_1.html"},{title:"🏠 3: Visual Studio CodeにVueのための最適な設定をしよう （初級）",frontmatter:{},regularPath:"/jp/workshops/vue/nanos/nano3.html",relativePath:"jp/workshops/vue/nanos/nano3.md",key:"v-fbcf3c8c",path:"/jp/workshops/vue/nanos/nano3.html",headers:[{level:2,title:"はじめに",slug:"はじめに"},{level:2,title:"Vetur のインストール",slug:"vetur-のインストール"},{level:2,title:"シンタックスハイライト",slug:"シンタックスハイライト"},{level:2,title:"スニペット",slug:"スニペット"},{level:2,title:"Emmet",slug:"emmet"},{level:2,title:"リンティング/エラーチェック",slug:"リンティング-エラーチェック"},{level:2,title:"フォーマット",slug:"フォーマット"},{level:2,title:"インテリセンス",slug:"インテリセンス"},{level:2,title:"最後に",slug:"最後に"},{level:2,title:"バッジ",slug:"バッジ"},{level:2,title:"著者",slug:"著者"}]},{title:"Code of Conduct",frontmatter:{},regularPath:"/workshops/CODE_OF_CONDUCT.html",relativePath:"workshops/CODE_OF_CONDUCT.md",key:"v-9b3c64bc",path:"/workshops/CODE_OF_CONDUCT.html",headers:[{level:2,title:"1. Purpose",slug:"_1-purpose"},{level:2,title:"2. Open Source Citizenship",slug:"_2-open-source-citizenship"},{level:2,title:"3. Expected Behavior",slug:"_3-expected-behavior"},{level:2,title:"4. Unacceptable Behavior",slug:"_4-unacceptable-behavior"},{level:2,title:"5. Consequences of Unacceptable Behavior",slug:"_5-consequences-of-unacceptable-behavior"},{level:2,title:"6. Reporting Guidelines",slug:"_6-reporting-guidelines"},{level:2,title:"7. Addressing Grievances",slug:"_7-addressing-grievances"},{level:2,title:"8. Scope",slug:"_8-scope"},{level:2,title:"9. Contact info",slug:"_9-contact-info"},{level:2,title:"10. License and attribution",slug:"_10-license-and-attribution"}]},{title:"About Our Workshops",frontmatter:{},regularPath:"/workshops/",relativePath:"workshops/README.md",key:"v-330eff7f",path:"/workshops/",headers:[{level:2,title:"FAQ",slug:"faq"}]},{title:"React Workshops",frontmatter:{},regularPath:"/workshops/react/",relativePath:"workshops/react/README.md",key:"v-9f52bb42",path:"/workshops/react/"},{title:"Mini Workshop (number): 📱 A mobile mini-workshop (or 🖥️ A web mini-workshop)",frontmatter:{},regularPath:"/workshops/templates/mini_template.html",relativePath:"workshops/templates/mini_template.md",key:"v-f105383c",path:"/workshops/templates/mini_template.html",headers:[{level:2,title:"1. Scaffold your app",slug:"_1-scaffold-your-app"},{level:2,title:"2. Add some Styles",slug:"_2-add-some-styles"},{level:2,title:"3. Fix the UI",slug:"_3-fix-the-ui"},{level:2,title:"4. Add some data",slug:"_4-add-some-data"},{level:2,title:"Conclusion and challenge",slug:"conclusion-and-challenge"},{level:2,title:"Author",slug:"author"}]},{title:"Nano Activity (number): Title of Activity",frontmatter:{},regularPath:"/workshops/templates/nano_template.html",relativePath:"workshops/templates/nano_template.md",key:"v-4d70d202",path:"/workshops/templates/nano_template.html",headers:[{level:2,title:"1. Get Started",slug:"_1-get-started"},{level:2,title:"2. Step 1",slug:"_2-step-1"},{level:2,title:"3. Step 2",slug:"_3-step-2"},{level:2,title:"4. Step 3",slug:"_4-step-3"},{level:2,title:"5. Final Result",slug:"_5-final-result"},{level:2,title:"Conclusion and challenge",slug:"conclusion-and-challenge"},{level:2,title:"Badge",slug:"badge"},{level:2,title:"Author",slug:"author"}]},{title:"Vue Workshops",frontmatter:{},regularPath:"/workshops/vue/",relativePath:"workshops/vue/README.md",key:"v-33648c5e",path:"/workshops/vue/"},{title:"🤷 Appendix 1: Lost? Confused? Starting fresh?",frontmatter:{},regularPath:"/workshops/vue/full-day/appendix_1.html",relativePath:"workshops/vue/full-day/appendix_1.md",key:"v-38db7182",path:"/workshops/vue/full-day/appendix_1.html"},{title:"📌 Appendix 2: Add your CodeSandbox to your Github account",frontmatter:{},regularPath:"/workshops/vue/full-day/appendix_2.html",relativePath:"workshops/vue/full-day/appendix_2.md",key:"v-1fd1b8e2",path:"/workshops/vue/full-day/appendix_2.html"},{title:"🎧 6: Build a Spotify Music Player with the Composition API (beta!)",frontmatter:{},regularPath:"/workshops/vue/minis/mini6.html",relativePath:"workshops/vue/minis/mini6.md",key:"v-e76984fc",path:"/workshops/vue/minis/mini6.html",headers:[{level:2,title:"Read over these instructions",slug:"read-over-these-instructions"},{level:2,title:"Get started as a Spotify Developer",slug:"get-started-as-a-spotify-developer"},{level:2,title:"Pick and commit to your feature requirements for a minimum viable product (MVP)",slug:"pick-and-commit-to-your-feature-requirements-for-a-minimum-viable-product-mvp"},{level:2,title:"Open the Codesandbox template",slug:"open-the-codesandbox-template"},{level:2,title:"Augment basic UI",slug:"augment-basic-ui"},{level:2,title:"Create the data layer",slug:"create-the-data-layer"},{level:2,title:"Add UI finishing touches!",slug:"add-ui-finishing-touches"},{level:2,title:"Challenge",slug:"challenge"},{level:2,title:"Resources",slug:"resources"},{level:2,title:"Author",slug:"author"}]},{title:"🏠 3: Setup Visual Studio Code the Right Way for Vue (beginner)",frontmatter:{},regularPath:"/workshops/vue/nanos/nano3.html",relativePath:"workshops/vue/nanos/nano3.md",key:"v-990ac2bc",path:"/workshops/vue/nanos/nano3.html",headers:[{level:2,title:"Get Started",slug:"get-started"},{level:2,title:"Install Vetur",slug:"install-vetur"},{level:2,title:"Syntax Highlighting",slug:"syntax-highlighting"},{level:2,title:"Snippets",slug:"snippets"},{level:2,title:"Emmets",slug:"emmets"},{level:2,title:"Linting / Error checking",slug:"linting-error-checking"},{level:2,title:"Formatting",slug:"formatting"},{level:2,title:"IntelliSense",slug:"intellisense"},{level:2,title:"Conclusion",slug:"conclusion"},{level:2,title:"Badge",slug:"badge"},{level:2,title:"Author",slug:"author"}]},{title:"⏰ 4: Create a Computed Property to Display A Date (intermediate)",frontmatter:{},regularPath:"/workshops/vue/nanos/nano4.html",relativePath:"workshops/vue/nanos/nano4.md",key:"v-1c083702",path:"/workshops/vue/nanos/nano4.html",headers:[{level:2,title:"Get Started",slug:"get-started"},{level:2,title:"Preliminary Code Clean Up",slug:"preliminary-code-clean-up"},{level:2,title:"Setting up a label and form input",slug:"setting-up-a-label-and-form-input"},{level:2,title:"Creating a computed property",slug:"creating-a-computed-property"},{level:2,title:"Conclusion and Challenge",slug:"conclusion-and-challenge"},{level:2,title:"Badge",slug:"badge"},{level:2,title:"Author",slug:"author"}]},{title:"📋 Kapitel 1: Die My Pet Shop Web App",frontmatter:{},regularPath:"/de/workshops/vue/full-day/ch1.html",relativePath:"de/workshops/vue/full-day/ch1.md",key:"v-d8e73a3c",path:"/de/workshops/vue/full-day/ch1.html",headers:[{level:2,title:"Anleitung",slug:"anleitung"},{level:2,title:"Erzeuge die Styles",slug:"erzeuge-die-styles"},{level:2,title:"Vuetify installieren",slug:"vuetify-installieren"}]},{title:"📋 Kapitel 3: Anbindung einer API",frontmatter:{},regularPath:"/de/workshops/vue/full-day/ch3.html",relativePath:"de/workshops/vue/full-day/ch3.md",key:"v-28f802a2",path:"/de/workshops/vue/full-day/ch3.html",headers:[{level:2,title:"Anleitung",slug:"anleitung"},{level:2,title:"Axios hinzufügen",slug:"axios-hinzufugen"},{level:2,title:"API aufrufen",slug:"api-aufrufen"},{level:2,title:"Die API nutzen 1 - Statischen Inhalt ersetzen",slug:"die-api-nutzen-1-statischen-inhalt-ersetzen"},{level:2,title:"Die API nutzen 2 - Zufällige Bilder anzeigen",slug:"die-api-nutzen-2-zufallige-bilder-anzeigen"}]},{title:"📋 Chapter 3: Connect your Project to an API",frontmatter:{},regularPath:"/jp/workshops/vue/full-day/ch3.html",relativePath:"jp/workshops/vue/full-day/ch3.md",key:"v-92e1217c",path:"/jp/workshops/vue/full-day/ch3.html",headers:[{level:2,title:"What You'll Build",slug:"what-you-ll-build"},{level:2,title:"Instructions",slug:"instructions"},{level:2,title:"Add Axios",slug:"add-axios"},{level:2,title:"Call the API",slug:"call-the-api"},{level:2,title:"Use the API 1 - Replace Some of the Static Data",slug:"use-the-api-1-replace-some-of-the-static-data"},{level:2,title:"Use the API 2 - Randomize the Images",slug:"use-the-api-2-randomize-the-images"},{level:2,title:"Final result",slug:"final-result"}]},{title:"📱 Mini Workshop 2: ペットの情報を表示する Mobile アプリケーションの構築",frontmatter:{},regularPath:"/jp/workshops/vue/minis/mini2.html",relativePath:"jp/workshops/vue/minis/mini2.md",key:"v-5f953588",path:"/jp/workshops/vue/minis/mini2.html",headers:[{level:2,title:"アプリケーション基盤の構築",slug:"アプリケーション基盤の構築"},{level:2,title:"スタイルの追加",slug:"スタイルの追加"},{level:2,title:"UI の修正",slug:"ui-の修正"},{level:2,title:"データの追加",slug:"データの追加"},{level:2,title:"通信する",slug:"通信する"},{level:2,title:"Supplement 1: アプリに猫を追加",slug:"supplement-1-アプリに猫を追加"},{level:2,title:"UIの修正",slug:"uiの修正"},{level:2,title:"猫を読み込み",slug:"猫を読み込み"},{level:2,title:"UIを修正",slug:"uiを修正"},{level:2,title:"著者",slug:"著者"}]},{title:"📱Mini Workshop 4: Tinder風のモバイルアプリ「Tindogs」を作ろう!",frontmatter:{},regularPath:"/jp/workshops/vue/minis/mini4.html",relativePath:"jp/workshops/vue/minis/mini4.md",key:"v-25a42004",path:"/jp/workshops/vue/minis/mini4.html",headers:[{level:2,title:"今回構築するもの",slug:"今回構築するもの"},{level:2,title:"手順",slug:"手順"},{level:2,title:"NativeScript-Vue アプリをscaffoldしてデバイスを接続する",slug:"nativescript-vue-アプリをscaffoldしてデバイスを接続する"},{level:2,title:"いくつかのスタイルを追加",slug:"いくつかのスタイルを追加"},{level:2,title:"カードレイアウトを作成するプラグインを追加する",slug:"カードレイアウトを作成するプラグインを追加する"},{level:2,title:"データの追加",slug:"データの追加"},{level:2,title:"カードをスワイプ可能にする",slug:"カードをスワイプ可能にする"},{level:2,title:"アニメーションボタンを追加する",slug:"アニメーションボタンを追加する"}]},{title:"☎️ 2: APIを実行するためにAxiosを使おう (中級)",frontmatter:{},regularPath:"/jp/workshops/vue/nanos/nano2.html",relativePath:"jp/workshops/vue/nanos/nano2.md",key:"v-1f10ec7c",path:"/jp/workshops/vue/nanos/nano2.html",headers:[{level:2,title:"はじめに",slug:"はじめに"},{level:2,title:"デフォルトで記載されているコードのクリーンナップ",slug:"デフォルトで記載されているコードのクリーンナップ"},{level:2,title:"プロジェクトにAxiosを追加",slug:"プロジェクトにaxiosを追加"},{level:2,title:"Axios ライブラリのインポート",slug:"axios-ライブラリのインポート"},{level:2,title:"APIコールの呼び出し",slug:"apiコールの呼び出し"},{level:2,title:"データの使用",slug:"データの使用"},{level:2,title:"まとめとチャレンジ",slug:"まとめとチャレンジ"},{level:2,title:"バッジ",slug:"バッジ"},{level:2,title:"著者",slug:"著者"}]},{title:"😻 6: 愛の絵文字を拡散するモバイルアプリを作ろう （初級）",frontmatter:{},regularPath:"/jp/workshops/vue/nanos/nano6.html",relativePath:"jp/workshops/vue/nanos/nano6.md",key:"v-a9a27d18",path:"/jp/workshops/vue/nanos/nano6.html",headers:[{level:2,title:"アプリケーション基盤の構築",slug:"アプリケーション基盤の構築"},{level:2,title:"スタイルの追加",slug:"スタイルの追加"},{level:2,title:"リストデータの追加",slug:"リストデータの追加"},{level:2,title:"ビルドと作成したリストの確認",slug:"ビルドと作成したリストの確認"},{level:2,title:"リストをインタラクティブ(クリックしたら動くよう)に実装",slug:"リストをインタラクティブ-クリックしたら動くよう-に実装"},{level:2,title:"最終確認",slug:"最終確認"},{level:2,title:"まとめとチャレンジ",slug:"まとめとチャレンジ"},{level:2,title:"バッジ",slug:"バッジ"},{level:2,title:"著者",slug:"著者"}]},{title:"Contributors ✨",frontmatter:{},regularPath:"/workshops/TEAM.html",relativePath:"workshops/TEAM.md",key:"v-5d180d6e",path:"/workshops/TEAM.html"},{title:"📋 Chapter 1: Introducing the My Pet Shop Web App",frontmatter:{},regularPath:"/workshops/vue/full-day/ch1.html",relativePath:"workshops/vue/full-day/ch1.md",key:"v-2772a840",path:"/workshops/vue/full-day/ch1.html",headers:[{level:2,title:"What You'll Build",slug:"what-you-ll-build"},{level:2,title:"Instructions",slug:"instructions"},{level:2,title:"Build the Styles",slug:"build-the-styles"},{level:2,title:"Install Vuetify",slug:"install-vuetify"},{level:2,title:"Final result",slug:"final-result"}]},{title:"📋 Chapter 2: Build a Pet Gallery",frontmatter:{},regularPath:"/workshops/vue/full-day/ch2.html",relativePath:"workshops/vue/full-day/ch2.md",key:"v-623abcde",path:"/workshops/vue/full-day/ch2.html",headers:[{level:2,title:"What You'll Build",slug:"what-you-ll-build"},{level:2,title:"Instructions",slug:"instructions"},{level:2,title:"The Router",slug:"the-router"},{level:2,title:"Create the Home Page",slug:"create-the-home-page"},{level:2,title:"Create a Pets Page",slug:"create-a-pets-page"},{level:2,title:"Add the Routes",slug:"add-the-routes"},{level:2,title:"Add Navigation",slug:"add-navigation"},{level:2,title:"Build up some data",slug:"build-up-some-data"},{level:2,title:"Append the Data to a List",slug:"append-the-data-to-a-list"},{level:2,title:"Refactor the template - create a Prop!",slug:"refactor-the-template-create-a-prop"},{level:2,title:"Final result",slug:"final-result"}]},{title:"📋 Chapter 3: Connect your Project to an API",frontmatter:{},regularPath:"/workshops/vue/full-day/ch3.html",relativePath:"workshops/vue/full-day/ch3.md",key:"v-4fa26448",path:"/workshops/vue/full-day/ch3.html",headers:[{level:2,title:"What You'll Build",slug:"what-you-ll-build"},{level:2,title:"Instructions",slug:"instructions"},{level:2,title:"Add Axios",slug:"add-axios"},{level:2,title:"Call the API",slug:"call-the-api"},{level:2,title:"Use the API 1 - Replace Some of the Static Data",slug:"use-the-api-1-replace-some-of-the-static-data"},{level:2,title:"Use the API 2 - Randomize the Images",slug:"use-the-api-2-randomize-the-images"},{level:2,title:"Final result",slug:"final-result"}]},{title:"📱 3: Build A Simple Pet Display Mobile App",frontmatter:{},regularPath:"/workshops/vue/minis/mini3.html",relativePath:"workshops/vue/minis/mini3.md",key:"v-52a27462",path:"/workshops/vue/minis/mini3.html",headers:[{level:2,title:"Scaffold your app",slug:"scaffold-your-app"},{level:2,title:"Add some Styles",slug:"add-some-styles"},{level:2,title:"Fix the UI",slug:"fix-the-ui"},{level:2,title:"Add Some Data",slug:"add-some-data"},{level:2,title:"Make the Call",slug:"make-the-call"},{level:2,title:"Supplement 1: Adding a Cat to the App",slug:"supplement-1-adding-a-cat-to-the-app"},{level:2,title:"Edit the UI",slug:"edit-the-ui"},{level:2,title:"Call Some Cats",slug:"call-some-cats"},{level:2,title:"Edit the UI",slug:"edit-the-ui-2"},{level:2,title:"Author",slug:"author"}]},{title:"📱5: Build a Tinder-Style Mobile App: Tindogs!",frontmatter:{},regularPath:"/workshops/vue/minis/mini5.html",relativePath:"workshops/vue/minis/mini5.md",key:"v-23bda522",path:"/workshops/vue/minis/mini5.html",headers:[{level:2,title:"What You'll Build",slug:"what-you-ll-build"},{level:2,title:"Instructions",slug:"instructions"},{level:2,title:"Scaffold a NativeScript-Vue App and Connect your Device",slug:"scaffold-a-nativescript-vue-app-and-connect-your-device"},{level:2,title:"Add some Styles",slug:"add-some-styles"},{level:2,title:"Add a Plugin to Create a Card Layout",slug:"add-a-plugin-to-create-a-card-layout"},{level:2,title:"Add some Data",slug:"add-some-data"},{level:2,title:"Make the Cards Swipable",slug:"make-the-cards-swipable"},{level:2,title:"Add Some Animated Buttons",slug:"add-some-animated-buttons"}]},{title:"👜 1: Vuex 101 (intermediate)",frontmatter:{},regularPath:"/workshops/vue/nanos/nano1.html",relativePath:"workshops/vue/nanos/nano1.md",key:"v-3b41243c",path:"/workshops/vue/nanos/nano1.html",headers:[{level:2,title:"Get Started",slug:"get-started"},{level:2,title:"Install Vuex",slug:"install-vuex"},{level:2,title:"Fetch Some Remote Data and Store It",slug:"fetch-some-remote-data-and-store-it"},{level:2,title:"Fetch Data from the Store",slug:"fetch-data-from-the-store"},{level:2,title:"Modifying Data",slug:"modifying-data"},{level:2,title:"Conclusion and Challenge",slug:"conclusion-and-challenge"},{level:2,title:"Badge",slug:"badge"},{level:2,title:"Author",slug:"author"}]},{title:"☎️ 2: Use Axios to Call an API (intermediate)",frontmatter:{},regularPath:"/workshops/vue/nanos/nano2.html",relativePath:"workshops/vue/nanos/nano2.md",key:"v-4aed0642",path:"/workshops/vue/nanos/nano2.html",headers:[{level:2,title:"Get Started",slug:"get-started"},{level:2,title:"Preliminary Code Clean Up",slug:"preliminary-code-clean-up"},{level:2,title:"Adding Axios to the project",slug:"adding-axios-to-the-project"},{level:2,title:"Importing the Axios library",slug:"importing-the-axios-library"},{level:2,title:"Create the API call",slug:"create-the-api-call"},{level:2,title:"Using the Data",slug:"using-the-data"},{level:2,title:"Conclusion and Challenge",slug:"conclusion-and-challenge"},{level:2,title:"Badge",slug:"badge"},{level:2,title:"Author",slug:"author"}]},{title:"🔨 5: Scaffold a Nuxt App and Explore Its Architecture (Advanced)",frontmatter:{},regularPath:"/workshops/vue/nanos/nano5.html",relativePath:"workshops/vue/nanos/nano5.md",key:"v-f6d4613c",path:"/workshops/vue/nanos/nano5.html",headers:[{level:2,title:"Scaffolding Your App",slug:"scaffolding-your-app"},{level:2,title:"Exploring the structure",slug:"exploring-the-structure"},{level:2,title:"Pages in Depth",slug:"pages-in-depth"},{level:3,title:"Dynamic Routes",slug:"dynamic-routes"},{level:2,title:"Layouts in Depth",slug:"layouts-in-depth"},{level:2,title:"Conclusion and Challenge",slug:"conclusion-and-challenge"},{level:2,title:"Badge",slug:"badge"},{level:2,title:"Author",slug:"author"}]},{title:"😻 6: Create a Mobile App to Spread Emoji Love (Beginner)",frontmatter:{},regularPath:"/workshops/vue/nanos/nano6.html",relativePath:"workshops/vue/nanos/nano6.md",key:"v-25b9307c",path:"/workshops/vue/nanos/nano6.html",headers:[{level:2,title:"Scaffold Your App",slug:"scaffold-your-app"},{level:2,title:"Add Some Styles",slug:"add-some-styles"},{level:2,title:"Add List Data",slug:"add-list-data"},{level:2,title:"Build the ListView",slug:"build-the-listview"},{level:2,title:"Make the List Interactive",slug:"make-the-list-interactive"},{level:2,title:"Final Result",slug:"final-result"},{level:2,title:"Conclusion and Challenge",slug:"conclusion-and-challenge"},{level:2,title:"Badge",slug:"badge"},{level:2,title:"Author",slug:"author"}]},{title:"📋 Kapitel 2: Baue eine Haustier-Galerie",frontmatter:{},regularPath:"/de/workshops/vue/full-day/ch2.html",relativePath:"de/workshops/vue/full-day/ch2.md",key:"v-5e4232c2",path:"/de/workshops/vue/full-day/ch2.html",headers:[{level:2,title:"Anleitung",slug:"anleitung"},{level:2,title:"Der Router",slug:"der-router"},{level:2,title:"Eine Homepage erstellen",slug:"eine-homepage-erstellen"},{level:2,title:"Eine Haustier-Seite erstellen",slug:"eine-haustier-seite-erstellen"},{level:2,title:"Die Routen hinzufügen",slug:"die-routen-hinzufugen"},{level:2,title:"Navigation hinzufügen",slug:"navigation-hinzufugen"},{level:2,title:"Daten erstellen",slug:"daten-erstellen"},{level:2,title:"Die Daten in einer Liste ausgeben",slug:"die-daten-in-einer-liste-ausgeben"},{level:2,title:"Überarbeitung des Templates - Property!",slug:"uberarbeitung-des-templates-property"},{level:2,title:"Ergebnis",slug:"ergebnis"}]},{title:"📋 Kapitel 4: Eine Merkliste erstellen",frontmatter:{},regularPath:"/de/workshops/vue/full-day/ch4.html",relativePath:"de/workshops/vue/full-day/ch4.md",key:"v-18a45afc",path:"/de/workshops/vue/full-day/ch4.html",headers:[{level:2,title:"Anleitung",slug:"anleitung"},{level:2,title:"Die Merkliste bauen",slug:"die-merkliste-bauen"},{level:2,title:"Den Zustand der Liste mit Vuex verwalten",slug:"den-zustand-der-liste-mit-vuex-verwalten"},{level:2,title:"Favoriten hinzufügen",slug:"favoriten-hinzufugen"},{level:2,title:"UI Anpassungen",slug:"ui-anpassungen"},{level:2,title:"Hunde hinzufügen und entfernen",slug:"hunde-hinzufugen-und-entfernen"},{level:2,title:"Die UI bauen",slug:"die-ui-bauen"},{level:2,title:"Die Logik verbessern",slug:"die-logik-verbessern"},{level:2,title:"Favoriten von der Liste entfernen",slug:"favoriten-von-der-liste-entfernen"}]},{title:"📋 Kapitel 5: Ein Formular zum Adoptieren hinzufügen",frontmatter:{},regularPath:"/de/workshops/vue/full-day/ch5.html",relativePath:"de/workshops/vue/full-day/ch5.md",key:"v-8338bb3c",path:"/de/workshops/vue/full-day/ch5.html",headers:[{level:2,title:"Anleitung",slug:"anleitung"},{level:2,title:"Gerüst für die Formular-Komponente",slug:"gerust-fur-die-formular-komponente"},{level:2,title:"Das Formular bauen",slug:"das-formular-bauen"},{level:2,title:"Einen Absenden-Button hinzufügen",slug:"einen-absenden-button-hinzufugen"},{level:2,title:"Daten-Verknüpfung",slug:"daten-verknupfung"},{level:2,title:"Die abgeschickten Informationen anzeigen",slug:"die-abgeschickten-informationen-anzeigen"},{level:2,title:"Daten von einer Bedingung abhängig anzeigen",slug:"daten-von-einer-bedingung-abhangig-anzeigen"},{level:2,title:"Validierung hinzufügen",slug:"validierung-hinzufugen"},{level:2,title:"Validierung 1: Name",slug:"validierung-1-name"},{level:2,title:"Validierung 2: Email",slug:"validierung-2-email"},{level:2,title:"Validierung 3: Telefon",slug:"validierung-3-telefon"},{level:2,title:"Lösche alle Favoriten beim Absenden des Formulars",slug:"losche-alle-favoriten-beim-absenden-des-formulars"},{level:2,title:"Ergebnis",slug:"ergebnis"}]},{title:"📋 Chapter 4: Create a Dog Adoption Experience",frontmatter:{},regularPath:"/workshops/vue/full-day/ch4.html",relativePath:"workshops/vue/full-day/ch4.md",key:"v-4e22deda",path:"/workshops/vue/full-day/ch4.html",headers:[{level:2,title:"What You'll Build",slug:"what-you-ll-build"},{level:2,title:"Instructions",slug:"instructions"},{level:2,title:"Build the Loyalty List",slug:"build-the-loyalty-list"},{level:2,title:"Manage the List's State with Vuex",slug:"manage-the-list-s-state-with-vuex"},{level:2,title:"Populate Favorites",slug:"populate-favorites"},{level:2,title:"UI Tweaks",slug:"ui-tweaks"},{level:2,title:"Add and Remove Dogs",slug:"add-and-remove-dogs"},{level:2,title:"Build the UI",slug:"build-the-ui"},{level:2,title:"Enhance the Logic",slug:"enhance-the-logic"},{level:2,title:"Remove from List",slug:"remove-from-list"},{level:2,title:"Final result",slug:"final-result"}]},{title:"📋 Chapter 5: Complete the Adoption Experience with a Form",frontmatter:{},regularPath:"/workshops/vue/full-day/ch5.html",relativePath:"workshops/vue/full-day/ch5.md",key:"v-77d22050",path:"/workshops/vue/full-day/ch5.html",headers:[{level:2,title:"What You'll Build",slug:"what-you-ll-build"},{level:2,title:"Instructions",slug:"instructions"},{level:2,title:"Scaffold the Form Component",slug:"scaffold-the-form-component"},{level:2,title:"Build the Form",slug:"build-the-form"},{level:2,title:"Add a Submit Button",slug:"add-a-submit-button"},{level:2,title:"Bind Some Data",slug:"bind-some-data"},{level:2,title:"Display Submitted Data",slug:"display-submitted-data"},{level:2,title:"Display Data Conditionally",slug:"display-data-conditionally"},{level:2,title:"Add Validation",slug:"add-validation"},{level:2,title:"Validation 1: Name",slug:"validation-1-name"},{level:2,title:"Validation 2: Email",slug:"validation-2-email"},{level:2,title:"Validation 3: Phone",slug:"validation-3-phone"},{level:2,title:"Clear the Favorites List On Submit",slug:"clear-the-favorites-list-on-submit"},{level:2,title:"Final result",slug:"final-result"}]},{title:"📋 Chapter 4: 犬の里親体験アプリの作成",frontmatter:{},regularPath:"/jp/workshops/vue/full-day/ch4.html",relativePath:"jp/workshops/vue/full-day/ch4.md",key:"v-fd7581bc",path:"/jp/workshops/vue/full-day/ch4.html",headers:[{level:2,title:"今回構築するもの",slug:"今回構築するもの"},{level:2,title:"手順",slug:"手順"},{level:2,title:"ロイヤルティリストの作成",slug:"ロイヤルティリストの作成"},{level:2,title:"Vuex でリストの状態を管理する",slug:"vuex-でリストの状態を管理する"},{level:2,title:"お気に入りを登録",slug:"お気に入りを登録"},{level:2,title:"UI の微調整",slug:"ui-の微調整"},{level:2,title:"犬の追加と削除",slug:"犬の追加と削除"},{level:2,title:"UI を構築する",slug:"ui-を構築する"},{level:2,title:"ロジックを強化する",slug:"ロジックを強化する"},{level:2,title:"リストから削除",slug:"リストから削除"},{level:2,title:"最終結果",slug:"最終結果"}]},{title:"🌈🦄 Mini Workshop 3: Particle Photon デバイスをライトアップする Rainbow/Unicorn なモバイルアプリを作成する",frontmatter:{},regularPath:"/jp/workshops/vue/minis/mini3.html",relativePath:"jp/workshops/vue/minis/mini3.md",key:"v-7ac6aa74",path:"/jp/workshops/vue/minis/mini3.html",headers:[{level:2,title:"Photon をセットアップする",slug:"photon-をセットアップする"},{level:3,title:"1. Photon を Wi-Fi に接続します：",slug:"_1-photon-を-wi-fi-に接続します"},{level:3,title:"2. Particle Build について学ぶ",slug:"_2-particle-build-について学ぶ"},{level:3,title:"3. いくつかのコードをフラッシュする",slug:"_3-いくつかのコードをフラッシュする"},{level:3,title:"4. Photon コードを完成させる",slug:"_4-photon-コードを完成させる"},{level:3,title:"5. モバイルアプリで Photon の REST API を使用する準備をする",slug:"_5-モバイルアプリで-photon-の-rest-api-を使用する準備をする"},{level:3,title:"6. 最終的な Photon コード",slug:"_6-最終的な-photon-コード"},{level:2,title:"アプリを Scaffold する",slug:"アプリを-scaffold-する"},{level:2,title:"ベースのマークアップを作成する",slug:"ベースのマークアップを作成する"},{level:2,title:"CSS を追加する",slug:"css-を追加する"},{level:2,title:"メソッドの作成（1）",slug:"メソッドの作成-1"},{level:2,title:"Photon を接続する",slug:"photon-を接続する"},{level:2,title:"メソッドの作成（2）",slug:"メソッドの作成-2"},{level:2,title:"Author",slug:"author"}]},{title:"🛍️ 1: Build An E-Commerce App",frontmatter:{},regularPath:"/workshops/react/minis/ecommerce.html",relativePath:"workshops/react/minis/ecommerce.md",key:"v-290dbc7c",path:"/workshops/react/minis/ecommerce.html",headers:[{level:3,title:"Prerequisites",slug:"prerequisites"},{level:2,title:"Getting Started",slug:"getting-started"},{level:3,title:"Basic React App Structure:",slug:"basic-react-app-structure"},{level:2,title:"Install our commerce API",slug:"install-our-commerce-api"},{level:2,title:"Link up our Commerce instance",slug:"link-up-our-commerce-instance"},{level:2,title:"Make your first request to fetch the products data",slug:"make-your-first-request-to-fetch-the-products-data"},{level:2,title:"Start to style your components",slug:"start-to-style-your-components"},{level:2,title:"Create our product item component",slug:"create-our-product-item-component"},{level:2,title:"Create our products list component",slug:"create-our-products-list-component"},{level:2,title:"Conclusion",slug:"conclusion"},{level:3,title:"Author",slug:"author"}]},{title:"🖥️ 1: Build A Simple Pet Fetching Web App",frontmatter:{},regularPath:"/workshops/react/minis/mini1-react.html",relativePath:"workshops/react/minis/mini1-react.md",key:"v-5b83fdc2",path:"/workshops/react/minis/mini1-react.html",headers:[{level:2,title:"Install required packages",slug:"install-required-packages"},{level:2,title:"Scaffold your app",slug:"scaffold-your-app"},{level:3,title:"Basic React App Structure:",slug:"basic-react-app-structure"},{level:2,title:"Add the Styles",slug:"add-the-styles"},{level:2,title:"Adding Materialize",slug:"adding-materialize"},{level:2,title:"Add some data",slug:"add-some-data"},{level:2,title:"Add Axios to Our Code",slug:"add-axios-to-our-code"},{level:2,title:"Making the (API) call! ☎️",slug:"making-the-api-call-☎️"},{level:2,title:"Using the API",slug:"using-the-api"},{level:2,title:"Build the Favorites List",slug:"build-the-favorites-list"},{level:2,title:"Adding dogs to favorites",slug:"adding-dogs-to-favorites"},{level:2,title:"Removing dogs from Favorites",slug:"removing-dogs-from-favorites"},{level:2,title:"Supplement 1: Creating a dog Component",slug:"supplement-1-creating-a-dog-component"},{level:2,title:"Adapting App.js to use dog Component",slug:"adapting-app-js-to-use-dog-component"}]},{title:"🖥️ 2: Build A Simple Fox Liking Web App with Grid Styling",frontmatter:{},regularPath:"/workshops/vue/minis/mini2.html",relativePath:"workshops/vue/minis/mini2.md",key:"v-2bd647fc",path:"/workshops/vue/minis/mini2.html",headers:[{level:2,title:"Scaffold your app",slug:"scaffold-your-app"},{level:2,title:"Add the Styles",slug:"add-the-styles"},{level:2,title:"Edit the HTML",slug:"edit-the-html"},{level:2,title:"Add some data",slug:"add-some-data"},{level:2,title:"Call an API",slug:"call-an-api"},{level:2,title:"Use the API",slug:"use-the-api"},{level:2,title:"Build the Favorites List",slug:"build-the-favorites-list"},{level:2,title:"Adding Foxes to Favorites",slug:"adding-foxes-to-favorites"},{level:2,title:"Removing Foxes from Favorites",slug:"removing-foxes-from-favorites"},{level:2,title:"Push your work to a repository on your GitHub account",slug:"push-your-work-to-a-repository-on-your-github-account"},{level:2,title:"Refactor 1: Creating a Fox Component",slug:"refactor-1-creating-a-fox-component"},{level:2,title:"Refactor 2: Add Animations",slug:"refactor-2-add-animations"},{level:2,title:"Authors",slug:"authors"}]},{title:"🖥️ 1: Build A Simple Pet Fetching Web App",frontmatter:{},regularPath:"/workshops/vue/minis/mini1.html",relativePath:"workshops/vue/minis/mini1.md",key:"v-fcf178bc",path:"/workshops/vue/minis/mini1.html",headers:[{level:2,title:"Scaffold your app",slug:"scaffold-your-app"},{level:2,title:"Add the Styles",slug:"add-the-styles"},{level:2,title:"Install Vuetify",slug:"install-vuetify"},{level:2,title:"Add some data",slug:"add-some-data"},{level:2,title:"Add Axios",slug:"add-axios"},{level:2,title:"Call the API",slug:"call-the-api"},{level:2,title:"Use the API",slug:"use-the-api"},{level:2,title:"Build the Favorites List",slug:"build-the-favorites-list"},{level:2,title:"Adding Dogs to Favorites",slug:"adding-dogs-to-favorites"},{level:2,title:"Removing Dogs from Favorites",slug:"removing-dogs-from-favorites"},{level:2,title:"Push your work to a repository on your GitHub account",slug:"push-your-work-to-a-repository-on-your-github-account"},{level:2,title:"Supplement 1: Creating a Dog Component",slug:"supplement-1-creating-a-dog-component"},{level:2,title:"Supplement 2: Add Animations",slug:"supplement-2-add-animations"},{level:2,title:"Author",slug:"author"}]},{title:"🌈🦄 4: Build a Rainbow/Unicorn Mobile App that Lights Up a Particle Photon Device",frontmatter:{},regularPath:"/workshops/vue/minis/mini4.html",relativePath:"workshops/vue/minis/mini4.md",key:"v-899fe67c",path:"/workshops/vue/minis/mini4.html",headers:[{level:2,title:"Set Up Your Photon",slug:"set-up-your-photon"},{level:3,title:"1. Connect the Photon to WiFi:",slug:"_1-connect-the-photon-to-wifi"},{level:3,title:"2. Learn About Particle Build",slug:"_2-learn-about-particle-build"},{level:3,title:"3. Flash Some Code",slug:"_3-flash-some-code"},{level:3,title:"4. Complete the Photon Code",slug:"_4-complete-the-photon-code"},{level:3,title:"5. Get Ready for the Mobile App to use Photon's REST API",slug:"_5-get-ready-for-the-mobile-app-to-use-photon-s-rest-api"},{level:3,title:"6. Final Photon Code",slug:"_6-final-photon-code"},{level:2,title:"Scaffold your app",slug:"scaffold-your-app"},{level:2,title:"Create the Base Markup",slug:"create-the-base-markup"},{level:2,title:"Add some CSS",slug:"add-some-css"},{level:2,title:"Create A Method (1)",slug:"create-a-method-1"},{level:2,title:"Connect Your Photon",slug:"connect-your-photon"},{level:2,title:"Create a Method (2)",slug:"create-a-method-2"},{level:2,title:"Author",slug:"author"}]},{title:"🖥️ 1 : Créer une petite application Web de récupération d'images d'animaux de compagnie",frontmatter:{},regularPath:"/fr/workshops/vue/minis/mini1.html",relativePath:"fr/workshops/vue/minis/mini1.md",key:"v-49591084",path:"/fr/workshops/vue/minis/mini1.html",headers:[{level:2,title:"Créez votre application",slug:"creez-votre-application"},{level:2,title:"Ajouter les styles",slug:"ajouter-les-styles"},{level:2,title:"Installer Vuetify",slug:"installer-vuetify"},{level:2,title:"Ajouter des données",slug:"ajouter-des-donnees"},{level:2,title:"Ajouter Axios",slug:"ajouter-axios"},{level:2,title:"Appel API",slug:"appel-api"},{level:2,title:"Utiliser l'API",slug:"utiliser-l-api"},{level:2,title:"Créer la liste de favoris",slug:"creer-la-liste-de-favoris"},{level:2,title:"Ajout aux favoris",slug:"ajout-aux-favoris"},{level:2,title:"Suppression des favoris",slug:"suppression-des-favoris"},{level:2,title:"Supplément 1 : Création d'un composant Dog",slug:"supplement-1-creation-d-un-composant-dog"},{level:2,title:"Supplément 2 : Ajout d'animations",slug:"supplement-2-ajout-d-animations"},{level:2,title:"Auteure",slug:"auteure"}]},{title:"🐶 Mini Workshop 1: ペットの情報を取得する Web アプリケーションの構築",frontmatter:{},regularPath:"/jp/workshops/vue/minis/mini1.html",relativePath:"jp/workshops/vue/minis/mini1.md",key:"v-06e47f6c",path:"/jp/workshops/vue/minis/mini1.html",headers:[{level:2,title:"Scaffold your app - アプリケーション基盤の構築",slug:"scaffold-your-app-アプリケーション基盤の構築"},{level:2,title:"Add the Styles - スタイルの実装",slug:"add-the-styles-スタイルの実装"},{level:2,title:"Install Vuetify - Vuetify の導入",slug:"install-vuetify-vuetify-の導入"},{level:2,title:"Add some data - データの操作",slug:"add-some-data-データの操作"},{level:2,title:"Add Axios - Axios の導入",slug:"add-axios-axios-の導入"},{level:2,title:"Call the API - API コールの実装",slug:"call-the-api-api-コールの実装"},{level:2,title:"Use the API - API データの利用",slug:"use-the-api-api-データの利用"},{level:2,title:"Build the Favorites - お気に入り機能の構築",slug:"build-the-favorites-お気に入り機能の構築"},{level:2,title:"Adding dogs to Favorites - お気に入り追加機能の実装",slug:"adding-dogs-to-favorites-お気に入り追加機能の実装"},{level:2,title:"Removing dogs from Favorites - お気に入り削除機能の実装",slug:"removing-dogs-from-favorites-お気に入り削除機能の実装"},{level:2,title:"Supplement 1: Creating a Dog Component - Dog コンポーネントの作成",slug:"supplement-1-creating-a-dog-component-dog-コンポーネントの作成"},{level:2,title:"Supplement 2: Add animations - アニメーションの実装",slug:"supplement-2-add-animations-アニメーションの実装"},{level:2,title:"Author - 著者",slug:"author-著者"}]},{title:"🖥️ 1: Build A Simple Pet Fetching Web App using React Hooks",frontmatter:{},regularPath:"/workshops/react/minis/mini2-react-hooks.html",relativePath:"workshops/react/minis/mini2-react-hooks.md",key:"v-03b60c7c",path:"/workshops/react/minis/mini2-react-hooks.html",headers:[{level:2,title:"Scaffold your app",slug:"scaffold-your-app"},{level:2,title:"Install required packages",slug:"install-required-packages"},{level:3,title:"Basic React App Structure:",slug:"basic-react-app-structure"},{level:2,title:"Add the Styles",slug:"add-the-styles"},{level:2,title:"Adding Materialize",slug:"adding-materialize"},{level:2,title:"Add some data",slug:"add-some-data"},{level:2,title:"Add Axios to Our Code",slug:"add-axios-to-our-code"},{level:2,title:"Making the (API) call! ☎️",slug:"making-the-api-call-☎️"},{level:2,title:"Using the API",slug:"using-the-api"},{level:2,title:"Build the Favorites List",slug:"build-the-favorites-list"},{level:2,title:"Adding dogs to favorites",slug:"adding-dogs-to-favorites"},{level:2,title:"Removing dogs from Favorites",slug:"removing-dogs-from-favorites"},{level:2,title:"Supplement 1: Creating a dog Component",slug:"supplement-1-creating-a-dog-component"},{level:2,title:"Adapting App.js to use dog Component",slug:"adapting-app-js-to-use-dog-component"},{level:2,title:"Author",slug:"author"}]},{title:"🃏 1: Build an Accessible Memory Game",frontmatter:{},regularPath:"/workshops/vue/half-day/half-day1.html",relativePath:"workshops/vue/half-day/half-day1.md",key:"v-f71410dc",path:"/workshops/vue/half-day/half-day1.html",headers:[{level:2,title:"What You'll Build",slug:"what-you-ll-build"},{level:2,title:"Add a Component",slug:"add-a-component"},{level:2,title:"Setting Up the Board",slug:"setting-up-the-board"},{level:3,title:"Controllers",slug:"controllers"},{level:3,title:"Game Board",slug:"game-board"},{level:3,title:"Game Logic",slug:"game-logic"},{level:3,title:"Adding Functionality",slug:"adding-functionality"},{level:3,title:"Scoring",slug:"scoring"},{level:3,title:"Reset",slug:"reset"},{level:3,title:"Winning!",slug:"winning"},{level:2,title:"Add UI finishing touches",slug:"add-ui-finishing-touches"},{level:2,title:"Challenge",slug:"challenge"},{level:3,title:"Update Metadata (titles)",slug:"update-metadata-titles"},{level:3,title:"Announce Route Update",slug:"announce-route-update"},{level:3,title:"Add Skip to Main Content link",slug:"add-skip-to-main-content-link"},{level:3,title:"Announce gameplay",slug:"announce-gameplay"},{level:3,title:"Update Winning to focus",slug:"update-winning-to-focus"},{level:2,title:"Resources",slug:"resources"},{level:2,title:"Author",slug:"author"}]},{title:"🎩 7: Build a Harry Potter Movie Quiz",frontmatter:{},regularPath:"/workshops/vue/minis/mini7.html",relativePath:"workshops/vue/minis/mini7.md",key:"v-164e543c",path:"/workshops/vue/minis/mini7.html",headers:[{level:2,title:"Step 1: Setting up the Vue App with CodeSandbox",slug:"step-1-setting-up-the-vue-app-with-codesandbox"},{level:3,title:"Achievement",slug:"achievement"},{level:2,title:'Step 2: Create your first Vue component: "Quiz.vue"',slug:"step-2-create-your-first-vue-component-quiz-vue"},{level:3,title:"Styling the Quiz",slug:"styling-the-quiz"},{level:3,title:"Binding an Action",slug:"binding-an-action"},{level:3,title:"Adding Data",slug:"adding-data"},{level:3,title:"Toggling Elements",slug:"toggling-elements"},{level:3,title:"Achievement",slug:"achievement-2"},{level:2,title:"Step 3: Using the Quiz data",slug:"step-3-using-the-quiz-data"},{level:3,title:"Build the Quiz interface",slug:"build-the-quiz-interface"},{level:3,title:"Achievement",slug:"achievement-3"},{level:2,title:"Step 4: Displaying possible movie options",slug:"step-4-displaying-possible-movie-options"},{level:3,title:"Achievement",slug:"achievement-4"},{level:2,title:"Step 5: Evaluate the option that was clicked",slug:"step-5-evaluate-the-option-that-was-clicked"},{level:3,title:"Achievement",slug:"achievement-5"},{level:2,title:"Step 6: Proceed with next question",slug:"step-6-proceed-with-next-question"},{level:3,title:"Achievement",slug:"achievement-6"},{level:2,title:"Step 7: Introducing usage of store and saving data in local storage",slug:"step-7-introducing-usage-of-store-and-saving-data-in-local-storage"},{level:3,title:"Refactor to handle the store",slug:"refactor-to-handle-the-store"},{level:3,title:"Achievement",slug:"achievement-7"},{level:2,title:"Step 8: Create the score view",slug:"step-8-create-the-score-view"},{level:3,title:"Achievement",slug:"achievement-8"},{level:2,title:"Author",slug:"author"},{level:2,title:"Instructions",slug:"instructions-2"}]}],themeConfig:{repo:"frontendfoxes/curriculum/",editLinks:!0,editLinkText:"Help us improve this page!",nav:[{text:"React Workshops",link:"/workshops/react/"},{text:"Vue Workshops",link:"/workshops/vue/"},{text:"Code of Conduct",link:"/workshops/CODE_OF_CONDUCT"},{text:"Team",link:"/workshops/TEAM"}],locales:{"/":{selectText:"Languages",label:"English",sidebar:{"/workshops/react":[{title:"🦴 Mini Workshops",children:["/workshops/react/minis/ecommerce"]}],"/workshops/vue":[{title:"🐶 Full Day Workshop",children:["/workshops/vue/full-day/ch1","/workshops/vue/full-day/ch2","/workshops/vue/full-day/ch3","/workshops/vue/full-day/ch4","/workshops/vue/full-day/ch5","/workshops/vue/full-day/appendix_1","/workshops/vue/full-day/appendix_2"]},{title:"🐾 Half-Day Workshops",children:["/workshops/vue/half-day/half-day1"]},{title:"🦴 Mini Workshops",children:["/workshops/vue/minis/mini1","/workshops/vue/minis/mini2","/workshops/vue/minis/mini3","/workshops/vue/minis/mini4","/workshops/vue/minis/mini5","/workshops/vue/minis/mini6"]},{title:"👩‍🎓 Nano Activities",children:["/workshops/vue/nanos/nano1","/workshops/vue/nanos/nano2","/workshops/vue/nanos/nano3","/workshops/vue/nanos/nano4","/workshops/vue/nanos/nano5","/workshops/vue/nanos/nano6"]}]}},"/de/":{selectText:"Sprache",label:"Deutsch",sidebar:[{title:"🐶 Tagesworkshop",children:["/de/workshops/vue/full-day/ch1","/de/workshops/vue/full-day/ch2","/de/workshops/vue/full-day/ch3","/de/workshops/vue/full-day/ch4","/de/workshops/vue/full-day/ch5","/de/workshops/vue/full-day/appendix_1"]}]},"/fr/":{selectText:"Langue",label:"Français",sidebar:[{title:"🦴Ateliers Minis",children:["/fr/workshops/vue/minis/mini1"]}]},"/jp/":{selectText:"言語",label:"日本語",sidebar:[{title:"🐶 フルデイワークショップ",children:["/jp/workshops/vue/full-day/ch4"]},{title:"🦴ミニワークショップ",children:["/jp/workshops/vue/minis/mini1","/jp/workshops/vue/minis/mini2","/jp/workshops/vue/minis/mini3","/jp/workshops/vue/minis/mini4"]},{title:"👩‍🎓 ナノアクティビティ",children:["/jp/workshops/vue/nanos/nano2","/jp/workshops/vue/nanos/nano3","/jp/workshops/vue/nanos/nano6"]}]}}},locales:{"/":{lang:"en-US",title:"Front-End Foxes Workshops",description:"Workshops to teach web and mobile development to beginners",path:"/"},"/de/":{lang:"de-DE",title:"Front-End Foxes Workshops",description:"Anfänger-Workshops für Web-Entwicklung",path:"/de/"},"/fr/":{lang:"fr-FR",title:"Front-End Foxes Workshops",description:"Ateliers pour apprendre la programmation web et mobile",path:"/fr/"},"/jp/":{lang:"jp-JP",title:"Front-End Foxes Workshops",description:"ワークショップ",path:"/jp/"}}};n(234);Hn.component("Badge",()=>Promise.all([n.e(0),n.e(4)]).then(n.bind(null,442))),Hn.component("CodeBlock",()=>Promise.all([n.e(0),n.e(5)]).then(n.bind(null,426))),Hn.component("CodeGroup",()=>Promise.all([n.e(0),n.e(6)]).then(n.bind(null,425)));n(235);var $s=[{},({Vue:e})=>{e.mixin({computed:{$dataBlock(){return this.$options.__data__block__}}})},{},{}],Ts=[];class Ls extends class{constructor(){this.store=new Hn({data:{state:{}}})}$get(e){return this.store.state[e]}$set(e,t){Hn.set(this.store.state,e,t)}$emit(...e){this.store.$emit(...e)}$on(...e){this.store.$on(...e)}}{}Object.assign(Ls.prototype,{getPageAsyncComponent:as,getLayoutAsyncComponent:ss,getAsyncComponent:ls,getVueComponent:us});var Is={install(e){const t=new Ls;e.$vuepress=t,e.prototype.$vuepress=t}};function Rs(e,t){const n=t.toLowerCase();return e.options.routes.some(e=>e.path.toLowerCase()===n)}var Ds={props:{pageKey:String,slotKey:{type:String,default:"default"}},render(e){const t=this.pageKey||this.$parent.$page.key;return ps("pageKey",t),Hn.component(t)||Hn.component(t,as(t)),Hn.component(t)?e(t):e("")}},Ms={functional:!0,props:{slotKey:String,required:!0},render:(e,{props:t,slots:n})=>e("div",{class:["content__"+t.slotKey]},n()[t.slotKey])},Fs={computed:{openInNewWindowTitle(){return this.$themeLocaleConfig.openNewWindowText||"(opens new window)"}}},Us=(n(236),n(237),Object(Ps.a)(Fs,(function(){var e=this._self._c;return e("span",[e("svg",{staticClass:"icon outbound",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"15",height:"15"}},[e("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),this._v(" "),e("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})]),this._v(" "),e("span",{staticClass:"sr-only"},[this._v(this._s(this.openInNewWindowTitle))])])}),[],!1,null,null,null).exports),Bs={functional:!0,render(e,{parent:t,children:n}){if(t._isMounted)return n;t.$once("hook:mounted",()=>{t.$forceUpdate()})}};Hn.config.productionTip=!1,Hn.use(Wa),Hn.use(Is),Hn.mixin(function(e,t,n=Hn){!function(e){e.locales&&Object.keys(e.locales).forEach(t=>{e.locales[t].path=t});Object.freeze(e)}(t),n.$vuepress.$set("siteData",t);const r=new(e(n.$vuepress.$get("siteData"))),o=Object.getOwnPropertyDescriptors(Object.getPrototypeOf(r)),i={};return Object.keys(o).reduce((e,t)=>(t.startsWith("$")&&(e[t]=o[t].get),e),i),{computed:i}}(e=>class{setPage(e){this.__page=e}get $site(){return e}get $themeConfig(){return this.$site.themeConfig}get $frontmatter(){return this.$page.frontmatter}get $localeConfig(){const{locales:e={}}=this.$site;let t,n;for(const r in e)"/"===r?n=e[r]:0===this.$page.path.indexOf(r)&&(t=e[r]);return t||n||{}}get $siteTitle(){return this.$localeConfig.title||this.$site.title||""}get $canonicalUrl(){const{canonicalUrl:e}=this.$page.frontmatter;return"string"==typeof e&&e}get $title(){const e=this.$page,{metaTitle:t}=this.$page.frontmatter;if("string"==typeof t)return t;const n=this.$siteTitle,r=e.frontmatter.home?null:e.frontmatter.title||e.title;return n?r?r+" | "+n:n:r||"VuePress"}get $description(){const e=function(e){if(e){const t=e.filter(e=>"description"===e.name)[0];if(t)return t.content}}(this.$page.frontmatter.meta);return e||(this.$page.frontmatter.description||this.$localeConfig.description||this.$site.description||"")}get $lang(){return this.$page.frontmatter.lang||this.$localeConfig.lang||"en-US"}get $localePath(){return this.$localeConfig.path||"/"}get $themeLocaleConfig(){return(this.$site.themeConfig.locales||{})[this.$localePath]||{}}get $page(){return this.__page?this.__page:function(e,t){for(let n=0;n<e.length;n++){const r=e[n];if(r.path.toLowerCase()===t.toLowerCase())return r}return{path:"",frontmatter:{}}}(this.$site.pages,this.$route.path)}},Es)),Hn.component("Content",Ds),Hn.component("ContentSlotsDistributor",Ms),Hn.component("OutboundLink",Us),Hn.component("ClientOnly",Bs),Hn.component("Layout",ss("Layout")),Hn.component("NotFound",ss("NotFound")),Hn.prototype.$withBase=function(e){const t=this.$site.base;return"/"===e.charAt(0)?t+e.slice(1):e},window.__VUEPRESS__={version:"1.9.10",hash:"968fe03"},async function(e){const t="undefined"!=typeof window&&window.__VUEPRESS_ROUTER_BASE__?window.__VUEPRESS_ROUTER_BASE__:Es.routerBase||Es.base,n=new Wa({base:t,mode:"history",fallback:!1,routes:Os,scrollBehavior:(e,t,n)=>n||(e.hash?!Hn.$vuepress.$get("disableScrollBehavior")&&{selector:decodeURIComponent(e.hash)}:{x:0,y:0})});!function(e){e.beforeEach((t,n,r)=>{if(Rs(e,t.path))r();else if(/(\/|\.html)$/.test(t.path))if(/\/$/.test(t.path)){const n=t.path.replace(/\/$/,"")+".html";Rs(e,n)?r(n):r()}else r();else{const n=t.path+"/",o=t.path+".html";Rs(e,o)?r(o):Rs(e,n)?r(n):r()}})}(n);const r={};try{await Promise.all($s.filter(e=>"function"==typeof e).map(t=>t({Vue:Hn,options:r,router:n,siteData:Es,isServer:e})))}catch(e){console.error(e)}return{app:new Hn(Object.assign(r,{router:n,render:e=>e("div",{attrs:{id:"app"}},[e("RouterView",{ref:"layout"}),e("div",{class:"global-ui"},Ts.map(t=>e(t)))])})),router:n}}(!1).then(({app:e,router:t})=>{t.onReady(()=>{e.$mount("#app")})})}]); \ No newline at end of file +var r=Object.freeze({}),o=Array.isArray;function i(e){return null==e}function a(e){return null!=e}function s(e){return!0===e}function l(e){return"string"==typeof e||"number"==typeof e||"symbol"==typeof e||"boolean"==typeof e}function u(e){return"function"==typeof e}function c(e){return null!==e&&"object"==typeof e}var p=Object.prototype.toString;function f(e){return"[object Object]"===p.call(e)}function h(e){return"[object RegExp]"===p.call(e)}function d(e){var t=parseFloat(String(e));return t>=0&&Math.floor(t)===t&&isFinite(e)}function v(e){return a(e)&&"function"==typeof e.then&&"function"==typeof e.catch}function m(e){return null==e?"":Array.isArray(e)||f(e)&&e.toString===p?JSON.stringify(e,null,2):String(e)}function g(e){var t=parseFloat(e);return isNaN(t)?e:t}function y(e,t){for(var n=Object.create(null),r=e.split(","),o=0;o<r.length;o++)n[r[o]]=!0;return t?function(e){return n[e.toLowerCase()]}:function(e){return n[e]}}y("slot,component",!0);var b=y("key,ref,slot,slot-scope,is");function _(e,t){var n=e.length;if(n){if(t===e[n-1])return void(e.length=n-1);var r=e.indexOf(t);if(r>-1)return e.splice(r,1)}}var w=Object.prototype.hasOwnProperty;function k(e,t){return w.call(e,t)}function x(e){var t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}var C=/-(\w)/g,A=x((function(e){return e.replace(C,(function(e,t){return t?t.toUpperCase():""}))})),S=x((function(e){return e.charAt(0).toUpperCase()+e.slice(1)})),P=/\B([A-Z])/g,j=x((function(e){return e.replace(P,"-$1").toLowerCase()}));var O=Function.prototype.bind?function(e,t){return e.bind(t)}:function(e,t){function n(n){var r=arguments.length;return r?r>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n};function E(e,t){t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function $(e,t){for(var n in t)e[n]=t[n];return e}function T(e){for(var t={},n=0;n<e.length;n++)e[n]&&$(t,e[n]);return t}function L(e,t,n){}var I=function(e,t,n){return!1},R=function(e){return e};function D(e,t){if(e===t)return!0;var n=c(e),r=c(t);if(!n||!r)return!n&&!r&&String(e)===String(t);try{var o=Array.isArray(e),i=Array.isArray(t);if(o&&i)return e.length===t.length&&e.every((function(e,n){return D(e,t[n])}));if(e instanceof Date&&t instanceof Date)return e.getTime()===t.getTime();if(o||i)return!1;var a=Object.keys(e),s=Object.keys(t);return a.length===s.length&&a.every((function(n){return D(e[n],t[n])}))}catch(e){return!1}}function M(e,t){for(var n=0;n<e.length;n++)if(D(e[n],t))return n;return-1}function F(e){var t=!1;return function(){t||(t=!0,e.apply(this,arguments))}}function U(e,t){return e===t?0===e&&1/e!=1/t:e==e||t==t}var B=["component","directive","filter"],z=["beforeCreate","created","beforeMount","mounted","beforeUpdate","updated","beforeDestroy","destroyed","activated","deactivated","errorCaptured","serverPrefetch","renderTracked","renderTriggered"],N={optionMergeStrategies:Object.create(null),silent:!1,productionTip:!1,devtools:!1,performance:!1,errorHandler:null,warnHandler:null,ignoredElements:[],keyCodes:Object.create(null),isReservedTag:I,isReservedAttr:I,isUnknownElement:I,getTagNamespace:L,parsePlatformTagName:R,mustUseProp:I,async:!0,_lifecycleHooks:z},V=/a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/;function W(e){var t=(e+"").charCodeAt(0);return 36===t||95===t}function q(e,t,n,r){Object.defineProperty(e,t,{value:n,enumerable:!!r,writable:!0,configurable:!0})}var H=new RegExp("[^".concat(V.source,".$_\\d]"));var G="__proto__"in{},K="undefined"!=typeof window,Y=K&&window.navigator.userAgent.toLowerCase(),Q=Y&&/msie|trident/.test(Y),J=Y&&Y.indexOf("msie 9.0")>0,X=Y&&Y.indexOf("edge/")>0;Y&&Y.indexOf("android");var Z=Y&&/iphone|ipad|ipod|ios/.test(Y);Y&&/chrome\/\d+/.test(Y),Y&&/phantomjs/.test(Y);var ee,te=Y&&Y.match(/firefox\/(\d+)/),ne={}.watch,re=!1;if(K)try{var oe={};Object.defineProperty(oe,"passive",{get:function(){re=!0}}),window.addEventListener("test-passive",null,oe)}catch(e){}var ie=function(){return void 0===ee&&(ee=!K&&"undefined"!=typeof global&&(global.process&&"server"===global.process.env.VUE_ENV)),ee},ae=K&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function se(e){return"function"==typeof e&&/native code/.test(e.toString())}var le,ue="undefined"!=typeof Symbol&&se(Symbol)&&"undefined"!=typeof Reflect&&se(Reflect.ownKeys);le="undefined"!=typeof Set&&se(Set)?Set:function(){function e(){this.set=Object.create(null)}return e.prototype.has=function(e){return!0===this.set[e]},e.prototype.add=function(e){this.set[e]=!0},e.prototype.clear=function(){this.set=Object.create(null)},e}();var ce=null;function pe(e){void 0===e&&(e=null),e||ce&&ce._scope.off(),ce=e,e&&e._scope.on()}var fe=function(){function e(e,t,n,r,o,i,a,s){this.tag=e,this.data=t,this.children=n,this.text=r,this.elm=o,this.ns=void 0,this.context=i,this.fnContext=void 0,this.fnOptions=void 0,this.fnScopeId=void 0,this.key=t&&t.key,this.componentOptions=a,this.componentInstance=void 0,this.parent=void 0,this.raw=!1,this.isStatic=!1,this.isRootInsert=!0,this.isComment=!1,this.isCloned=!1,this.isOnce=!1,this.asyncFactory=s,this.asyncMeta=void 0,this.isAsyncPlaceholder=!1}return Object.defineProperty(e.prototype,"child",{get:function(){return this.componentInstance},enumerable:!1,configurable:!0}),e}(),he=function(e){void 0===e&&(e="");var t=new fe;return t.text=e,t.isComment=!0,t};function de(e){return new fe(void 0,void 0,void 0,String(e))}function ve(e){var t=new fe(e.tag,e.data,e.children&&e.children.slice(),e.text,e.elm,e.context,e.componentOptions,e.asyncFactory);return t.ns=e.ns,t.isStatic=e.isStatic,t.key=e.key,t.isComment=e.isComment,t.fnContext=e.fnContext,t.fnOptions=e.fnOptions,t.fnScopeId=e.fnScopeId,t.asyncMeta=e.asyncMeta,t.isCloned=!0,t}var me=0,ge=[],ye=function(){function e(){this._pending=!1,this.id=me++,this.subs=[]}return e.prototype.addSub=function(e){this.subs.push(e)},e.prototype.removeSub=function(e){this.subs[this.subs.indexOf(e)]=null,this._pending||(this._pending=!0,ge.push(this))},e.prototype.depend=function(t){e.target&&e.target.addDep(this)},e.prototype.notify=function(e){var t=this.subs.filter((function(e){return e}));for(var n=0,r=t.length;n<r;n++){0,t[n].update()}},e}();ye.target=null;var be=[];function _e(e){be.push(e),ye.target=e}function we(){be.pop(),ye.target=be[be.length-1]}var ke=Array.prototype,xe=Object.create(ke);["push","pop","shift","unshift","splice","sort","reverse"].forEach((function(e){var t=ke[e];q(xe,e,(function(){for(var n=[],r=0;r<arguments.length;r++)n[r]=arguments[r];var o,i=t.apply(this,n),a=this.__ob__;switch(e){case"push":case"unshift":o=n;break;case"splice":o=n.slice(2)}return o&&a.observeArray(o),a.dep.notify(),i}))}));var Ce=Object.getOwnPropertyNames(xe),Ae={},Se=!0;function Pe(e){Se=e}var je={notify:L,depend:L,addSub:L,removeSub:L},Oe=function(){function e(e,t,n){if(void 0===t&&(t=!1),void 0===n&&(n=!1),this.value=e,this.shallow=t,this.mock=n,this.dep=n?je:new ye,this.vmCount=0,q(e,"__ob__",this),o(e)){if(!n)if(G)e.__proto__=xe;else for(var r=0,i=Ce.length;r<i;r++){q(e,s=Ce[r],xe[s])}t||this.observeArray(e)}else{var a=Object.keys(e);for(r=0;r<a.length;r++){var s;$e(e,s=a[r],Ae,void 0,t,n)}}}return e.prototype.observeArray=function(e){for(var t=0,n=e.length;t<n;t++)Ee(e[t],!1,this.mock)},e}();function Ee(e,t,n){return e&&k(e,"__ob__")&&e.__ob__ instanceof Oe?e.__ob__:!Se||!n&&ie()||!o(e)&&!f(e)||!Object.isExtensible(e)||e.__v_skip||Fe(e)||e instanceof fe?void 0:new Oe(e,t,n)}function $e(e,t,n,r,i,a){var s=new ye,l=Object.getOwnPropertyDescriptor(e,t);if(!l||!1!==l.configurable){var u=l&&l.get,c=l&&l.set;u&&!c||n!==Ae&&2!==arguments.length||(n=e[t]);var p=!i&&Ee(n,!1,a);return Object.defineProperty(e,t,{enumerable:!0,configurable:!0,get:function(){var t=u?u.call(e):n;return ye.target&&(s.depend(),p&&(p.dep.depend(),o(t)&&Ie(t))),Fe(t)&&!i?t.value:t},set:function(t){var r=u?u.call(e):n;if(U(r,t)){if(c)c.call(e,t);else{if(u)return;if(!i&&Fe(r)&&!Fe(t))return void(r.value=t);n=t}p=!i&&Ee(t,!1,a),s.notify()}}}),s}}function Te(e,t,n){if(!Me(e)){var r=e.__ob__;return o(e)&&d(t)?(e.length=Math.max(e.length,t),e.splice(t,1,n),r&&!r.shallow&&r.mock&&Ee(n,!1,!0),n):t in e&&!(t in Object.prototype)?(e[t]=n,n):e._isVue||r&&r.vmCount?n:r?($e(r.value,t,n,void 0,r.shallow,r.mock),r.dep.notify(),n):(e[t]=n,n)}}function Le(e,t){if(o(e)&&d(t))e.splice(t,1);else{var n=e.__ob__;e._isVue||n&&n.vmCount||Me(e)||k(e,t)&&(delete e[t],n&&n.dep.notify())}}function Ie(e){for(var t=void 0,n=0,r=e.length;n<r;n++)(t=e[n])&&t.__ob__&&t.__ob__.dep.depend(),o(t)&&Ie(t)}function Re(e){return De(e,!0),q(e,"__v_isShallow",!0),e}function De(e,t){if(!Me(e)){Ee(e,t,ie());0}}function Me(e){return!(!e||!e.__v_isReadonly)}function Fe(e){return!(!e||!0!==e.__v_isRef)}function Ue(e,t,n){Object.defineProperty(e,n,{enumerable:!0,configurable:!0,get:function(){var e=t[n];if(Fe(e))return e.value;var r=e&&e.__ob__;return r&&r.dep.depend(),e},set:function(e){var r=t[n];Fe(r)&&!Fe(e)?r.value=e:t[n]=e}})}"".concat("watcher"," callback"),"".concat("watcher"," getter"),"".concat("watcher"," cleanup");var Be;var ze=function(){function e(e){void 0===e&&(e=!1),this.detached=e,this.active=!0,this.effects=[],this.cleanups=[],this.parent=Be,!e&&Be&&(this.index=(Be.scopes||(Be.scopes=[])).push(this)-1)}return e.prototype.run=function(e){if(this.active){var t=Be;try{return Be=this,e()}finally{Be=t}}else 0},e.prototype.on=function(){Be=this},e.prototype.off=function(){Be=this.parent},e.prototype.stop=function(e){if(this.active){var t=void 0,n=void 0;for(t=0,n=this.effects.length;t<n;t++)this.effects[t].teardown();for(t=0,n=this.cleanups.length;t<n;t++)this.cleanups[t]();if(this.scopes)for(t=0,n=this.scopes.length;t<n;t++)this.scopes[t].stop(!0);if(!this.detached&&this.parent&&!e){var r=this.parent.scopes.pop();r&&r!==this&&(this.parent.scopes[this.index]=r,r.index=this.index)}this.parent=void 0,this.active=!1}},e}();function Ne(e){var t=e._provided,n=e.$parent&&e.$parent._provided;return n===t?e._provided=Object.create(n):t}var Ve=x((function(e){var t="&"===e.charAt(0),n="~"===(e=t?e.slice(1):e).charAt(0),r="!"===(e=n?e.slice(1):e).charAt(0);return{name:e=r?e.slice(1):e,once:n,capture:r,passive:t}}));function We(e,t){function n(){var e=n.fns;if(!o(e))return St(e,null,arguments,t,"v-on handler");for(var r=e.slice(),i=0;i<r.length;i++)St(r[i],null,arguments,t,"v-on handler")}return n.fns=e,n}function qe(e,t,n,r,o,a){var l,u,c,p;for(l in e)u=e[l],c=t[l],p=Ve(l),i(u)||(i(c)?(i(u.fns)&&(u=e[l]=We(u,a)),s(p.once)&&(u=e[l]=o(p.name,u,p.capture)),n(p.name,u,p.capture,p.passive,p.params)):u!==c&&(c.fns=u,e[l]=c));for(l in t)i(e[l])&&r((p=Ve(l)).name,t[l],p.capture)}function He(e,t,n){var r;e instanceof fe&&(e=e.data.hook||(e.data.hook={}));var o=e[t];function l(){n.apply(this,arguments),_(r.fns,l)}i(o)?r=We([l]):a(o.fns)&&s(o.merged)?(r=o).fns.push(l):r=We([o,l]),r.merged=!0,e[t]=r}function Ge(e,t,n,r,o){if(a(t)){if(k(t,n))return e[n]=t[n],o||delete t[n],!0;if(k(t,r))return e[n]=t[r],o||delete t[r],!0}return!1}function Ke(e){return l(e)?[de(e)]:o(e)?function e(t,n){var r,u,c,p,f=[];for(r=0;r<t.length;r++)i(u=t[r])||"boolean"==typeof u||(c=f.length-1,p=f[c],o(u)?u.length>0&&(Ye((u=e(u,"".concat(n||"","_").concat(r)))[0])&&Ye(p)&&(f[c]=de(p.text+u[0].text),u.shift()),f.push.apply(f,u)):l(u)?Ye(p)?f[c]=de(p.text+u):""!==u&&f.push(de(u)):Ye(u)&&Ye(p)?f[c]=de(p.text+u.text):(s(t._isVList)&&a(u.tag)&&i(u.key)&&a(n)&&(u.key="__vlist".concat(n,"_").concat(r,"__")),f.push(u)));return f}(e):void 0}function Ye(e){return a(e)&&a(e.text)&&!1===e.isComment}function Qe(e,t){var n,r,i,s,l=null;if(o(e)||"string"==typeof e)for(l=new Array(e.length),n=0,r=e.length;n<r;n++)l[n]=t(e[n],n);else if("number"==typeof e)for(l=new Array(e),n=0;n<e;n++)l[n]=t(n+1,n);else if(c(e))if(ue&&e[Symbol.iterator]){l=[];for(var u=e[Symbol.iterator](),p=u.next();!p.done;)l.push(t(p.value,l.length)),p=u.next()}else for(i=Object.keys(e),l=new Array(i.length),n=0,r=i.length;n<r;n++)s=i[n],l[n]=t(e[s],s,n);return a(l)||(l=[]),l._isVList=!0,l}function Je(e,t,n,r){var o,i=this.$scopedSlots[e];i?(n=n||{},r&&(n=$($({},r),n)),o=i(n)||(u(t)?t():t)):o=this.$slots[e]||(u(t)?t():t);var a=n&&n.slot;return a?this.$createElement("template",{slot:a},o):o}function Xe(e){return En(this.$options,"filters",e,!0)||R}function Ze(e,t){return o(e)?-1===e.indexOf(t):e!==t}function et(e,t,n,r,o){var i=N.keyCodes[t]||n;return o&&r&&!N.keyCodes[t]?Ze(o,r):i?Ze(i,e):r?j(r)!==t:void 0===e}function tt(e,t,n,r,i){if(n)if(c(n)){o(n)&&(n=T(n));var a=void 0,s=function(o){if("class"===o||"style"===o||b(o))a=e;else{var s=e.attrs&&e.attrs.type;a=r||N.mustUseProp(t,s,o)?e.domProps||(e.domProps={}):e.attrs||(e.attrs={})}var l=A(o),u=j(o);l in a||u in a||(a[o]=n[o],i&&((e.on||(e.on={}))["update:".concat(o)]=function(e){n[o]=e}))};for(var l in n)s(l)}else;return e}function nt(e,t){var n=this._staticTrees||(this._staticTrees=[]),r=n[e];return r&&!t||ot(r=n[e]=this.$options.staticRenderFns[e].call(this._renderProxy,this._c,this),"__static__".concat(e),!1),r}function rt(e,t,n){return ot(e,"__once__".concat(t).concat(n?"_".concat(n):""),!0),e}function ot(e,t,n){if(o(e))for(var r=0;r<e.length;r++)e[r]&&"string"!=typeof e[r]&&it(e[r],"".concat(t,"_").concat(r),n);else it(e,t,n)}function it(e,t,n){e.isStatic=!0,e.key=t,e.isOnce=n}function at(e,t){if(t)if(f(t)){var n=e.on=e.on?$({},e.on):{};for(var r in t){var o=n[r],i=t[r];n[r]=o?[].concat(o,i):i}}else;return e}function st(e,t,n,r){t=t||{$stable:!n};for(var i=0;i<e.length;i++){var a=e[i];o(a)?st(a,t,n):a&&(a.proxy&&(a.fn.proxy=!0),t[a.key]=a.fn)}return r&&(t.$key=r),t}function lt(e,t){for(var n=0;n<t.length;n+=2){var r=t[n];"string"==typeof r&&r&&(e[t[n]]=t[n+1])}return e}function ut(e,t){return"string"==typeof e?t+e:e}function ct(e){e._o=rt,e._n=g,e._s=m,e._l=Qe,e._t=Je,e._q=D,e._i=M,e._m=nt,e._f=Xe,e._k=et,e._b=tt,e._v=de,e._e=he,e._u=st,e._g=at,e._d=lt,e._p=ut}function pt(e,t){if(!e||!e.length)return{};for(var n={},r=0,o=e.length;r<o;r++){var i=e[r],a=i.data;if(a&&a.attrs&&a.attrs.slot&&delete a.attrs.slot,i.context!==t&&i.fnContext!==t||!a||null==a.slot)(n.default||(n.default=[])).push(i);else{var s=a.slot,l=n[s]||(n[s]=[]);"template"===i.tag?l.push.apply(l,i.children||[]):l.push(i)}}for(var u in n)n[u].every(ft)&&delete n[u];return n}function ft(e){return e.isComment&&!e.asyncFactory||" "===e.text}function ht(e){return e.isComment&&e.asyncFactory}function dt(e,t,n,o){var i,a=Object.keys(n).length>0,s=t?!!t.$stable:!a,l=t&&t.$key;if(t){if(t._normalized)return t._normalized;if(s&&o&&o!==r&&l===o.$key&&!a&&!o.$hasNormal)return o;for(var u in i={},t)t[u]&&"$"!==u[0]&&(i[u]=vt(e,n,u,t[u]))}else i={};for(var c in n)c in i||(i[c]=mt(n,c));return t&&Object.isExtensible(t)&&(t._normalized=i),q(i,"$stable",s),q(i,"$key",l),q(i,"$hasNormal",a),i}function vt(e,t,n,r){var i=function(){var t=ce;pe(e);var n=arguments.length?r.apply(null,arguments):r({}),i=(n=n&&"object"==typeof n&&!o(n)?[n]:Ke(n))&&n[0];return pe(t),n&&(!i||1===n.length&&i.isComment&&!ht(i))?void 0:n};return r.proxy&&Object.defineProperty(t,n,{get:i,enumerable:!0,configurable:!0}),i}function mt(e,t){return function(){return e[t]}}function gt(e){return{get attrs(){if(!e._attrsProxy){var t=e._attrsProxy={};q(t,"_v_attr_proxy",!0),yt(t,e.$attrs,r,e,"$attrs")}return e._attrsProxy},get listeners(){e._listenersProxy||yt(e._listenersProxy={},e.$listeners,r,e,"$listeners");return e._listenersProxy},get slots(){return function(e){e._slotsProxy||_t(e._slotsProxy={},e.$scopedSlots);return e._slotsProxy}(e)},emit:O(e.$emit,e),expose:function(t){t&&Object.keys(t).forEach((function(n){return Ue(e,t,n)}))}}}function yt(e,t,n,r,o){var i=!1;for(var a in t)a in e?t[a]!==n[a]&&(i=!0):(i=!0,bt(e,a,r,o));for(var a in e)a in t||(i=!0,delete e[a]);return i}function bt(e,t,n,r){Object.defineProperty(e,t,{enumerable:!0,configurable:!0,get:function(){return n[r][t]}})}function _t(e,t){for(var n in t)e[n]=t[n];for(var n in e)n in t||delete e[n]}var wt=null;function kt(e,t){return(e.__esModule||ue&&"Module"===e[Symbol.toStringTag])&&(e=e.default),c(e)?t.extend(e):e}function xt(e){if(o(e))for(var t=0;t<e.length;t++){var n=e[t];if(a(n)&&(a(n.componentOptions)||ht(n)))return n}}function Ct(e,t,n,r,p,f){return(o(n)||l(n))&&(p=r,r=n,n=void 0),s(f)&&(p=2),function(e,t,n,r,l){if(a(n)&&a(n.__ob__))return he();a(n)&&a(n.is)&&(t=n.is);if(!t)return he();0;o(r)&&u(r[0])&&((n=n||{}).scopedSlots={default:r[0]},r.length=0);2===l?r=Ke(r):1===l&&(r=function(e){for(var t=0;t<e.length;t++)if(o(e[t]))return Array.prototype.concat.apply([],e);return e}(r));var p,f;if("string"==typeof t){var h=void 0;f=e.$vnode&&e.$vnode.ns||N.getTagNamespace(t),p=N.isReservedTag(t)?new fe(N.parsePlatformTagName(t),n,r,void 0,void 0,e):n&&n.pre||!a(h=En(e.$options,"components",t))?new fe(t,n,r,void 0,void 0,e):_n(h,n,e,r,t)}else p=_n(t,n,e,r);return o(p)?p:a(p)?(a(f)&&function e(t,n,r){t.ns=n,"foreignObject"===t.tag&&(n=void 0,r=!0);if(a(t.children))for(var o=0,l=t.children.length;o<l;o++){var u=t.children[o];a(u.tag)&&(i(u.ns)||s(r)&&"svg"!==u.tag)&&e(u,n,r)}}(p,f),a(n)&&function(e){c(e.style)&&zt(e.style);c(e.class)&&zt(e.class)}(n),p):he()}(e,t,n,r,p)}function At(e,t,n){_e();try{if(t)for(var r=t;r=r.$parent;){var o=r.$options.errorCaptured;if(o)for(var i=0;i<o.length;i++)try{if(!1===o[i].call(r,e,t,n))return}catch(e){Pt(e,r,"errorCaptured hook")}}Pt(e,t,n)}finally{we()}}function St(e,t,n,r,o){var i;try{(i=n?e.apply(t,n):e.call(t))&&!i._isVue&&v(i)&&!i._handled&&(i.catch((function(e){return At(e,r,o+" (Promise/async)")})),i._handled=!0)}catch(e){At(e,r,o)}return i}function Pt(e,t,n){if(N.errorHandler)try{return N.errorHandler.call(null,e,t,n)}catch(t){t!==e&&jt(t,null,"config.errorHandler")}jt(e,t,n)}function jt(e,t,n){if(!K||"undefined"==typeof console)throw e;console.error(e)}var Ot,Et=!1,$t=[],Tt=!1;function Lt(){Tt=!1;var e=$t.slice(0);$t.length=0;for(var t=0;t<e.length;t++)e[t]()}if("undefined"!=typeof Promise&&se(Promise)){var It=Promise.resolve();Ot=function(){It.then(Lt),Z&&setTimeout(L)},Et=!0}else if(Q||"undefined"==typeof MutationObserver||!se(MutationObserver)&&"[object MutationObserverConstructor]"!==MutationObserver.toString())Ot="undefined"!=typeof setImmediate&&se(setImmediate)?function(){setImmediate(Lt)}:function(){setTimeout(Lt,0)};else{var Rt=1,Dt=new MutationObserver(Lt),Mt=document.createTextNode(String(Rt));Dt.observe(Mt,{characterData:!0}),Ot=function(){Rt=(Rt+1)%2,Mt.data=String(Rt)},Et=!0}function Ft(e,t){var n;if($t.push((function(){if(e)try{e.call(t)}catch(e){At(e,t,"nextTick")}else n&&n(t)})),Tt||(Tt=!0,Ot()),!e&&"undefined"!=typeof Promise)return new Promise((function(e){n=e}))}function Ut(e){return function(t,n){if(void 0===n&&(n=ce),n)return function(e,t,n){var r=e.$options;r[t]=Sn(r[t],n)}(n,e,t)}}Ut("beforeMount"),Ut("mounted"),Ut("beforeUpdate"),Ut("updated"),Ut("beforeDestroy"),Ut("destroyed"),Ut("activated"),Ut("deactivated"),Ut("serverPrefetch"),Ut("renderTracked"),Ut("renderTriggered"),Ut("errorCaptured");var Bt=new le;function zt(e){return function e(t,n){var r,i,a=o(t);if(!a&&!c(t)||t.__v_skip||Object.isFrozen(t)||t instanceof fe)return;if(t.__ob__){var s=t.__ob__.dep.id;if(n.has(s))return;n.add(s)}if(a)for(r=t.length;r--;)e(t[r],n);else if(Fe(t))e(t.value,n);else for(i=Object.keys(t),r=i.length;r--;)e(t[i[r]],n)}(e,Bt),Bt.clear(),e}var Nt,Vt=0,Wt=function(){function e(e,t,n,r,o){var i,a;i=this,void 0===(a=Be&&!Be._vm?Be:e?e._scope:void 0)&&(a=Be),a&&a.active&&a.effects.push(i),(this.vm=e)&&o&&(e._watcher=this),r?(this.deep=!!r.deep,this.user=!!r.user,this.lazy=!!r.lazy,this.sync=!!r.sync,this.before=r.before):this.deep=this.user=this.lazy=this.sync=!1,this.cb=n,this.id=++Vt,this.active=!0,this.post=!1,this.dirty=this.lazy,this.deps=[],this.newDeps=[],this.depIds=new le,this.newDepIds=new le,this.expression="",u(t)?this.getter=t:(this.getter=function(e){if(!H.test(e)){var t=e.split(".");return function(e){for(var n=0;n<t.length;n++){if(!e)return;e=e[t[n]]}return e}}}(t),this.getter||(this.getter=L)),this.value=this.lazy?void 0:this.get()}return e.prototype.get=function(){var e;_e(this);var t=this.vm;try{e=this.getter.call(t,t)}catch(e){if(!this.user)throw e;At(e,t,'getter for watcher "'.concat(this.expression,'"'))}finally{this.deep&&zt(e),we(),this.cleanupDeps()}return e},e.prototype.addDep=function(e){var t=e.id;this.newDepIds.has(t)||(this.newDepIds.add(t),this.newDeps.push(e),this.depIds.has(t)||e.addSub(this))},e.prototype.cleanupDeps=function(){for(var e=this.deps.length;e--;){var t=this.deps[e];this.newDepIds.has(t.id)||t.removeSub(this)}var n=this.depIds;this.depIds=this.newDepIds,this.newDepIds=n,this.newDepIds.clear(),n=this.deps,this.deps=this.newDeps,this.newDeps=n,this.newDeps.length=0},e.prototype.update=function(){this.lazy?this.dirty=!0:this.sync?this.run():fn(this)},e.prototype.run=function(){if(this.active){var e=this.get();if(e!==this.value||c(e)||this.deep){var t=this.value;if(this.value=e,this.user){var n='callback for watcher "'.concat(this.expression,'"');St(this.cb,this.vm,[e,t],this.vm,n)}else this.cb.call(this.vm,e,t)}}},e.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},e.prototype.depend=function(){for(var e=this.deps.length;e--;)this.deps[e].depend()},e.prototype.teardown=function(){if(this.vm&&!this.vm._isBeingDestroyed&&_(this.vm._scope.effects,this),this.active){for(var e=this.deps.length;e--;)this.deps[e].removeSub(this);this.active=!1,this.onStop&&this.onStop()}},e}();function qt(e,t){Nt.$on(e,t)}function Ht(e,t){Nt.$off(e,t)}function Gt(e,t){var n=Nt;return function r(){var o=t.apply(null,arguments);null!==o&&n.$off(e,r)}}function Kt(e,t,n){Nt=e,qe(t,n||{},qt,Ht,Gt,e),Nt=void 0}var Yt=null;function Qt(e){var t=Yt;return Yt=e,function(){Yt=t}}function Jt(e){for(;e&&(e=e.$parent);)if(e._inactive)return!0;return!1}function Xt(e,t){if(t){if(e._directInactive=!1,Jt(e))return}else if(e._directInactive)return;if(e._inactive||null===e._inactive){e._inactive=!1;for(var n=0;n<e.$children.length;n++)Xt(e.$children[n]);Zt(e,"activated")}}function Zt(e,t,n,r){void 0===r&&(r=!0),_e();var o=ce;r&&pe(e);var i=e.$options[t],a="".concat(t," hook");if(i)for(var s=0,l=i.length;s<l;s++)St(i[s],e,n||null,e,a);e._hasHookEvent&&e.$emit("hook:"+t),r&&pe(o),we()}var en=[],tn=[],nn={},rn=!1,on=!1,an=0;var sn=0,ln=Date.now;if(K&&!Q){var un=window.performance;un&&"function"==typeof un.now&&ln()>document.createEvent("Event").timeStamp&&(ln=function(){return un.now()})}var cn=function(e,t){if(e.post){if(!t.post)return 1}else if(t.post)return-1;return e.id-t.id};function pn(){var e,t;for(sn=ln(),on=!0,en.sort(cn),an=0;an<en.length;an++)(e=en[an]).before&&e.before(),t=e.id,nn[t]=null,e.run();var n=tn.slice(),r=en.slice();an=en.length=tn.length=0,nn={},rn=on=!1,function(e){for(var t=0;t<e.length;t++)e[t]._inactive=!0,Xt(e[t],!0)}(n),function(e){var t=e.length;for(;t--;){var n=e[t],r=n.vm;r&&r._watcher===n&&r._isMounted&&!r._isDestroyed&&Zt(r,"updated")}}(r),function(){for(var e=0;e<ge.length;e++){var t=ge[e];t.subs=t.subs.filter((function(e){return e})),t._pending=!1}ge.length=0}(),ae&&N.devtools&&ae.emit("flush")}function fn(e){var t=e.id;if(null==nn[t]&&(e!==ye.target||!e.noRecurse)){if(nn[t]=!0,on){for(var n=en.length-1;n>an&&en[n].id>e.id;)n--;en.splice(n+1,0,e)}else en.push(e);rn||(rn=!0,Ft(pn))}}function hn(e,t){if(e){for(var n=Object.create(null),r=ue?Reflect.ownKeys(e):Object.keys(e),o=0;o<r.length;o++){var i=r[o];if("__ob__"!==i){var a=e[i].from;if(a in t._provided)n[i]=t._provided[a];else if("default"in e[i]){var s=e[i].default;n[i]=u(s)?s.call(t):s}else 0}}return n}}function dn(e,t,n,i,a){var l,u=this,c=a.options;k(i,"_uid")?(l=Object.create(i))._original=i:(l=i,i=i._original);var p=s(c._compiled),f=!p;this.data=e,this.props=t,this.children=n,this.parent=i,this.listeners=e.on||r,this.injections=hn(c.inject,i),this.slots=function(){return u.$slots||dt(i,e.scopedSlots,u.$slots=pt(n,i)),u.$slots},Object.defineProperty(this,"scopedSlots",{enumerable:!0,get:function(){return dt(i,e.scopedSlots,this.slots())}}),p&&(this.$options=c,this.$slots=this.slots(),this.$scopedSlots=dt(i,e.scopedSlots,this.$slots)),c._scopeId?this._c=function(e,t,n,r){var a=Ct(l,e,t,n,r,f);return a&&!o(a)&&(a.fnScopeId=c._scopeId,a.fnContext=i),a}:this._c=function(e,t,n,r){return Ct(l,e,t,n,r,f)}}function vn(e,t,n,r,o){var i=ve(e);return i.fnContext=n,i.fnOptions=r,t.slot&&((i.data||(i.data={})).slot=t.slot),i}function mn(e,t){for(var n in t)e[A(n)]=t[n]}function gn(e){return e.name||e.__name||e._componentTag}ct(dn.prototype);var yn={init:function(e,t){if(e.componentInstance&&!e.componentInstance._isDestroyed&&e.data.keepAlive){var n=e;yn.prepatch(n,n)}else{(e.componentInstance=function(e,t){var n={_isComponent:!0,_parentVnode:e,parent:t},r=e.data.inlineTemplate;a(r)&&(n.render=r.render,n.staticRenderFns=r.staticRenderFns);return new e.componentOptions.Ctor(n)}(e,Yt)).$mount(t?e.elm:void 0,t)}},prepatch:function(e,t){var n=t.componentOptions;!function(e,t,n,o,i){var a=o.data.scopedSlots,s=e.$scopedSlots,l=!!(a&&!a.$stable||s!==r&&!s.$stable||a&&e.$scopedSlots.$key!==a.$key||!a&&e.$scopedSlots.$key),u=!!(i||e.$options._renderChildren||l),c=e.$vnode;e.$options._parentVnode=o,e.$vnode=o,e._vnode&&(e._vnode.parent=o),e.$options._renderChildren=i;var p=o.data.attrs||r;e._attrsProxy&&yt(e._attrsProxy,p,c.data&&c.data.attrs||r,e,"$attrs")&&(u=!0),e.$attrs=p,n=n||r;var f=e.$options._parentListeners;if(e._listenersProxy&&yt(e._listenersProxy,n,f||r,e,"$listeners"),e.$listeners=e.$options._parentListeners=n,Kt(e,n,f),t&&e.$options.props){Pe(!1);for(var h=e._props,d=e.$options._propKeys||[],v=0;v<d.length;v++){var m=d[v],g=e.$options.props;h[m]=$n(m,g,t,e)}Pe(!0),e.$options.propsData=t}u&&(e.$slots=pt(i,o.context),e.$forceUpdate())}(t.componentInstance=e.componentInstance,n.propsData,n.listeners,t,n.children)},insert:function(e){var t,n=e.context,r=e.componentInstance;r._isMounted||(r._isMounted=!0,Zt(r,"mounted")),e.data.keepAlive&&(n._isMounted?((t=r)._inactive=!1,tn.push(t)):Xt(r,!0))},destroy:function(e){var t=e.componentInstance;t._isDestroyed||(e.data.keepAlive?function e(t,n){if(!(n&&(t._directInactive=!0,Jt(t))||t._inactive)){t._inactive=!0;for(var r=0;r<t.$children.length;r++)e(t.$children[r]);Zt(t,"deactivated")}}(t,!0):t.$destroy())}},bn=Object.keys(yn);function _n(e,t,n,l,u){if(!i(e)){var p=n.$options._base;if(c(e)&&(e=p.extend(e)),"function"==typeof e){var f;if(i(e.cid)&&void 0===(e=function(e,t){if(s(e.error)&&a(e.errorComp))return e.errorComp;if(a(e.resolved))return e.resolved;var n=wt;if(n&&a(e.owners)&&-1===e.owners.indexOf(n)&&e.owners.push(n),s(e.loading)&&a(e.loadingComp))return e.loadingComp;if(n&&!a(e.owners)){var r=e.owners=[n],o=!0,l=null,u=null;n.$on("hook:destroyed",(function(){return _(r,n)}));var p=function(e){for(var t=0,n=r.length;t<n;t++)r[t].$forceUpdate();e&&(r.length=0,null!==l&&(clearTimeout(l),l=null),null!==u&&(clearTimeout(u),u=null))},f=F((function(n){e.resolved=kt(n,t),o?r.length=0:p(!0)})),h=F((function(t){a(e.errorComp)&&(e.error=!0,p(!0))})),d=e(f,h);return c(d)&&(v(d)?i(e.resolved)&&d.then(f,h):v(d.component)&&(d.component.then(f,h),a(d.error)&&(e.errorComp=kt(d.error,t)),a(d.loading)&&(e.loadingComp=kt(d.loading,t),0===d.delay?e.loading=!0:l=setTimeout((function(){l=null,i(e.resolved)&&i(e.error)&&(e.loading=!0,p(!1))}),d.delay||200)),a(d.timeout)&&(u=setTimeout((function(){u=null,i(e.resolved)&&h(null)}),d.timeout)))),o=!1,e.loading?e.loadingComp:e.resolved}}(f=e,p)))return function(e,t,n,r,o){var i=he();return i.asyncFactory=e,i.asyncMeta={data:t,context:n,children:r,tag:o},i}(f,t,n,l,u);t=t||{},qn(e),a(t.model)&&function(e,t){var n=e.model&&e.model.prop||"value",r=e.model&&e.model.event||"input";(t.attrs||(t.attrs={}))[n]=t.model.value;var i=t.on||(t.on={}),s=i[r],l=t.model.callback;a(s)?(o(s)?-1===s.indexOf(l):s!==l)&&(i[r]=[l].concat(s)):i[r]=l}(e.options,t);var h=function(e,t,n){var r=t.options.props;if(!i(r)){var o={},s=e.attrs,l=e.props;if(a(s)||a(l))for(var u in r){var c=j(u);Ge(o,l,u,c,!0)||Ge(o,s,u,c,!1)}return o}}(t,e);if(s(e.options.functional))return function(e,t,n,i,s){var l=e.options,u={},c=l.props;if(a(c))for(var p in c)u[p]=$n(p,c,t||r);else a(n.attrs)&&mn(u,n.attrs),a(n.props)&&mn(u,n.props);var f=new dn(n,u,s,i,e),h=l.render.call(null,f._c,f);if(h instanceof fe)return vn(h,n,f.parent,l,f);if(o(h)){for(var d=Ke(h)||[],v=new Array(d.length),m=0;m<d.length;m++)v[m]=vn(d[m],n,f.parent,l,f);return v}}(e,h,t,n,l);var d=t.on;if(t.on=t.nativeOn,s(e.options.abstract)){var m=t.slot;t={},m&&(t.slot=m)}!function(e){for(var t=e.hook||(e.hook={}),n=0;n<bn.length;n++){var r=bn[n],o=t[r],i=yn[r];o===i||o&&o._merged||(t[r]=o?wn(i,o):i)}}(t);var g=gn(e.options)||u;return new fe("vue-component-".concat(e.cid).concat(g?"-".concat(g):""),t,void 0,void 0,void 0,n,{Ctor:e,propsData:h,listeners:d,tag:u,children:l},f)}}}function wn(e,t){var n=function(n,r){e(n,r),t(n,r)};return n._merged=!0,n}var kn=L,xn=N.optionMergeStrategies;function Cn(e,t,n){if(void 0===n&&(n=!0),!t)return e;for(var r,o,i,a=ue?Reflect.ownKeys(t):Object.keys(t),s=0;s<a.length;s++)"__ob__"!==(r=a[s])&&(o=e[r],i=t[r],n&&k(e,r)?o!==i&&f(o)&&f(i)&&Cn(o,i):Te(e,r,i));return e}function An(e,t,n){return n?function(){var r=u(t)?t.call(n,n):t,o=u(e)?e.call(n,n):e;return r?Cn(r,o):o}:t?e?function(){return Cn(u(t)?t.call(this,this):t,u(e)?e.call(this,this):e)}:t:e}function Sn(e,t){var n=t?e?e.concat(t):o(t)?t:[t]:e;return n?function(e){for(var t=[],n=0;n<e.length;n++)-1===t.indexOf(e[n])&&t.push(e[n]);return t}(n):n}function Pn(e,t,n,r){var o=Object.create(e||null);return t?$(o,t):o}xn.data=function(e,t,n){return n?An(e,t,n):t&&"function"!=typeof t?e:An(e,t)},z.forEach((function(e){xn[e]=Sn})),B.forEach((function(e){xn[e+"s"]=Pn})),xn.watch=function(e,t,n,r){if(e===ne&&(e=void 0),t===ne&&(t=void 0),!t)return Object.create(e||null);if(!e)return t;var i={};for(var a in $(i,e),t){var s=i[a],l=t[a];s&&!o(s)&&(s=[s]),i[a]=s?s.concat(l):o(l)?l:[l]}return i},xn.props=xn.methods=xn.inject=xn.computed=function(e,t,n,r){if(!e)return t;var o=Object.create(null);return $(o,e),t&&$(o,t),o},xn.provide=function(e,t){return e?function(){var n=Object.create(null);return Cn(n,u(e)?e.call(this):e),t&&Cn(n,u(t)?t.call(this):t,!1),n}:t};var jn=function(e,t){return void 0===t?e:t};function On(e,t,n){if(u(t)&&(t=t.options),function(e,t){var n=e.props;if(n){var r,i,a={};if(o(n))for(r=n.length;r--;)"string"==typeof(i=n[r])&&(a[A(i)]={type:null});else if(f(n))for(var s in n)i=n[s],a[A(s)]=f(i)?i:{type:i};else 0;e.props=a}}(t),function(e,t){var n=e.inject;if(n){var r=e.inject={};if(o(n))for(var i=0;i<n.length;i++)r[n[i]]={from:n[i]};else if(f(n))for(var a in n){var s=n[a];r[a]=f(s)?$({from:a},s):{from:s}}else 0}}(t),function(e){var t=e.directives;if(t)for(var n in t){var r=t[n];u(r)&&(t[n]={bind:r,update:r})}}(t),!t._base&&(t.extends&&(e=On(e,t.extends,n)),t.mixins))for(var r=0,i=t.mixins.length;r<i;r++)e=On(e,t.mixins[r],n);var a,s={};for(a in e)l(a);for(a in t)k(e,a)||l(a);function l(r){var o=xn[r]||jn;s[r]=o(e[r],t[r],n,r)}return s}function En(e,t,n,r){if("string"==typeof n){var o=e[t];if(k(o,n))return o[n];var i=A(n);if(k(o,i))return o[i];var a=S(i);return k(o,a)?o[a]:o[n]||o[i]||o[a]}}function $n(e,t,n,r){var o=t[e],i=!k(n,e),a=n[e],s=Rn(Boolean,o.type);if(s>-1)if(i&&!k(o,"default"))a=!1;else if(""===a||a===j(e)){var l=Rn(String,o.type);(l<0||s<l)&&(a=!0)}if(void 0===a){a=function(e,t,n){if(!k(t,"default"))return;var r=t.default;0;if(e&&e.$options.propsData&&void 0===e.$options.propsData[n]&&void 0!==e._props[n])return e._props[n];return u(r)&&"Function"!==Ln(t.type)?r.call(e):r}(r,o,e);var c=Se;Pe(!0),Ee(a),Pe(c)}return a}var Tn=/^\s*function (\w+)/;function Ln(e){var t=e&&e.toString().match(Tn);return t?t[1]:""}function In(e,t){return Ln(e)===Ln(t)}function Rn(e,t){if(!o(t))return In(t,e)?0:-1;for(var n=0,r=t.length;n<r;n++)if(In(t[n],e))return n;return-1}var Dn={enumerable:!0,configurable:!0,get:L,set:L};function Mn(e,t,n){Dn.get=function(){return this[t][n]},Dn.set=function(e){this[t][n]=e},Object.defineProperty(e,n,Dn)}function Fn(e){var t=e.$options;if(t.props&&function(e,t){var n=e.$options.propsData||{},r=e._props=Re({}),o=e.$options._propKeys=[];e.$parent&&Pe(!1);var i=function(i){o.push(i);var a=$n(i,t,n,e);$e(r,i,a),i in e||Mn(e,"_props",i)};for(var a in t)i(a);Pe(!0)}(e,t.props),function(e){var t=e.$options,n=t.setup;if(n){var r=e._setupContext=gt(e);pe(e),_e();var o=St(n,null,[e._props||Re({}),r],e,"setup");if(we(),pe(),u(o))t.render=o;else if(c(o))if(e._setupState=o,o.__sfc){var i=e._setupProxy={};for(var a in o)"__sfc"!==a&&Ue(i,o,a)}else for(var a in o)W(a)||Ue(e,o,a);else 0}}(e),t.methods&&function(e,t){e.$options.props;for(var n in t)e[n]="function"!=typeof t[n]?L:O(t[n],e)}(e,t.methods),t.data)!function(e){var t=e.$options.data;f(t=e._data=u(t)?function(e,t){_e();try{return e.call(t,t)}catch(e){return At(e,t,"data()"),{}}finally{we()}}(t,e):t||{})||(t={});var n=Object.keys(t),r=e.$options.props,o=(e.$options.methods,n.length);for(;o--;){var i=n[o];0,r&&k(r,i)||W(i)||Mn(e,"_data",i)}var a=Ee(t);a&&a.vmCount++}(e);else{var n=Ee(e._data={});n&&n.vmCount++}t.computed&&function(e,t){var n=e._computedWatchers=Object.create(null),r=ie();for(var o in t){var i=t[o],a=u(i)?i:i.get;0,r||(n[o]=new Wt(e,a||L,L,Un)),o in e||Bn(e,o,i)}}(e,t.computed),t.watch&&t.watch!==ne&&function(e,t){for(var n in t){var r=t[n];if(o(r))for(var i=0;i<r.length;i++)Vn(e,n,r[i]);else Vn(e,n,r)}}(e,t.watch)}var Un={lazy:!0};function Bn(e,t,n){var r=!ie();u(n)?(Dn.get=r?zn(t):Nn(n),Dn.set=L):(Dn.get=n.get?r&&!1!==n.cache?zn(t):Nn(n.get):L,Dn.set=n.set||L),Object.defineProperty(e,t,Dn)}function zn(e){return function(){var t=this._computedWatchers&&this._computedWatchers[e];if(t)return t.dirty&&t.evaluate(),ye.target&&t.depend(),t.value}}function Nn(e){return function(){return e.call(this,this)}}function Vn(e,t,n,r){return f(n)&&(r=n,n=n.handler),"string"==typeof n&&(n=e[n]),e.$watch(t,n,r)}var Wn=0;function qn(e){var t=e.options;if(e.super){var n=qn(e.super);if(n!==e.superOptions){e.superOptions=n;var r=function(e){var t,n=e.options,r=e.sealedOptions;for(var o in n)n[o]!==r[o]&&(t||(t={}),t[o]=n[o]);return t}(e);r&&$(e.extendOptions,r),(t=e.options=On(n,e.extendOptions)).name&&(t.components[t.name]=e)}}return t}function Hn(e){this._init(e)}function Gn(e){e.cid=0;var t=1;e.extend=function(e){e=e||{};var n=this,r=n.cid,o=e._Ctor||(e._Ctor={});if(o[r])return o[r];var i=gn(e)||gn(n.options);var a=function(e){this._init(e)};return(a.prototype=Object.create(n.prototype)).constructor=a,a.cid=t++,a.options=On(n.options,e),a.super=n,a.options.props&&function(e){var t=e.options.props;for(var n in t)Mn(e.prototype,"_props",n)}(a),a.options.computed&&function(e){var t=e.options.computed;for(var n in t)Bn(e.prototype,n,t[n])}(a),a.extend=n.extend,a.mixin=n.mixin,a.use=n.use,B.forEach((function(e){a[e]=n[e]})),i&&(a.options.components[i]=a),a.superOptions=n.options,a.extendOptions=e,a.sealedOptions=$({},a.options),o[r]=a,a}}function Kn(e){return e&&(gn(e.Ctor.options)||e.tag)}function Yn(e,t){return o(e)?e.indexOf(t)>-1:"string"==typeof e?e.split(",").indexOf(t)>-1:!!h(e)&&e.test(t)}function Qn(e,t){var n=e.cache,r=e.keys,o=e._vnode;for(var i in n){var a=n[i];if(a){var s=a.name;s&&!t(s)&&Jn(n,i,r,o)}}}function Jn(e,t,n,r){var o=e[t];!o||r&&o.tag===r.tag||o.componentInstance.$destroy(),e[t]=null,_(n,t)}Hn.prototype._init=function(e){var t=this;t._uid=Wn++,t._isVue=!0,t.__v_skip=!0,t._scope=new ze(!0),t._scope._vm=!0,e&&e._isComponent?function(e,t){var n=e.$options=Object.create(e.constructor.options),r=t._parentVnode;n.parent=t.parent,n._parentVnode=r;var o=r.componentOptions;n.propsData=o.propsData,n._parentListeners=o.listeners,n._renderChildren=o.children,n._componentTag=o.tag,t.render&&(n.render=t.render,n.staticRenderFns=t.staticRenderFns)}(t,e):t.$options=On(qn(t.constructor),e||{},t),t._renderProxy=t,t._self=t,function(e){var t=e.$options,n=t.parent;if(n&&!t.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(e)}e.$parent=n,e.$root=n?n.$root:e,e.$children=[],e.$refs={},e._provided=n?n._provided:Object.create(null),e._watcher=null,e._inactive=null,e._directInactive=!1,e._isMounted=!1,e._isDestroyed=!1,e._isBeingDestroyed=!1}(t),function(e){e._events=Object.create(null),e._hasHookEvent=!1;var t=e.$options._parentListeners;t&&Kt(e,t)}(t),function(e){e._vnode=null,e._staticTrees=null;var t=e.$options,n=e.$vnode=t._parentVnode,o=n&&n.context;e.$slots=pt(t._renderChildren,o),e.$scopedSlots=n?dt(e.$parent,n.data.scopedSlots,e.$slots):r,e._c=function(t,n,r,o){return Ct(e,t,n,r,o,!1)},e.$createElement=function(t,n,r,o){return Ct(e,t,n,r,o,!0)};var i=n&&n.data;$e(e,"$attrs",i&&i.attrs||r,null,!0),$e(e,"$listeners",t._parentListeners||r,null,!0)}(t),Zt(t,"beforeCreate",void 0,!1),function(e){var t=hn(e.$options.inject,e);t&&(Pe(!1),Object.keys(t).forEach((function(n){$e(e,n,t[n])})),Pe(!0))}(t),Fn(t),function(e){var t=e.$options.provide;if(t){var n=u(t)?t.call(e):t;if(!c(n))return;for(var r=Ne(e),o=ue?Reflect.ownKeys(n):Object.keys(n),i=0;i<o.length;i++){var a=o[i];Object.defineProperty(r,a,Object.getOwnPropertyDescriptor(n,a))}}}(t),Zt(t,"created"),t.$options.el&&t.$mount(t.$options.el)},function(e){var t={get:function(){return this._data}},n={get:function(){return this._props}};Object.defineProperty(e.prototype,"$data",t),Object.defineProperty(e.prototype,"$props",n),e.prototype.$set=Te,e.prototype.$delete=Le,e.prototype.$watch=function(e,t,n){if(f(t))return Vn(this,e,t,n);(n=n||{}).user=!0;var r=new Wt(this,e,t,n);if(n.immediate){var o='callback for immediate watcher "'.concat(r.expression,'"');_e(),St(t,this,[r.value],this,o),we()}return function(){r.teardown()}}}(Hn),function(e){var t=/^hook:/;e.prototype.$on=function(e,n){var r=this;if(o(e))for(var i=0,a=e.length;i<a;i++)r.$on(e[i],n);else(r._events[e]||(r._events[e]=[])).push(n),t.test(e)&&(r._hasHookEvent=!0);return r},e.prototype.$once=function(e,t){var n=this;function r(){n.$off(e,r),t.apply(n,arguments)}return r.fn=t,n.$on(e,r),n},e.prototype.$off=function(e,t){var n=this;if(!arguments.length)return n._events=Object.create(null),n;if(o(e)){for(var r=0,i=e.length;r<i;r++)n.$off(e[r],t);return n}var a,s=n._events[e];if(!s)return n;if(!t)return n._events[e]=null,n;for(var l=s.length;l--;)if((a=s[l])===t||a.fn===t){s.splice(l,1);break}return n},e.prototype.$emit=function(e){var t=this,n=t._events[e];if(n){n=n.length>1?E(n):n;for(var r=E(arguments,1),o='event handler for "'.concat(e,'"'),i=0,a=n.length;i<a;i++)St(n[i],t,r,t,o)}return t}}(Hn),function(e){e.prototype._update=function(e,t){var n=this,r=n.$el,o=n._vnode,i=Qt(n);n._vnode=e,n.$el=o?n.__patch__(o,e):n.__patch__(n.$el,e,t,!1),i(),r&&(r.__vue__=null),n.$el&&(n.$el.__vue__=n);for(var a=n;a&&a.$vnode&&a.$parent&&a.$vnode===a.$parent._vnode;)a.$parent.$el=a.$el,a=a.$parent},e.prototype.$forceUpdate=function(){this._watcher&&this._watcher.update()},e.prototype.$destroy=function(){var e=this;if(!e._isBeingDestroyed){Zt(e,"beforeDestroy"),e._isBeingDestroyed=!0;var t=e.$parent;!t||t._isBeingDestroyed||e.$options.abstract||_(t.$children,e),e._scope.stop(),e._data.__ob__&&e._data.__ob__.vmCount--,e._isDestroyed=!0,e.__patch__(e._vnode,null),Zt(e,"destroyed"),e.$off(),e.$el&&(e.$el.__vue__=null),e.$vnode&&(e.$vnode.parent=null)}}}(Hn),function(e){ct(e.prototype),e.prototype.$nextTick=function(e){return Ft(e,this)},e.prototype._render=function(){var e,t=this,n=t.$options,r=n.render,i=n._parentVnode;i&&t._isMounted&&(t.$scopedSlots=dt(t.$parent,i.data.scopedSlots,t.$slots,t.$scopedSlots),t._slotsProxy&&_t(t._slotsProxy,t.$scopedSlots)),t.$vnode=i;try{pe(t),wt=t,e=r.call(t._renderProxy,t.$createElement)}catch(n){At(n,t,"render"),e=t._vnode}finally{wt=null,pe()}return o(e)&&1===e.length&&(e=e[0]),e instanceof fe||(e=he()),e.parent=i,e}}(Hn);var Xn=[String,RegExp,Array],Zn={KeepAlive:{name:"keep-alive",abstract:!0,props:{include:Xn,exclude:Xn,max:[String,Number]},methods:{cacheVNode:function(){var e=this.cache,t=this.keys,n=this.vnodeToCache,r=this.keyToCache;if(n){var o=n.tag,i=n.componentInstance,a=n.componentOptions;e[r]={name:Kn(a),tag:o,componentInstance:i},t.push(r),this.max&&t.length>parseInt(this.max)&&Jn(e,t[0],t,this._vnode),this.vnodeToCache=null}}},created:function(){this.cache=Object.create(null),this.keys=[]},destroyed:function(){for(var e in this.cache)Jn(this.cache,e,this.keys)},mounted:function(){var e=this;this.cacheVNode(),this.$watch("include",(function(t){Qn(e,(function(e){return Yn(t,e)}))})),this.$watch("exclude",(function(t){Qn(e,(function(e){return!Yn(t,e)}))}))},updated:function(){this.cacheVNode()},render:function(){var e=this.$slots.default,t=xt(e),n=t&&t.componentOptions;if(n){var r=Kn(n),o=this.include,i=this.exclude;if(o&&(!r||!Yn(o,r))||i&&r&&Yn(i,r))return t;var a=this.cache,s=this.keys,l=null==t.key?n.Ctor.cid+(n.tag?"::".concat(n.tag):""):t.key;a[l]?(t.componentInstance=a[l].componentInstance,_(s,l),s.push(l)):(this.vnodeToCache=t,this.keyToCache=l),t.data.keepAlive=!0}return t||e&&e[0]}}};!function(e){var t={get:function(){return N}};Object.defineProperty(e,"config",t),e.util={warn:kn,extend:$,mergeOptions:On,defineReactive:$e},e.set=Te,e.delete=Le,e.nextTick=Ft,e.observable=function(e){return Ee(e),e},e.options=Object.create(null),B.forEach((function(t){e.options[t+"s"]=Object.create(null)})),e.options._base=e,$(e.options.components,Zn),function(e){e.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(t.indexOf(e)>-1)return this;var n=E(arguments,1);return n.unshift(this),u(e.install)?e.install.apply(e,n):u(e)&&e.apply(null,n),t.push(e),this}}(e),function(e){e.mixin=function(e){return this.options=On(this.options,e),this}}(e),Gn(e),function(e){B.forEach((function(t){e[t]=function(e,n){return n?("component"===t&&f(n)&&(n.name=n.name||e,n=this.options._base.extend(n)),"directive"===t&&u(n)&&(n={bind:n,update:n}),this.options[t+"s"][e]=n,n):this.options[t+"s"][e]}}))}(e)}(Hn),Object.defineProperty(Hn.prototype,"$isServer",{get:ie}),Object.defineProperty(Hn.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(Hn,"FunctionalRenderContext",{value:dn}),Hn.version="2.7.14";var er=y("style,class"),tr=y("input,textarea,option,select,progress"),nr=y("contenteditable,draggable,spellcheck"),rr=y("events,caret,typing,plaintext-only"),or=y("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,truespeed,typemustmatch,visible"),ir="http://www.w3.org/1999/xlink",ar=function(e){return":"===e.charAt(5)&&"xlink"===e.slice(0,5)},sr=function(e){return ar(e)?e.slice(6,e.length):""},lr=function(e){return null==e||!1===e};function ur(e){for(var t=e.data,n=e,r=e;a(r.componentInstance);)(r=r.componentInstance._vnode)&&r.data&&(t=cr(r.data,t));for(;a(n=n.parent);)n&&n.data&&(t=cr(t,n.data));return function(e,t){if(a(e)||a(t))return pr(e,fr(t));return""}(t.staticClass,t.class)}function cr(e,t){return{staticClass:pr(e.staticClass,t.staticClass),class:a(e.class)?[e.class,t.class]:t.class}}function pr(e,t){return e?t?e+" "+t:e:t||""}function fr(e){return Array.isArray(e)?function(e){for(var t,n="",r=0,o=e.length;r<o;r++)a(t=fr(e[r]))&&""!==t&&(n&&(n+=" "),n+=t);return n}(e):c(e)?function(e){var t="";for(var n in e)e[n]&&(t&&(t+=" "),t+=n);return t}(e):"string"==typeof e?e:""}var hr={svg:"http://www.w3.org/2000/svg",math:"http://www.w3.org/1998/Math/MathML"},dr=y("html,body,base,head,link,meta,style,title,address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,menuitem,summary,content,element,shadow,template,blockquote,iframe,tfoot"),vr=y("svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,foreignobject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view",!0),mr=function(e){return dr(e)||vr(e)};var gr=Object.create(null);var yr=y("text,number,password,search,email,tel,url");var br=Object.freeze({__proto__:null,createElement:function(e,t){var n=document.createElement(e);return"select"!==e||t.data&&t.data.attrs&&void 0!==t.data.attrs.multiple&&n.setAttribute("multiple","multiple"),n},createElementNS:function(e,t){return document.createElementNS(hr[e],t)},createTextNode:function(e){return document.createTextNode(e)},createComment:function(e){return document.createComment(e)},insertBefore:function(e,t,n){e.insertBefore(t,n)},removeChild:function(e,t){e.removeChild(t)},appendChild:function(e,t){e.appendChild(t)},parentNode:function(e){return e.parentNode},nextSibling:function(e){return e.nextSibling},tagName:function(e){return e.tagName},setTextContent:function(e,t){e.textContent=t},setStyleScope:function(e,t){e.setAttribute(t,"")}}),_r={create:function(e,t){wr(t)},update:function(e,t){e.data.ref!==t.data.ref&&(wr(e,!0),wr(t))},destroy:function(e){wr(e,!0)}};function wr(e,t){var n=e.data.ref;if(a(n)){var r=e.context,i=e.componentInstance||e.elm,s=t?null:i,l=t?void 0:i;if(u(n))St(n,r,[s],r,"template ref function");else{var c=e.data.refInFor,p="string"==typeof n||"number"==typeof n,f=Fe(n),h=r.$refs;if(p||f)if(c){var d=p?h[n]:n.value;t?o(d)&&_(d,i):o(d)?d.includes(i)||d.push(i):p?(h[n]=[i],kr(r,n,h[n])):n.value=[i]}else if(p){if(t&&h[n]!==i)return;h[n]=l,kr(r,n,s)}else if(f){if(t&&n.value!==i)return;n.value=s}else 0}}}function kr(e,t,n){var r=e._setupState;r&&k(r,t)&&(Fe(r[t])?r[t].value=n:r[t]=n)}var xr=new fe("",{},[]),Cr=["create","activate","update","remove","destroy"];function Ar(e,t){return e.key===t.key&&e.asyncFactory===t.asyncFactory&&(e.tag===t.tag&&e.isComment===t.isComment&&a(e.data)===a(t.data)&&function(e,t){if("input"!==e.tag)return!0;var n,r=a(n=e.data)&&a(n=n.attrs)&&n.type,o=a(n=t.data)&&a(n=n.attrs)&&n.type;return r===o||yr(r)&&yr(o)}(e,t)||s(e.isAsyncPlaceholder)&&i(t.asyncFactory.error))}function Sr(e,t,n){var r,o,i={};for(r=t;r<=n;++r)a(o=e[r].key)&&(i[o]=r);return i}var Pr={create:jr,update:jr,destroy:function(e){jr(e,xr)}};function jr(e,t){(e.data.directives||t.data.directives)&&function(e,t){var n,r,o,i=e===xr,a=t===xr,s=Er(e.data.directives,e.context),l=Er(t.data.directives,t.context),u=[],c=[];for(n in l)r=s[n],o=l[n],r?(o.oldValue=r.value,o.oldArg=r.arg,Tr(o,"update",t,e),o.def&&o.def.componentUpdated&&c.push(o)):(Tr(o,"bind",t,e),o.def&&o.def.inserted&&u.push(o));if(u.length){var p=function(){for(var n=0;n<u.length;n++)Tr(u[n],"inserted",t,e)};i?He(t,"insert",p):p()}c.length&&He(t,"postpatch",(function(){for(var n=0;n<c.length;n++)Tr(c[n],"componentUpdated",t,e)}));if(!i)for(n in s)l[n]||Tr(s[n],"unbind",e,e,a)}(e,t)}var Or=Object.create(null);function Er(e,t){var n,r,o=Object.create(null);if(!e)return o;for(n=0;n<e.length;n++){if((r=e[n]).modifiers||(r.modifiers=Or),o[$r(r)]=r,t._setupState&&t._setupState.__sfc){var i=r.def||En(t,"_setupState","v-"+r.name);r.def="function"==typeof i?{bind:i,update:i}:i}r.def=r.def||En(t.$options,"directives",r.name)}return o}function $r(e){return e.rawName||"".concat(e.name,".").concat(Object.keys(e.modifiers||{}).join("."))}function Tr(e,t,n,r,o){var i=e.def&&e.def[t];if(i)try{i(n.elm,e,n,r,o)}catch(r){At(r,n.context,"directive ".concat(e.name," ").concat(t," hook"))}}var Lr=[_r,Pr];function Ir(e,t){var n=t.componentOptions;if(!(a(n)&&!1===n.Ctor.options.inheritAttrs||i(e.data.attrs)&&i(t.data.attrs))){var r,o,l=t.elm,u=e.data.attrs||{},c=t.data.attrs||{};for(r in(a(c.__ob__)||s(c._v_attr_proxy))&&(c=t.data.attrs=$({},c)),c)o=c[r],u[r]!==o&&Rr(l,r,o,t.data.pre);for(r in(Q||X)&&c.value!==u.value&&Rr(l,"value",c.value),u)i(c[r])&&(ar(r)?l.removeAttributeNS(ir,sr(r)):nr(r)||l.removeAttribute(r))}}function Rr(e,t,n,r){r||e.tagName.indexOf("-")>-1?Dr(e,t,n):or(t)?lr(n)?e.removeAttribute(t):(n="allowfullscreen"===t&&"EMBED"===e.tagName?"true":t,e.setAttribute(t,n)):nr(t)?e.setAttribute(t,function(e,t){return lr(t)||"false"===t?"false":"contenteditable"===e&&rr(t)?t:"true"}(t,n)):ar(t)?lr(n)?e.removeAttributeNS(ir,sr(t)):e.setAttributeNS(ir,t,n):Dr(e,t,n)}function Dr(e,t,n){if(lr(n))e.removeAttribute(t);else{if(Q&&!J&&"TEXTAREA"===e.tagName&&"placeholder"===t&&""!==n&&!e.__ieph){var r=function(t){t.stopImmediatePropagation(),e.removeEventListener("input",r)};e.addEventListener("input",r),e.__ieph=!0}e.setAttribute(t,n)}}var Mr={create:Ir,update:Ir};function Fr(e,t){var n=t.elm,r=t.data,o=e.data;if(!(i(r.staticClass)&&i(r.class)&&(i(o)||i(o.staticClass)&&i(o.class)))){var s=ur(t),l=n._transitionClasses;a(l)&&(s=pr(s,fr(l))),s!==n._prevClass&&(n.setAttribute("class",s),n._prevClass=s)}}var Ur,Br={create:Fr,update:Fr};function zr(e,t,n){var r=Ur;return function o(){var i=t.apply(null,arguments);null!==i&&Wr(e,o,n,r)}}var Nr=Et&&!(te&&Number(te[1])<=53);function Vr(e,t,n,r){if(Nr){var o=sn,i=t;t=i._wrapper=function(e){if(e.target===e.currentTarget||e.timeStamp>=o||e.timeStamp<=0||e.target.ownerDocument!==document)return i.apply(this,arguments)}}Ur.addEventListener(e,t,re?{capture:n,passive:r}:n)}function Wr(e,t,n,r){(r||Ur).removeEventListener(e,t._wrapper||t,n)}function qr(e,t){if(!i(e.data.on)||!i(t.data.on)){var n=t.data.on||{},r=e.data.on||{};Ur=t.elm||e.elm,function(e){if(a(e.__r)){var t=Q?"change":"input";e[t]=[].concat(e.__r,e[t]||[]),delete e.__r}a(e.__c)&&(e.change=[].concat(e.__c,e.change||[]),delete e.__c)}(n),qe(n,r,Vr,Wr,zr,t.context),Ur=void 0}}var Hr,Gr={create:qr,update:qr,destroy:function(e){return qr(e,xr)}};function Kr(e,t){if(!i(e.data.domProps)||!i(t.data.domProps)){var n,r,o=t.elm,l=e.data.domProps||{},u=t.data.domProps||{};for(n in(a(u.__ob__)||s(u._v_attr_proxy))&&(u=t.data.domProps=$({},u)),l)n in u||(o[n]="");for(n in u){if(r=u[n],"textContent"===n||"innerHTML"===n){if(t.children&&(t.children.length=0),r===l[n])continue;1===o.childNodes.length&&o.removeChild(o.childNodes[0])}if("value"===n&&"PROGRESS"!==o.tagName){o._value=r;var c=i(r)?"":String(r);Yr(o,c)&&(o.value=c)}else if("innerHTML"===n&&vr(o.tagName)&&i(o.innerHTML)){(Hr=Hr||document.createElement("div")).innerHTML="<svg>".concat(r,"</svg>");for(var p=Hr.firstChild;o.firstChild;)o.removeChild(o.firstChild);for(;p.firstChild;)o.appendChild(p.firstChild)}else if(r!==l[n])try{o[n]=r}catch(e){}}}}function Yr(e,t){return!e.composing&&("OPTION"===e.tagName||function(e,t){var n=!0;try{n=document.activeElement!==e}catch(e){}return n&&e.value!==t}(e,t)||function(e,t){var n=e.value,r=e._vModifiers;if(a(r)){if(r.number)return g(n)!==g(t);if(r.trim)return n.trim()!==t.trim()}return n!==t}(e,t))}var Qr={create:Kr,update:Kr},Jr=x((function(e){var t={},n=/:(.+)/;return e.split(/;(?![^(]*\))/g).forEach((function(e){if(e){var r=e.split(n);r.length>1&&(t[r[0].trim()]=r[1].trim())}})),t}));function Xr(e){var t=Zr(e.style);return e.staticStyle?$(e.staticStyle,t):t}function Zr(e){return Array.isArray(e)?T(e):"string"==typeof e?Jr(e):e}var eo,to=/^--/,no=/\s*!important$/,ro=function(e,t,n){if(to.test(t))e.style.setProperty(t,n);else if(no.test(n))e.style.setProperty(j(t),n.replace(no,""),"important");else{var r=io(t);if(Array.isArray(n))for(var o=0,i=n.length;o<i;o++)e.style[r]=n[o];else e.style[r]=n}},oo=["Webkit","Moz","ms"],io=x((function(e){if(eo=eo||document.createElement("div").style,"filter"!==(e=A(e))&&e in eo)return e;for(var t=e.charAt(0).toUpperCase()+e.slice(1),n=0;n<oo.length;n++){var r=oo[n]+t;if(r in eo)return r}}));function ao(e,t){var n=t.data,r=e.data;if(!(i(n.staticStyle)&&i(n.style)&&i(r.staticStyle)&&i(r.style))){var o,s,l=t.elm,u=r.staticStyle,c=r.normalizedStyle||r.style||{},p=u||c,f=Zr(t.data.style)||{};t.data.normalizedStyle=a(f.__ob__)?$({},f):f;var h=function(e,t){var n,r={};if(t)for(var o=e;o.componentInstance;)(o=o.componentInstance._vnode)&&o.data&&(n=Xr(o.data))&&$(r,n);(n=Xr(e.data))&&$(r,n);for(var i=e;i=i.parent;)i.data&&(n=Xr(i.data))&&$(r,n);return r}(t,!0);for(s in p)i(h[s])&&ro(l,s,"");for(s in h)(o=h[s])!==p[s]&&ro(l,s,null==o?"":o)}}var so={create:ao,update:ao},lo=/\s+/;function uo(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(lo).forEach((function(t){return e.classList.add(t)})):e.classList.add(t);else{var n=" ".concat(e.getAttribute("class")||""," ");n.indexOf(" "+t+" ")<0&&e.setAttribute("class",(n+t).trim())}}function co(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(lo).forEach((function(t){return e.classList.remove(t)})):e.classList.remove(t),e.classList.length||e.removeAttribute("class");else{for(var n=" ".concat(e.getAttribute("class")||""," "),r=" "+t+" ";n.indexOf(r)>=0;)n=n.replace(r," ");(n=n.trim())?e.setAttribute("class",n):e.removeAttribute("class")}}function po(e){if(e){if("object"==typeof e){var t={};return!1!==e.css&&$(t,fo(e.name||"v")),$(t,e),t}return"string"==typeof e?fo(e):void 0}}var fo=x((function(e){return{enterClass:"".concat(e,"-enter"),enterToClass:"".concat(e,"-enter-to"),enterActiveClass:"".concat(e,"-enter-active"),leaveClass:"".concat(e,"-leave"),leaveToClass:"".concat(e,"-leave-to"),leaveActiveClass:"".concat(e,"-leave-active")}})),ho=K&&!J,vo="transition",mo="transitionend",go="animation",yo="animationend";ho&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(vo="WebkitTransition",mo="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(go="WebkitAnimation",yo="webkitAnimationEnd"));var bo=K?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(e){return e()};function _o(e){bo((function(){bo(e)}))}function wo(e,t){var n=e._transitionClasses||(e._transitionClasses=[]);n.indexOf(t)<0&&(n.push(t),uo(e,t))}function ko(e,t){e._transitionClasses&&_(e._transitionClasses,t),co(e,t)}function xo(e,t,n){var r=Ao(e,t),o=r.type,i=r.timeout,a=r.propCount;if(!o)return n();var s="transition"===o?mo:yo,l=0,u=function(){e.removeEventListener(s,c),n()},c=function(t){t.target===e&&++l>=a&&u()};setTimeout((function(){l<a&&u()}),i+1),e.addEventListener(s,c)}var Co=/\b(transform|all)(,|$)/;function Ao(e,t){var n,r=window.getComputedStyle(e),o=(r[vo+"Delay"]||"").split(", "),i=(r[vo+"Duration"]||"").split(", "),a=So(o,i),s=(r[go+"Delay"]||"").split(", "),l=(r[go+"Duration"]||"").split(", "),u=So(s,l),c=0,p=0;return"transition"===t?a>0&&(n="transition",c=a,p=i.length):"animation"===t?u>0&&(n="animation",c=u,p=l.length):p=(n=(c=Math.max(a,u))>0?a>u?"transition":"animation":null)?"transition"===n?i.length:l.length:0,{type:n,timeout:c,propCount:p,hasTransform:"transition"===n&&Co.test(r[vo+"Property"])}}function So(e,t){for(;e.length<t.length;)e=e.concat(e);return Math.max.apply(null,t.map((function(t,n){return Po(t)+Po(e[n])})))}function Po(e){return 1e3*Number(e.slice(0,-1).replace(",","."))}function jo(e,t){var n=e.elm;a(n._leaveCb)&&(n._leaveCb.cancelled=!0,n._leaveCb());var r=po(e.data.transition);if(!i(r)&&!a(n._enterCb)&&1===n.nodeType){for(var o=r.css,s=r.type,l=r.enterClass,p=r.enterToClass,f=r.enterActiveClass,h=r.appearClass,d=r.appearToClass,v=r.appearActiveClass,m=r.beforeEnter,y=r.enter,b=r.afterEnter,_=r.enterCancelled,w=r.beforeAppear,k=r.appear,x=r.afterAppear,C=r.appearCancelled,A=r.duration,S=Yt,P=Yt.$vnode;P&&P.parent;)S=P.context,P=P.parent;var j=!S._isMounted||!e.isRootInsert;if(!j||k||""===k){var O=j&&h?h:l,E=j&&v?v:f,$=j&&d?d:p,T=j&&w||m,L=j&&u(k)?k:y,I=j&&x||b,R=j&&C||_,D=g(c(A)?A.enter:A);0;var M=!1!==o&&!J,U=$o(L),B=n._enterCb=F((function(){M&&(ko(n,$),ko(n,E)),B.cancelled?(M&&ko(n,O),R&&R(n)):I&&I(n),n._enterCb=null}));e.data.show||He(e,"insert",(function(){var t=n.parentNode,r=t&&t._pending&&t._pending[e.key];r&&r.tag===e.tag&&r.elm._leaveCb&&r.elm._leaveCb(),L&&L(n,B)})),T&&T(n),M&&(wo(n,O),wo(n,E),_o((function(){ko(n,O),B.cancelled||(wo(n,$),U||(Eo(D)?setTimeout(B,D):xo(n,s,B)))}))),e.data.show&&(t&&t(),L&&L(n,B)),M||U||B()}}}function Oo(e,t){var n=e.elm;a(n._enterCb)&&(n._enterCb.cancelled=!0,n._enterCb());var r=po(e.data.transition);if(i(r)||1!==n.nodeType)return t();if(!a(n._leaveCb)){var o=r.css,s=r.type,l=r.leaveClass,u=r.leaveToClass,p=r.leaveActiveClass,f=r.beforeLeave,h=r.leave,d=r.afterLeave,v=r.leaveCancelled,m=r.delayLeave,y=r.duration,b=!1!==o&&!J,_=$o(h),w=g(c(y)?y.leave:y);0;var k=n._leaveCb=F((function(){n.parentNode&&n.parentNode._pending&&(n.parentNode._pending[e.key]=null),b&&(ko(n,u),ko(n,p)),k.cancelled?(b&&ko(n,l),v&&v(n)):(t(),d&&d(n)),n._leaveCb=null}));m?m(x):x()}function x(){k.cancelled||(!e.data.show&&n.parentNode&&((n.parentNode._pending||(n.parentNode._pending={}))[e.key]=e),f&&f(n),b&&(wo(n,l),wo(n,p),_o((function(){ko(n,l),k.cancelled||(wo(n,u),_||(Eo(w)?setTimeout(k,w):xo(n,s,k)))}))),h&&h(n,k),b||_||k())}}function Eo(e){return"number"==typeof e&&!isNaN(e)}function $o(e){if(i(e))return!1;var t=e.fns;return a(t)?$o(Array.isArray(t)?t[0]:t):(e._length||e.length)>1}function To(e,t){!0!==t.data.show&&jo(t)}var Lo=function(e){var t,n,r={},u=e.modules,c=e.nodeOps;for(t=0;t<Cr.length;++t)for(r[Cr[t]]=[],n=0;n<u.length;++n)a(u[n][Cr[t]])&&r[Cr[t]].push(u[n][Cr[t]]);function p(e){var t=c.parentNode(e);a(t)&&c.removeChild(t,e)}function f(e,t,n,o,i,l,u){if(a(e.elm)&&a(l)&&(e=l[u]=ve(e)),e.isRootInsert=!i,!function(e,t,n,o){var i=e.data;if(a(i)){var l=a(e.componentInstance)&&i.keepAlive;if(a(i=i.hook)&&a(i=i.init)&&i(e,!1),a(e.componentInstance))return h(e,t),d(n,e.elm,o),s(l)&&function(e,t,n,o){var i,s=e;for(;s.componentInstance;)if(s=s.componentInstance._vnode,a(i=s.data)&&a(i=i.transition)){for(i=0;i<r.activate.length;++i)r.activate[i](xr,s);t.push(s);break}d(n,e.elm,o)}(e,t,n,o),!0}}(e,t,n,o)){var p=e.data,f=e.children,m=e.tag;a(m)?(e.elm=e.ns?c.createElementNS(e.ns,m):c.createElement(m,e),b(e),v(e,f,t),a(p)&&g(e,t),d(n,e.elm,o)):s(e.isComment)?(e.elm=c.createComment(e.text),d(n,e.elm,o)):(e.elm=c.createTextNode(e.text),d(n,e.elm,o))}}function h(e,t){a(e.data.pendingInsert)&&(t.push.apply(t,e.data.pendingInsert),e.data.pendingInsert=null),e.elm=e.componentInstance.$el,m(e)?(g(e,t),b(e)):(wr(e),t.push(e))}function d(e,t,n){a(e)&&(a(n)?c.parentNode(n)===e&&c.insertBefore(e,t,n):c.appendChild(e,t))}function v(e,t,n){if(o(t)){0;for(var r=0;r<t.length;++r)f(t[r],n,e.elm,null,!0,t,r)}else l(e.text)&&c.appendChild(e.elm,c.createTextNode(String(e.text)))}function m(e){for(;e.componentInstance;)e=e.componentInstance._vnode;return a(e.tag)}function g(e,n){for(var o=0;o<r.create.length;++o)r.create[o](xr,e);a(t=e.data.hook)&&(a(t.create)&&t.create(xr,e),a(t.insert)&&n.push(e))}function b(e){var t;if(a(t=e.fnScopeId))c.setStyleScope(e.elm,t);else for(var n=e;n;)a(t=n.context)&&a(t=t.$options._scopeId)&&c.setStyleScope(e.elm,t),n=n.parent;a(t=Yt)&&t!==e.context&&t!==e.fnContext&&a(t=t.$options._scopeId)&&c.setStyleScope(e.elm,t)}function _(e,t,n,r,o,i){for(;r<=o;++r)f(n[r],i,e,t,!1,n,r)}function w(e){var t,n,o=e.data;if(a(o))for(a(t=o.hook)&&a(t=t.destroy)&&t(e),t=0;t<r.destroy.length;++t)r.destroy[t](e);if(a(t=e.children))for(n=0;n<e.children.length;++n)w(e.children[n])}function k(e,t,n){for(;t<=n;++t){var r=e[t];a(r)&&(a(r.tag)?(x(r),w(r)):p(r.elm))}}function x(e,t){if(a(t)||a(e.data)){var n,o=r.remove.length+1;for(a(t)?t.listeners+=o:t=function(e,t){function n(){0==--n.listeners&&p(e)}return n.listeners=t,n}(e.elm,o),a(n=e.componentInstance)&&a(n=n._vnode)&&a(n.data)&&x(n,t),n=0;n<r.remove.length;++n)r.remove[n](e,t);a(n=e.data.hook)&&a(n=n.remove)?n(e,t):t()}else p(e.elm)}function C(e,t,n,r){for(var o=n;o<r;o++){var i=t[o];if(a(i)&&Ar(e,i))return o}}function A(e,t,n,o,l,u){if(e!==t){a(t.elm)&&a(o)&&(t=o[l]=ve(t));var p=t.elm=e.elm;if(s(e.isAsyncPlaceholder))a(t.asyncFactory.resolved)?j(e.elm,t,n):t.isAsyncPlaceholder=!0;else if(s(t.isStatic)&&s(e.isStatic)&&t.key===e.key&&(s(t.isCloned)||s(t.isOnce)))t.componentInstance=e.componentInstance;else{var h,d=t.data;a(d)&&a(h=d.hook)&&a(h=h.prepatch)&&h(e,t);var v=e.children,g=t.children;if(a(d)&&m(t)){for(h=0;h<r.update.length;++h)r.update[h](e,t);a(h=d.hook)&&a(h=h.update)&&h(e,t)}i(t.text)?a(v)&&a(g)?v!==g&&function(e,t,n,r,o){var s,l,u,p=0,h=0,d=t.length-1,v=t[0],m=t[d],g=n.length-1,y=n[0],b=n[g],w=!o;for(0;p<=d&&h<=g;)i(v)?v=t[++p]:i(m)?m=t[--d]:Ar(v,y)?(A(v,y,r,n,h),v=t[++p],y=n[++h]):Ar(m,b)?(A(m,b,r,n,g),m=t[--d],b=n[--g]):Ar(v,b)?(A(v,b,r,n,g),w&&c.insertBefore(e,v.elm,c.nextSibling(m.elm)),v=t[++p],b=n[--g]):Ar(m,y)?(A(m,y,r,n,h),w&&c.insertBefore(e,m.elm,v.elm),m=t[--d],y=n[++h]):(i(s)&&(s=Sr(t,p,d)),i(l=a(y.key)?s[y.key]:C(y,t,p,d))?f(y,r,e,v.elm,!1,n,h):Ar(u=t[l],y)?(A(u,y,r,n,h),t[l]=void 0,w&&c.insertBefore(e,u.elm,v.elm)):f(y,r,e,v.elm,!1,n,h),y=n[++h]);p>d?_(e,i(n[g+1])?null:n[g+1].elm,n,h,g,r):h>g&&k(t,p,d)}(p,v,g,n,u):a(g)?(a(e.text)&&c.setTextContent(p,""),_(p,null,g,0,g.length-1,n)):a(v)?k(v,0,v.length-1):a(e.text)&&c.setTextContent(p,""):e.text!==t.text&&c.setTextContent(p,t.text),a(d)&&a(h=d.hook)&&a(h=h.postpatch)&&h(e,t)}}}function S(e,t,n){if(s(n)&&a(e.parent))e.parent.data.pendingInsert=t;else for(var r=0;r<t.length;++r)t[r].data.hook.insert(t[r])}var P=y("attrs,class,staticClass,staticStyle,key");function j(e,t,n,r){var o,i=t.tag,l=t.data,u=t.children;if(r=r||l&&l.pre,t.elm=e,s(t.isComment)&&a(t.asyncFactory))return t.isAsyncPlaceholder=!0,!0;if(a(l)&&(a(o=l.hook)&&a(o=o.init)&&o(t,!0),a(o=t.componentInstance)))return h(t,n),!0;if(a(i)){if(a(u))if(e.hasChildNodes())if(a(o=l)&&a(o=o.domProps)&&a(o=o.innerHTML)){if(o!==e.innerHTML)return!1}else{for(var c=!0,p=e.firstChild,f=0;f<u.length;f++){if(!p||!j(p,u[f],n,r)){c=!1;break}p=p.nextSibling}if(!c||p)return!1}else v(t,u,n);if(a(l)){var d=!1;for(var m in l)if(!P(m)){d=!0,g(t,n);break}!d&&l.class&&zt(l.class)}}else e.data!==t.text&&(e.data=t.text);return!0}return function(e,t,n,o){if(!i(t)){var l,u=!1,p=[];if(i(e))u=!0,f(t,p);else{var h=a(e.nodeType);if(!h&&Ar(e,t))A(e,t,p,null,null,o);else{if(h){if(1===e.nodeType&&e.hasAttribute("data-server-rendered")&&(e.removeAttribute("data-server-rendered"),n=!0),s(n)&&j(e,t,p))return S(t,p,!0),e;l=e,e=new fe(c.tagName(l).toLowerCase(),{},[],void 0,l)}var d=e.elm,v=c.parentNode(d);if(f(t,p,d._leaveCb?null:v,c.nextSibling(d)),a(t.parent))for(var g=t.parent,y=m(t);g;){for(var b=0;b<r.destroy.length;++b)r.destroy[b](g);if(g.elm=t.elm,y){for(var _=0;_<r.create.length;++_)r.create[_](xr,g);var x=g.data.hook.insert;if(x.merged)for(var C=1;C<x.fns.length;C++)x.fns[C]()}else wr(g);g=g.parent}a(v)?k([e],0,0):a(e.tag)&&w(e)}}return S(t,p,u),t.elm}a(e)&&w(e)}}({nodeOps:br,modules:[Mr,Br,Gr,Qr,so,K?{create:To,activate:To,remove:function(e,t){!0!==e.data.show?Oo(e,t):t()}}:{}].concat(Lr)});J&&document.addEventListener("selectionchange",(function(){var e=document.activeElement;e&&e.vmodel&&zo(e,"input")}));var Io={inserted:function(e,t,n,r){"select"===n.tag?(r.elm&&!r.elm._vOptions?He(n,"postpatch",(function(){Io.componentUpdated(e,t,n)})):Ro(e,t,n.context),e._vOptions=[].map.call(e.options,Fo)):("textarea"===n.tag||yr(e.type))&&(e._vModifiers=t.modifiers,t.modifiers.lazy||(e.addEventListener("compositionstart",Uo),e.addEventListener("compositionend",Bo),e.addEventListener("change",Bo),J&&(e.vmodel=!0)))},componentUpdated:function(e,t,n){if("select"===n.tag){Ro(e,t,n.context);var r=e._vOptions,o=e._vOptions=[].map.call(e.options,Fo);if(o.some((function(e,t){return!D(e,r[t])})))(e.multiple?t.value.some((function(e){return Mo(e,o)})):t.value!==t.oldValue&&Mo(t.value,o))&&zo(e,"change")}}};function Ro(e,t,n){Do(e,t,n),(Q||X)&&setTimeout((function(){Do(e,t,n)}),0)}function Do(e,t,n){var r=t.value,o=e.multiple;if(!o||Array.isArray(r)){for(var i,a,s=0,l=e.options.length;s<l;s++)if(a=e.options[s],o)i=M(r,Fo(a))>-1,a.selected!==i&&(a.selected=i);else if(D(Fo(a),r))return void(e.selectedIndex!==s&&(e.selectedIndex=s));o||(e.selectedIndex=-1)}}function Mo(e,t){return t.every((function(t){return!D(t,e)}))}function Fo(e){return"_value"in e?e._value:e.value}function Uo(e){e.target.composing=!0}function Bo(e){e.target.composing&&(e.target.composing=!1,zo(e.target,"input"))}function zo(e,t){var n=document.createEvent("HTMLEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)}function No(e){return!e.componentInstance||e.data&&e.data.transition?e:No(e.componentInstance._vnode)}var Vo={model:Io,show:{bind:function(e,t,n){var r=t.value,o=(n=No(n)).data&&n.data.transition,i=e.__vOriginalDisplay="none"===e.style.display?"":e.style.display;r&&o?(n.data.show=!0,jo(n,(function(){e.style.display=i}))):e.style.display=r?i:"none"},update:function(e,t,n){var r=t.value;!r!=!t.oldValue&&((n=No(n)).data&&n.data.transition?(n.data.show=!0,r?jo(n,(function(){e.style.display=e.__vOriginalDisplay})):Oo(n,(function(){e.style.display="none"}))):e.style.display=r?e.__vOriginalDisplay:"none")},unbind:function(e,t,n,r,o){o||(e.style.display=e.__vOriginalDisplay)}}},Wo={name:String,appear:Boolean,css:Boolean,mode:String,type:String,enterClass:String,leaveClass:String,enterToClass:String,leaveToClass:String,enterActiveClass:String,leaveActiveClass:String,appearClass:String,appearActiveClass:String,appearToClass:String,duration:[Number,String,Object]};function qo(e){var t=e&&e.componentOptions;return t&&t.Ctor.options.abstract?qo(xt(t.children)):e}function Ho(e){var t={},n=e.$options;for(var r in n.propsData)t[r]=e[r];var o=n._parentListeners;for(var r in o)t[A(r)]=o[r];return t}function Go(e,t){if(/\d-keep-alive$/.test(t.tag))return e("keep-alive",{props:t.componentOptions.propsData})}var Ko=function(e){return e.tag||ht(e)},Yo=function(e){return"show"===e.name},Qo={name:"transition",props:Wo,abstract:!0,render:function(e){var t=this,n=this.$slots.default;if(n&&(n=n.filter(Ko)).length){0;var r=this.mode;0;var o=n[0];if(function(e){for(;e=e.parent;)if(e.data.transition)return!0}(this.$vnode))return o;var i=qo(o);if(!i)return o;if(this._leaving)return Go(e,o);var a="__transition-".concat(this._uid,"-");i.key=null==i.key?i.isComment?a+"comment":a+i.tag:l(i.key)?0===String(i.key).indexOf(a)?i.key:a+i.key:i.key;var s=(i.data||(i.data={})).transition=Ho(this),u=this._vnode,c=qo(u);if(i.data.directives&&i.data.directives.some(Yo)&&(i.data.show=!0),c&&c.data&&!function(e,t){return t.key===e.key&&t.tag===e.tag}(i,c)&&!ht(c)&&(!c.componentInstance||!c.componentInstance._vnode.isComment)){var p=c.data.transition=$({},s);if("out-in"===r)return this._leaving=!0,He(p,"afterLeave",(function(){t._leaving=!1,t.$forceUpdate()})),Go(e,o);if("in-out"===r){if(ht(i))return u;var f,h=function(){f()};He(s,"afterEnter",h),He(s,"enterCancelled",h),He(p,"delayLeave",(function(e){f=e}))}}return o}}},Jo=$({tag:String,moveClass:String},Wo);function Xo(e){e.elm._moveCb&&e.elm._moveCb(),e.elm._enterCb&&e.elm._enterCb()}function Zo(e){e.data.newPos=e.elm.getBoundingClientRect()}function ei(e){var t=e.data.pos,n=e.data.newPos,r=t.left-n.left,o=t.top-n.top;if(r||o){e.data.moved=!0;var i=e.elm.style;i.transform=i.WebkitTransform="translate(".concat(r,"px,").concat(o,"px)"),i.transitionDuration="0s"}}delete Jo.mode;var ti={Transition:Qo,TransitionGroup:{props:Jo,beforeMount:function(){var e=this,t=this._update;this._update=function(n,r){var o=Qt(e);e.__patch__(e._vnode,e.kept,!1,!0),e._vnode=e.kept,o(),t.call(e,n,r)}},render:function(e){for(var t=this.tag||this.$vnode.data.tag||"span",n=Object.create(null),r=this.prevChildren=this.children,o=this.$slots.default||[],i=this.children=[],a=Ho(this),s=0;s<o.length;s++){if((c=o[s]).tag)if(null!=c.key&&0!==String(c.key).indexOf("__vlist"))i.push(c),n[c.key]=c,(c.data||(c.data={})).transition=a;else;}if(r){var l=[],u=[];for(s=0;s<r.length;s++){var c;(c=r[s]).data.transition=a,c.data.pos=c.elm.getBoundingClientRect(),n[c.key]?l.push(c):u.push(c)}this.kept=e(t,null,l),this.removed=u}return e(t,null,i)},updated:function(){var e=this.prevChildren,t=this.moveClass||(this.name||"v")+"-move";e.length&&this.hasMove(e[0].elm,t)&&(e.forEach(Xo),e.forEach(Zo),e.forEach(ei),this._reflow=document.body.offsetHeight,e.forEach((function(e){if(e.data.moved){var n=e.elm,r=n.style;wo(n,t),r.transform=r.WebkitTransform=r.transitionDuration="",n.addEventListener(mo,n._moveCb=function e(r){r&&r.target!==n||r&&!/transform$/.test(r.propertyName)||(n.removeEventListener(mo,e),n._moveCb=null,ko(n,t))})}})))},methods:{hasMove:function(e,t){if(!ho)return!1;if(this._hasMove)return this._hasMove;var n=e.cloneNode();e._transitionClasses&&e._transitionClasses.forEach((function(e){co(n,e)})),uo(n,t),n.style.display="none",this.$el.appendChild(n);var r=Ao(n);return this.$el.removeChild(n),this._hasMove=r.hasTransform}}}};function ni(e,t){for(var n in t)e[n]=t[n];return e}Hn.config.mustUseProp=function(e,t,n){return"value"===n&&tr(e)&&"button"!==t||"selected"===n&&"option"===e||"checked"===n&&"input"===e||"muted"===n&&"video"===e},Hn.config.isReservedTag=mr,Hn.config.isReservedAttr=er,Hn.config.getTagNamespace=function(e){return vr(e)?"svg":"math"===e?"math":void 0},Hn.config.isUnknownElement=function(e){if(!K)return!0;if(mr(e))return!1;if(e=e.toLowerCase(),null!=gr[e])return gr[e];var t=document.createElement(e);return e.indexOf("-")>-1?gr[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:gr[e]=/HTMLUnknownElement/.test(t.toString())},$(Hn.options.directives,Vo),$(Hn.options.components,ti),Hn.prototype.__patch__=K?Lo:L,Hn.prototype.$mount=function(e,t){return function(e,t,n){var r;e.$el=t,e.$options.render||(e.$options.render=he),Zt(e,"beforeMount"),r=function(){e._update(e._render(),n)},new Wt(e,r,L,{before:function(){e._isMounted&&!e._isDestroyed&&Zt(e,"beforeUpdate")}},!0),n=!1;var o=e._preWatchers;if(o)for(var i=0;i<o.length;i++)o[i].run();return null==e.$vnode&&(e._isMounted=!0,Zt(e,"mounted")),e}(this,e=e&&K?function(e){if("string"==typeof e){var t=document.querySelector(e);return t||document.createElement("div")}return e}(e):void 0,t)},K&&setTimeout((function(){N.devtools&&ae&&ae.emit("init",Hn)}),0);var ri=/[!'()*]/g,oi=function(e){return"%"+e.charCodeAt(0).toString(16)},ii=/%2C/g,ai=function(e){return encodeURIComponent(e).replace(ri,oi).replace(ii,",")};function si(e){try{return decodeURIComponent(e)}catch(e){0}return e}var li=function(e){return null==e||"object"==typeof e?e:String(e)};function ui(e){var t={};return(e=e.trim().replace(/^(\?|#|&)/,""))?(e.split("&").forEach((function(e){var n=e.replace(/\+/g," ").split("="),r=si(n.shift()),o=n.length>0?si(n.join("=")):null;void 0===t[r]?t[r]=o:Array.isArray(t[r])?t[r].push(o):t[r]=[t[r],o]})),t):t}function ci(e){var t=e?Object.keys(e).map((function(t){var n=e[t];if(void 0===n)return"";if(null===n)return ai(t);if(Array.isArray(n)){var r=[];return n.forEach((function(e){void 0!==e&&(null===e?r.push(ai(t)):r.push(ai(t)+"="+ai(e)))})),r.join("&")}return ai(t)+"="+ai(n)})).filter((function(e){return e.length>0})).join("&"):null;return t?"?"+t:""}var pi=/\/?$/;function fi(e,t,n,r){var o=r&&r.options.stringifyQuery,i=t.query||{};try{i=hi(i)}catch(e){}var a={name:t.name||e&&e.name,meta:e&&e.meta||{},path:t.path||"/",hash:t.hash||"",query:i,params:t.params||{},fullPath:mi(t,o),matched:e?vi(e):[]};return n&&(a.redirectedFrom=mi(n,o)),Object.freeze(a)}function hi(e){if(Array.isArray(e))return e.map(hi);if(e&&"object"==typeof e){var t={};for(var n in e)t[n]=hi(e[n]);return t}return e}var di=fi(null,{path:"/"});function vi(e){for(var t=[];e;)t.unshift(e),e=e.parent;return t}function mi(e,t){var n=e.path,r=e.query;void 0===r&&(r={});var o=e.hash;return void 0===o&&(o=""),(n||"/")+(t||ci)(r)+o}function gi(e,t,n){return t===di?e===t:!!t&&(e.path&&t.path?e.path.replace(pi,"")===t.path.replace(pi,"")&&(n||e.hash===t.hash&&yi(e.query,t.query)):!(!e.name||!t.name)&&(e.name===t.name&&(n||e.hash===t.hash&&yi(e.query,t.query)&&yi(e.params,t.params))))}function yi(e,t){if(void 0===e&&(e={}),void 0===t&&(t={}),!e||!t)return e===t;var n=Object.keys(e).sort(),r=Object.keys(t).sort();return n.length===r.length&&n.every((function(n,o){var i=e[n];if(r[o]!==n)return!1;var a=t[n];return null==i||null==a?i===a:"object"==typeof i&&"object"==typeof a?yi(i,a):String(i)===String(a)}))}function bi(e){for(var t=0;t<e.matched.length;t++){var n=e.matched[t];for(var r in n.instances){var o=n.instances[r],i=n.enteredCbs[r];if(o&&i){delete n.enteredCbs[r];for(var a=0;a<i.length;a++)o._isBeingDestroyed||i[a](o)}}}}var _i={name:"RouterView",functional:!0,props:{name:{type:String,default:"default"}},render:function(e,t){var n=t.props,r=t.children,o=t.parent,i=t.data;i.routerView=!0;for(var a=o.$createElement,s=n.name,l=o.$route,u=o._routerViewCache||(o._routerViewCache={}),c=0,p=!1;o&&o._routerRoot!==o;){var f=o.$vnode?o.$vnode.data:{};f.routerView&&c++,f.keepAlive&&o._directInactive&&o._inactive&&(p=!0),o=o.$parent}if(i.routerViewDepth=c,p){var h=u[s],d=h&&h.component;return d?(h.configProps&&wi(d,i,h.route,h.configProps),a(d,i,r)):a()}var v=l.matched[c],m=v&&v.components[s];if(!v||!m)return u[s]=null,a();u[s]={component:m},i.registerRouteInstance=function(e,t){var n=v.instances[s];(t&&n!==e||!t&&n===e)&&(v.instances[s]=t)},(i.hook||(i.hook={})).prepatch=function(e,t){v.instances[s]=t.componentInstance},i.hook.init=function(e){e.data.keepAlive&&e.componentInstance&&e.componentInstance!==v.instances[s]&&(v.instances[s]=e.componentInstance),bi(l)};var g=v.props&&v.props[s];return g&&(ni(u[s],{route:l,configProps:g}),wi(m,i,l,g)),a(m,i,r)}};function wi(e,t,n,r){var o=t.props=function(e,t){switch(typeof t){case"undefined":return;case"object":return t;case"function":return t(e);case"boolean":return t?e.params:void 0;default:0}}(n,r);if(o){o=t.props=ni({},o);var i=t.attrs=t.attrs||{};for(var a in o)e.props&&a in e.props||(i[a]=o[a],delete o[a])}}function ki(e,t,n){var r=e.charAt(0);if("/"===r)return e;if("?"===r||"#"===r)return t+e;var o=t.split("/");n&&o[o.length-1]||o.pop();for(var i=e.replace(/^\//,"").split("/"),a=0;a<i.length;a++){var s=i[a];".."===s?o.pop():"."!==s&&o.push(s)}return""!==o[0]&&o.unshift(""),o.join("/")}function xi(e){return e.replace(/\/(?:\s*\/)+/g,"/")}var Ci=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)},Ai=Ui,Si=$i,Pi=function(e,t){return Li($i(e,t),t)},ji=Li,Oi=Fi,Ei=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function $i(e,t){for(var n,r=[],o=0,i=0,a="",s=t&&t.delimiter||"/";null!=(n=Ei.exec(e));){var l=n[0],u=n[1],c=n.index;if(a+=e.slice(i,c),i=c+l.length,u)a+=u[1];else{var p=e[i],f=n[2],h=n[3],d=n[4],v=n[5],m=n[6],g=n[7];a&&(r.push(a),a="");var y=null!=f&&null!=p&&p!==f,b="+"===m||"*"===m,_="?"===m||"*"===m,w=n[2]||s,k=d||v;r.push({name:h||o++,prefix:f||"",delimiter:w,optional:_,repeat:b,partial:y,asterisk:!!g,pattern:k?Ri(k):g?".*":"[^"+Ii(w)+"]+?"})}}return i<e.length&&(a+=e.substr(i)),a&&r.push(a),r}function Ti(e){return encodeURI(e).replace(/[\/?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()}))}function Li(e,t){for(var n=new Array(e.length),r=0;r<e.length;r++)"object"==typeof e[r]&&(n[r]=new RegExp("^(?:"+e[r].pattern+")$",Mi(t)));return function(t,r){for(var o="",i=t||{},a=(r||{}).pretty?Ti:encodeURIComponent,s=0;s<e.length;s++){var l=e[s];if("string"!=typeof l){var u,c=i[l.name];if(null==c){if(l.optional){l.partial&&(o+=l.prefix);continue}throw new TypeError('Expected "'+l.name+'" to be defined')}if(Ci(c)){if(!l.repeat)throw new TypeError('Expected "'+l.name+'" to not repeat, but received `'+JSON.stringify(c)+"`");if(0===c.length){if(l.optional)continue;throw new TypeError('Expected "'+l.name+'" to not be empty')}for(var p=0;p<c.length;p++){if(u=a(c[p]),!n[s].test(u))throw new TypeError('Expected all "'+l.name+'" to match "'+l.pattern+'", but received `'+JSON.stringify(u)+"`");o+=(0===p?l.prefix:l.delimiter)+u}}else{if(u=l.asterisk?encodeURI(c).replace(/[?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()})):a(c),!n[s].test(u))throw new TypeError('Expected "'+l.name+'" to match "'+l.pattern+'", but received "'+u+'"');o+=l.prefix+u}}else o+=l}return o}}function Ii(e){return e.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function Ri(e){return e.replace(/([=!:$\/()])/g,"\\$1")}function Di(e,t){return e.keys=t,e}function Mi(e){return e&&e.sensitive?"":"i"}function Fi(e,t,n){Ci(t)||(n=t||n,t=[]);for(var r=(n=n||{}).strict,o=!1!==n.end,i="",a=0;a<e.length;a++){var s=e[a];if("string"==typeof s)i+=Ii(s);else{var l=Ii(s.prefix),u="(?:"+s.pattern+")";t.push(s),s.repeat&&(u+="(?:"+l+u+")*"),i+=u=s.optional?s.partial?l+"("+u+")?":"(?:"+l+"("+u+"))?":l+"("+u+")"}}var c=Ii(n.delimiter||"/"),p=i.slice(-c.length)===c;return r||(i=(p?i.slice(0,-c.length):i)+"(?:"+c+"(?=$))?"),i+=o?"$":r&&p?"":"(?="+c+"|$)",Di(new RegExp("^"+i,Mi(n)),t)}function Ui(e,t,n){return Ci(t)||(n=t||n,t=[]),n=n||{},e instanceof RegExp?function(e,t){var n=e.source.match(/\((?!\?)/g);if(n)for(var r=0;r<n.length;r++)t.push({name:r,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return Di(e,t)}(e,t):Ci(e)?function(e,t,n){for(var r=[],o=0;o<e.length;o++)r.push(Ui(e[o],t,n).source);return Di(new RegExp("(?:"+r.join("|")+")",Mi(n)),t)}(e,t,n):function(e,t,n){return Fi($i(e,n),t,n)}(e,t,n)}Ai.parse=Si,Ai.compile=Pi,Ai.tokensToFunction=ji,Ai.tokensToRegExp=Oi;var Bi=Object.create(null);function zi(e,t,n){t=t||{};try{var r=Bi[e]||(Bi[e]=Ai.compile(e));return"string"==typeof t.pathMatch&&(t[0]=t.pathMatch),r(t,{pretty:!0})}catch(e){return""}finally{delete t[0]}}function Ni(e,t,n,r){var o="string"==typeof e?{path:e}:e;if(o._normalized)return o;if(o.name){var i=(o=ni({},e)).params;return i&&"object"==typeof i&&(o.params=ni({},i)),o}if(!o.path&&o.params&&t){(o=ni({},o))._normalized=!0;var a=ni(ni({},t.params),o.params);if(t.name)o.name=t.name,o.params=a;else if(t.matched.length){var s=t.matched[t.matched.length-1].path;o.path=zi(s,a,t.path)}else 0;return o}var l=function(e){var t="",n="",r=e.indexOf("#");r>=0&&(t=e.slice(r),e=e.slice(0,r));var o=e.indexOf("?");return o>=0&&(n=e.slice(o+1),e=e.slice(0,o)),{path:e,query:n,hash:t}}(o.path||""),u=t&&t.path||"/",c=l.path?ki(l.path,u,n||o.append):u,p=function(e,t,n){void 0===t&&(t={});var r,o=n||ui;try{r=o(e||"")}catch(e){r={}}for(var i in t){var a=t[i];r[i]=Array.isArray(a)?a.map(li):li(a)}return r}(l.query,o.query,r&&r.options.parseQuery),f=o.hash||l.hash;return f&&"#"!==f.charAt(0)&&(f="#"+f),{_normalized:!0,path:c,query:p,hash:f}}var Vi,Wi=function(){},qi={name:"RouterLink",props:{to:{type:[String,Object],required:!0},tag:{type:String,default:"a"},custom:Boolean,exact:Boolean,exactPath:Boolean,append:Boolean,replace:Boolean,activeClass:String,exactActiveClass:String,ariaCurrentValue:{type:String,default:"page"},event:{type:[String,Array],default:"click"}},render:function(e){var t=this,n=this.$router,r=this.$route,o=n.resolve(this.to,r,this.append),i=o.location,a=o.route,s=o.href,l={},u=n.options.linkActiveClass,c=n.options.linkExactActiveClass,p=null==u?"router-link-active":u,f=null==c?"router-link-exact-active":c,h=null==this.activeClass?p:this.activeClass,d=null==this.exactActiveClass?f:this.exactActiveClass,v=a.redirectedFrom?fi(null,Ni(a.redirectedFrom),null,n):a;l[d]=gi(r,v,this.exactPath),l[h]=this.exact||this.exactPath?l[d]:function(e,t){return 0===e.path.replace(pi,"/").indexOf(t.path.replace(pi,"/"))&&(!t.hash||e.hash===t.hash)&&function(e,t){for(var n in t)if(!(n in e))return!1;return!0}(e.query,t.query)}(r,v);var m=l[d]?this.ariaCurrentValue:null,g=function(e){Hi(e)&&(t.replace?n.replace(i,Wi):n.push(i,Wi))},y={click:Hi};Array.isArray(this.event)?this.event.forEach((function(e){y[e]=g})):y[this.event]=g;var b={class:l},_=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:s,route:a,navigate:g,isActive:l[h],isExactActive:l[d]});if(_){if(1===_.length)return _[0];if(_.length>1||!_.length)return 0===_.length?e():e("span",{},_)}if("a"===this.tag)b.on=y,b.attrs={href:s,"aria-current":m};else{var w=function e(t){var n;if(t)for(var r=0;r<t.length;r++){if("a"===(n=t[r]).tag)return n;if(n.children&&(n=e(n.children)))return n}}(this.$slots.default);if(w){w.isStatic=!1;var k=w.data=ni({},w.data);for(var x in k.on=k.on||{},k.on){var C=k.on[x];x in y&&(k.on[x]=Array.isArray(C)?C:[C])}for(var A in y)A in k.on?k.on[A].push(y[A]):k.on[A]=g;var S=w.data.attrs=ni({},w.data.attrs);S.href=s,S["aria-current"]=m}else b.on=y}return e(this.tag,b,this.$slots.default)}};function Hi(e){if(!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey||e.defaultPrevented||void 0!==e.button&&0!==e.button)){if(e.currentTarget&&e.currentTarget.getAttribute){var t=e.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(t))return}return e.preventDefault&&e.preventDefault(),!0}}var Gi="undefined"!=typeof window;function Ki(e,t,n,r,o){var i=t||[],a=n||Object.create(null),s=r||Object.create(null);e.forEach((function(e){!function e(t,n,r,o,i,a){var s=o.path,l=o.name;0;var u=o.pathToRegexpOptions||{},c=function(e,t,n){n||(e=e.replace(/\/$/,""));if("/"===e[0])return e;if(null==t)return e;return xi(t.path+"/"+e)}(s,i,u.strict);"boolean"==typeof o.caseSensitive&&(u.sensitive=o.caseSensitive);var p={path:c,regex:Yi(c,u),components:o.components||{default:o.component},alias:o.alias?"string"==typeof o.alias?[o.alias]:o.alias:[],instances:{},enteredCbs:{},name:l,parent:i,matchAs:a,redirect:o.redirect,beforeEnter:o.beforeEnter,meta:o.meta||{},props:null==o.props?{}:o.components?o.props:{default:o.props}};o.children&&o.children.forEach((function(o){var i=a?xi(a+"/"+o.path):void 0;e(t,n,r,o,p,i)}));n[p.path]||(t.push(p.path),n[p.path]=p);if(void 0!==o.alias)for(var f=Array.isArray(o.alias)?o.alias:[o.alias],h=0;h<f.length;++h){0;var d={path:f[h],children:o.children};e(t,n,r,d,i,p.path||"/")}l&&(r[l]||(r[l]=p))}(i,a,s,e,o)}));for(var l=0,u=i.length;l<u;l++)"*"===i[l]&&(i.push(i.splice(l,1)[0]),u--,l--);return{pathList:i,pathMap:a,nameMap:s}}function Yi(e,t){return Ai(e,[],t)}function Qi(e,t){var n=Ki(e),r=n.pathList,o=n.pathMap,i=n.nameMap;function a(e,n,a){var s=Ni(e,n,!1,t),u=s.name;if(u){var c=i[u];if(!c)return l(null,s);var p=c.regex.keys.filter((function(e){return!e.optional})).map((function(e){return e.name}));if("object"!=typeof s.params&&(s.params={}),n&&"object"==typeof n.params)for(var f in n.params)!(f in s.params)&&p.indexOf(f)>-1&&(s.params[f]=n.params[f]);return s.path=zi(c.path,s.params),l(c,s,a)}if(s.path){s.params={};for(var h=0;h<r.length;h++){var d=r[h],v=o[d];if(Ji(v.regex,s.path,s.params))return l(v,s,a)}}return l(null,s)}function s(e,n){var r=e.redirect,o="function"==typeof r?r(fi(e,n,null,t)):r;if("string"==typeof o&&(o={path:o}),!o||"object"!=typeof o)return l(null,n);var s=o,u=s.name,c=s.path,p=n.query,f=n.hash,h=n.params;if(p=s.hasOwnProperty("query")?s.query:p,f=s.hasOwnProperty("hash")?s.hash:f,h=s.hasOwnProperty("params")?s.params:h,u){i[u];return a({_normalized:!0,name:u,query:p,hash:f,params:h},void 0,n)}if(c){var d=function(e,t){return ki(e,t.parent?t.parent.path:"/",!0)}(c,e);return a({_normalized:!0,path:zi(d,h),query:p,hash:f},void 0,n)}return l(null,n)}function l(e,n,r){return e&&e.redirect?s(e,r||n):e&&e.matchAs?function(e,t,n){var r=a({_normalized:!0,path:zi(n,t.params)});if(r){var o=r.matched,i=o[o.length-1];return t.params=r.params,l(i,t)}return l(null,t)}(0,n,e.matchAs):fi(e,n,r,t)}return{match:a,addRoute:function(e,t){var n="object"!=typeof e?i[e]:void 0;Ki([t||e],r,o,i,n),n&&n.alias.length&&Ki(n.alias.map((function(e){return{path:e,children:[t]}})),r,o,i,n)},getRoutes:function(){return r.map((function(e){return o[e]}))},addRoutes:function(e){Ki(e,r,o,i)}}}function Ji(e,t,n){var r=t.match(e);if(!r)return!1;if(!n)return!0;for(var o=1,i=r.length;o<i;++o){var a=e.keys[o-1];a&&(n[a.name||"pathMatch"]="string"==typeof r[o]?si(r[o]):r[o])}return!0}var Xi=Gi&&window.performance&&window.performance.now?window.performance:Date;function Zi(){return Xi.now().toFixed(3)}var ea=Zi();function ta(){return ea}function na(e){return ea=e}var ra=Object.create(null);function oa(){"scrollRestoration"in window.history&&(window.history.scrollRestoration="manual");var e=window.location.protocol+"//"+window.location.host,t=window.location.href.replace(e,""),n=ni({},window.history.state);return n.key=ta(),window.history.replaceState(n,"",t),window.addEventListener("popstate",sa),function(){window.removeEventListener("popstate",sa)}}function ia(e,t,n,r){if(e.app){var o=e.options.scrollBehavior;o&&e.app.$nextTick((function(){var i=function(){var e=ta();if(e)return ra[e]}(),a=o.call(e,t,n,r?i:null);a&&("function"==typeof a.then?a.then((function(e){fa(e,i)})).catch((function(e){0})):fa(a,i))}))}}function aa(){var e=ta();e&&(ra[e]={x:window.pageXOffset,y:window.pageYOffset})}function sa(e){aa(),e.state&&e.state.key&&na(e.state.key)}function la(e){return ca(e.x)||ca(e.y)}function ua(e){return{x:ca(e.x)?e.x:window.pageXOffset,y:ca(e.y)?e.y:window.pageYOffset}}function ca(e){return"number"==typeof e}var pa=/^#\d/;function fa(e,t){var n,r="object"==typeof e;if(r&&"string"==typeof e.selector){var o=pa.test(e.selector)?document.getElementById(e.selector.slice(1)):document.querySelector(e.selector);if(o){var i=e.offset&&"object"==typeof e.offset?e.offset:{};t=function(e,t){var n=document.documentElement.getBoundingClientRect(),r=e.getBoundingClientRect();return{x:r.left-n.left-t.x,y:r.top-n.top-t.y}}(o,i={x:ca((n=i).x)?n.x:0,y:ca(n.y)?n.y:0})}else la(e)&&(t=ua(e))}else r&&la(e)&&(t=ua(e));t&&("scrollBehavior"in document.documentElement.style?window.scrollTo({left:t.x,top:t.y,behavior:e.behavior}):window.scrollTo(t.x,t.y))}var ha,da=Gi&&((-1===(ha=window.navigator.userAgent).indexOf("Android 2.")&&-1===ha.indexOf("Android 4.0")||-1===ha.indexOf("Mobile Safari")||-1!==ha.indexOf("Chrome")||-1!==ha.indexOf("Windows Phone"))&&window.history&&"function"==typeof window.history.pushState);function va(e,t){aa();var n=window.history;try{if(t){var r=ni({},n.state);r.key=ta(),n.replaceState(r,"",e)}else n.pushState({key:na(Zi())},"",e)}catch(n){window.location[t?"replace":"assign"](e)}}function ma(e){va(e,!0)}var ga={redirected:2,aborted:4,cancelled:8,duplicated:16};function ya(e,t){return _a(e,t,ga.redirected,'Redirected when going from "'+e.fullPath+'" to "'+function(e){if("string"==typeof e)return e;if("path"in e)return e.path;var t={};return wa.forEach((function(n){n in e&&(t[n]=e[n])})),JSON.stringify(t,null,2)}(t)+'" via a navigation guard.')}function ba(e,t){return _a(e,t,ga.cancelled,'Navigation cancelled from "'+e.fullPath+'" to "'+t.fullPath+'" with a new navigation.')}function _a(e,t,n,r){var o=new Error(r);return o._isRouter=!0,o.from=e,o.to=t,o.type=n,o}var wa=["params","query","hash"];function ka(e){return Object.prototype.toString.call(e).indexOf("Error")>-1}function xa(e,t){return ka(e)&&e._isRouter&&(null==t||e.type===t)}function Ca(e,t,n){var r=function(o){o>=e.length?n():e[o]?t(e[o],(function(){r(o+1)})):r(o+1)};r(0)}function Aa(e){return function(t,n,r){var o=!1,i=0,a=null;Sa(e,(function(e,t,n,s){if("function"==typeof e&&void 0===e.cid){o=!0,i++;var l,u=Oa((function(t){var o;((o=t).__esModule||ja&&"Module"===o[Symbol.toStringTag])&&(t=t.default),e.resolved="function"==typeof t?t:Vi.extend(t),n.components[s]=t,--i<=0&&r()})),c=Oa((function(e){var t="Failed to resolve async component "+s+": "+e;a||(a=ka(e)?e:new Error(t),r(a))}));try{l=e(u,c)}catch(e){c(e)}if(l)if("function"==typeof l.then)l.then(u,c);else{var p=l.component;p&&"function"==typeof p.then&&p.then(u,c)}}})),o||r()}}function Sa(e,t){return Pa(e.map((function(e){return Object.keys(e.components).map((function(n){return t(e.components[n],e.instances[n],e,n)}))})))}function Pa(e){return Array.prototype.concat.apply([],e)}var ja="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function Oa(e){var t=!1;return function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];if(!t)return t=!0,e.apply(this,n)}}var Ea=function(e,t){this.router=e,this.base=function(e){if(!e)if(Gi){var t=document.querySelector("base");e=(e=t&&t.getAttribute("href")||"/").replace(/^https?:\/\/[^\/]+/,"")}else e="/";"/"!==e.charAt(0)&&(e="/"+e);return e.replace(/\/$/,"")}(t),this.current=di,this.pending=null,this.ready=!1,this.readyCbs=[],this.readyErrorCbs=[],this.errorCbs=[],this.listeners=[]};function $a(e,t,n,r){var o=Sa(e,(function(e,r,o,i){var a=function(e,t){"function"!=typeof e&&(e=Vi.extend(e));return e.options[t]}(e,t);if(a)return Array.isArray(a)?a.map((function(e){return n(e,r,o,i)})):n(a,r,o,i)}));return Pa(r?o.reverse():o)}function Ta(e,t){if(t)return function(){return e.apply(t,arguments)}}Ea.prototype.listen=function(e){this.cb=e},Ea.prototype.onReady=function(e,t){this.ready?e():(this.readyCbs.push(e),t&&this.readyErrorCbs.push(t))},Ea.prototype.onError=function(e){this.errorCbs.push(e)},Ea.prototype.transitionTo=function(e,t,n){var r,o=this;try{r=this.router.match(e,this.current)}catch(e){throw this.errorCbs.forEach((function(t){t(e)})),e}var i=this.current;this.confirmTransition(r,(function(){o.updateRoute(r),t&&t(r),o.ensureURL(),o.router.afterHooks.forEach((function(e){e&&e(r,i)})),o.ready||(o.ready=!0,o.readyCbs.forEach((function(e){e(r)})))}),(function(e){n&&n(e),e&&!o.ready&&(xa(e,ga.redirected)&&i===di||(o.ready=!0,o.readyErrorCbs.forEach((function(t){t(e)}))))}))},Ea.prototype.confirmTransition=function(e,t,n){var r=this,o=this.current;this.pending=e;var i,a,s=function(e){!xa(e)&&ka(e)&&(r.errorCbs.length?r.errorCbs.forEach((function(t){t(e)})):console.error(e)),n&&n(e)},l=e.matched.length-1,u=o.matched.length-1;if(gi(e,o)&&l===u&&e.matched[l]===o.matched[u])return this.ensureURL(),e.hash&&ia(this.router,o,e,!1),s(((a=_a(i=o,e,ga.duplicated,'Avoided redundant navigation to current location: "'+i.fullPath+'".')).name="NavigationDuplicated",a));var c=function(e,t){var n,r=Math.max(e.length,t.length);for(n=0;n<r&&e[n]===t[n];n++);return{updated:t.slice(0,n),activated:t.slice(n),deactivated:e.slice(n)}}(this.current.matched,e.matched),p=c.updated,f=c.deactivated,h=c.activated,d=[].concat(function(e){return $a(e,"beforeRouteLeave",Ta,!0)}(f),this.router.beforeHooks,function(e){return $a(e,"beforeRouteUpdate",Ta)}(p),h.map((function(e){return e.beforeEnter})),Aa(h)),v=function(t,n){if(r.pending!==e)return s(ba(o,e));try{t(e,o,(function(t){!1===t?(r.ensureURL(!0),s(function(e,t){return _a(e,t,ga.aborted,'Navigation aborted from "'+e.fullPath+'" to "'+t.fullPath+'" via a navigation guard.')}(o,e))):ka(t)?(r.ensureURL(!0),s(t)):"string"==typeof t||"object"==typeof t&&("string"==typeof t.path||"string"==typeof t.name)?(s(ya(o,e)),"object"==typeof t&&t.replace?r.replace(t):r.push(t)):n(t)}))}catch(e){s(e)}};Ca(d,v,(function(){Ca(function(e){return $a(e,"beforeRouteEnter",(function(e,t,n,r){return function(e,t,n){return function(r,o,i){return e(r,o,(function(e){"function"==typeof e&&(t.enteredCbs[n]||(t.enteredCbs[n]=[]),t.enteredCbs[n].push(e)),i(e)}))}}(e,n,r)}))}(h).concat(r.router.resolveHooks),v,(function(){if(r.pending!==e)return s(ba(o,e));r.pending=null,t(e),r.router.app&&r.router.app.$nextTick((function(){bi(e)}))}))}))},Ea.prototype.updateRoute=function(e){this.current=e,this.cb&&this.cb(e)},Ea.prototype.setupListeners=function(){},Ea.prototype.teardown=function(){this.listeners.forEach((function(e){e()})),this.listeners=[],this.current=di,this.pending=null};var La=function(e){function t(t,n){e.call(this,t,n),this._startLocation=Ia(this.base)}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.setupListeners=function(){var e=this;if(!(this.listeners.length>0)){var t=this.router,n=t.options.scrollBehavior,r=da&&n;r&&this.listeners.push(oa());var o=function(){var n=e.current,o=Ia(e.base);e.current===di&&o===e._startLocation||e.transitionTo(o,(function(e){r&&ia(t,e,n,!0)}))};window.addEventListener("popstate",o),this.listeners.push((function(){window.removeEventListener("popstate",o)}))}},t.prototype.go=function(e){window.history.go(e)},t.prototype.push=function(e,t,n){var r=this,o=this.current;this.transitionTo(e,(function(e){va(xi(r.base+e.fullPath)),ia(r.router,e,o,!1),t&&t(e)}),n)},t.prototype.replace=function(e,t,n){var r=this,o=this.current;this.transitionTo(e,(function(e){ma(xi(r.base+e.fullPath)),ia(r.router,e,o,!1),t&&t(e)}),n)},t.prototype.ensureURL=function(e){if(Ia(this.base)!==this.current.fullPath){var t=xi(this.base+this.current.fullPath);e?va(t):ma(t)}},t.prototype.getCurrentLocation=function(){return Ia(this.base)},t}(Ea);function Ia(e){var t=window.location.pathname,n=t.toLowerCase(),r=e.toLowerCase();return!e||n!==r&&0!==n.indexOf(xi(r+"/"))||(t=t.slice(e.length)),(t||"/")+window.location.search+window.location.hash}var Ra=function(e){function t(t,n,r){e.call(this,t,n),r&&function(e){var t=Ia(e);if(!/^\/#/.test(t))return window.location.replace(xi(e+"/#"+t)),!0}(this.base)||Da()}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.setupListeners=function(){var e=this;if(!(this.listeners.length>0)){var t=this.router.options.scrollBehavior,n=da&&t;n&&this.listeners.push(oa());var r=function(){var t=e.current;Da()&&e.transitionTo(Ma(),(function(r){n&&ia(e.router,r,t,!0),da||Ba(r.fullPath)}))},o=da?"popstate":"hashchange";window.addEventListener(o,r),this.listeners.push((function(){window.removeEventListener(o,r)}))}},t.prototype.push=function(e,t,n){var r=this,o=this.current;this.transitionTo(e,(function(e){Ua(e.fullPath),ia(r.router,e,o,!1),t&&t(e)}),n)},t.prototype.replace=function(e,t,n){var r=this,o=this.current;this.transitionTo(e,(function(e){Ba(e.fullPath),ia(r.router,e,o,!1),t&&t(e)}),n)},t.prototype.go=function(e){window.history.go(e)},t.prototype.ensureURL=function(e){var t=this.current.fullPath;Ma()!==t&&(e?Ua(t):Ba(t))},t.prototype.getCurrentLocation=function(){return Ma()},t}(Ea);function Da(){var e=Ma();return"/"===e.charAt(0)||(Ba("/"+e),!1)}function Ma(){var e=window.location.href,t=e.indexOf("#");return t<0?"":e=e.slice(t+1)}function Fa(e){var t=window.location.href,n=t.indexOf("#");return(n>=0?t.slice(0,n):t)+"#"+e}function Ua(e){da?va(Fa(e)):window.location.hash=e}function Ba(e){da?ma(Fa(e)):window.location.replace(Fa(e))}var za=function(e){function t(t,n){e.call(this,t,n),this.stack=[],this.index=-1}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.push=function(e,t,n){var r=this;this.transitionTo(e,(function(e){r.stack=r.stack.slice(0,r.index+1).concat(e),r.index++,t&&t(e)}),n)},t.prototype.replace=function(e,t,n){var r=this;this.transitionTo(e,(function(e){r.stack=r.stack.slice(0,r.index).concat(e),t&&t(e)}),n)},t.prototype.go=function(e){var t=this,n=this.index+e;if(!(n<0||n>=this.stack.length)){var r=this.stack[n];this.confirmTransition(r,(function(){var e=t.current;t.index=n,t.updateRoute(r),t.router.afterHooks.forEach((function(t){t&&t(r,e)}))}),(function(e){xa(e,ga.duplicated)&&(t.index=n)}))}},t.prototype.getCurrentLocation=function(){var e=this.stack[this.stack.length-1];return e?e.fullPath:"/"},t.prototype.ensureURL=function(){},t}(Ea),Na=function(e){void 0===e&&(e={}),this.app=null,this.apps=[],this.options=e,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=Qi(e.routes||[],this);var t=e.mode||"hash";switch(this.fallback="history"===t&&!da&&!1!==e.fallback,this.fallback&&(t="hash"),Gi||(t="abstract"),this.mode=t,t){case"history":this.history=new La(this,e.base);break;case"hash":this.history=new Ra(this,e.base,this.fallback);break;case"abstract":this.history=new za(this,e.base);break;default:0}},Va={currentRoute:{configurable:!0}};Na.prototype.match=function(e,t,n){return this.matcher.match(e,t,n)},Va.currentRoute.get=function(){return this.history&&this.history.current},Na.prototype.init=function(e){var t=this;if(this.apps.push(e),e.$once("hook:destroyed",(function(){var n=t.apps.indexOf(e);n>-1&&t.apps.splice(n,1),t.app===e&&(t.app=t.apps[0]||null),t.app||t.history.teardown()})),!this.app){this.app=e;var n=this.history;if(n instanceof La||n instanceof Ra){var r=function(e){n.setupListeners(),function(e){var r=n.current,o=t.options.scrollBehavior;da&&o&&"fullPath"in e&&ia(t,e,r,!1)}(e)};n.transitionTo(n.getCurrentLocation(),r,r)}n.listen((function(e){t.apps.forEach((function(t){t._route=e}))}))}},Na.prototype.beforeEach=function(e){return qa(this.beforeHooks,e)},Na.prototype.beforeResolve=function(e){return qa(this.resolveHooks,e)},Na.prototype.afterEach=function(e){return qa(this.afterHooks,e)},Na.prototype.onReady=function(e,t){this.history.onReady(e,t)},Na.prototype.onError=function(e){this.history.onError(e)},Na.prototype.push=function(e,t,n){var r=this;if(!t&&!n&&"undefined"!=typeof Promise)return new Promise((function(t,n){r.history.push(e,t,n)}));this.history.push(e,t,n)},Na.prototype.replace=function(e,t,n){var r=this;if(!t&&!n&&"undefined"!=typeof Promise)return new Promise((function(t,n){r.history.replace(e,t,n)}));this.history.replace(e,t,n)},Na.prototype.go=function(e){this.history.go(e)},Na.prototype.back=function(){this.go(-1)},Na.prototype.forward=function(){this.go(1)},Na.prototype.getMatchedComponents=function(e){var t=e?e.matched?e:this.resolve(e).route:this.currentRoute;return t?[].concat.apply([],t.matched.map((function(e){return Object.keys(e.components).map((function(t){return e.components[t]}))}))):[]},Na.prototype.resolve=function(e,t,n){var r=Ni(e,t=t||this.history.current,n,this),o=this.match(r,t),i=o.redirectedFrom||o.fullPath;return{location:r,route:o,href:function(e,t,n){var r="hash"===n?"#"+t:t;return e?xi(e+"/"+r):r}(this.history.base,i,this.mode),normalizedTo:r,resolved:o}},Na.prototype.getRoutes=function(){return this.matcher.getRoutes()},Na.prototype.addRoute=function(e,t){this.matcher.addRoute(e,t),this.history.current!==di&&this.history.transitionTo(this.history.getCurrentLocation())},Na.prototype.addRoutes=function(e){this.matcher.addRoutes(e),this.history.current!==di&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(Na.prototype,Va);var Wa=Na;function qa(e,t){return e.push(t),function(){var n=e.indexOf(t);n>-1&&e.splice(n,1)}}Na.install=function e(t){if(!e.installed||Vi!==t){e.installed=!0,Vi=t;var n=function(e){return void 0!==e},r=function(e,t){var r=e.$options._parentVnode;n(r)&&n(r=r.data)&&n(r=r.registerRouteInstance)&&r(e,t)};t.mixin({beforeCreate:function(){n(this.$options.router)?(this._routerRoot=this,this._router=this.$options.router,this._router.init(this),t.util.defineReactive(this,"_route",this._router.history.current)):this._routerRoot=this.$parent&&this.$parent._routerRoot||this,r(this,this)},destroyed:function(){r(this)}}),Object.defineProperty(t.prototype,"$router",{get:function(){return this._routerRoot._router}}),Object.defineProperty(t.prototype,"$route",{get:function(){return this._routerRoot._route}}),t.component("RouterView",_i),t.component("RouterLink",qi);var o=t.config.optionMergeStrategies;o.beforeRouteEnter=o.beforeRouteLeave=o.beforeRouteUpdate=o.created}},Na.version="3.6.5",Na.isNavigationFailure=xa,Na.NavigationFailureType=ga,Na.START_LOCATION=di,Gi&&window.Vue&&window.Vue.use(Na);n(97);n(90),n(127);var Ha={"components/AlgoliaSearchBox":()=>Promise.all([n.e(0),n.e(18)]).then(n.bind(null,423)),"components/DropdownLink":()=>Promise.all([n.e(0),n.e(19)]).then(n.bind(null,254)),"components/DropdownTransition":()=>Promise.all([n.e(0),n.e(35)]).then(n.bind(null,242)),"components/Home":()=>Promise.all([n.e(0),n.e(26)]).then(n.bind(null,286)),"components/NavLink":()=>n.e(49).then(n.bind(null,241)),"components/NavLinks":()=>Promise.all([n.e(0),n.e(15)]).then(n.bind(null,270)),"components/Navbar":()=>Promise.all([n.e(0),n.e(1)]).then(n.bind(null,420)),"components/Page":()=>Promise.all([n.e(0),n.e(14)]).then(n.bind(null,288)),"components/PageEdit":()=>Promise.all([n.e(0),n.e(27)]).then(n.bind(null,271)),"components/PageNav":()=>Promise.all([n.e(0),n.e(20)]).then(n.bind(null,272)),"components/Sidebar":()=>Promise.all([n.e(0),n.e(10)]).then(n.bind(null,287)),"components/SidebarButton":()=>Promise.all([n.e(0),n.e(36)]).then(n.bind(null,289)),"components/SidebarGroup":()=>Promise.all([n.e(0),n.e(3)]).then(n.bind(null,269)),"components/SidebarLink":()=>Promise.all([n.e(0),n.e(28)]).then(n.bind(null,255)),"components/SidebarLinks":()=>Promise.all([n.e(0),n.e(3)]).then(n.bind(null,253)),"global-components/Badge":()=>Promise.all([n.e(0),n.e(4)]).then(n.bind(null,442)),"global-components/CodeBlock":()=>Promise.all([n.e(0),n.e(5)]).then(n.bind(null,426)),"global-components/CodeGroup":()=>Promise.all([n.e(0),n.e(6)]).then(n.bind(null,425)),"layouts/404":()=>n.e(7).then(n.bind(null,427)),"layouts/Layout":()=>Promise.all([n.e(0),n.e(1),n.e(2)]).then(n.bind(null,424)),NotFound:()=>n.e(7).then(n.bind(null,427)),Layout:()=>Promise.all([n.e(0),n.e(1),n.e(2)]).then(n.bind(null,424))},Ga={"v-7c5c7049":()=>n.e(37).then(n.bind(null,451)),"v-53692dae":()=>n.e(63).then(n.bind(null,453)),"v-1454906e":()=>n.e(50).then(n.bind(null,454)),"v-0f3edbec":()=>n.e(29).then(n.bind(null,486)),"v-60b6cb2e":()=>n.e(64).then(n.bind(null,457)),"v-505c456e":()=>n.e(65).then(n.bind(null,459)),"v-35bd2aa9":()=>n.e(55).then(n.bind(null,460)),"v-9f6e988a":()=>n.e(39).then(n.bind(null,462)),"v-bb9567ae":()=>n.e(66).then(n.bind(null,463)),"v-fce449ee":()=>n.e(67).then(n.bind(null,465)),"v-1320a22e":()=>n.e(57).then(n.bind(null,466)),"v-628f5b80":()=>n.e(30).then(n.bind(null,468)),"v-fbcf3c8c":()=>n.e(16).then(n.bind(null,469)),"v-9b3c64bc":()=>n.e(69).then(n.bind(null,471)),"v-330eff7f":()=>n.e(70).then(n.bind(null,472)),"v-9f52bb42":()=>n.e(72).then(n.bind(null,474)),"v-f105383c":()=>n.e(76).then(n.bind(null,475)),"v-4d70d202":()=>n.e(77).then(n.bind(null,477)),"v-33648c5e":()=>n.e(78).then(n.bind(null,478)),"v-38db7182":()=>n.e(32).then(n.bind(null,480)),"v-1fd1b8e2":()=>n.e(79).then(n.bind(null,481)),"v-e76984fc":()=>n.e(60).then(n.bind(null,483)),"v-990ac2bc":()=>n.e(17).then(n.bind(null,484)),"v-1c083702":()=>n.e(62).then(n.bind(null,447)),"v-d8e73a3c":()=>n.e(38).then(n.bind(null,485)),"v-28f802a2":()=>n.e(52).then(n.bind(null,482)),"v-92e1217c":()=>n.e(40).then(n.bind(null,479)),"v-5f953588":()=>n.e(21).then(n.bind(null,476)),"v-25a42004":()=>n.e(22).then(n.bind(null,473)),"v-1f10ec7c":()=>n.e(42).then(n.bind(null,470)),"v-a9a27d18":()=>n.e(31).then(n.bind(null,467)),"v-5d180d6e":()=>n.e(71).then(n.bind(null,464)),"v-2772a840":()=>n.e(33).then(n.bind(null,461)),"v-623abcde":()=>n.e(43).then(n.bind(null,458)),"v-4fa26448":()=>n.e(44).then(n.bind(null,455)),"v-52a27462":()=>n.e(23).then(n.bind(null,452)),"v-23bda522":()=>n.e(24).then(n.bind(null,450)),"v-3b41243c":()=>n.e(61).then(n.bind(null,448)),"v-4aed0642":()=>n.e(48).then(n.bind(null,446)),"v-f6d4613c":()=>n.e(25).then(n.bind(null,444)),"v-25b9307c":()=>n.e(34).then(n.bind(null,441)),"v-5e4232c2":()=>n.e(51).then(n.bind(null,440)),"v-18a45afc":()=>n.e(53).then(n.bind(null,438)),"v-8338bb3c":()=>n.e(54).then(n.bind(null,436)),"v-4e22deda":()=>n.e(45).then(n.bind(null,434)),"v-77d22050":()=>n.e(46).then(n.bind(null,432)),"v-fd7581bc":()=>n.e(41).then(n.bind(null,431)),"v-7ac6aa74":()=>n.e(12).then(n.bind(null,429)),"v-290dbc7c":()=>n.e(73).then(n.bind(null,456)),"v-5b83fdc2":()=>n.e(74).then(n.bind(null,428)),"v-fcf178bc":()=>n.e(58).then(n.bind(null,430)),"v-2bd647fc":()=>n.e(59).then(n.bind(null,433)),"v-899fe67c":()=>n.e(13).then(n.bind(null,435)),"v-49591084":()=>n.e(56).then(n.bind(null,437)),"v-06e47f6c":()=>n.e(68).then(n.bind(null,439)),"v-03b60c7c":()=>n.e(75).then(n.bind(null,443)),"v-f71410dc":()=>n.e(47).then(n.bind(null,445)),"v-164e543c":()=>n.e(11).then(n.bind(null,449))};function Ka(e){const t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}const Ya=/-(\w)/g,Qa=Ka(e=>e.replace(Ya,(e,t)=>t?t.toUpperCase():"")),Ja=/\B([A-Z])/g,Xa=Ka(e=>e.replace(Ja,"-$1").toLowerCase()),Za=Ka(e=>e.charAt(0).toUpperCase()+e.slice(1));function es(e,t){if(!t)return;if(e(t))return e(t);return t.includes("-")?e(Za(Qa(t))):e(Za(t))||e(Xa(t))}const ts=Object.assign({},Ha,Ga),ns=e=>ts[e],rs=e=>Ga[e],os=e=>Ha[e],is=e=>Hn.component(e);function as(e){return es(rs,e)}function ss(e){return es(os,e)}function ls(e){return es(ns,e)}function us(e){return es(is,e)}function cs(...e){return Promise.all(e.filter(e=>e).map(async e=>{if(!us(e)&&ls(e)){const t=await ls(e)();Hn.component(e,t.default)}}))}function ps(e,t){"undefined"!=typeof window&&window.__VUEPRESS__&&(window.__VUEPRESS__[e]=t)}var fs=n(87),hs=n.n(fs),ds=n(88),vs=n.n(ds),ms={created(){if(this.siteMeta=this.$site.headTags.filter(([e])=>"meta"===e).map(([e,t])=>t),this.$ssrContext){const t=this.getMergedMetaTags();this.$ssrContext.title=this.$title,this.$ssrContext.lang=this.$lang,this.$ssrContext.pageMeta=(e=t)?e.map(e=>{let t="<meta";return Object.keys(e).forEach(n=>{t+=` ${n}="${vs()(e[n])}"`}),t+">"}).join("\n "):"",this.$ssrContext.canonicalLink=ys(this.$canonicalUrl)}var e},mounted(){this.currentMetaTags=[...document.querySelectorAll("meta")],this.updateMeta(),this.updateCanonicalLink()},methods:{updateMeta(){document.title=this.$title,document.documentElement.lang=this.$lang;const e=this.getMergedMetaTags();this.currentMetaTags=bs(e,this.currentMetaTags)},getMergedMetaTags(){const e=this.$page.frontmatter.meta||[];return hs()([{name:"description",content:this.$description}],e,this.siteMeta,_s)},updateCanonicalLink(){gs(),this.$canonicalUrl&&document.head.insertAdjacentHTML("beforeend",ys(this.$canonicalUrl))}},watch:{$page(){this.updateMeta(),this.updateCanonicalLink()}},beforeDestroy(){bs(null,this.currentMetaTags),gs()}};function gs(){const e=document.querySelector("link[rel='canonical']");e&&e.remove()}function ys(e=""){return e?`<link href="${e}" rel="canonical" />`:""}function bs(e,t){if(t&&[...t].filter(e=>e.parentNode===document.head).forEach(e=>document.head.removeChild(e)),e)return e.map(e=>{const t=document.createElement("meta");return Object.keys(e).forEach(n=>{t.setAttribute(n,e[n])}),document.head.appendChild(t),t})}function _s(e){for(const t of["name","property","itemprop"])if(e.hasOwnProperty(t))return e[t]+t;return JSON.stringify(e)}var ws=n(89),ks={mounted(){window.addEventListener("scroll",this.onScroll)},methods:{onScroll:n.n(ws)()((function(){this.setActiveHash()}),300),setActiveHash(){const e=[].slice.call(document.querySelectorAll(".sidebar-link")),t=[].slice.call(document.querySelectorAll(".header-anchor")).filter(t=>e.some(e=>e.hash===t.hash)),n=Math.max(window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop),r=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight),o=window.innerHeight+n;for(let e=0;e<t.length;e++){const i=t[e],a=t[e+1],s=0===e&&0===n||n>=i.parentElement.offsetTop+10&&(!a||n<a.parentElement.offsetTop-10),l=decodeURIComponent(this.$route.hash);if(s&&l!==decodeURIComponent(i.hash)){const n=i;if(o===r)for(let n=e+1;n<t.length;n++)if(l===decodeURIComponent(t[n].hash))return;return this.$vuepress.$set("disableScrollBehavior",!0),void this.$router.replace(decodeURIComponent(n.hash),()=>{this.$nextTick(()=>{this.$vuepress.$set("disableScrollBehavior",!1)})})}}}},beforeDestroy(){window.removeEventListener("scroll",this.onScroll)}},xs=n(22),Cs=n.n(xs),As=[ms,ks,{mounted(){Cs.a.configure({showSpinner:!1}),this.$router.beforeEach((e,t,n)=>{e.path===t.path||Hn.component(e.name)||Cs.a.start(),n()}),this.$router.afterEach(()=>{Cs.a.done(),this.isSidebarOpen=!1})}}],Ss={name:"GlobalLayout",computed:{layout(){const e=this.getLayout();return ps("layout",e),Hn.component(e)}},methods:{getLayout(){if(this.$page.path){const e=this.$page.frontmatter.layout;return e&&(this.$vuepress.getLayoutAsyncComponent(e)||this.$vuepress.getVueComponent(e))?e:"Layout"}return"NotFound"}}},Ps=n(14),js=Object(Ps.a)(Ss,(function(){return(0,this._self._c)(this.layout,{tag:"component"})}),[],!1,null,null,null).exports;!function(e,t,n){switch(t){case"components":e[t]||(e[t]={}),Object.assign(e[t],n);break;case"mixins":e[t]||(e[t]=[]),e[t].push(...n);break;default:throw new Error("Unknown option name.")}}(js,"mixins",As);const Os=[{name:"v-7c5c7049",path:"/de/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-7c5c7049").then(n)}},{path:"/de/index.html",redirect:"/de/"},{name:"v-53692dae",path:"/de/workshops/react/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-53692dae").then(n)}},{path:"/de/workshops/react/index.html",redirect:"/de/workshops/react/"},{name:"v-1454906e",path:"/de/workshops/vue/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-1454906e").then(n)}},{path:"/de/workshops/vue/index.html",redirect:"/de/workshops/vue/"},{name:"v-0f3edbec",path:"/de/workshops/vue/full-day/appendix_1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-0f3edbec").then(n)}},{name:"v-60b6cb2e",path:"/fr/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-60b6cb2e").then(n)}},{path:"/fr/index.html",redirect:"/fr/"},{name:"v-505c456e",path:"/fr/workshops/react/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-505c456e").then(n)}},{path:"/fr/workshops/react/index.html",redirect:"/fr/workshops/react/"},{name:"v-35bd2aa9",path:"/fr/workshops/vue/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-35bd2aa9").then(n)}},{path:"/fr/workshops/vue/index.html",redirect:"/fr/workshops/vue/"},{name:"v-9f6e988a",path:"/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-9f6e988a").then(n)}},{path:"/index.html",redirect:"/"},{name:"v-bb9567ae",path:"/jp/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-bb9567ae").then(n)}},{path:"/jp/index.html",redirect:"/jp/"},{name:"v-fce449ee",path:"/jp/workshops/react/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-fce449ee").then(n)}},{path:"/jp/workshops/react/index.html",redirect:"/jp/workshops/react/"},{name:"v-1320a22e",path:"/jp/workshops/vue/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-1320a22e").then(n)}},{path:"/jp/workshops/vue/index.html",redirect:"/jp/workshops/vue/"},{name:"v-628f5b80",path:"/jp/workshops/vue/full-day/appendix_1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-628f5b80").then(n)}},{name:"v-fbcf3c8c",path:"/jp/workshops/vue/nanos/nano3.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-fbcf3c8c").then(n)}},{name:"v-9b3c64bc",path:"/workshops/CODE_OF_CONDUCT.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-9b3c64bc").then(n)}},{name:"v-330eff7f",path:"/workshops/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-330eff7f").then(n)}},{path:"/workshops/index.html",redirect:"/workshops/"},{name:"v-9f52bb42",path:"/workshops/react/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-9f52bb42").then(n)}},{path:"/workshops/react/index.html",redirect:"/workshops/react/"},{name:"v-f105383c",path:"/workshops/templates/mini_template.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-f105383c").then(n)}},{name:"v-4d70d202",path:"/workshops/templates/nano_template.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-4d70d202").then(n)}},{name:"v-33648c5e",path:"/workshops/vue/",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-33648c5e").then(n)}},{path:"/workshops/vue/index.html",redirect:"/workshops/vue/"},{name:"v-38db7182",path:"/workshops/vue/full-day/appendix_1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-38db7182").then(n)}},{name:"v-1fd1b8e2",path:"/workshops/vue/full-day/appendix_2.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-1fd1b8e2").then(n)}},{name:"v-e76984fc",path:"/workshops/vue/minis/mini6.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-e76984fc").then(n)}},{name:"v-990ac2bc",path:"/workshops/vue/nanos/nano3.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-990ac2bc").then(n)}},{name:"v-1c083702",path:"/workshops/vue/nanos/nano4.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-1c083702").then(n)}},{name:"v-d8e73a3c",path:"/de/workshops/vue/full-day/ch1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-d8e73a3c").then(n)}},{name:"v-28f802a2",path:"/de/workshops/vue/full-day/ch3.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-28f802a2").then(n)}},{name:"v-92e1217c",path:"/jp/workshops/vue/full-day/ch3.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-92e1217c").then(n)}},{name:"v-5f953588",path:"/jp/workshops/vue/minis/mini2.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-5f953588").then(n)}},{name:"v-25a42004",path:"/jp/workshops/vue/minis/mini4.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-25a42004").then(n)}},{name:"v-1f10ec7c",path:"/jp/workshops/vue/nanos/nano2.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-1f10ec7c").then(n)}},{name:"v-a9a27d18",path:"/jp/workshops/vue/nanos/nano6.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-a9a27d18").then(n)}},{name:"v-5d180d6e",path:"/workshops/TEAM.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-5d180d6e").then(n)}},{name:"v-2772a840",path:"/workshops/vue/full-day/ch1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-2772a840").then(n)}},{name:"v-623abcde",path:"/workshops/vue/full-day/ch2.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-623abcde").then(n)}},{name:"v-4fa26448",path:"/workshops/vue/full-day/ch3.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-4fa26448").then(n)}},{name:"v-52a27462",path:"/workshops/vue/minis/mini3.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-52a27462").then(n)}},{name:"v-23bda522",path:"/workshops/vue/minis/mini5.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-23bda522").then(n)}},{name:"v-3b41243c",path:"/workshops/vue/nanos/nano1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-3b41243c").then(n)}},{name:"v-4aed0642",path:"/workshops/vue/nanos/nano2.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-4aed0642").then(n)}},{name:"v-f6d4613c",path:"/workshops/vue/nanos/nano5.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-f6d4613c").then(n)}},{name:"v-25b9307c",path:"/workshops/vue/nanos/nano6.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-25b9307c").then(n)}},{name:"v-5e4232c2",path:"/de/workshops/vue/full-day/ch2.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-5e4232c2").then(n)}},{name:"v-18a45afc",path:"/de/workshops/vue/full-day/ch4.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-18a45afc").then(n)}},{name:"v-8338bb3c",path:"/de/workshops/vue/full-day/ch5.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-8338bb3c").then(n)}},{name:"v-4e22deda",path:"/workshops/vue/full-day/ch4.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-4e22deda").then(n)}},{name:"v-77d22050",path:"/workshops/vue/full-day/ch5.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-77d22050").then(n)}},{name:"v-fd7581bc",path:"/jp/workshops/vue/full-day/ch4.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-fd7581bc").then(n)}},{name:"v-7ac6aa74",path:"/jp/workshops/vue/minis/mini3.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-7ac6aa74").then(n)}},{name:"v-290dbc7c",path:"/workshops/react/minis/ecommerce.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-290dbc7c").then(n)}},{name:"v-5b83fdc2",path:"/workshops/react/minis/mini1-react.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-5b83fdc2").then(n)}},{name:"v-fcf178bc",path:"/workshops/vue/minis/mini1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-fcf178bc").then(n)}},{name:"v-2bd647fc",path:"/workshops/vue/minis/mini2.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-2bd647fc").then(n)}},{name:"v-899fe67c",path:"/workshops/vue/minis/mini4.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-899fe67c").then(n)}},{name:"v-49591084",path:"/fr/workshops/vue/minis/mini1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-49591084").then(n)}},{name:"v-06e47f6c",path:"/jp/workshops/vue/minis/mini1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-06e47f6c").then(n)}},{name:"v-03b60c7c",path:"/workshops/react/minis/mini2-react-hooks.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-03b60c7c").then(n)}},{name:"v-f71410dc",path:"/workshops/vue/half-day/half-day1.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-f71410dc").then(n)}},{name:"v-164e543c",path:"/workshops/vue/minis/mini7.html",component:js,beforeEnter:(e,t,n)=>{cs("Layout","v-164e543c").then(n)}},{path:"*",component:js}],Es={title:"Front-End Foxes Workshops",description:"Workshops to teach web and mobile development to beginners",base:"/curriculum/",headTags:[["link",{rel:"icon",href:"/curriculum/favicon.png"}]],pages:[{title:"About Our Workshops",frontmatter:{},regularPath:"/de/",relativePath:"de/README.md",key:"v-7c5c7049",path:"/de/",headers:[{level:2,title:"FAQ",slug:"faq"}]},{frontmatter:{},regularPath:"/de/workshops/react/",relativePath:"de/workshops/react/README.md",key:"v-53692dae",path:"/de/workshops/react/"},{title:"Vue Workshops",frontmatter:{},regularPath:"/de/workshops/vue/",relativePath:"de/workshops/vue/README.md",key:"v-1454906e",path:"/de/workshops/vue/"},{title:"🤷 Anhang 1: Neuanfang?",frontmatter:{},regularPath:"/de/workshops/vue/full-day/appendix_1.html",relativePath:"de/workshops/vue/full-day/appendix_1.md",key:"v-0f3edbec",path:"/de/workshops/vue/full-day/appendix_1.html"},{frontmatter:{},regularPath:"/fr/",relativePath:"fr/README.md",key:"v-60b6cb2e",path:"/fr/"},{title:"Ateliers React",frontmatter:{},regularPath:"/fr/workshops/react/",relativePath:"fr/workshops/react/README.md",key:"v-505c456e",path:"/fr/workshops/react/"},{title:"Ateliers Vue",frontmatter:{},regularPath:"/fr/workshops/vue/",relativePath:"fr/workshops/vue/README.md",key:"v-35bd2aa9",path:"/fr/workshops/vue/"},{title:"Home",frontmatter:{home:!0,footer:"MIT Licensed | Copyright 2018-present Front-End Foxes Inc, a 501(c)(3) public charity"},regularPath:"/",relativePath:"index.md",key:"v-9f6e988a",path:"/",headers:[{level:2,title:"FAQ",slug:"faq"}]},{title:"Vue Vixens のワークショップについて",frontmatter:{},regularPath:"/jp/",relativePath:"jp/README.md",key:"v-bb9567ae",path:"/jp/",headers:[{level:2,title:"FAQ",slug:"faq"}]},{title:"React Workshops",frontmatter:{},regularPath:"/jp/workshops/react/",relativePath:"jp/workshops/react/README.md",key:"v-fce449ee",path:"/jp/workshops/react/"},{title:"Vue Workshops",frontmatter:{},regularPath:"/jp/workshops/vue/",relativePath:"jp/workshops/vue/README.md",key:"v-1320a22e",path:"/jp/workshops/vue/"},{title:"🤷 Appendix 1: Lost? Confused? Starting fresh?",frontmatter:{},regularPath:"/jp/workshops/vue/full-day/appendix_1.html",relativePath:"jp/workshops/vue/full-day/appendix_1.md",key:"v-628f5b80",path:"/jp/workshops/vue/full-day/appendix_1.html"},{title:"🏠 3: Visual Studio CodeにVueのための最適な設定をしよう （初級）",frontmatter:{},regularPath:"/jp/workshops/vue/nanos/nano3.html",relativePath:"jp/workshops/vue/nanos/nano3.md",key:"v-fbcf3c8c",path:"/jp/workshops/vue/nanos/nano3.html",headers:[{level:2,title:"はじめに",slug:"はじめに"},{level:2,title:"Vetur のインストール",slug:"vetur-のインストール"},{level:2,title:"シンタックスハイライト",slug:"シンタックスハイライト"},{level:2,title:"スニペット",slug:"スニペット"},{level:2,title:"Emmet",slug:"emmet"},{level:2,title:"リンティング/エラーチェック",slug:"リンティング-エラーチェック"},{level:2,title:"フォーマット",slug:"フォーマット"},{level:2,title:"インテリセンス",slug:"インテリセンス"},{level:2,title:"最後に",slug:"最後に"},{level:2,title:"バッジ",slug:"バッジ"},{level:2,title:"著者",slug:"著者"}]},{title:"Code of Conduct",frontmatter:{},regularPath:"/workshops/CODE_OF_CONDUCT.html",relativePath:"workshops/CODE_OF_CONDUCT.md",key:"v-9b3c64bc",path:"/workshops/CODE_OF_CONDUCT.html",headers:[{level:2,title:"1. Purpose",slug:"_1-purpose"},{level:2,title:"2. Open Source Citizenship",slug:"_2-open-source-citizenship"},{level:2,title:"3. Expected Behavior",slug:"_3-expected-behavior"},{level:2,title:"4. Unacceptable Behavior",slug:"_4-unacceptable-behavior"},{level:2,title:"5. Consequences of Unacceptable Behavior",slug:"_5-consequences-of-unacceptable-behavior"},{level:2,title:"6. Reporting Guidelines",slug:"_6-reporting-guidelines"},{level:2,title:"7. Addressing Grievances",slug:"_7-addressing-grievances"},{level:2,title:"8. Scope",slug:"_8-scope"},{level:2,title:"9. Contact info",slug:"_9-contact-info"},{level:2,title:"10. License and attribution",slug:"_10-license-and-attribution"}]},{title:"About Our Workshops",frontmatter:{},regularPath:"/workshops/",relativePath:"workshops/README.md",key:"v-330eff7f",path:"/workshops/",headers:[{level:2,title:"FAQ",slug:"faq"}]},{title:"React Workshops",frontmatter:{},regularPath:"/workshops/react/",relativePath:"workshops/react/README.md",key:"v-9f52bb42",path:"/workshops/react/"},{title:"Mini Workshop (number): 📱 A mobile mini-workshop (or 🖥️ A web mini-workshop)",frontmatter:{},regularPath:"/workshops/templates/mini_template.html",relativePath:"workshops/templates/mini_template.md",key:"v-f105383c",path:"/workshops/templates/mini_template.html",headers:[{level:2,title:"1. Scaffold your app",slug:"_1-scaffold-your-app"},{level:2,title:"2. Add some Styles",slug:"_2-add-some-styles"},{level:2,title:"3. Fix the UI",slug:"_3-fix-the-ui"},{level:2,title:"4. Add some data",slug:"_4-add-some-data"},{level:2,title:"Conclusion and challenge",slug:"conclusion-and-challenge"},{level:2,title:"Author",slug:"author"}]},{title:"Nano Activity (number): Title of Activity",frontmatter:{},regularPath:"/workshops/templates/nano_template.html",relativePath:"workshops/templates/nano_template.md",key:"v-4d70d202",path:"/workshops/templates/nano_template.html",headers:[{level:2,title:"1. Get Started",slug:"_1-get-started"},{level:2,title:"2. Step 1",slug:"_2-step-1"},{level:2,title:"3. Step 2",slug:"_3-step-2"},{level:2,title:"4. Step 3",slug:"_4-step-3"},{level:2,title:"5. Final Result",slug:"_5-final-result"},{level:2,title:"Conclusion and challenge",slug:"conclusion-and-challenge"},{level:2,title:"Badge",slug:"badge"},{level:2,title:"Author",slug:"author"}]},{title:"Vue Workshops",frontmatter:{},regularPath:"/workshops/vue/",relativePath:"workshops/vue/README.md",key:"v-33648c5e",path:"/workshops/vue/"},{title:"🤷 Appendix 1: Lost? Confused? Starting fresh?",frontmatter:{},regularPath:"/workshops/vue/full-day/appendix_1.html",relativePath:"workshops/vue/full-day/appendix_1.md",key:"v-38db7182",path:"/workshops/vue/full-day/appendix_1.html"},{title:"📌 Appendix 2: Add your CodeSandbox to your Github account",frontmatter:{},regularPath:"/workshops/vue/full-day/appendix_2.html",relativePath:"workshops/vue/full-day/appendix_2.md",key:"v-1fd1b8e2",path:"/workshops/vue/full-day/appendix_2.html"},{title:"🎧 6: Build a Spotify Music Player with the Composition API (beta!)",frontmatter:{},regularPath:"/workshops/vue/minis/mini6.html",relativePath:"workshops/vue/minis/mini6.md",key:"v-e76984fc",path:"/workshops/vue/minis/mini6.html",headers:[{level:2,title:"Read over these instructions",slug:"read-over-these-instructions"},{level:2,title:"Get started as a Spotify Developer",slug:"get-started-as-a-spotify-developer"},{level:2,title:"Pick and commit to your feature requirements for a minimum viable product (MVP)",slug:"pick-and-commit-to-your-feature-requirements-for-a-minimum-viable-product-mvp"},{level:2,title:"Open the Codesandbox template",slug:"open-the-codesandbox-template"},{level:2,title:"Augment basic UI",slug:"augment-basic-ui"},{level:2,title:"Create the data layer",slug:"create-the-data-layer"},{level:2,title:"Add UI finishing touches!",slug:"add-ui-finishing-touches"},{level:2,title:"Challenge",slug:"challenge"},{level:2,title:"Resources",slug:"resources"},{level:2,title:"Author",slug:"author"}]},{title:"🏠 3: Setup Visual Studio Code the Right Way for Vue (beginner)",frontmatter:{},regularPath:"/workshops/vue/nanos/nano3.html",relativePath:"workshops/vue/nanos/nano3.md",key:"v-990ac2bc",path:"/workshops/vue/nanos/nano3.html",headers:[{level:2,title:"Get Started",slug:"get-started"},{level:2,title:"Install Vetur",slug:"install-vetur"},{level:2,title:"Syntax Highlighting",slug:"syntax-highlighting"},{level:2,title:"Snippets",slug:"snippets"},{level:2,title:"Emmets",slug:"emmets"},{level:2,title:"Linting / Error checking",slug:"linting-error-checking"},{level:2,title:"Formatting",slug:"formatting"},{level:2,title:"IntelliSense",slug:"intellisense"},{level:2,title:"Conclusion",slug:"conclusion"},{level:2,title:"Badge",slug:"badge"},{level:2,title:"Author",slug:"author"}]},{title:"⏰ 4: Create a Computed Property to Display A Date (intermediate)",frontmatter:{},regularPath:"/workshops/vue/nanos/nano4.html",relativePath:"workshops/vue/nanos/nano4.md",key:"v-1c083702",path:"/workshops/vue/nanos/nano4.html",headers:[{level:2,title:"Get Started",slug:"get-started"},{level:2,title:"Preliminary Code Clean Up",slug:"preliminary-code-clean-up"},{level:2,title:"Setting up a label and form input",slug:"setting-up-a-label-and-form-input"},{level:2,title:"Creating a computed property",slug:"creating-a-computed-property"},{level:2,title:"Conclusion and Challenge",slug:"conclusion-and-challenge"},{level:2,title:"Badge",slug:"badge"},{level:2,title:"Author",slug:"author"}]},{title:"📋 Kapitel 1: Die My Pet Shop Web App",frontmatter:{},regularPath:"/de/workshops/vue/full-day/ch1.html",relativePath:"de/workshops/vue/full-day/ch1.md",key:"v-d8e73a3c",path:"/de/workshops/vue/full-day/ch1.html",headers:[{level:2,title:"Anleitung",slug:"anleitung"},{level:2,title:"Erzeuge die Styles",slug:"erzeuge-die-styles"},{level:2,title:"Vuetify installieren",slug:"vuetify-installieren"}]},{title:"📋 Kapitel 3: Anbindung einer API",frontmatter:{},regularPath:"/de/workshops/vue/full-day/ch3.html",relativePath:"de/workshops/vue/full-day/ch3.md",key:"v-28f802a2",path:"/de/workshops/vue/full-day/ch3.html",headers:[{level:2,title:"Anleitung",slug:"anleitung"},{level:2,title:"Axios hinzufügen",slug:"axios-hinzufugen"},{level:2,title:"API aufrufen",slug:"api-aufrufen"},{level:2,title:"Die API nutzen 1 - Statischen Inhalt ersetzen",slug:"die-api-nutzen-1-statischen-inhalt-ersetzen"},{level:2,title:"Die API nutzen 2 - Zufällige Bilder anzeigen",slug:"die-api-nutzen-2-zufallige-bilder-anzeigen"}]},{title:"📋 Chapter 3: Connect your Project to an API",frontmatter:{},regularPath:"/jp/workshops/vue/full-day/ch3.html",relativePath:"jp/workshops/vue/full-day/ch3.md",key:"v-92e1217c",path:"/jp/workshops/vue/full-day/ch3.html",headers:[{level:2,title:"What You'll Build",slug:"what-you-ll-build"},{level:2,title:"Instructions",slug:"instructions"},{level:2,title:"Add Axios",slug:"add-axios"},{level:2,title:"Call the API",slug:"call-the-api"},{level:2,title:"Use the API 1 - Replace Some of the Static Data",slug:"use-the-api-1-replace-some-of-the-static-data"},{level:2,title:"Use the API 2 - Randomize the Images",slug:"use-the-api-2-randomize-the-images"},{level:2,title:"Final result",slug:"final-result"}]},{title:"📱 Mini Workshop 2: ペットの情報を表示する Mobile アプリケーションの構築",frontmatter:{},regularPath:"/jp/workshops/vue/minis/mini2.html",relativePath:"jp/workshops/vue/minis/mini2.md",key:"v-5f953588",path:"/jp/workshops/vue/minis/mini2.html",headers:[{level:2,title:"アプリケーション基盤の構築",slug:"アプリケーション基盤の構築"},{level:2,title:"スタイルの追加",slug:"スタイルの追加"},{level:2,title:"UI の修正",slug:"ui-の修正"},{level:2,title:"データの追加",slug:"データの追加"},{level:2,title:"通信する",slug:"通信する"},{level:2,title:"Supplement 1: アプリに猫を追加",slug:"supplement-1-アプリに猫を追加"},{level:2,title:"UIの修正",slug:"uiの修正"},{level:2,title:"猫を読み込み",slug:"猫を読み込み"},{level:2,title:"UIを修正",slug:"uiを修正"},{level:2,title:"著者",slug:"著者"}]},{title:"📱Mini Workshop 4: Tinder風のモバイルアプリ「Tindogs」を作ろう!",frontmatter:{},regularPath:"/jp/workshops/vue/minis/mini4.html",relativePath:"jp/workshops/vue/minis/mini4.md",key:"v-25a42004",path:"/jp/workshops/vue/minis/mini4.html",headers:[{level:2,title:"今回構築するもの",slug:"今回構築するもの"},{level:2,title:"手順",slug:"手順"},{level:2,title:"NativeScript-Vue アプリをscaffoldしてデバイスを接続する",slug:"nativescript-vue-アプリをscaffoldしてデバイスを接続する"},{level:2,title:"いくつかのスタイルを追加",slug:"いくつかのスタイルを追加"},{level:2,title:"カードレイアウトを作成するプラグインを追加する",slug:"カードレイアウトを作成するプラグインを追加する"},{level:2,title:"データの追加",slug:"データの追加"},{level:2,title:"カードをスワイプ可能にする",slug:"カードをスワイプ可能にする"},{level:2,title:"アニメーションボタンを追加する",slug:"アニメーションボタンを追加する"}]},{title:"☎️ 2: APIを実行するためにAxiosを使おう (中級)",frontmatter:{},regularPath:"/jp/workshops/vue/nanos/nano2.html",relativePath:"jp/workshops/vue/nanos/nano2.md",key:"v-1f10ec7c",path:"/jp/workshops/vue/nanos/nano2.html",headers:[{level:2,title:"はじめに",slug:"はじめに"},{level:2,title:"デフォルトで記載されているコードのクリーンナップ",slug:"デフォルトで記載されているコードのクリーンナップ"},{level:2,title:"プロジェクトにAxiosを追加",slug:"プロジェクトにaxiosを追加"},{level:2,title:"Axios ライブラリのインポート",slug:"axios-ライブラリのインポート"},{level:2,title:"APIコールの呼び出し",slug:"apiコールの呼び出し"},{level:2,title:"データの使用",slug:"データの使用"},{level:2,title:"まとめとチャレンジ",slug:"まとめとチャレンジ"},{level:2,title:"バッジ",slug:"バッジ"},{level:2,title:"著者",slug:"著者"}]},{title:"😻 6: 愛の絵文字を拡散するモバイルアプリを作ろう （初級）",frontmatter:{},regularPath:"/jp/workshops/vue/nanos/nano6.html",relativePath:"jp/workshops/vue/nanos/nano6.md",key:"v-a9a27d18",path:"/jp/workshops/vue/nanos/nano6.html",headers:[{level:2,title:"アプリケーション基盤の構築",slug:"アプリケーション基盤の構築"},{level:2,title:"スタイルの追加",slug:"スタイルの追加"},{level:2,title:"リストデータの追加",slug:"リストデータの追加"},{level:2,title:"ビルドと作成したリストの確認",slug:"ビルドと作成したリストの確認"},{level:2,title:"リストをインタラクティブ(クリックしたら動くよう)に実装",slug:"リストをインタラクティブ-クリックしたら動くよう-に実装"},{level:2,title:"最終確認",slug:"最終確認"},{level:2,title:"まとめとチャレンジ",slug:"まとめとチャレンジ"},{level:2,title:"バッジ",slug:"バッジ"},{level:2,title:"著者",slug:"著者"}]},{title:"Contributors ✨",frontmatter:{},regularPath:"/workshops/TEAM.html",relativePath:"workshops/TEAM.md",key:"v-5d180d6e",path:"/workshops/TEAM.html"},{title:"📋 Chapter 1: Introducing the My Pet Shop Web App",frontmatter:{},regularPath:"/workshops/vue/full-day/ch1.html",relativePath:"workshops/vue/full-day/ch1.md",key:"v-2772a840",path:"/workshops/vue/full-day/ch1.html",headers:[{level:2,title:"What You'll Build",slug:"what-you-ll-build"},{level:2,title:"Instructions",slug:"instructions"},{level:2,title:"Build the Styles",slug:"build-the-styles"},{level:2,title:"Install Vuetify",slug:"install-vuetify"},{level:2,title:"Final result",slug:"final-result"}]},{title:"📋 Chapter 2: Build a Pet Gallery",frontmatter:{},regularPath:"/workshops/vue/full-day/ch2.html",relativePath:"workshops/vue/full-day/ch2.md",key:"v-623abcde",path:"/workshops/vue/full-day/ch2.html",headers:[{level:2,title:"What You'll Build",slug:"what-you-ll-build"},{level:2,title:"Instructions",slug:"instructions"},{level:2,title:"The Router",slug:"the-router"},{level:2,title:"Create the Home Page",slug:"create-the-home-page"},{level:2,title:"Create a Pets Page",slug:"create-a-pets-page"},{level:2,title:"Add the Routes",slug:"add-the-routes"},{level:2,title:"Add Navigation",slug:"add-navigation"},{level:2,title:"Build up some data",slug:"build-up-some-data"},{level:2,title:"Append the Data to a List",slug:"append-the-data-to-a-list"},{level:2,title:"Refactor the template - create a Prop!",slug:"refactor-the-template-create-a-prop"},{level:2,title:"Final result",slug:"final-result"}]},{title:"📋 Chapter 3: Connect your Project to an API",frontmatter:{},regularPath:"/workshops/vue/full-day/ch3.html",relativePath:"workshops/vue/full-day/ch3.md",key:"v-4fa26448",path:"/workshops/vue/full-day/ch3.html",headers:[{level:2,title:"What You'll Build",slug:"what-you-ll-build"},{level:2,title:"Instructions",slug:"instructions"},{level:2,title:"Add Axios",slug:"add-axios"},{level:2,title:"Call the API",slug:"call-the-api"},{level:2,title:"Use the API 1 - Replace Some of the Static Data",slug:"use-the-api-1-replace-some-of-the-static-data"},{level:2,title:"Use the API 2 - Randomize the Images",slug:"use-the-api-2-randomize-the-images"},{level:2,title:"Final result",slug:"final-result"}]},{title:"📱 3: Build A Simple Pet Display Mobile App",frontmatter:{},regularPath:"/workshops/vue/minis/mini3.html",relativePath:"workshops/vue/minis/mini3.md",key:"v-52a27462",path:"/workshops/vue/minis/mini3.html",headers:[{level:2,title:"Scaffold your app",slug:"scaffold-your-app"},{level:2,title:"Add some Styles",slug:"add-some-styles"},{level:2,title:"Fix the UI",slug:"fix-the-ui"},{level:2,title:"Add Some Data",slug:"add-some-data"},{level:2,title:"Make the Call",slug:"make-the-call"},{level:2,title:"Supplement 1: Adding a Cat to the App",slug:"supplement-1-adding-a-cat-to-the-app"},{level:2,title:"Edit the UI",slug:"edit-the-ui"},{level:2,title:"Call Some Cats",slug:"call-some-cats"},{level:2,title:"Edit the UI",slug:"edit-the-ui-2"},{level:2,title:"Author",slug:"author"}]},{title:"📱5: Build a Tinder-Style Mobile App: Tindogs!",frontmatter:{},regularPath:"/workshops/vue/minis/mini5.html",relativePath:"workshops/vue/minis/mini5.md",key:"v-23bda522",path:"/workshops/vue/minis/mini5.html",headers:[{level:2,title:"What You'll Build",slug:"what-you-ll-build"},{level:2,title:"Instructions",slug:"instructions"},{level:2,title:"Scaffold a NativeScript-Vue App and Connect your Device",slug:"scaffold-a-nativescript-vue-app-and-connect-your-device"},{level:2,title:"Add some Styles",slug:"add-some-styles"},{level:2,title:"Add a Plugin to Create a Card Layout",slug:"add-a-plugin-to-create-a-card-layout"},{level:2,title:"Add some Data",slug:"add-some-data"},{level:2,title:"Make the Cards Swipable",slug:"make-the-cards-swipable"},{level:2,title:"Add Some Animated Buttons",slug:"add-some-animated-buttons"}]},{title:"👜 1: Vuex 101 (intermediate)",frontmatter:{},regularPath:"/workshops/vue/nanos/nano1.html",relativePath:"workshops/vue/nanos/nano1.md",key:"v-3b41243c",path:"/workshops/vue/nanos/nano1.html",headers:[{level:2,title:"Get Started",slug:"get-started"},{level:2,title:"Install Vuex",slug:"install-vuex"},{level:2,title:"Fetch Some Remote Data and Store It",slug:"fetch-some-remote-data-and-store-it"},{level:2,title:"Fetch Data from the Store",slug:"fetch-data-from-the-store"},{level:2,title:"Modifying Data",slug:"modifying-data"},{level:2,title:"Conclusion and Challenge",slug:"conclusion-and-challenge"},{level:2,title:"Badge",slug:"badge"},{level:2,title:"Author",slug:"author"}]},{title:"☎️ 2: Use Axios to Call an API (intermediate)",frontmatter:{},regularPath:"/workshops/vue/nanos/nano2.html",relativePath:"workshops/vue/nanos/nano2.md",key:"v-4aed0642",path:"/workshops/vue/nanos/nano2.html",headers:[{level:2,title:"Get Started",slug:"get-started"},{level:2,title:"Preliminary Code Clean Up",slug:"preliminary-code-clean-up"},{level:2,title:"Adding Axios to the project",slug:"adding-axios-to-the-project"},{level:2,title:"Importing the Axios library",slug:"importing-the-axios-library"},{level:2,title:"Create the API call",slug:"create-the-api-call"},{level:2,title:"Using the Data",slug:"using-the-data"},{level:2,title:"Conclusion and Challenge",slug:"conclusion-and-challenge"},{level:2,title:"Badge",slug:"badge"},{level:2,title:"Author",slug:"author"}]},{title:"🔨 5: Scaffold a Nuxt App and Explore Its Architecture (Advanced)",frontmatter:{},regularPath:"/workshops/vue/nanos/nano5.html",relativePath:"workshops/vue/nanos/nano5.md",key:"v-f6d4613c",path:"/workshops/vue/nanos/nano5.html",headers:[{level:2,title:"Scaffolding Your App",slug:"scaffolding-your-app"},{level:2,title:"Exploring the structure",slug:"exploring-the-structure"},{level:2,title:"Pages in Depth",slug:"pages-in-depth"},{level:3,title:"Dynamic Routes",slug:"dynamic-routes"},{level:2,title:"Layouts in Depth",slug:"layouts-in-depth"},{level:2,title:"Conclusion and Challenge",slug:"conclusion-and-challenge"},{level:2,title:"Badge",slug:"badge"},{level:2,title:"Author",slug:"author"}]},{title:"😻 6: Create a Mobile App to Spread Emoji Love (Beginner)",frontmatter:{},regularPath:"/workshops/vue/nanos/nano6.html",relativePath:"workshops/vue/nanos/nano6.md",key:"v-25b9307c",path:"/workshops/vue/nanos/nano6.html",headers:[{level:2,title:"Scaffold Your App",slug:"scaffold-your-app"},{level:2,title:"Add Some Styles",slug:"add-some-styles"},{level:2,title:"Add List Data",slug:"add-list-data"},{level:2,title:"Build the ListView",slug:"build-the-listview"},{level:2,title:"Make the List Interactive",slug:"make-the-list-interactive"},{level:2,title:"Final Result",slug:"final-result"},{level:2,title:"Conclusion and Challenge",slug:"conclusion-and-challenge"},{level:2,title:"Badge",slug:"badge"},{level:2,title:"Author",slug:"author"}]},{title:"📋 Kapitel 2: Baue eine Haustier-Galerie",frontmatter:{},regularPath:"/de/workshops/vue/full-day/ch2.html",relativePath:"de/workshops/vue/full-day/ch2.md",key:"v-5e4232c2",path:"/de/workshops/vue/full-day/ch2.html",headers:[{level:2,title:"Anleitung",slug:"anleitung"},{level:2,title:"Der Router",slug:"der-router"},{level:2,title:"Eine Homepage erstellen",slug:"eine-homepage-erstellen"},{level:2,title:"Eine Haustier-Seite erstellen",slug:"eine-haustier-seite-erstellen"},{level:2,title:"Die Routen hinzufügen",slug:"die-routen-hinzufugen"},{level:2,title:"Navigation hinzufügen",slug:"navigation-hinzufugen"},{level:2,title:"Daten erstellen",slug:"daten-erstellen"},{level:2,title:"Die Daten in einer Liste ausgeben",slug:"die-daten-in-einer-liste-ausgeben"},{level:2,title:"Überarbeitung des Templates - Property!",slug:"uberarbeitung-des-templates-property"},{level:2,title:"Ergebnis",slug:"ergebnis"}]},{title:"📋 Kapitel 4: Eine Merkliste erstellen",frontmatter:{},regularPath:"/de/workshops/vue/full-day/ch4.html",relativePath:"de/workshops/vue/full-day/ch4.md",key:"v-18a45afc",path:"/de/workshops/vue/full-day/ch4.html",headers:[{level:2,title:"Anleitung",slug:"anleitung"},{level:2,title:"Die Merkliste bauen",slug:"die-merkliste-bauen"},{level:2,title:"Den Zustand der Liste mit Vuex verwalten",slug:"den-zustand-der-liste-mit-vuex-verwalten"},{level:2,title:"Favoriten hinzufügen",slug:"favoriten-hinzufugen"},{level:2,title:"UI Anpassungen",slug:"ui-anpassungen"},{level:2,title:"Hunde hinzufügen und entfernen",slug:"hunde-hinzufugen-und-entfernen"},{level:2,title:"Die UI bauen",slug:"die-ui-bauen"},{level:2,title:"Die Logik verbessern",slug:"die-logik-verbessern"},{level:2,title:"Favoriten von der Liste entfernen",slug:"favoriten-von-der-liste-entfernen"}]},{title:"📋 Kapitel 5: Ein Formular zum Adoptieren hinzufügen",frontmatter:{},regularPath:"/de/workshops/vue/full-day/ch5.html",relativePath:"de/workshops/vue/full-day/ch5.md",key:"v-8338bb3c",path:"/de/workshops/vue/full-day/ch5.html",headers:[{level:2,title:"Anleitung",slug:"anleitung"},{level:2,title:"Gerüst für die Formular-Komponente",slug:"gerust-fur-die-formular-komponente"},{level:2,title:"Das Formular bauen",slug:"das-formular-bauen"},{level:2,title:"Einen Absenden-Button hinzufügen",slug:"einen-absenden-button-hinzufugen"},{level:2,title:"Daten-Verknüpfung",slug:"daten-verknupfung"},{level:2,title:"Die abgeschickten Informationen anzeigen",slug:"die-abgeschickten-informationen-anzeigen"},{level:2,title:"Daten von einer Bedingung abhängig anzeigen",slug:"daten-von-einer-bedingung-abhangig-anzeigen"},{level:2,title:"Validierung hinzufügen",slug:"validierung-hinzufugen"},{level:2,title:"Validierung 1: Name",slug:"validierung-1-name"},{level:2,title:"Validierung 2: Email",slug:"validierung-2-email"},{level:2,title:"Validierung 3: Telefon",slug:"validierung-3-telefon"},{level:2,title:"Lösche alle Favoriten beim Absenden des Formulars",slug:"losche-alle-favoriten-beim-absenden-des-formulars"},{level:2,title:"Ergebnis",slug:"ergebnis"}]},{title:"📋 Chapter 4: Create a Dog Adoption Experience",frontmatter:{},regularPath:"/workshops/vue/full-day/ch4.html",relativePath:"workshops/vue/full-day/ch4.md",key:"v-4e22deda",path:"/workshops/vue/full-day/ch4.html",headers:[{level:2,title:"What You'll Build",slug:"what-you-ll-build"},{level:2,title:"Instructions",slug:"instructions"},{level:2,title:"Build the Loyalty List",slug:"build-the-loyalty-list"},{level:2,title:"Manage the List's State with Vuex",slug:"manage-the-list-s-state-with-vuex"},{level:2,title:"Populate Favorites",slug:"populate-favorites"},{level:2,title:"UI Tweaks",slug:"ui-tweaks"},{level:2,title:"Add and Remove Dogs",slug:"add-and-remove-dogs"},{level:2,title:"Build the UI",slug:"build-the-ui"},{level:2,title:"Enhance the Logic",slug:"enhance-the-logic"},{level:2,title:"Remove from List",slug:"remove-from-list"},{level:2,title:"Final result",slug:"final-result"}]},{title:"📋 Chapter 5: Complete the Adoption Experience with a Form",frontmatter:{},regularPath:"/workshops/vue/full-day/ch5.html",relativePath:"workshops/vue/full-day/ch5.md",key:"v-77d22050",path:"/workshops/vue/full-day/ch5.html",headers:[{level:2,title:"What You'll Build",slug:"what-you-ll-build"},{level:2,title:"Instructions",slug:"instructions"},{level:2,title:"Scaffold the Form Component",slug:"scaffold-the-form-component"},{level:2,title:"Build the Form",slug:"build-the-form"},{level:2,title:"Add a Submit Button",slug:"add-a-submit-button"},{level:2,title:"Bind Some Data",slug:"bind-some-data"},{level:2,title:"Display Submitted Data",slug:"display-submitted-data"},{level:2,title:"Display Data Conditionally",slug:"display-data-conditionally"},{level:2,title:"Add Validation",slug:"add-validation"},{level:2,title:"Validation 1: Name",slug:"validation-1-name"},{level:2,title:"Validation 2: Email",slug:"validation-2-email"},{level:2,title:"Validation 3: Phone",slug:"validation-3-phone"},{level:2,title:"Clear the Favorites List On Submit",slug:"clear-the-favorites-list-on-submit"},{level:2,title:"Final result",slug:"final-result"}]},{title:"📋 Chapter 4: 犬の里親体験アプリの作成",frontmatter:{},regularPath:"/jp/workshops/vue/full-day/ch4.html",relativePath:"jp/workshops/vue/full-day/ch4.md",key:"v-fd7581bc",path:"/jp/workshops/vue/full-day/ch4.html",headers:[{level:2,title:"今回構築するもの",slug:"今回構築するもの"},{level:2,title:"手順",slug:"手順"},{level:2,title:"ロイヤルティリストの作成",slug:"ロイヤルティリストの作成"},{level:2,title:"Vuex でリストの状態を管理する",slug:"vuex-でリストの状態を管理する"},{level:2,title:"お気に入りを登録",slug:"お気に入りを登録"},{level:2,title:"UI の微調整",slug:"ui-の微調整"},{level:2,title:"犬の追加と削除",slug:"犬の追加と削除"},{level:2,title:"UI を構築する",slug:"ui-を構築する"},{level:2,title:"ロジックを強化する",slug:"ロジックを強化する"},{level:2,title:"リストから削除",slug:"リストから削除"},{level:2,title:"最終結果",slug:"最終結果"}]},{title:"🌈🦄 Mini Workshop 3: Particle Photon デバイスをライトアップする Rainbow/Unicorn なモバイルアプリを作成する",frontmatter:{},regularPath:"/jp/workshops/vue/minis/mini3.html",relativePath:"jp/workshops/vue/minis/mini3.md",key:"v-7ac6aa74",path:"/jp/workshops/vue/minis/mini3.html",headers:[{level:2,title:"Photon をセットアップする",slug:"photon-をセットアップする"},{level:3,title:"1. Photon を Wi-Fi に接続します：",slug:"_1-photon-を-wi-fi-に接続します"},{level:3,title:"2. Particle Build について学ぶ",slug:"_2-particle-build-について学ぶ"},{level:3,title:"3. いくつかのコードをフラッシュする",slug:"_3-いくつかのコードをフラッシュする"},{level:3,title:"4. Photon コードを完成させる",slug:"_4-photon-コードを完成させる"},{level:3,title:"5. モバイルアプリで Photon の REST API を使用する準備をする",slug:"_5-モバイルアプリで-photon-の-rest-api-を使用する準備をする"},{level:3,title:"6. 最終的な Photon コード",slug:"_6-最終的な-photon-コード"},{level:2,title:"アプリを Scaffold する",slug:"アプリを-scaffold-する"},{level:2,title:"ベースのマークアップを作成する",slug:"ベースのマークアップを作成する"},{level:2,title:"CSS を追加する",slug:"css-を追加する"},{level:2,title:"メソッドの作成（1）",slug:"メソッドの作成-1"},{level:2,title:"Photon を接続する",slug:"photon-を接続する"},{level:2,title:"メソッドの作成（2）",slug:"メソッドの作成-2"},{level:2,title:"Author",slug:"author"}]},{title:"🛍️ 1: Build An E-Commerce App",frontmatter:{},regularPath:"/workshops/react/minis/ecommerce.html",relativePath:"workshops/react/minis/ecommerce.md",key:"v-290dbc7c",path:"/workshops/react/minis/ecommerce.html",headers:[{level:3,title:"Prerequisites",slug:"prerequisites"},{level:2,title:"Getting Started",slug:"getting-started"},{level:3,title:"Basic React App Structure:",slug:"basic-react-app-structure"},{level:2,title:"Install our commerce API",slug:"install-our-commerce-api"},{level:2,title:"Link up our Commerce instance",slug:"link-up-our-commerce-instance"},{level:2,title:"Make your first request to fetch the products data",slug:"make-your-first-request-to-fetch-the-products-data"},{level:2,title:"Start to style your components",slug:"start-to-style-your-components"},{level:2,title:"Create our product item component",slug:"create-our-product-item-component"},{level:2,title:"Create our products list component",slug:"create-our-products-list-component"},{level:2,title:"Conclusion",slug:"conclusion"},{level:3,title:"Author",slug:"author"}]},{title:"🖥️ 1: Build A Simple Pet Fetching Web App",frontmatter:{},regularPath:"/workshops/react/minis/mini1-react.html",relativePath:"workshops/react/minis/mini1-react.md",key:"v-5b83fdc2",path:"/workshops/react/minis/mini1-react.html",headers:[{level:2,title:"Install required packages",slug:"install-required-packages"},{level:2,title:"Scaffold your app",slug:"scaffold-your-app"},{level:3,title:"Basic React App Structure:",slug:"basic-react-app-structure"},{level:2,title:"Add the Styles",slug:"add-the-styles"},{level:2,title:"Adding Materialize",slug:"adding-materialize"},{level:2,title:"Add some data",slug:"add-some-data"},{level:2,title:"Add Axios to Our Code",slug:"add-axios-to-our-code"},{level:2,title:"Making the (API) call! ☎️",slug:"making-the-api-call-☎️"},{level:2,title:"Using the API",slug:"using-the-api"},{level:2,title:"Build the Favorites List",slug:"build-the-favorites-list"},{level:2,title:"Adding dogs to favorites",slug:"adding-dogs-to-favorites"},{level:2,title:"Removing dogs from Favorites",slug:"removing-dogs-from-favorites"},{level:2,title:"Supplement 1: Creating a dog Component",slug:"supplement-1-creating-a-dog-component"},{level:2,title:"Adapting App.js to use dog Component",slug:"adapting-app-js-to-use-dog-component"}]},{title:"🖥️ 1: Build A Simple Pet Fetching Web App",frontmatter:{},regularPath:"/workshops/vue/minis/mini1.html",relativePath:"workshops/vue/minis/mini1.md",key:"v-fcf178bc",path:"/workshops/vue/minis/mini1.html",headers:[{level:2,title:"Scaffold your app",slug:"scaffold-your-app"},{level:2,title:"Add the Styles",slug:"add-the-styles"},{level:2,title:"Install Vuetify",slug:"install-vuetify"},{level:2,title:"Add some data",slug:"add-some-data"},{level:2,title:"Add Axios",slug:"add-axios"},{level:2,title:"Call the API",slug:"call-the-api"},{level:2,title:"Use the API",slug:"use-the-api"},{level:2,title:"Build the Favorites List",slug:"build-the-favorites-list"},{level:2,title:"Adding Dogs to Favorites",slug:"adding-dogs-to-favorites"},{level:2,title:"Removing Dogs from Favorites",slug:"removing-dogs-from-favorites"},{level:2,title:"Push your work to a repository on your GitHub account",slug:"push-your-work-to-a-repository-on-your-github-account"},{level:2,title:"Supplement 1: Creating a Dog Component",slug:"supplement-1-creating-a-dog-component"},{level:2,title:"Supplement 2: Add Animations",slug:"supplement-2-add-animations"},{level:2,title:"Author",slug:"author"}]},{title:"🖥️ 2: Build A Simple Fox Liking Web App with Grid Styling",frontmatter:{},regularPath:"/workshops/vue/minis/mini2.html",relativePath:"workshops/vue/minis/mini2.md",key:"v-2bd647fc",path:"/workshops/vue/minis/mini2.html",headers:[{level:2,title:"Scaffold your app",slug:"scaffold-your-app"},{level:2,title:"Add the Styles",slug:"add-the-styles"},{level:2,title:"Edit the HTML",slug:"edit-the-html"},{level:2,title:"Add some data",slug:"add-some-data"},{level:2,title:"Call an API",slug:"call-an-api"},{level:2,title:"Use the API",slug:"use-the-api"},{level:2,title:"Build the Favorites List",slug:"build-the-favorites-list"},{level:2,title:"Adding Foxes to Favorites",slug:"adding-foxes-to-favorites"},{level:2,title:"Removing Foxes from Favorites",slug:"removing-foxes-from-favorites"},{level:2,title:"Push your work to a repository on your GitHub account",slug:"push-your-work-to-a-repository-on-your-github-account"},{level:2,title:"Refactor 1: Creating a Fox Component",slug:"refactor-1-creating-a-fox-component"},{level:2,title:"Refactor 2: Add Animations",slug:"refactor-2-add-animations"},{level:2,title:"Authors",slug:"authors"}]},{title:"🌈🦄 4: Build a Rainbow/Unicorn Mobile App that Lights Up a Particle Photon Device",frontmatter:{},regularPath:"/workshops/vue/minis/mini4.html",relativePath:"workshops/vue/minis/mini4.md",key:"v-899fe67c",path:"/workshops/vue/minis/mini4.html",headers:[{level:2,title:"Set Up Your Photon",slug:"set-up-your-photon"},{level:3,title:"1. Connect the Photon to WiFi:",slug:"_1-connect-the-photon-to-wifi"},{level:3,title:"2. Learn About Particle Build",slug:"_2-learn-about-particle-build"},{level:3,title:"3. Flash Some Code",slug:"_3-flash-some-code"},{level:3,title:"4. Complete the Photon Code",slug:"_4-complete-the-photon-code"},{level:3,title:"5. Get Ready for the Mobile App to use Photon's REST API",slug:"_5-get-ready-for-the-mobile-app-to-use-photon-s-rest-api"},{level:3,title:"6. Final Photon Code",slug:"_6-final-photon-code"},{level:2,title:"Scaffold your app",slug:"scaffold-your-app"},{level:2,title:"Create the Base Markup",slug:"create-the-base-markup"},{level:2,title:"Add some CSS",slug:"add-some-css"},{level:2,title:"Create A Method (1)",slug:"create-a-method-1"},{level:2,title:"Connect Your Photon",slug:"connect-your-photon"},{level:2,title:"Create a Method (2)",slug:"create-a-method-2"},{level:2,title:"Author",slug:"author"}]},{title:"🖥️ 1 : Créer une petite application Web de récupération d'images d'animaux de compagnie",frontmatter:{},regularPath:"/fr/workshops/vue/minis/mini1.html",relativePath:"fr/workshops/vue/minis/mini1.md",key:"v-49591084",path:"/fr/workshops/vue/minis/mini1.html",headers:[{level:2,title:"Créez votre application",slug:"creez-votre-application"},{level:2,title:"Ajouter les styles",slug:"ajouter-les-styles"},{level:2,title:"Installer Vuetify",slug:"installer-vuetify"},{level:2,title:"Ajouter des données",slug:"ajouter-des-donnees"},{level:2,title:"Ajouter Axios",slug:"ajouter-axios"},{level:2,title:"Appel API",slug:"appel-api"},{level:2,title:"Utiliser l'API",slug:"utiliser-l-api"},{level:2,title:"Créer la liste de favoris",slug:"creer-la-liste-de-favoris"},{level:2,title:"Ajout aux favoris",slug:"ajout-aux-favoris"},{level:2,title:"Suppression des favoris",slug:"suppression-des-favoris"},{level:2,title:"Supplément 1 : Création d'un composant Dog",slug:"supplement-1-creation-d-un-composant-dog"},{level:2,title:"Supplément 2 : Ajout d'animations",slug:"supplement-2-ajout-d-animations"},{level:2,title:"Auteure",slug:"auteure"}]},{title:"🐶 Mini Workshop 1: ペットの情報を取得する Web アプリケーションの構築",frontmatter:{},regularPath:"/jp/workshops/vue/minis/mini1.html",relativePath:"jp/workshops/vue/minis/mini1.md",key:"v-06e47f6c",path:"/jp/workshops/vue/minis/mini1.html",headers:[{level:2,title:"Scaffold your app - アプリケーション基盤の構築",slug:"scaffold-your-app-アプリケーション基盤の構築"},{level:2,title:"Add the Styles - スタイルの実装",slug:"add-the-styles-スタイルの実装"},{level:2,title:"Install Vuetify - Vuetify の導入",slug:"install-vuetify-vuetify-の導入"},{level:2,title:"Add some data - データの操作",slug:"add-some-data-データの操作"},{level:2,title:"Add Axios - Axios の導入",slug:"add-axios-axios-の導入"},{level:2,title:"Call the API - API コールの実装",slug:"call-the-api-api-コールの実装"},{level:2,title:"Use the API - API データの利用",slug:"use-the-api-api-データの利用"},{level:2,title:"Build the Favorites - お気に入り機能の構築",slug:"build-the-favorites-お気に入り機能の構築"},{level:2,title:"Adding dogs to Favorites - お気に入り追加機能の実装",slug:"adding-dogs-to-favorites-お気に入り追加機能の実装"},{level:2,title:"Removing dogs from Favorites - お気に入り削除機能の実装",slug:"removing-dogs-from-favorites-お気に入り削除機能の実装"},{level:2,title:"Supplement 1: Creating a Dog Component - Dog コンポーネントの作成",slug:"supplement-1-creating-a-dog-component-dog-コンポーネントの作成"},{level:2,title:"Supplement 2: Add animations - アニメーションの実装",slug:"supplement-2-add-animations-アニメーションの実装"},{level:2,title:"Author - 著者",slug:"author-著者"}]},{title:"🖥️ 1: Build A Simple Pet Fetching Web App using React Hooks",frontmatter:{},regularPath:"/workshops/react/minis/mini2-react-hooks.html",relativePath:"workshops/react/minis/mini2-react-hooks.md",key:"v-03b60c7c",path:"/workshops/react/minis/mini2-react-hooks.html",headers:[{level:2,title:"Scaffold your app",slug:"scaffold-your-app"},{level:2,title:"Install required packages",slug:"install-required-packages"},{level:3,title:"Basic React App Structure:",slug:"basic-react-app-structure"},{level:2,title:"Add the Styles",slug:"add-the-styles"},{level:2,title:"Adding Materialize",slug:"adding-materialize"},{level:2,title:"Add some data",slug:"add-some-data"},{level:2,title:"Add Axios to Our Code",slug:"add-axios-to-our-code"},{level:2,title:"Making the (API) call! ☎️",slug:"making-the-api-call-☎️"},{level:2,title:"Using the API",slug:"using-the-api"},{level:2,title:"Build the Favorites List",slug:"build-the-favorites-list"},{level:2,title:"Adding dogs to favorites",slug:"adding-dogs-to-favorites"},{level:2,title:"Removing dogs from Favorites",slug:"removing-dogs-from-favorites"},{level:2,title:"Supplement 1: Creating a dog Component",slug:"supplement-1-creating-a-dog-component"},{level:2,title:"Adapting App.js to use dog Component",slug:"adapting-app-js-to-use-dog-component"},{level:2,title:"Author",slug:"author"}]},{title:"🃏 1: Build an Accessible Memory Game",frontmatter:{},regularPath:"/workshops/vue/half-day/half-day1.html",relativePath:"workshops/vue/half-day/half-day1.md",key:"v-f71410dc",path:"/workshops/vue/half-day/half-day1.html",headers:[{level:2,title:"What You'll Build",slug:"what-you-ll-build"},{level:2,title:"Add a Component",slug:"add-a-component"},{level:2,title:"Setting Up the Board",slug:"setting-up-the-board"},{level:3,title:"Controllers",slug:"controllers"},{level:3,title:"Game Board",slug:"game-board"},{level:3,title:"Game Logic",slug:"game-logic"},{level:3,title:"Adding Functionality",slug:"adding-functionality"},{level:3,title:"Scoring",slug:"scoring"},{level:3,title:"Reset",slug:"reset"},{level:3,title:"Winning!",slug:"winning"},{level:2,title:"Add UI finishing touches",slug:"add-ui-finishing-touches"},{level:2,title:"Challenge",slug:"challenge"},{level:3,title:"Update Metadata (titles)",slug:"update-metadata-titles"},{level:3,title:"Announce Route Update",slug:"announce-route-update"},{level:3,title:"Add Skip to Main Content link",slug:"add-skip-to-main-content-link"},{level:3,title:"Announce gameplay",slug:"announce-gameplay"},{level:3,title:"Update Winning to focus",slug:"update-winning-to-focus"},{level:2,title:"Resources",slug:"resources"},{level:2,title:"Author",slug:"author"}]},{title:"🎩 7: Build a Harry Potter Movie Quiz",frontmatter:{},regularPath:"/workshops/vue/minis/mini7.html",relativePath:"workshops/vue/minis/mini7.md",key:"v-164e543c",path:"/workshops/vue/minis/mini7.html",headers:[{level:2,title:"Step 1: Setting up the Vue App with CodeSandbox",slug:"step-1-setting-up-the-vue-app-with-codesandbox"},{level:3,title:"Achievement",slug:"achievement"},{level:2,title:'Step 2: Create your first Vue component: "Quiz.vue"',slug:"step-2-create-your-first-vue-component-quiz-vue"},{level:3,title:"Styling the Quiz",slug:"styling-the-quiz"},{level:3,title:"Binding an Action",slug:"binding-an-action"},{level:3,title:"Adding Data",slug:"adding-data"},{level:3,title:"Toggling Elements",slug:"toggling-elements"},{level:3,title:"Achievement",slug:"achievement-2"},{level:2,title:"Step 3: Using the Quiz data",slug:"step-3-using-the-quiz-data"},{level:3,title:"Build the Quiz interface",slug:"build-the-quiz-interface"},{level:3,title:"Achievement",slug:"achievement-3"},{level:2,title:"Step 4: Displaying possible movie options",slug:"step-4-displaying-possible-movie-options"},{level:3,title:"Achievement",slug:"achievement-4"},{level:2,title:"Step 5: Evaluate the option that was clicked",slug:"step-5-evaluate-the-option-that-was-clicked"},{level:3,title:"Achievement",slug:"achievement-5"},{level:2,title:"Step 6: Proceed with next question",slug:"step-6-proceed-with-next-question"},{level:3,title:"Achievement",slug:"achievement-6"},{level:2,title:"Step 7: Introducing usage of store and saving data in local storage",slug:"step-7-introducing-usage-of-store-and-saving-data-in-local-storage"},{level:3,title:"Refactor to handle the store",slug:"refactor-to-handle-the-store"},{level:3,title:"Achievement",slug:"achievement-7"},{level:2,title:"Step 8: Create the score view",slug:"step-8-create-the-score-view"},{level:3,title:"Achievement",slug:"achievement-8"},{level:2,title:"Author",slug:"author"},{level:2,title:"Instructions",slug:"instructions-2"}]}],themeConfig:{repo:"frontendfoxes/curriculum/",editLinks:!0,editLinkText:"Help us improve this page!",nav:[{text:"React Workshops",link:"/workshops/react/"},{text:"Vue Workshops",link:"/workshops/vue/"},{text:"Code of Conduct",link:"/workshops/CODE_OF_CONDUCT"},{text:"Team",link:"/workshops/TEAM"}],locales:{"/":{selectText:"Languages",label:"English",sidebar:{"/workshops/react":[{title:"🦴 Mini Workshops",children:["/workshops/react/minis/ecommerce"]}],"/workshops/vue":[{title:"🐶 Full Day Workshop",children:["/workshops/vue/full-day/ch1","/workshops/vue/full-day/ch2","/workshops/vue/full-day/ch3","/workshops/vue/full-day/ch4","/workshops/vue/full-day/ch5","/workshops/vue/full-day/appendix_1","/workshops/vue/full-day/appendix_2"]},{title:"🐾 Half-Day Workshops",children:["/workshops/vue/half-day/half-day1"]},{title:"🦴 Mini Workshops",children:["/workshops/vue/minis/mini1","/workshops/vue/minis/mini2","/workshops/vue/minis/mini3","/workshops/vue/minis/mini4","/workshops/vue/minis/mini5","/workshops/vue/minis/mini6"]},{title:"👩‍🎓 Nano Activities",children:["/workshops/vue/nanos/nano1","/workshops/vue/nanos/nano2","/workshops/vue/nanos/nano3","/workshops/vue/nanos/nano4","/workshops/vue/nanos/nano5","/workshops/vue/nanos/nano6"]}]}},"/de/":{selectText:"Sprache",label:"Deutsch",sidebar:[{title:"🐶 Tagesworkshop",children:["/de/workshops/vue/full-day/ch1","/de/workshops/vue/full-day/ch2","/de/workshops/vue/full-day/ch3","/de/workshops/vue/full-day/ch4","/de/workshops/vue/full-day/ch5","/de/workshops/vue/full-day/appendix_1"]}]},"/fr/":{selectText:"Langue",label:"Français",sidebar:[{title:"🦴Ateliers Minis",children:["/fr/workshops/vue/minis/mini1"]}]},"/jp/":{selectText:"言語",label:"日本語",sidebar:[{title:"🐶 フルデイワークショップ",children:["/jp/workshops/vue/full-day/ch4"]},{title:"🦴ミニワークショップ",children:["/jp/workshops/vue/minis/mini1","/jp/workshops/vue/minis/mini2","/jp/workshops/vue/minis/mini3","/jp/workshops/vue/minis/mini4"]},{title:"👩‍🎓 ナノアクティビティ",children:["/jp/workshops/vue/nanos/nano2","/jp/workshops/vue/nanos/nano3","/jp/workshops/vue/nanos/nano6"]}]}}},locales:{"/":{lang:"en-US",title:"Front-End Foxes Workshops",description:"Workshops to teach web and mobile development to beginners",path:"/"},"/de/":{lang:"de-DE",title:"Front-End Foxes Workshops",description:"Anfänger-Workshops für Web-Entwicklung",path:"/de/"},"/fr/":{lang:"fr-FR",title:"Front-End Foxes Workshops",description:"Ateliers pour apprendre la programmation web et mobile",path:"/fr/"},"/jp/":{lang:"jp-JP",title:"Front-End Foxes Workshops",description:"ワークショップ",path:"/jp/"}}};n(234);Hn.component("Badge",()=>Promise.all([n.e(0),n.e(4)]).then(n.bind(null,442))),Hn.component("CodeBlock",()=>Promise.all([n.e(0),n.e(5)]).then(n.bind(null,426))),Hn.component("CodeGroup",()=>Promise.all([n.e(0),n.e(6)]).then(n.bind(null,425)));n(235);var $s=[{},({Vue:e})=>{e.mixin({computed:{$dataBlock(){return this.$options.__data__block__}}})},{},{}],Ts=[];class Ls extends class{constructor(){this.store=new Hn({data:{state:{}}})}$get(e){return this.store.state[e]}$set(e,t){Hn.set(this.store.state,e,t)}$emit(...e){this.store.$emit(...e)}$on(...e){this.store.$on(...e)}}{}Object.assign(Ls.prototype,{getPageAsyncComponent:as,getLayoutAsyncComponent:ss,getAsyncComponent:ls,getVueComponent:us});var Is={install(e){const t=new Ls;e.$vuepress=t,e.prototype.$vuepress=t}};function Rs(e,t){const n=t.toLowerCase();return e.options.routes.some(e=>e.path.toLowerCase()===n)}var Ds={props:{pageKey:String,slotKey:{type:String,default:"default"}},render(e){const t=this.pageKey||this.$parent.$page.key;return ps("pageKey",t),Hn.component(t)||Hn.component(t,as(t)),Hn.component(t)?e(t):e("")}},Ms={functional:!0,props:{slotKey:String,required:!0},render:(e,{props:t,slots:n})=>e("div",{class:["content__"+t.slotKey]},n()[t.slotKey])},Fs={computed:{openInNewWindowTitle(){return this.$themeLocaleConfig.openNewWindowText||"(opens new window)"}}},Us=(n(236),n(237),Object(Ps.a)(Fs,(function(){var e=this._self._c;return e("span",[e("svg",{staticClass:"icon outbound",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"15",height:"15"}},[e("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),this._v(" "),e("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})]),this._v(" "),e("span",{staticClass:"sr-only"},[this._v(this._s(this.openInNewWindowTitle))])])}),[],!1,null,null,null).exports),Bs={functional:!0,render(e,{parent:t,children:n}){if(t._isMounted)return n;t.$once("hook:mounted",()=>{t.$forceUpdate()})}};Hn.config.productionTip=!1,Hn.use(Wa),Hn.use(Is),Hn.mixin(function(e,t,n=Hn){!function(e){e.locales&&Object.keys(e.locales).forEach(t=>{e.locales[t].path=t});Object.freeze(e)}(t),n.$vuepress.$set("siteData",t);const r=new(e(n.$vuepress.$get("siteData"))),o=Object.getOwnPropertyDescriptors(Object.getPrototypeOf(r)),i={};return Object.keys(o).reduce((e,t)=>(t.startsWith("$")&&(e[t]=o[t].get),e),i),{computed:i}}(e=>class{setPage(e){this.__page=e}get $site(){return e}get $themeConfig(){return this.$site.themeConfig}get $frontmatter(){return this.$page.frontmatter}get $localeConfig(){const{locales:e={}}=this.$site;let t,n;for(const r in e)"/"===r?n=e[r]:0===this.$page.path.indexOf(r)&&(t=e[r]);return t||n||{}}get $siteTitle(){return this.$localeConfig.title||this.$site.title||""}get $canonicalUrl(){const{canonicalUrl:e}=this.$page.frontmatter;return"string"==typeof e&&e}get $title(){const e=this.$page,{metaTitle:t}=this.$page.frontmatter;if("string"==typeof t)return t;const n=this.$siteTitle,r=e.frontmatter.home?null:e.frontmatter.title||e.title;return n?r?r+" | "+n:n:r||"VuePress"}get $description(){const e=function(e){if(e){const t=e.filter(e=>"description"===e.name)[0];if(t)return t.content}}(this.$page.frontmatter.meta);return e||(this.$page.frontmatter.description||this.$localeConfig.description||this.$site.description||"")}get $lang(){return this.$page.frontmatter.lang||this.$localeConfig.lang||"en-US"}get $localePath(){return this.$localeConfig.path||"/"}get $themeLocaleConfig(){return(this.$site.themeConfig.locales||{})[this.$localePath]||{}}get $page(){return this.__page?this.__page:function(e,t){for(let n=0;n<e.length;n++){const r=e[n];if(r.path.toLowerCase()===t.toLowerCase())return r}return{path:"",frontmatter:{}}}(this.$site.pages,this.$route.path)}},Es)),Hn.component("Content",Ds),Hn.component("ContentSlotsDistributor",Ms),Hn.component("OutboundLink",Us),Hn.component("ClientOnly",Bs),Hn.component("Layout",ss("Layout")),Hn.component("NotFound",ss("NotFound")),Hn.prototype.$withBase=function(e){const t=this.$site.base;return"/"===e.charAt(0)?t+e.slice(1):e},window.__VUEPRESS__={version:"1.9.10",hash:"5e18aaf"},async function(e){const t="undefined"!=typeof window&&window.__VUEPRESS_ROUTER_BASE__?window.__VUEPRESS_ROUTER_BASE__:Es.routerBase||Es.base,n=new Wa({base:t,mode:"history",fallback:!1,routes:Os,scrollBehavior:(e,t,n)=>n||(e.hash?!Hn.$vuepress.$get("disableScrollBehavior")&&{selector:decodeURIComponent(e.hash)}:{x:0,y:0})});!function(e){e.beforeEach((t,n,r)=>{if(Rs(e,t.path))r();else if(/(\/|\.html)$/.test(t.path))if(/\/$/.test(t.path)){const n=t.path.replace(/\/$/,"")+".html";Rs(e,n)?r(n):r()}else r();else{const n=t.path+"/",o=t.path+".html";Rs(e,o)?r(o):Rs(e,n)?r(n):r()}})}(n);const r={};try{await Promise.all($s.filter(e=>"function"==typeof e).map(t=>t({Vue:Hn,options:r,router:n,siteData:Es,isServer:e})))}catch(e){console.error(e)}return{app:new Hn(Object.assign(r,{router:n,render:e=>e("div",{attrs:{id:"app"}},[e("RouterView",{ref:"layout"}),e("div",{class:"global-ui"},Ts.map(t=>e(t)))])})),router:n}}(!1).then(({app:e,router:t})=>{t.onReady(()=>{e.$mount("#app")})})}]); \ No newline at end of file diff --git a/de/index.html b/de/index.html index f2d32fa..759ac16 100644 --- a/de/index.html +++ b/de/index.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Anfänger-Workshops für Web-Entwicklung"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/37.4ed085e5.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/37.4ed085e5.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -49,6 +49,6 @@ </a></li></ul></div></div> <a href="https://github.com/frontendfoxes/curriculum/" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>🐶 Tagesworkshop</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/curriculum/de/workshops/vue/full-day/ch1.html" class="sidebar-link">📋 Kapitel 1: Die My Pet Shop Web App</a></li><li><a href="/curriculum/de/workshops/vue/full-day/ch2.html" class="sidebar-link">📋 Kapitel 2: Baue eine Haustier-Galerie</a></li><li><a href="/curriculum/de/workshops/vue/full-day/ch3.html" class="sidebar-link">📋 Kapitel 3: Anbindung einer API</a></li><li><a href="/curriculum/de/workshops/vue/full-day/ch4.html" class="sidebar-link">📋 Kapitel 4: Eine Merkliste erstellen</a></li><li><a href="/curriculum/de/workshops/vue/full-day/ch5.html" class="sidebar-link">📋 Kapitel 5: Ein Formular zum Adoptieren hinzufügen</a></li><li><a href="/curriculum/de/workshops/vue/full-day/appendix_1.html" class="sidebar-link">🤷 Anhang 1: Neuanfang?</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="about-our-workshops"><a href="#about-our-workshops" class="header-anchor">#</a> About Our Workshops</h1> <p><img src="/curriculum/assets/img/logo.2552a637.png" alt="Front-End Foxes"></p> <p>Front-End Foxes and its sub-group, Vue Vixens, are initiatives created by Jen Looper, a Cloud Developer Advocate Lead at <a href="http://www.microsoft.com" target="_blank" rel="noopener noreferrer">Microsoft<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. Our mission is to create workshops to teach Vue.js in a cool and fun way to 'foxy people who identify as women'. We have chapters worldwide; find us at <a href="https://frontendfoxes.org" target="_blank" rel="noopener noreferrer">FrontEndFoxes.org<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. Front-End Foxes workshops are called 'skulks' because a group of foxes is called a 'skulk'.</p> <p>These self-driven workshops are designed to help people get better acquainted with front-end technologies for both web and mobile development. Our teaching methodology is explained in <a href="https://dev.to/frontendfoxes/the-way-of-the-fox-the-vue-vixens-curriculum-290" target="_blank" rel="noopener noreferrer">this article<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <p><img src="/curriculum/assets/img/inaugural_skulk.f267a04e.jpg" alt="inaugural skulk in New Orleans"></p> <blockquote><p>Our inaugural Skulk at Vue.US Conference in New Orleans in March, 2018</p></blockquote> <h2 id="faq"><a href="#faq" class="header-anchor">#</a> FAQ</h2> <p><strong>What's the difference between a Chapter, a 'Mini', and a 'Nano'?</strong></p> <p>This content is presented as various types, divided by length. The first five chapters comprise the full-day workshop. Other chapters are listed as 'mini-workshops' or 'half-day workshops' and can be done ad hoc with groups for breakfasts, lunch'n'learn sessions, or meetups. Nanos are ten to thirty-minute warm-up icebreaker coding exercises used by our Chapters.</p> <p><strong>Why are the chapters broken up into parts?</strong></p> <p>All the online codelabs are designed to be completed in groups in a self-study mode in a workshop format during meetups, conferences, and brown-bag lunches. For the all-day workshops, it is best to break up the day into parts and regroup users periodically so that 'no developer is left behind'. If an attendee gets lost, she can 'reboot' by downloading the ending point for each previous chapter into a new Code Sandbox.</p> <p><strong>Where can I register for a skulk?</strong></p> <p>Workshop attendees and mentors can register for events at <a href="https://www.frontendfoxes.org" target="_blank" rel="noopener noreferrer">FrontEndFoxes.org<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. Keep an eye on our Twitter feeds @vuevixens and @frontendfoxes for announcements of upcoming events. Front-End Foxes workshops are free, but depend on budget from conferences and meetups to provide lunch, breakfast, or snacks, and a space with wifi.</p> <p><strong>I'm a guy. Can I participate?</strong></p> <p>The goal of the program is to familiarize women and those who identify as such with concepts of programming for web and mobile in a supportive and inclusive environment. Experienced developers, however, are very welcome to join in our efforts to organize events, support our scholarship fund, mentor a skulk, and provide content. We are grateful for all kinds of help!</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/de/README.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/37.4ed085e5.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/37.4ed085e5.js" defer></script> </body> </html> diff --git a/de/workshops/react/index.html b/de/workshops/react/index.html index c551fd4..f5e1be9 100644 --- a/de/workshops/react/index.html +++ b/de/workshops/react/index.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Anfänger-Workshops für Web-Entwicklung"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/63.8b45e0ab.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/63.8b45e0ab.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -49,6 +49,6 @@ </a></li></ul></div></div> <a href="https://github.com/frontendfoxes/curriculum/" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>🐶 Tagesworkshop</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/curriculum/de/workshops/vue/full-day/ch1.html" class="sidebar-link">📋 Kapitel 1: Die My Pet Shop Web App</a></li><li><a href="/curriculum/de/workshops/vue/full-day/ch2.html" class="sidebar-link">📋 Kapitel 2: Baue eine Haustier-Galerie</a></li><li><a href="/curriculum/de/workshops/vue/full-day/ch3.html" class="sidebar-link">📋 Kapitel 3: Anbindung einer API</a></li><li><a href="/curriculum/de/workshops/vue/full-day/ch4.html" class="sidebar-link">📋 Kapitel 4: Eine Merkliste erstellen</a></li><li><a href="/curriculum/de/workshops/vue/full-day/ch5.html" class="sidebar-link">📋 Kapitel 5: Ein Formular zum Adoptieren hinzufügen</a></li><li><a href="/curriculum/de/workshops/vue/full-day/appendix_1.html" class="sidebar-link">🤷 Anhang 1: Neuanfang?</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/de/workshops/react/README.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/63.8b45e0ab.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/63.8b45e0ab.js" defer></script> </body> </html> diff --git a/de/workshops/vue/full-day/appendix_1.html b/de/workshops/vue/full-day/appendix_1.html index a0fdf9c..ce72ea9 100644 --- a/de/workshops/vue/full-day/appendix_1.html +++ b/de/workshops/vue/full-day/appendix_1.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Anfänger-Workshops für Web-Entwicklung"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/29.593477ee.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/29.593477ee.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -53,6 +53,6 @@ <a href="/curriculum/de/workshops/vue/full-day/ch5.html" class="prev"> 📋 Kapitel 5: Ein Formular zum Adoptieren hinzufügen </a></span> <!----></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/29.593477ee.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/29.593477ee.js" defer></script> </body> </html> diff --git a/de/workshops/vue/full-day/ch1.html b/de/workshops/vue/full-day/ch1.html index 667ff98..152d81a 100644 --- a/de/workshops/vue/full-day/ch1.html +++ b/de/workshops/vue/full-day/ch1.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Anfänger-Workshops für Web-Entwicklung"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/38.1e5dcace.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/38.1e5dcace.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -544,6 +544,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/38.1e5dcace.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/38.1e5dcace.js" defer></script> </body> </html> diff --git a/de/workshops/vue/full-day/ch2.html b/de/workshops/vue/full-day/ch2.html index 808bb65..5e40cb4 100644 --- a/de/workshops/vue/full-day/ch2.html +++ b/de/workshops/vue/full-day/ch2.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Anfänger-Workshops für Web-Entwicklung"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/51.4fef1cc4.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/51.4fef1cc4.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -585,6 +585,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/51.4fef1cc4.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/51.4fef1cc4.js" defer></script> </body> </html> diff --git a/de/workshops/vue/full-day/ch3.html b/de/workshops/vue/full-day/ch3.html index af1b407..ff7df43 100644 --- a/de/workshops/vue/full-day/ch3.html +++ b/de/workshops/vue/full-day/ch3.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Anfänger-Workshops für Web-Entwicklung"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/52.4bf02870.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/52.4bf02870.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -226,6 +226,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/52.4bf02870.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/52.4bf02870.js" defer></script> </body> </html> diff --git a/de/workshops/vue/full-day/ch4.html b/de/workshops/vue/full-day/ch4.html index acd7d8d..3e52ad0 100644 --- a/de/workshops/vue/full-day/ch4.html +++ b/de/workshops/vue/full-day/ch4.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Anfänger-Workshops für Web-Entwicklung"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/53.54b8cfbc.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/53.54b8cfbc.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -730,6 +730,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/53.54b8cfbc.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/53.54b8cfbc.js" defer></script> </body> </html> diff --git a/de/workshops/vue/full-day/ch5.html b/de/workshops/vue/full-day/ch5.html index 0b11766..775e04c 100644 --- a/de/workshops/vue/full-day/ch5.html +++ b/de/workshops/vue/full-day/ch5.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Anfänger-Workshops für Web-Entwicklung"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/54.9e245086.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/54.9e245086.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -807,6 +807,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/54.9e245086.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/54.9e245086.js" defer></script> </body> </html> diff --git a/de/workshops/vue/index.html b/de/workshops/vue/index.html index 116e7ab..8ab6cfb 100644 --- a/de/workshops/vue/index.html +++ b/de/workshops/vue/index.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Anfänger-Workshops für Web-Entwicklung"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/50.55827105.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/50.55827105.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -49,6 +49,6 @@ </a></li></ul></div></div> <a href="https://github.com/frontendfoxes/curriculum/" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>🐶 Tagesworkshop</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/curriculum/de/workshops/vue/full-day/ch1.html" class="sidebar-link">📋 Kapitel 1: Die My Pet Shop Web App</a></li><li><a href="/curriculum/de/workshops/vue/full-day/ch2.html" class="sidebar-link">📋 Kapitel 2: Baue eine Haustier-Galerie</a></li><li><a href="/curriculum/de/workshops/vue/full-day/ch3.html" class="sidebar-link">📋 Kapitel 3: Anbindung einer API</a></li><li><a href="/curriculum/de/workshops/vue/full-day/ch4.html" class="sidebar-link">📋 Kapitel 4: Eine Merkliste erstellen</a></li><li><a href="/curriculum/de/workshops/vue/full-day/ch5.html" class="sidebar-link">📋 Kapitel 5: Ein Formular zum Adoptieren hinzufügen</a></li><li><a href="/curriculum/de/workshops/vue/full-day/appendix_1.html" class="sidebar-link">🤷 Anhang 1: Neuanfang?</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="vue-workshops"><a href="#vue-workshops" class="header-anchor">#</a> Vue Workshops</h1> <p><img src="/curriculum/assets/img/vue-vixens.a9bb2f2d.png" alt="Vue Vixens"></p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/de/workshops/vue/README.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/50.55827105.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/50.55827105.js" defer></script> </body> </html> diff --git a/fr/index.html b/fr/index.html index a9f56cd..4ac0518 100644 --- a/fr/index.html +++ b/fr/index.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Ateliers pour apprendre la programmation web et mobile"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/64.eb6fb88e.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/64.eb6fb88e.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -49,6 +49,6 @@ </a></li></ul></div></div> <a href="https://github.com/frontendfoxes/curriculum/" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>🦴Ateliers Minis</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/curriculum/fr/workshops/vue/minis/mini1.html" class="sidebar-link">🖥️ 1 : Créer une petite application Web de récupération d'images d'animaux de compagnie</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/fr/README.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/64.eb6fb88e.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/64.eb6fb88e.js" defer></script> </body> </html> diff --git a/fr/workshops/react/index.html b/fr/workshops/react/index.html index 2b646f5..9f273a1 100644 --- a/fr/workshops/react/index.html +++ b/fr/workshops/react/index.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Ateliers pour apprendre la programmation web et mobile"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/65.68dfc4a0.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/65.68dfc4a0.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -49,6 +49,6 @@ </a></li></ul></div></div> <a href="https://github.com/frontendfoxes/curriculum/" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>🦴Ateliers Minis</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/curriculum/fr/workshops/vue/minis/mini1.html" class="sidebar-link">🖥️ 1 : Créer une petite application Web de récupération d'images d'animaux de compagnie</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="ateliers-react"><a href="#ateliers-react" class="header-anchor">#</a> Ateliers React</h1> <p><img src="/react-renards.png" alt="React Renards"></p> <p>On arrive bientôt!</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/fr/workshops/react/README.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/65.68dfc4a0.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/65.68dfc4a0.js" defer></script> </body> </html> diff --git a/fr/workshops/vue/index.html b/fr/workshops/vue/index.html index bd2cbd3..4f306e5 100644 --- a/fr/workshops/vue/index.html +++ b/fr/workshops/vue/index.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Ateliers pour apprendre la programmation web et mobile"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/55.f17dc5b8.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/55.f17dc5b8.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -49,6 +49,6 @@ </a></li></ul></div></div> <a href="https://github.com/frontendfoxes/curriculum/" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>🦴Ateliers Minis</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/curriculum/fr/workshops/vue/minis/mini1.html" class="sidebar-link">🖥️ 1 : Créer une petite application Web de récupération d'images d'animaux de compagnie</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="ateliers-vue"><a href="#ateliers-vue" class="header-anchor">#</a> Ateliers Vue</h1> <p><img src="/curriculum/assets/img/vue-vixens.a9bb2f2d.png" alt="Vue Vixens"></p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/fr/workshops/vue/README.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/55.f17dc5b8.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/55.f17dc5b8.js" defer></script> </body> </html> diff --git a/fr/workshops/vue/minis/mini1.html b/fr/workshops/vue/minis/mini1.html index 05fc219..b612088 100644 --- a/fr/workshops/vue/minis/mini1.html +++ b/fr/workshops/vue/minis/mini1.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Ateliers pour apprendre la programmation web et mobile"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/56.86aa06d9.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/56.86aa06d9.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -1075,6 +1075,6 @@ <span class="token property">transition</span><span class="token punctuation">:</span> transform 0.5s<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">💡</p> <p>Remarquez <code>position: absolute</code> sur les éléments qui partent ! C'est fait pour les retirer du flux naturel, déclenchant la transition de mouvement sur le reste des objets.</p></div> <p>Maintenant, notre liste a une belle animation de mouvement après avoir supprimé un de ses éléments !</p> <p><strong>🎊 Vous avez terminé le supplément 2 ! 🎊</strong></p> <h2 id="auteure"><a href="#auteure" class="header-anchor">#</a> Auteure</h2> <p>Fait avec ❤️ par Natalia Tepluhina, mis à jour par Jen Looper</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/fr/workshops/vue/minis/mini1.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/56.86aa06d9.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/56.86aa06d9.js" defer></script> </body> </html> diff --git a/index.html b/index.html index 26a1026..745f406 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/39.b01b2adb.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/39.e0f1278a.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -52,9 +52,9 @@ Front-End Foxes Workshops </h1> <p class="description"> Workshops to teach web and mobile development to beginners - </p> <!----></header> <!----> <div class="theme-default-content custom content__default"><h1 id="about-our-workshops"><a href="#about-our-workshops" class="header-anchor">#</a> About Our Workshops</h1> <p><img src="/curriculum/assets/img/logo.2552a637.png" alt="Front-End Foxes"></p> <p>Front-End Foxes and its sub-group, Vue Vixens, are initiatives created by Jen Looper, a Cloud Developer Advocate Lead at <a href="http://www.microsoft.com" target="_blank" rel="noopener noreferrer">Microsoft<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. Our mission is to create workshops to teach Vue.js in a cool and fun way to 'foxy people who identify as women'. We have chapters worldwide; find us at <a href="https://frontendfoxes.org" target="_blank" rel="noopener noreferrer">FrontEndFoxes.org<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. Front-End Foxes workshops are called 'skulks' because a group of foxes is called a 'skulk'.</p> <p>These self-driven workshops are designed to help people get better acquainted with front-end technologies for both web and mobile development. Our teaching methodology is explained in <a href="https://dev.to/frontendfoxes/the-way-of-the-fox-the-vue-vixens-curriculum-290" target="_blank" rel="noopener noreferrer">this article<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <p><img src="/curriculum/assets/img/inaugural_skulk.f267a04e.jpg" alt="inaugural skulk in New Orleans"></p> <blockquote><p>Our inaugural Skulk at Vue.US Conference in New Orleans in March, 2018</p></blockquote> <h2 id="faq"><a href="#faq" class="header-anchor">#</a> FAQ</h2> <p><strong>What's the difference between a Chapter, a 'Mini', and a 'Nano'?</strong></p> <p>This content is presented as various types, divided by length. The first five chapters comprise the full-day workshop. Other chapters are listed as 'mini-workshops' or 'half-day workshops' and can be done ad hoc with groups for breakfasts, lunch'n'learn sessions, or meetups. Nanos are ten to thirty-minute warm-up icebreaker coding exercises used by our Chapters.</p> <p><strong>Why are the chapters broken up into parts?</strong></p> <p>All the online codelabs are designed to be completed in groups in a self-study mode in a workshop format during meetups, conferences, and brown-bag lunches. For the all-day workshops, it is best to break up the day into parts and regroup users periodically so that 'no developer is left behind'. If an attendee gets lost, she can 'reboot' by downloading the ending point for each previous chapter into a new Code Sandbox.</p> <p><strong>Where can I register for a skulk?</strong></p> <p>Workshop attendees and mentors can register for events at <a href="https://www.frontendfoxes.org" target="_blank" rel="noopener noreferrer">FrontEndFoxes.org<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. Keep an eye on our Twitter feeds <a href="https://twitter.com/VueVixens" target="_blank" rel="noopener noreferrer">@vuevixens<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> and <a href="https://twitter.com/FrontendFoxes" target="_blank" rel="noopener noreferrer">@frontendfoxes<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> for announcements of upcoming events. Front-End Foxes workshops are free, but depend on budget from conferences and meetups to provide lunch, breakfast, or snacks, and a space with wifi.</p> <p><strong>I'm a guy. Can I participate?</strong></p> <p>The goal of the program is to familiarize women and those who identify as such with concepts of programming for web and mobile in a supportive and inclusive environment. Experienced developers, however, are very welcome to join in our efforts to organize events, support our scholarship fund, mentor a skulk, and provide content. We are grateful for all kinds of help!</p> <p><strong>Want to contribute? Please make sure to check out our <a href="/curriculum/workshops/CODE_OF_CONDUCT.html">Code of Conduct</a> as well as our <a href="/curriculum/contributing.html">Contributing instructions</a>.</strong></p></div> <div class="footer"> + </p> <!----></header> <!----> <div class="theme-default-content custom content__default"><blockquote><p>Hello, Hacktoberfest folks! We are currently looking to upgrade these workshops to Vue 3+. Start with the Minis and let's see how the look. I'm looking for clean, documented code that we can run in Code Sandbox to help the legacy of Front-End Foxes live on.</p></blockquote> <h1 id="about-our-workshops"><a href="#about-our-workshops" class="header-anchor">#</a> About Our Workshops</h1> <p><img src="/curriculum/assets/img/logo.2552a637.png" alt="Front-End Foxes"></p> <p>Front-End Foxes, formerly known as Vue Vixens, were initiatives created by Jen Looper, currently Head of Academic Advocacy at AWS. Our mission was to create workshops to teach Vue.js in a cool and fun way to 'foxy people who identify as women'. We had chapters worldwide before closing the nonprofit in 2022. Front-End Foxes workshops are called 'skulks' because a group of foxes is called a 'skulk'.</p> <p>These self-driven workshops have helped hundreds of women get better acquainted with front-end technologies for both web and mobile development. Our teaching methodology is explained in <a href="https://dev.to/frontendfoxes/the-way-of-the-fox-the-vue-vixens-curriculum-290" target="_blank" rel="noopener noreferrer">this article<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <p><img src="/curriculum/assets/img/inaugural_skulk.f267a04e.jpg" alt="inaugural skulk in New Orleans"></p> <blockquote><p>Our inaugural Skulk at Vue.US Conference in New Orleans in March, 2018</p></blockquote> <h2 id="faq"><a href="#faq" class="header-anchor">#</a> FAQ</h2> <p><strong>What's the difference between a Chapter, a 'Mini', and a 'Nano'?</strong></p> <p>This content is presented as various types, divided by length. The first five chapters comprise the full-day workshop. Other chapters are listed as 'mini-workshops' or 'half-day workshops' and can be done ad hoc with groups for breakfasts, lunch'n'learn sessions, or meetups. Nanos are ten to thirty-minute warm-up icebreaker coding exercises used by our Chapters.</p> <p><strong>Why are the chapters broken up into parts?</strong></p> <p>All the online codelabs are designed to be completed in groups in a self-study mode in a workshop format during meetups, conferences, and brown-bag lunches. For the all-day workshops, it is best to break up the day into parts and regroup users periodically so that 'no developer is left behind'. If an attendee gets lost, she can 'reboot' by downloading the ending point for each previous chapter into a new Code Sandbox.</p> <p><strong>Where can I register for a skulk?</strong></p> <p>Workshop attendees and mentors can register for events at <a href="https://www.frontendfoxes.org" target="_blank" rel="noopener noreferrer">FrontEndFoxes.org<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. Keep an eye on our Twitter feeds <a href="https://twitter.com/VueVixens" target="_blank" rel="noopener noreferrer">@vuevixens<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> and <a href="https://twitter.com/FrontendFoxes" target="_blank" rel="noopener noreferrer">@frontendfoxes<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> for announcements of upcoming events. Front-End Foxes workshops are free, but depend on budget from conferences and meetups to provide lunch, breakfast, or snacks, and a space with wifi.</p> <p><strong>I'm a guy. Can I participate?</strong></p> <p>The goal of the program is to familiarize women and those who identify as such with concepts of programming for web and mobile in a supportive and inclusive environment. Experienced developers, however, are very welcome to join in our efforts to organize events, support our scholarship fund, mentor a skulk, and provide content. We are grateful for all kinds of help!</p> <p><strong>Want to contribute? Please make sure to check out our <a href="/curriculum/workshops/CODE_OF_CONDUCT.html">Code of Conduct</a> as well as our <a href="/curriculum/contributing.html">Contributing instructions</a>.</strong></p></div> <div class="footer"> MIT Licensed | Copyright 2018-present Front-End Foxes Inc, a 501(c)(3) public charity </div></main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/39.b01b2adb.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/39.e0f1278a.js" defer></script> </body> </html> diff --git a/jp/index.html b/jp/index.html index 535059f..b36cfcf 100644 --- a/jp/index.html +++ b/jp/index.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="ワークショップ"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/66.3dc620d5.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/66.3dc620d5.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -49,6 +49,6 @@ </a></li></ul></div></div> <a href="https://github.com/frontendfoxes/curriculum/" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>🐶 フルデイワークショップ</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/curriculum/jp/workshops/vue/full-day/ch4.html" class="sidebar-link">📋 Chapter 4: 犬の里親体験アプリの作成</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>🦴ミニワークショップ</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>👩‍🎓 ナノアクティビティ</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="vue-vixens-のワークショップについて"><a href="#vue-vixens-のワークショップについて" class="header-anchor">#</a> Vue Vixens のワークショップについて</h1> <p>Vue Vixens は、 <a href="https://www.microsoft.com" target="_blank" rel="noopener noreferrer">Microsoft<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> の Cloud Developer Advocate Lead である Jen Looper が始めた取り組みです。 Vue Vixens のミッションは、ワークショップを開催して女性に Vue.js をかっこよく・楽しく教えることです。Shmuela Jacobs が切り開いた Angular コミュニティ <a href="http://www.ng-girls.org" target="_blank" rel="noopener noreferrer">ng-girls.org<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> のモデルに基づいています。 その Ng-Girls は Rails Bridge と Django Girls に影響を受けています。</p> <div class="custom-block tip"><p class="custom-block-title">ワークショップだけではありません</p> <p>私たちは Full day ワークショップを開催するだけでなく、各カンファレンスのダイバーシティ関連のオファーも受けています。ご興味のある方は <a href="mailto:info@vuevixens.org">info@vuevixens.org</a> にご連絡ください。また、世界中で支部を展開しています。（ <a href="https://vuevixens.org" target="_blank" rel="noopener noreferrer">VueVixens.org<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> ）</p></div> <hr> <h2 id="faq"><a href="#faq" class="header-anchor">#</a> FAQ</h2> <p><strong>男性は参加できますか？</strong></p> <p>このプログラムのゴールは、女性に Vue.js を使った Web・モバイルのプログラミングの概念に慣れ親しんでもらうことです。ただし経験豊富な Vue 開発者の方からの奨学資金支援、ワークショップへのメンター参加、コンテンツ提供は大歓迎です。私たちはあらゆる支援に感謝しています！</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/jp/README.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/66.3dc620d5.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/66.3dc620d5.js" defer></script> </body> </html> diff --git a/jp/workshops/react/index.html b/jp/workshops/react/index.html index 3372745..16d716b 100644 --- a/jp/workshops/react/index.html +++ b/jp/workshops/react/index.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="ワークショップ"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/67.87dcaf99.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/67.87dcaf99.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -49,6 +49,6 @@ </a></li></ul></div></div> <a href="https://github.com/frontendfoxes/curriculum/" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>🐶 フルデイワークショップ</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/curriculum/jp/workshops/vue/full-day/ch4.html" class="sidebar-link">📋 Chapter 4: 犬の里親体験アプリの作成</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>🦴ミニワークショップ</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>👩‍🎓 ナノアクティビティ</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="react-workshops"><a href="#react-workshops" class="header-anchor">#</a> React Workshops</h1> <p><img src="/react-renards.png" alt="React Renards"></p> <p>Stay tuned!</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/jp/workshops/react/README.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/67.87dcaf99.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/67.87dcaf99.js" defer></script> </body> </html> diff --git a/jp/workshops/vue/full-day/appendix_1.html b/jp/workshops/vue/full-day/appendix_1.html index cdd2040..6ec9c86 100644 --- a/jp/workshops/vue/full-day/appendix_1.html +++ b/jp/workshops/vue/full-day/appendix_1.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="ワークショップ"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/30.67045ac8.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/30.67045ac8.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -49,6 +49,6 @@ </a></li></ul></div></div> <a href="https://github.com/frontendfoxes/curriculum/" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>🐶 フルデイワークショップ</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/curriculum/jp/workshops/vue/full-day/ch4.html" class="sidebar-link">📋 Chapter 4: 犬の里親体験アプリの作成</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>🦴ミニワークショップ</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>👩‍🎓 ナノアクティビティ</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="🤷-appendix-1-lost-confused-starting-fresh"><a href="#🤷-appendix-1-lost-confused-starting-fresh" class="header-anchor">#</a> 🤷 Appendix 1: Lost? Confused? Starting fresh?</h1> <p>Don't worry! At the beginning of each chapter, you are given a link to start fresh with a new sandbox. Below are instructions on how to create a new sandbox with this Github repo link.</p> <p>All the chapter links are kept <a href="https://github.com/frontendfoxes/projects" target="_blank" rel="noopener noreferrer">here<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> - pick your chapter by saving its URL. For example, the downloadable link for Chapter 1 is <a href="https://github.com/frontendfoxes/projects/tree/main/chapter-1-end" target="_blank" rel="noopener noreferrer">https://github.com/frontendfoxes/projects/tree/main/chapter-1-end<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <div class="custom-block tip"><p class="custom-block-title">💡</p> <p>Ensure that you are logged into CodeSandbox.io so that you are able to keep your sandboxes in your account.</p></div> <p>Step 1: First, create a new Sandbox in CodeSandbox.io by clicking 'Create New Sandbox' on the homepage and then clicking the 'import from Github' link at the bottom left.</p> <p><img src="/curriculum/assets/img/codesandbox_1.ee57dac7.png" alt="Step 1"></p> <p>Step 2: Next, paste the URL of the appropriate Github repo from the VueVixens Projects folder into the top field.</p> <p><img src="/curriculum/assets/img/codesandbox_2.6a6f2466.png" alt="Step 2"></p> <p>Step 3: Your sandbox will be scaffolded and ready to use!</p> <p><img src="/curriculum/assets/img/codesandbox_3.0d25c991.png" alt="Step 3"></p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/jp/workshops/vue/full-day/appendix_1.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/30.67045ac8.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/30.67045ac8.js" defer></script> </body> </html> diff --git a/jp/workshops/vue/full-day/ch3.html b/jp/workshops/vue/full-day/ch3.html index 75e8ca1..f267056 100644 --- a/jp/workshops/vue/full-day/ch3.html +++ b/jp/workshops/vue/full-day/ch3.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="ワークショップ"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/40.486c2625.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/40.486c2625.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -267,6 +267,6 @@ <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p><strong>Now we initially see empty dog portraits and then images are loaded from the API. Progress!</strong></p> <h2 id="final-result"><a href="#final-result" class="header-anchor">#</a> Final result</h2> <p><img src="/curriculum/assets/img/petshop_chapter3.f1a4212c.jpg" alt="chapter 3 result"></p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/jp/workshops/vue/full-day/ch3.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/40.486c2625.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/40.486c2625.js" defer></script> </body> </html> diff --git a/jp/workshops/vue/full-day/ch4.html b/jp/workshops/vue/full-day/ch4.html index 2673f35..11439f2 100644 --- a/jp/workshops/vue/full-day/ch4.html +++ b/jp/workshops/vue/full-day/ch4.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="ワークショップ"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/41.3ad56d94.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/41.3ad56d94.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -726,6 +726,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/41.3ad56d94.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/41.3ad56d94.js" defer></script> </body> </html> diff --git a/jp/workshops/vue/index.html b/jp/workshops/vue/index.html index 428d587..abc5308 100644 --- a/jp/workshops/vue/index.html +++ b/jp/workshops/vue/index.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="ワークショップ"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/57.be0aa56c.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/57.be0aa56c.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -49,6 +49,6 @@ </a></li></ul></div></div> <a href="https://github.com/frontendfoxes/curriculum/" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>🐶 フルデイワークショップ</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/curriculum/jp/workshops/vue/full-day/ch4.html" class="sidebar-link">📋 Chapter 4: 犬の里親体験アプリの作成</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>🦴ミニワークショップ</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>👩‍🎓 ナノアクティビティ</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="vue-workshops"><a href="#vue-workshops" class="header-anchor">#</a> Vue Workshops</h1> <p><img src="/curriculum/assets/img/vue-vixens.a9bb2f2d.png" alt="Vue Vixens"></p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/jp/workshops/vue/README.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/57.be0aa56c.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/57.be0aa56c.js" defer></script> </body> </html> diff --git a/jp/workshops/vue/minis/mini1.html b/jp/workshops/vue/minis/mini1.html index 28ade60..89d1f74 100644 --- a/jp/workshops/vue/minis/mini1.html +++ b/jp/workshops/vue/minis/mini1.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="ワークショップ"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/68.d4b74534.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/68.d4b74534.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -1124,6 +1124,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/68.d4b74534.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/68.d4b74534.js" defer></script> </body> </html> diff --git a/jp/workshops/vue/minis/mini2.html b/jp/workshops/vue/minis/mini2.html index 8beff68..b252b46 100644 --- a/jp/workshops/vue/minis/mini2.html +++ b/jp/workshops/vue/minis/mini2.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="ワークショップ"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/21.07bf2bd2.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/21.07bf2bd2.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -331,6 +331,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/21.07bf2bd2.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/21.07bf2bd2.js" defer></script> </body> </html> diff --git a/jp/workshops/vue/minis/mini3.html b/jp/workshops/vue/minis/mini3.html index e7ff8bf..504193e 100644 --- a/jp/workshops/vue/minis/mini3.html +++ b/jp/workshops/vue/minis/mini3.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="ワークショップ"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/12.7bb3c885.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/12.7bb3c885.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -572,6 +572,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/12.7bb3c885.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/12.7bb3c885.js" defer></script> </body> </html> diff --git a/jp/workshops/vue/minis/mini4.html b/jp/workshops/vue/minis/mini4.html index 1527d65..fd76e69 100644 --- a/jp/workshops/vue/minis/mini4.html +++ b/jp/workshops/vue/minis/mini4.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="ワークショップ"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/22.7b58d08d.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/22.7b58d08d.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -323,6 +323,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/22.7b58d08d.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/22.7b58d08d.js" defer></script> </body> </html> diff --git a/jp/workshops/vue/nanos/nano2.html b/jp/workshops/vue/nanos/nano2.html index 8f9be9e..387acc9 100644 --- a/jp/workshops/vue/nanos/nano2.html +++ b/jp/workshops/vue/nanos/nano2.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="ワークショップ"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/42.85859696.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/42.85859696.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -282,6 +282,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/42.85859696.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/42.85859696.js" defer></script> </body> </html> diff --git a/jp/workshops/vue/nanos/nano3.html b/jp/workshops/vue/nanos/nano3.html index e8072f8..255407f 100644 --- a/jp/workshops/vue/nanos/nano3.html +++ b/jp/workshops/vue/nanos/nano3.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="ワークショップ"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/16.6d53e8c9.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/16.6d53e8c9.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -124,6 +124,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/16.6d53e8c9.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/16.6d53e8c9.js" defer></script> </body> </html> diff --git a/jp/workshops/vue/nanos/nano6.html b/jp/workshops/vue/nanos/nano6.html index 87e1d46..645cea7 100644 --- a/jp/workshops/vue/nanos/nano6.html +++ b/jp/workshops/vue/nanos/nano6.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="ワークショップ"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/31.16dc0db7.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/31.16dc0db7.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -286,6 +286,6 @@ <a href="/curriculum/jp/workshops/vue/nanos/nano3.html" class="prev"> 🏠 3: Visual Studio CodeにVueのための最適な設定をしよう （初級） </a></span> <!----></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/31.16dc0db7.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/31.16dc0db7.js" defer></script> </body> </html> diff --git a/workshops/CODE_OF_CONDUCT.html b/workshops/CODE_OF_CONDUCT.html index 020e91d..12e1a86 100644 --- a/workshops/CODE_OF_CONDUCT.html +++ b/workshops/CODE_OF_CONDUCT.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/69.bb02b634.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/69.bb02b634.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -51,6 +51,6 @@ <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="code-of-conduct"><a href="#code-of-conduct" class="header-anchor">#</a> Code of Conduct</h1> <h2 id="_1-purpose"><a href="#_1-purpose" class="header-anchor">#</a> 1. Purpose</h2> <p>This code of conduct outlines our expectations for all those who participate in our community, as well as the consequences for unacceptable behavior.</p> <p>We invite all those who participate in Front-End Foxes activities to help us create safe and positive experiences for everyone.</p> <h2 id="_2-open-source-citizenship"><a href="#_2-open-source-citizenship" class="header-anchor">#</a> 2. Open Source Citizenship</h2> <p>A supplemental goal of this Code of Conduct is to increase open source citizenship by encouraging participants to recognize and strengthen the relationships between our actions and their effects on our community.</p> <p>Communities mirror the societies in which they exist and positive action is essential to counteract the many forms of inequality and abuses of power that exist in society.</p> <p>If you see someone who is making an extra effort to ensure our community is welcoming, friendly, and encourages all participants to contribute to the fullest extent, we want to know.</p> <h2 id="_3-expected-behavior"><a href="#_3-expected-behavior" class="header-anchor">#</a> 3. Expected Behavior</h2> <p>The following behaviors are expected and requested of all community members:</p> <ul><li>Participate in an authentic and active way. In doing so, you contribute to the health and longevity of this community.</li> <li>Exercise consideration and respect in your speech and actions.</li> <li>Attempt collaboration before conflict.</li> <li>Refrain from demeaning, discriminatory, or harassing behavior and speech.</li> <li>Be mindful of your surroundings and of your fellow participants. Alert community leaders if you notice a dangerous situation, someone in distress, or violations of this Code of Conduct, even if they seem inconsequential.</li> <li>Remember that community event venues may be shared with members of the public; please be respectful to all patrons of these locations.</li></ul> <h2 id="_4-unacceptable-behavior"><a href="#_4-unacceptable-behavior" class="header-anchor">#</a> 4. Unacceptable Behavior</h2> <p>The following behaviors are considered harassment and are unacceptable within our community:</p> <ul><li>Violence, threats of violence or violent language directed against another person.</li> <li>Sexist, racist, homophobic, transphobic, ableist or otherwise discriminatory jokes and language.</li> <li>Posting or displaying sexually explicit or violent material.</li> <li>Posting or threatening to post other people's personally identifying information ("doxing").</li> <li>Personal insults, particularly those related to gender, sexual orientation, race, religion, or disability.</li> <li>Inappropriate photography or recording.</li> <li>Inappropriate physical contact. You should have someone's consent before touching them.</li> <li>Unwelcome sexual attention. This includes, sexualized comments or jokes; inappropriate touching, groping, and unwelcomed sexual advances.</li> <li>Deliberate intimidation, stalking or following (online or in person).</li> <li>Advocating for, or encouraging, any of the above behavior.</li> <li>Sustained disruption of community events, including talks and presentations.</li></ul> <h2 id="_5-consequences-of-unacceptable-behavior"><a href="#_5-consequences-of-unacceptable-behavior" class="header-anchor">#</a> 5. Consequences of Unacceptable Behavior</h2> <p>Unacceptable behavior from any community member, including sponsors and those with decision-making authority, will not be tolerated.</p> <p>Anyone asked to stop unacceptable behavior is expected to comply immediately.</p> <p>If a community member engages in unacceptable behavior, the community organizers may take any action they deem appropriate, up to and including a temporary ban or permanent expulsion from the community without warning (and without refund in the case of a paid event).</p> <h2 id="_6-reporting-guidelines"><a href="#_6-reporting-guidelines" class="header-anchor">#</a> 6. Reporting Guidelines</h2> <p>If you are subject to or witness unacceptable behavior, or have any other concerns, please fill out this form: https://forms.gle/RWsQQMbG2rGHG9Wh7</p> <p>Our Code of Conduct committee members are available to help community members engage with local law enforcement or to otherwise help those experiencing unacceptable behavior feel safe. Please reach out to us directly at coc@frontendfoxes.org.</p> <h2 id="_7-addressing-grievances"><a href="#_7-addressing-grievances" class="header-anchor">#</a> 7. Addressing Grievances</h2> <p>If you feel you have been falsely or unfairly accused of violating this Code of Conduct, you should notify community organizers with a concise description of your grievance by email via coc@frontendfoxes.org. Your grievance will be handled in accordance with our existing governing policies.</p> <h2 id="_8-scope"><a href="#_8-scope" class="header-anchor">#</a> 8. Scope</h2> <p>We expect all community participants (contributors, paid or otherwise; sponsors; and other guests) to abide by this Code of Conduct in all community venues–online and in-person–as well as in all one-on-one communications pertaining to community business.</p> <p>This code of conduct and its related procedures also applies to unacceptable behavior occurring outside the scope of community activities when such behavior has the potential to adversely affect the safety and well-being of community members.</p> <h2 id="_9-contact-info"><a href="#_9-contact-info" class="header-anchor">#</a> 9. Contact info</h2> <p>Reach out to us directly at coc@frontendfoxes.org with any questions. To report an incident, please us this form: https://forms.gle/RWsQQMbG2rGHG9Wh7 We abide by our community Accountability Ladder: https://github.com/frontendfoxes/accountability-ladder/blob/main/README.md</p> <h2 id="_10-license-and-attribution"><a href="#_10-license-and-attribution" class="header-anchor">#</a> 10. License and attribution</h2> <p>This Code of Conduct is distributed under a <a href="http://creativecommons.org/licenses/by-sa/3.0/" target="_blank" rel="noopener noreferrer">Creative Commons Attribution-ShareAlike license<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <p>Portions of text derived from the <a href="https://www.djangoproject.com/conduct/" target="_blank" rel="noopener noreferrer">Django Code of Conduct<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> and the <a href="http://geekfeminism.wikia.com/wiki/Conference_anti-harassment/Policy" target="_blank" rel="noopener noreferrer">Geek Feminism Anti-Harassment Policy<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <p>Retrieved on November 22, 2016 from <a href="http://citizencodeofconduct.org/" target="_blank" rel="noopener noreferrer">http://citizencodeofconduct.org/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/workshops/CODE_OF_CONDUCT.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/69.bb02b634.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/69.bb02b634.js" defer></script> </body> </html> diff --git a/workshops/TEAM.html b/workshops/TEAM.html index ba584cc..562737e 100644 --- a/workshops/TEAM.html +++ b/workshops/TEAM.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/71.796a9e78.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/71.796a9e78.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -49,6 +49,6 @@ </a></li></ul></div></div> <a href="https://github.com/frontendfoxes/curriculum/" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="contributors-✨"><a href="#contributors-✨" class="header-anchor">#</a> Contributors ✨</h1> <p>Thanks goes to these wonderful people (<a href="https://allcontributors.org/docs/en/emoji-key" target="_blank" rel="noopener noreferrer">emoji key<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>):</p> <table><tr><td align="center"><a href="http://www.jenlooper.com"><img src="https://avatars2.githubusercontent.com/u/1450004?v=4" width="100px;" alt=""><br><sub><b>Jen Looper</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=jlooper" title="Documentation">📖</a></td> <td align="center"><a href="https://twitter.com/N_Tepluhina"><img src="https://avatars0.githubusercontent.com/u/18719025?v=4" width="100px;" alt=""><br><sub><b>Natalia Tepluhina</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=NataliaTepluhina" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/marina-mosti"><img src="https://avatars0.githubusercontent.com/u/14843771?v=4" width="100px;" alt=""><br><sub><b>Marina Mosti</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=marina-mosti" title="Documentation">📖</a></td> <td align="center"><a href="https://www.giftegwuenu.com"><img src="https://avatars3.githubusercontent.com/u/17781315?v=4" width="100px;" alt=""><br><sub><b>Egwuenu Gift</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=lauragift21" title="Documentation">📖</a></td> <td align="center"><a href="https://twitter.com/vicbergquist"><img src="https://avatars0.githubusercontent.com/u/25737281?v=4" width="100px;" alt=""><br><sub><b>Victoria Bergquist</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=vicbergquist" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/willi84"><img src="https://avatars0.githubusercontent.com/u/6207308?v=4" width="100px;" alt=""><br><sub><b>Robert Willemelis</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=willi84" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/marydavis"><img src="https://avatars2.githubusercontent.com/u/176437?v=4" width="100px;" alt=""><br><sub><b>Mary</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=marydavis" title="Documentation">📖</a></td></tr> <tr><td align="center"><a href="http://johnpapa.net"><img src="https://avatars2.githubusercontent.com/u/1202528?v=4" width="100px;" alt=""><br><sub><b>John Papa</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=johnpapa" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/mroswell"><img src="https://avatars0.githubusercontent.com/u/192568?v=4" width="100px;" alt=""><br><sub><b>Marjorie Roswell</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=mroswell" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/elstamey"><img src="https://avatars3.githubusercontent.com/u/4660760?v=4" width="100px;" alt=""><br><sub><b>elstamey</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=elstamey" title="Documentation">📖</a></td> <td align="center"><a href="https://twitter.com/StanimiraVlaeva"><img src="https://avatars2.githubusercontent.com/u/7893485?v=4" width="100px;" alt=""><br><sub><b>Stanimira Vlaeva</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=sis0k0" title="Documentation">📖</a></td> <td align="center"><a href="http://iamsaravieira.com"><img src="https://avatars0.githubusercontent.com/u/1051509?v=4" width="100px;" alt=""><br><sub><b>Sara Vieira</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=SaraVieira" title="Documentation">📖</a></td> <td align="center"><a href="http://www.JenniferBland.com"><img src="https://avatars1.githubusercontent.com/u/10262857?v=4" width="100px;" alt=""><br><sub><b>Jennifer Bland</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=ratracegrad" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/madelynpapa"><img src="https://avatars2.githubusercontent.com/u/48897606?v=4" width="100px;" alt=""><br><sub><b>madelynpapa</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=madelynpapa" title="Documentation">📖</a></td></tr> <tr><td align="center"><a href="https://github.com/MattKomorcec"><img src="https://avatars2.githubusercontent.com/u/7004823?v=4" width="100px;" alt=""><br><sub><b>Matija Komorcec</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=MattKomorcec" title="Documentation">📖</a></td> <td align="center"><a href="http://vivens.io"><img src="https://avatars1.githubusercontent.com/u/11770676?v=4" width="100px;" alt=""><br><sub><b>Vivek Patel</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=vivensio" title="Documentation">📖</a></td> <td align="center"><a href="https://tzmanics.com"><img src="https://avatars1.githubusercontent.com/u/3611928?v=4" width="100px;" alt=""><br><sub><b>Tara Z. Manicsic</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=tzmanics" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/tsvetie"><img src="https://avatars0.githubusercontent.com/u/8738876?v=4" width="100px;" alt=""><br><sub><b>Tsvetelina Ivanova</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=tsvetie" title="Documentation">📖</a></td> <td align="center"><a href="http://tonjohn.com/"><img src="https://avatars1.githubusercontent.com/u/7477471?v=4" width="100px;" alt=""><br><sub><b>Burton</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=tonjohn" title="Documentation">📖</a></td> <td align="center"><a href="http://radhika.dev"><img src="https://avatars2.githubusercontent.com/u/3877076?v=4" width="100px;" alt=""><br><sub><b>Radhika Morabia</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=rmorabia" title="Documentation">📖</a></td> <td align="center"><a href="https://novella.dev"><img src="https://avatars3.githubusercontent.com/u/38117965?v=4" width="100px;" alt=""><br><sub><b>Novella C.</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=novellac" title="Documentation">📖</a></td></tr> <tr><td align="center"><a href="https://www.forsure.dev"><img src="https://avatars3.githubusercontent.com/u/7371571?v=4" width="100px;" alt=""><br><sub><b>Rik de Groot</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=hwdegroot" title="Documentation">📖</a></td> <td align="center"><a href="https://codepen.io/gmoraleslondono"><img src="https://avatars2.githubusercontent.com/u/20589565?v=4" width="100px;" alt=""><br><sub><b>Gloria Morales</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=gmoraleslondono" title="Documentation">📖</a></td> <td align="center"><a href="https://emsuiko.de"><img src="https://avatars1.githubusercontent.com/u/4366030?v=4" width="100px;" alt=""><br><sub><b>Anett Gesierich</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=emsuiko" title="Documentation">📖</a></td> <td align="center"><a href="https://codepen.io/diemoritat/"><img src="https://avatars3.githubusercontent.com/u/1895474?v=4" width="100px;" alt=""><br><sub><b>Nayara Alves</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=diemoritat" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/alphacentauri82"><img src="https://avatars2.githubusercontent.com/u/25756676?v=4" width="100px;" alt=""><br><sub><b>Super Diana</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=alphacentauri82" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/Vannsl"><img src="https://avatars3.githubusercontent.com/u/5849721?v=4" width="100px;" alt=""><br><sub><b>Vanessa Böhner</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=Vannsl" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/Arienlys"><img src="https://avatars1.githubusercontent.com/u/48921432?v=4" width="100px;" alt=""><br><sub><b>arienlys</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=Arienlys" title="Documentation">📖</a></td></tr> <tr><td align="center"><a href="http://elkewritescode.be"><img src="https://avatars1.githubusercontent.com/u/31392019?v=4" width="100px;" alt=""><br><sub><b>Elke Heymans</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=ElkeBxl" title="Documentation">📖</a></td> <td align="center"><a href="http://ladymashiro.ch"><img src="https://avatars3.githubusercontent.com/u/33541195?v=4" width="100px;" alt=""><br><sub><b>Lady Mashiro</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=LadyMashiro" title="Documentation">📖</a></td> <td align="center"><a href="http://twitter.com/mgfeller"><img src="https://avatars1.githubusercontent.com/u/361435?v=4" width="100px;" alt=""><br><sub><b>Max Gfeller</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=MaxGfeller" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/nahokomatsui"><img src="https://avatars3.githubusercontent.com/u/12132975?v=4" width="100px;" alt=""><br><sub><b>Nahoko Matsui</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=nahokomatsui" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/ryamakuchi"><img src="https://avatars3.githubusercontent.com/u/35450730?v=4" width="100px;" alt=""><br><sub><b>rry</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=ryamakuchi" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/chisaco"><img src="https://avatars3.githubusercontent.com/u/13715682?v=4" width="100px;" alt=""><br><sub><b>chisaco</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=chisaco" title="Documentation">📖</a></td> <td align="center"><a href="https://medium.com/@dzeyelid"><img src="https://avatars0.githubusercontent.com/u/977117?v=4" width="100px;" alt=""><br><sub><b>Kazumi OHIRA (@dz_)</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=dzeyelid" title="Documentation">📖</a></td></tr> <tr><td align="center"><a href="https://github.com/marymar"><img src="https://avatars3.githubusercontent.com/u/6716466?v=4" width="100px;" alt=""><br><sub><b>Mary</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=marymar" title="Documentation">📖</a></td> <td align="center"><a href="https://assurance-maladie-digital.github.io/vue-dot/en/"><img src="https://avatars1.githubusercontent.com/u/10298932?v=4" width="100px;" alt=""><br><sub><b>Dylan Broussard</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=deraw" title="Documentation">📖</a></td> <td align="center"><a href="http://farhia.netlify.app"><img src="https://avatars1.githubusercontent.com/u/20928494?v=4" width="100px;" alt=""><br><sub><b>Farhia</b></sub></a><br><a href="https://github.com/FrontEndFoxes/curriculum/commits?author=FarhiaM" title="Documentation">📖</a></td></tr></table> <p>This project follows the <a href="https://github.com/all-contributors/all-contributors" target="_blank" rel="noopener noreferrer">all-contributors<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> specification. Contributions of any kind welcome!</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/workshops/TEAM.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/71.796a9e78.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/71.796a9e78.js" defer></script> </body> </html> diff --git a/workshops/index.html b/workshops/index.html index f33c088..985ad93 100644 --- a/workshops/index.html +++ b/workshops/index.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/70.791c9a7a.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/70.791c9a7a.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -49,6 +49,6 @@ </a></li></ul></div></div> <a href="https://github.com/frontendfoxes/curriculum/" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="about-our-workshops"><a href="#about-our-workshops" class="header-anchor">#</a> About Our Workshops</h1> <p><img src="/vue-vixens.png" alt="Front-End Foxes"></p> <p>Front-End Foxes and its sub-group, Vue Vixens, are initiatives created by Jen Looper, a Cloud Developer Advocate Lead at <a href="http://www.microsoft.com" target="_blank" rel="noopener noreferrer">Microsoft<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. Our mission is to create workshops to teach Vue.js in a cool and fun way to 'foxy people who identify as women'. We have chapters worldwide; find us at <a href="https://frontendfoxes.org" target="_blank" rel="noopener noreferrer">FrontEndFoxes.org<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. Front-End Foxes workshops are called 'skulks' because a group of foxes is called a 'skulk'.</p> <p>These self-driven workshops are designed to help people get better acquainted with front-end technologies for both web and mobile development. Our teaching methodology is explained in <a href="https://dev.to/frontendfoxes/the-way-of-the-fox-the-vue-vixens-curriculum-290" target="_blank" rel="noopener noreferrer">this article<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <p><img src="/inaugural_skulk.jpg" alt="inaugural skulk in New Orleans"></p> <blockquote><p>Our inaugural Skulk at Vue.US Conference in New Orleans in March, 2018</p></blockquote> <h2 id="faq"><a href="#faq" class="header-anchor">#</a> FAQ</h2> <p><strong>What's the difference between a Chapter, a 'Mini', and a 'Nano'?</strong></p> <p>This content is presented as various types, divided by length. The first five chapters comprise the full-day workshop. Other chapters are listed as 'mini-workshops' or 'half-day workshops' and can be done ad hoc with groups for breakfasts, lunch'n'learn sessions, or meetups. Nanos are ten to thirty-minute warm-up icebreaker coding exercises used by our Chapters.</p> <p><strong>Why are the chapters broken up into parts?</strong></p> <p>All the online codelabs are designed to be completed in groups in a self-study mode in a workshop format during meetups, conferences, and brown-bag lunches. For the all-day workshops, it is best to break up the day into parts and regroup users periodically so that 'no developer is left behind'. If an attendee gets lost, she can 'reboot' by downloading the ending point for each previous chapter into a new Code Sandbox.</p> <p><strong>Where can I register for a skulk?</strong></p> <p>Workshop attendees and mentors can register for events at <a href="https://www.frontendfoxes.org" target="_blank" rel="noopener noreferrer">FrontEndFoxes.org<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. Keep an eye on our Twitter feeds <a href="https://twitter.com/VueVixens" target="_blank" rel="noopener noreferrer">@vuevixens<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> and <a href="https://twitter.com/FrontendFoxes" target="_blank" rel="noopener noreferrer">@frontendfoxes<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> for announcements of upcoming events. Front-End Foxes workshops are free, but depend on budget from conferences and meetups to provide lunch, breakfast, or snacks, and a space with wifi.</p> <p><strong>I'm a guy. Can I participate?</strong></p> <p>The goal of the program is to familiarize women and those who identify as such with concepts of programming for web and mobile in a supportive and inclusive environment. Experienced developers, however, are very welcome to join in our efforts to organize events, support our scholarship fund, mentor a skulk, and provide content. We are grateful for all kinds of help!</p> <p><strong>Want to contribute? Please make sure to check out our <a href="/curriculum/workshops/CODE_OF_CONDUCT.html">Code of Conduct</a>.</strong></p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/workshops/README.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/70.791c9a7a.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/70.791c9a7a.js" defer></script> </body> </html> diff --git a/workshops/react/index.html b/workshops/react/index.html index f609efe..b921ada 100644 --- a/workshops/react/index.html +++ b/workshops/react/index.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/72.868e3dbf.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/72.868e3dbf.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -49,6 +49,6 @@ </a></li></ul></div></div> <a href="https://github.com/frontendfoxes/curriculum/" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>🦴 Mini Workshops</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/curriculum/workshops/react/minis/ecommerce.html" class="sidebar-link">🛍️ 1: Build An E-Commerce App</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="react-workshops"><a href="#react-workshops" class="header-anchor">#</a> React Workshops</h1> <p><img src="/react-renards.png" alt="React Renards"></p> <p>Stay tuned!</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/workshops/react/README.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/72.868e3dbf.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/72.868e3dbf.js" defer></script> </body> </html> diff --git a/workshops/react/minis/ecommerce.html b/workshops/react/minis/ecommerce.html index 0a507ae..2a12be8 100644 --- a/workshops/react/minis/ecommerce.html +++ b/workshops/react/minis/ecommerce.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/73.38bfce19.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/73.38bfce19.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -719,6 +719,6 @@ <span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span> </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br></div></div><h2 id="conclusion"><a href="#conclusion" class="header-anchor">#</a> Conclusion</h2> <p>Awesome, there you have it! You have just created a e-commerce React application listing products on from an API backend! The next steps would be to add cart and checkout functionality to your application. Stay tuned for follow up workshops!</p> <h3 id="author"><a href="#author" class="header-anchor">#</a> Author</h3> <p>Made with ❤️ by Jaeriah Tay</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/workshops/react/minis/ecommerce.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/73.38bfce19.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/73.38bfce19.js" defer></script> </body> </html> diff --git a/workshops/react/minis/mini1-react.html b/workshops/react/minis/mini1-react.html index 4db5260..673c412 100644 --- a/workshops/react/minis/mini1-react.html +++ b/workshops/react/minis/mini1-react.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/74.a892403a.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/74.a892403a.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -1241,6 +1241,6 @@ Made with ❤️ by Natalia Tepluhina, updated by Jen Looper and migrated to React by SuperDiana! </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/workshops/react/minis/mini1-react.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/74.a892403a.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/74.a892403a.js" defer></script> </body> </html> diff --git a/workshops/react/minis/mini2-react-hooks.html b/workshops/react/minis/mini2-react-hooks.html index 6a746f0..78d71bb 100644 --- a/workshops/react/minis/mini2-react-hooks.html +++ b/workshops/react/minis/mini2-react-hooks.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/75.cbac1b03.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/75.cbac1b03.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -1187,6 +1187,6 @@ Copy </a></div> <div class="language- line-numbers-mode"><pre class="language-text"><code> </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/workshops/react/minis/mini2-react-hooks.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/75.cbac1b03.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/75.cbac1b03.js" defer></script> </body> </html> diff --git a/workshops/templates/mini_template.html b/workshops/templates/mini_template.html index 649729c..4ea7b5c 100644 --- a/workshops/templates/mini_template.html +++ b/workshops/templates/mini_template.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/76.aaf5f098.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/76.aaf5f098.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -114,6 +114,6 @@ <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">$start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><p>Add a screenshot of the final result</p> <p>The final app looks like this:</p> <p>(your screenshot here)</p> <h2 id="conclusion-and-challenge"><a href="#conclusion-and-challenge" class="header-anchor">#</a> Conclusion and challenge</h2> <h2 id="author"><a href="#author" class="header-anchor">#</a> Author</h2> <p>Made with ❤️ by your name</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/workshops/templates/mini_template.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/76.aaf5f098.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/76.aaf5f098.js" defer></script> </body> </html> diff --git a/workshops/templates/nano_template.html b/workshops/templates/nano_template.html index 01a5ce2..f6c47e5 100644 --- a/workshops/templates/nano_template.html +++ b/workshops/templates/nano_template.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/77.1abe0be2.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/77.1abe0be2.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -114,6 +114,6 @@ <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">$start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><p>Add a screenshot of the final result</p> <p>The final app looks like this:</p> <p>(your screenshot here)</p> <h2 id="conclusion-and-challenge"><a href="#conclusion-and-challenge" class="header-anchor">#</a> Conclusion and challenge</h2> <p>Add a challenge at the end so the student can go home and continue working</p> <h2 id="badge"><a href="#badge" class="header-anchor">#</a> Badge</h2> <p>Add the badge image here, available for download</p> <h2 id="author"><a href="#author" class="header-anchor">#</a> Author</h2> <p>Made with ❤️ by your name</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/workshops/templates/nano_template.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/77.1abe0be2.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/77.1abe0be2.js" defer></script> </body> </html> diff --git a/workshops/vue/full-day/appendix_1.html b/workshops/vue/full-day/appendix_1.html index 39103b1..2a1a6f9 100644 --- a/workshops/vue/full-day/appendix_1.html +++ b/workshops/vue/full-day/appendix_1.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/32.2d673e2d.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/32.2d673e2d.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -57,6 +57,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/32.2d673e2d.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/32.2d673e2d.js" defer></script> </body> </html> diff --git a/workshops/vue/full-day/appendix_2.html b/workshops/vue/full-day/appendix_2.html index 3aed49b..20e70b0 100644 --- a/workshops/vue/full-day/appendix_2.html +++ b/workshops/vue/full-day/appendix_2.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/79.f85cf793.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/79.f85cf793.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -57,6 +57,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/79.f85cf793.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/79.f85cf793.js" defer></script> </body> </html> diff --git a/workshops/vue/full-day/ch1.html b/workshops/vue/full-day/ch1.html index daa8e32..6b3f168 100644 --- a/workshops/vue/full-day/ch1.html +++ b/workshops/vue/full-day/ch1.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/33.bd2a7b4b.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/33.bd2a7b4b.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -542,6 +542,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/33.bd2a7b4b.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/33.bd2a7b4b.js" defer></script> </body> </html> diff --git a/workshops/vue/full-day/ch2.html b/workshops/vue/full-day/ch2.html index 8c144fc..dcc61cd 100644 --- a/workshops/vue/full-day/ch2.html +++ b/workshops/vue/full-day/ch2.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/43.b768f2d9.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/43.b768f2d9.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -583,6 +583,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/43.b768f2d9.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/43.b768f2d9.js" defer></script> </body> </html> diff --git a/workshops/vue/full-day/ch3.html b/workshops/vue/full-day/ch3.html index 14c01e9..92c1952 100644 --- a/workshops/vue/full-day/ch3.html +++ b/workshops/vue/full-day/ch3.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/44.a4d0a50b.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/44.a4d0a50b.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -275,6 +275,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/44.a4d0a50b.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/44.a4d0a50b.js" defer></script> </body> </html> diff --git a/workshops/vue/full-day/ch4.html b/workshops/vue/full-day/ch4.html index 4894962..e12e12a 100644 --- a/workshops/vue/full-day/ch4.html +++ b/workshops/vue/full-day/ch4.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/45.e1088147.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/45.e1088147.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -729,6 +729,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/45.e1088147.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/45.e1088147.js" defer></script> </body> </html> diff --git a/workshops/vue/full-day/ch5.html b/workshops/vue/full-day/ch5.html index f180994..b9e8e14 100644 --- a/workshops/vue/full-day/ch5.html +++ b/workshops/vue/full-day/ch5.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/46.40412734.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/46.40412734.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -806,6 +806,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/46.40412734.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/46.40412734.js" defer></script> </body> </html> diff --git a/workshops/vue/half-day/half-day1.html b/workshops/vue/half-day/half-day1.html index bc43dd6..7355e03 100644 --- a/workshops/vue/half-day/half-day1.html +++ b/workshops/vue/half-day/half-day1.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/47.ee10c959.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/47.ee10c959.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -2079,6 +2079,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/47.ee10c959.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/47.ee10c959.js" defer></script> </body> </html> diff --git a/workshops/vue/index.html b/workshops/vue/index.html index 7db342c..8e6b9c5 100644 --- a/workshops/vue/index.html +++ b/workshops/vue/index.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/78.be989ff0.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/78.be989ff0.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -49,6 +49,6 @@ </a></li></ul></div></div> <a href="https://github.com/frontendfoxes/curriculum/" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>🐶 Full Day Workshop</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/curriculum/workshops/vue/full-day/ch1.html" class="sidebar-link">📋 Chapter 1: Introducing the My Pet Shop Web App</a></li><li><a href="/curriculum/workshops/vue/full-day/ch2.html" class="sidebar-link">📋 Chapter 2: Build a Pet Gallery</a></li><li><a href="/curriculum/workshops/vue/full-day/ch3.html" class="sidebar-link">📋 Chapter 3: Connect your Project to an API</a></li><li><a href="/curriculum/workshops/vue/full-day/ch4.html" class="sidebar-link">📋 Chapter 4: Create a Dog Adoption Experience</a></li><li><a href="/curriculum/workshops/vue/full-day/ch5.html" class="sidebar-link">📋 Chapter 5: Complete the Adoption Experience with a Form</a></li><li><a href="/curriculum/workshops/vue/full-day/appendix_1.html" class="sidebar-link">🤷 Appendix 1: Lost? Confused? Starting fresh?</a></li><li><a href="/curriculum/workshops/vue/full-day/appendix_2.html" class="sidebar-link">📌 Appendix 2: Add your CodeSandbox to your Github account</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>🐾 Half-Day Workshops</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>🦴 Mini Workshops</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>👩‍🎓 Nano Activities</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="vue-workshops"><a href="#vue-workshops" class="header-anchor">#</a> Vue Workshops</h1> <p><img src="/vue-vixens.png" alt="Vue Vixens"></p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/workshops/vue/README.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/78.be989ff0.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/78.be989ff0.js" defer></script> </body> </html> diff --git a/workshops/vue/minis/mini1.html b/workshops/vue/minis/mini1.html index 545b040..ba290c8 100644 --- a/workshops/vue/minis/mini1.html +++ b/workshops/vue/minis/mini1.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/58.97fa300d.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/58.bd6af85c.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -1080,6 +1080,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/58.97fa300d.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/58.bd6af85c.js" defer></script> </body> </html> diff --git a/workshops/vue/minis/mini2.html b/workshops/vue/minis/mini2.html index 7003019..bfe77f7 100644 --- a/workshops/vue/minis/mini2.html +++ b/workshops/vue/minis/mini2.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/59.9b5570f0.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/59.38e95dc8.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -1030,6 +1030,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/59.9b5570f0.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/59.38e95dc8.js" defer></script> </body> </html> diff --git a/workshops/vue/minis/mini3.html b/workshops/vue/minis/mini3.html index e72a715..5623272 100644 --- a/workshops/vue/minis/mini3.html +++ b/workshops/vue/minis/mini3.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/23.91d2b584.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/23.91d2b584.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -331,6 +331,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/23.91d2b584.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/23.91d2b584.js" defer></script> </body> </html> diff --git a/workshops/vue/minis/mini4.html b/workshops/vue/minis/mini4.html index 45b79b3..a0f378d 100644 --- a/workshops/vue/minis/mini4.html +++ b/workshops/vue/minis/mini4.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/13.16d2ed7b.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/13.16d2ed7b.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -565,6 +565,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/13.16d2ed7b.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/13.16d2ed7b.js" defer></script> </body> </html> diff --git a/workshops/vue/minis/mini5.html b/workshops/vue/minis/mini5.html index 219f5b4..36701be 100644 --- a/workshops/vue/minis/mini5.html +++ b/workshops/vue/minis/mini5.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/24.4c608df4.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/24.4c608df4.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -323,6 +323,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/24.4c608df4.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/24.4c608df4.js" defer></script> </body> </html> diff --git a/workshops/vue/minis/mini6.html b/workshops/vue/minis/mini6.html index d086bfa..c2ef5c8 100644 --- a/workshops/vue/minis/mini6.html +++ b/workshops/vue/minis/mini6.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/60.7bf941a3.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/60.7bf941a3.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -57,6 +57,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/60.7bf941a3.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/60.7bf941a3.js" defer></script> </body> </html> diff --git a/workshops/vue/minis/mini7.html b/workshops/vue/minis/mini7.html index 84a3b8d..c1be3e5 100644 --- a/workshops/vue/minis/mini7.html +++ b/workshops/vue/minis/mini7.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/11.fddb7258.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/11.fddb7258.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -1442,6 +1442,6 @@ <span class="token punctuation">}</span> <span class="token comment">// ...</span> </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="achievement-8"><a href="#achievement-8" class="header-anchor">#</a> Achievement</h3> <p>That's it!</p> <p>You've completed your very first Harry Potter movie quiz app with Vue.js!</p> <p><strong>Well done 😃</strong></p> <p><img src="/curriculum/assets/img/mini6-step8-result.bad62e29.png" alt="Score"></p> <h2 id="author"><a href="#author" class="header-anchor">#</a> Author</h2> <p>Made with ❤️ by Mary Vokicic with support from Ilithya and Steffanie Stoppel</p> <h1 id="appendix-2-add-your-codesandbox-to-your-github-account"><a href="#appendix-2-add-your-codesandbox-to-your-github-account" class="header-anchor">#</a> Appendix 2: Add your CodeSandbox to your Github account.</h1> <p>If you login to CodeSandbox using your GitHub account, you can save your project to a new repository and keep it in sync with CodeSandbox.</p> <h2 id="instructions-2"><a href="#instructions-2" class="header-anchor">#</a> Instructions</h2> <p>Step 1: In CodeSandbox, click the Github icon in the sidebar, and grant permissions if necessary.</p> <p>Step 2: Enter a name for your repository.</p> <p>Step 3: Click create repository.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/frontendfoxes/curriculum/edit/master/workshops/vue/minis/mini7.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <!----> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/11.fddb7258.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/11.fddb7258.js" defer></script> </body> </html> diff --git a/workshops/vue/nanos/nano1.html b/workshops/vue/nanos/nano1.html index 5c6129c..7c5b6fe 100644 --- a/workshops/vue/nanos/nano1.html +++ b/workshops/vue/nanos/nano1.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/61.6e8b4eca.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/61.6e8b4eca.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -339,6 +339,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/61.6e8b4eca.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/61.6e8b4eca.js" defer></script> </body> </html> diff --git a/workshops/vue/nanos/nano2.html b/workshops/vue/nanos/nano2.html index f676af0..f1bea32 100644 --- a/workshops/vue/nanos/nano2.html +++ b/workshops/vue/nanos/nano2.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/48.88edca03.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/48.88edca03.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -280,6 +280,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/48.88edca03.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/48.88edca03.js" defer></script> </body> </html> diff --git a/workshops/vue/nanos/nano3.html b/workshops/vue/nanos/nano3.html index 9042e73..f15a9b7 100644 --- a/workshops/vue/nanos/nano3.html +++ b/workshops/vue/nanos/nano3.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/17.200838f4.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/17.200838f4.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -121,6 +121,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/17.200838f4.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/17.200838f4.js" defer></script> </body> </html> diff --git a/workshops/vue/nanos/nano4.html b/workshops/vue/nanos/nano4.html index 8b4496c..facd8b4 100644 --- a/workshops/vue/nanos/nano4.html +++ b/workshops/vue/nanos/nano4.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/62.b7a4350b.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/62.b7a4350b.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -249,6 +249,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/62.b7a4350b.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/62.b7a4350b.js" defer></script> </body> </html> diff --git a/workshops/vue/nanos/nano5.html b/workshops/vue/nanos/nano5.html index ad3adf6..fde1001 100644 --- a/workshops/vue/nanos/nano5.html +++ b/workshops/vue/nanos/nano5.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/25.6494940f.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/25.6494940f.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/34.ab1a52be.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -175,6 +175,6 @@ </a> → </span></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/25.6494940f.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/25.6494940f.js" defer></script> </body> </html> diff --git a/workshops/vue/nanos/nano6.html b/workshops/vue/nanos/nano6.html index 3aaeda7..07a4ad3 100644 --- a/workshops/vue/nanos/nano6.html +++ b/workshops/vue/nanos/nano6.html @@ -8,7 +8,7 @@ <link rel="icon" href="/curriculum/favicon.png"> <meta name="description" content="Workshops to teach web and mobile development to beginners"> - <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.9731be1c.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/34.ab1a52be.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.b01b2adb.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.97fa300d.js"><link rel="prefetch" href="/curriculum/assets/js/59.9b5570f0.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> + <link rel="preload" href="/curriculum/assets/css/0.styles.c2383ade.css" as="style"><link rel="preload" href="/curriculum/assets/js/app.708b59da.js" as="script"><link rel="preload" href="/curriculum/assets/js/2.31700463.js" as="script"><link rel="preload" href="/curriculum/assets/js/1.e58b189b.js" as="script"><link rel="preload" href="/curriculum/assets/js/34.ab1a52be.js" as="script"><link rel="prefetch" href="/curriculum/assets/js/10.745c23d7.js"><link rel="prefetch" href="/curriculum/assets/js/11.fddb7258.js"><link rel="prefetch" href="/curriculum/assets/js/12.7bb3c885.js"><link rel="prefetch" href="/curriculum/assets/js/13.16d2ed7b.js"><link rel="prefetch" href="/curriculum/assets/js/14.f2001be5.js"><link rel="prefetch" href="/curriculum/assets/js/15.b654a4b7.js"><link rel="prefetch" href="/curriculum/assets/js/16.6d53e8c9.js"><link rel="prefetch" href="/curriculum/assets/js/17.200838f4.js"><link rel="prefetch" href="/curriculum/assets/js/18.cb7ddc93.js"><link rel="prefetch" href="/curriculum/assets/js/19.b205dfbe.js"><link rel="prefetch" href="/curriculum/assets/js/20.e0ce5fdf.js"><link rel="prefetch" href="/curriculum/assets/js/21.07bf2bd2.js"><link rel="prefetch" href="/curriculum/assets/js/22.7b58d08d.js"><link rel="prefetch" href="/curriculum/assets/js/23.91d2b584.js"><link rel="prefetch" href="/curriculum/assets/js/24.4c608df4.js"><link rel="prefetch" href="/curriculum/assets/js/25.6494940f.js"><link rel="prefetch" href="/curriculum/assets/js/26.0b8da5eb.js"><link rel="prefetch" href="/curriculum/assets/js/27.7c4f8b3c.js"><link rel="prefetch" href="/curriculum/assets/js/28.1a700b9c.js"><link rel="prefetch" href="/curriculum/assets/js/29.593477ee.js"><link rel="prefetch" href="/curriculum/assets/js/3.d2d52895.js"><link rel="prefetch" href="/curriculum/assets/js/30.67045ac8.js"><link rel="prefetch" href="/curriculum/assets/js/31.16dc0db7.js"><link rel="prefetch" href="/curriculum/assets/js/32.2d673e2d.js"><link rel="prefetch" href="/curriculum/assets/js/33.bd2a7b4b.js"><link rel="prefetch" href="/curriculum/assets/js/35.0c150a2f.js"><link rel="prefetch" href="/curriculum/assets/js/36.c6385503.js"><link rel="prefetch" href="/curriculum/assets/js/37.4ed085e5.js"><link rel="prefetch" href="/curriculum/assets/js/38.1e5dcace.js"><link rel="prefetch" href="/curriculum/assets/js/39.e0f1278a.js"><link rel="prefetch" href="/curriculum/assets/js/4.df2bbd5a.js"><link rel="prefetch" href="/curriculum/assets/js/40.486c2625.js"><link rel="prefetch" href="/curriculum/assets/js/41.3ad56d94.js"><link rel="prefetch" href="/curriculum/assets/js/42.85859696.js"><link rel="prefetch" href="/curriculum/assets/js/43.b768f2d9.js"><link rel="prefetch" href="/curriculum/assets/js/44.a4d0a50b.js"><link rel="prefetch" href="/curriculum/assets/js/45.e1088147.js"><link rel="prefetch" href="/curriculum/assets/js/46.40412734.js"><link rel="prefetch" href="/curriculum/assets/js/47.ee10c959.js"><link rel="prefetch" href="/curriculum/assets/js/48.88edca03.js"><link rel="prefetch" href="/curriculum/assets/js/49.7a5ead4d.js"><link rel="prefetch" href="/curriculum/assets/js/5.77acca49.js"><link rel="prefetch" href="/curriculum/assets/js/50.55827105.js"><link rel="prefetch" href="/curriculum/assets/js/51.4fef1cc4.js"><link rel="prefetch" href="/curriculum/assets/js/52.4bf02870.js"><link rel="prefetch" href="/curriculum/assets/js/53.54b8cfbc.js"><link rel="prefetch" href="/curriculum/assets/js/54.9e245086.js"><link rel="prefetch" href="/curriculum/assets/js/55.f17dc5b8.js"><link rel="prefetch" href="/curriculum/assets/js/56.86aa06d9.js"><link rel="prefetch" href="/curriculum/assets/js/57.be0aa56c.js"><link rel="prefetch" href="/curriculum/assets/js/58.bd6af85c.js"><link rel="prefetch" href="/curriculum/assets/js/59.38e95dc8.js"><link rel="prefetch" href="/curriculum/assets/js/6.a4b2b61c.js"><link rel="prefetch" href="/curriculum/assets/js/60.7bf941a3.js"><link rel="prefetch" href="/curriculum/assets/js/61.6e8b4eca.js"><link rel="prefetch" href="/curriculum/assets/js/62.b7a4350b.js"><link rel="prefetch" href="/curriculum/assets/js/63.8b45e0ab.js"><link rel="prefetch" href="/curriculum/assets/js/64.eb6fb88e.js"><link rel="prefetch" href="/curriculum/assets/js/65.68dfc4a0.js"><link rel="prefetch" href="/curriculum/assets/js/66.3dc620d5.js"><link rel="prefetch" href="/curriculum/assets/js/67.87dcaf99.js"><link rel="prefetch" href="/curriculum/assets/js/68.d4b74534.js"><link rel="prefetch" href="/curriculum/assets/js/69.bb02b634.js"><link rel="prefetch" href="/curriculum/assets/js/7.da6345b3.js"><link rel="prefetch" href="/curriculum/assets/js/70.791c9a7a.js"><link rel="prefetch" href="/curriculum/assets/js/71.796a9e78.js"><link rel="prefetch" href="/curriculum/assets/js/72.868e3dbf.js"><link rel="prefetch" href="/curriculum/assets/js/73.38bfce19.js"><link rel="prefetch" href="/curriculum/assets/js/74.a892403a.js"><link rel="prefetch" href="/curriculum/assets/js/75.cbac1b03.js"><link rel="prefetch" href="/curriculum/assets/js/76.aaf5f098.js"><link rel="prefetch" href="/curriculum/assets/js/77.1abe0be2.js"><link rel="prefetch" href="/curriculum/assets/js/78.be989ff0.js"><link rel="prefetch" href="/curriculum/assets/js/79.f85cf793.js"><link rel="prefetch" href="/curriculum/assets/js/vendors~docsearch.6f140a46.js"> <link rel="stylesheet" href="/curriculum/assets/css/0.styles.c2383ade.css"> </head> <body> @@ -284,6 +284,6 @@ <a href="/curriculum/workshops/vue/nanos/nano5.html" class="prev"> 🔨 5: Scaffold a Nuxt App and Explore Its Architecture (Advanced) </a></span> <!----></p></div> </main></div><div class="global-ui"></div></div> - <script src="/curriculum/assets/js/app.9731be1c.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/34.ab1a52be.js" defer></script> + <script src="/curriculum/assets/js/app.708b59da.js" defer></script><script src="/curriculum/assets/js/2.31700463.js" defer></script><script src="/curriculum/assets/js/1.e58b189b.js" defer></script><script src="/curriculum/assets/js/34.ab1a52be.js" defer></script> </body> </html>