Start coding with Velo | Full Course | Wix Learn

Hey, what's up and welcome to the Velo Beginner course. I'm Joshua and I'm a developer advocate for Velo and I'll be taking you through the basics of Velo by Wix. So Velo by Wix is a platform that works right on top of wix and allows you to add some more custom functionality and interactivity to your website using JavaScript. So this course is intended for developers and non developers alike, but this is going to be a lot easier if you already have some more JavaScript experience in your arsenal. So what we'll do is we'll turn on dev mode to get started and this is how we turn on Velo so we can add our own JavaScript code. As I mentioned, and this works in tandem with wix, so you're able to use all the same WIX tools on top of adding some more code. And we can just turn on dev mode here and you'll see that our environment starts to change. So we get our code panel on the bottom and even on the right side here we have our Properties panel which we can control all of our different identifications for our elements on the page that we can drag and drop. As you know with wix you can drag and drop elements and what you see is what you get on the editor. So as I click different elements on the page, you'll see on the Properties panel I'm going to be seeing all the different IDs for what I'm clicking. So you see on the left side, on the right side here we have button is changing to 11, we have this text 37 and we'll go into more detail of how to actually identify these elements on the page a lot easier. So in our code panel as well, we have some more built in tools like Autocomplete and even a linter that allows us to see all the errors in our code. So let's go over to our Velo for Beginners page and I'll show you what Autocomplete looks like. So let's just take away some of this code here and let's start to write an import code statement. So this is how we're going to import some of our APIs that we already have built into Velo. As you see, the autocomplete already shows me some of the other APIs I already have available before I even finish the word. So we can select whatever API we want and we'll choose WIX Data and there you go. That may even have to finish the sentence. I can actually have the code there and ready to go. So let's go over to our Velo sidebar on the side here. And this takes us through all of our main pages here for our page code. And this is going to be where we can control our front end code. So we have Home Velo for beginners. Hello. Hello, Velo. A few different pages that we have on the site already, but as you notice within the code panel it starts to change. So this helps us organize our code and know which page we're on at the time. Then we also have Global on the bottom here. This also shows our masterpage js. So this is the code that allows us to work with our entire website instead of just a particular page. So a good example for this would be a sticky header that, that we want to follow us all the way from when we scroll from the top to the bottom of the page. On the left side here as well we have our code files option. So code files allows us to work with our backend code. So you can see when I go and click on some more code files on the side here, it opens up some more tabs alongside of our front end code just to help us organize some more as well. So we also have a course on backend. So this is going to be focusing a lot more on code files, so I encourage you to check that out as well. Next up we have a way for us to search our code. So as you see here, I already have something already written just to find out which page I can find WIX data being used on. So I use this sometimes when I forget where I left off or where to find some code that I made or maybe the name of a function that I'm not sure which page that it's on. This is great for complex websites that I'm building. And then next up we have our databases or content manager and this is where we can store all of our data that we want on our websites without having to go anywhere externally. So having it internally helps boost the velocity of our developers and helps you find out exactly where your data is at all times. And there's plenty of other tools for you actually to interact with, like our data sets so you can connect different page elements to the database without having to write any code at all. Velo Tools this is a little bit beyond the scope of this course, but I'll talk about it a little bit now. So we have a release manager which allows you to release different percentages of your website to visitors that come to your site. So If I want 50% of my users just to see some type of change, I can manage that with our Release Manager. Our Secrets Manager is another place for you to store all your hidden API keys so you don't expose them to the public. We also have logs and monitoring as well, just so you can monitor your website and check for different errors that are happening. The next option we have on the Velo sidebar is Velo Help. Velo Help contains all the resources that we need to interact with our community and learn about Velo. So we have our forum which allows you to interact with the community, have the conversation, and then we also have our API reference as well. And our API reference is great and details all of our different APIs that we have built into Velo from front end and back end. There's even APIs in there that help you connect to other external third party services as well. Like our HTTP functions API. Our documentation goes into even more detail and gives you examples of how to use Velo with all different types of scenarios. So there's a lot of different scenarios where you're going to be creating different interactive experiences for your site visitors and you can do that by selecting different elements on the page. As you know, Velo works in tandem with wix, so there's plenty of tools that you have already built in to work with elements that we have on our page. So from anything from a button, some text, maybe even an image, those things all count as elements. Even the page itself is an element that you can change. The ID of these IDs help us select a certain element on the page and give it a name so we can work with our code and, and it's just easier for us as developers to work through and select that specific element that we want to change and add some functions to. So if you're familiar with HTML and css, you'll know that there's something called getelementbyid. But when we're using Velo by Wix, it's a bit different. We're just using JavaScript, so we have an API called $W and we can actually use that to select a specific element on the page and add functionality that we want to it. So we can see here from our page, we have some elements here already. So this text, it's labeled as text 47. This other text is labeled as welcome, this one's text 48 and even this button's button 11. So these names aren't very useful when we're going to be developing our website and we Want to change it to something a little bit more related to what we're using this function as? So text 47 we can change it to something different and we can change it to welcome Message. Notice how I type this in Camel case. Camelcase is just a way for us to as developers to see how much more readable our code is. Instead of just having one long winded word, we have our default values already there for hidden and collapse. Those are very useful, but these are more static. And throughout this course we're going to be focusing more on dynamic experiences because we can do this code. Let's start out by looking at what $W is and how to use it. We could just type here in our onready function that says $w onready. An onready function is there so that when the page loads, it actually starts to use the functions that we have inside of it. So anything that's there, it's already going to get ready to go as soon as the user visits our page. So if we go right here at the bottom, we'll see that there's a few other experiences that I have built in. So I even have our WIX Animations API that's here where I have an animation running with this astronaut. So let's just see what this looks like. It's inside of our onready function. You see, I've imported WIX animations. I have some functions here just to make our spaceman float. We'll go here to preview as soon as the page loads. We'll see our astronaut floating up and down. Cool. But let's add our own other experience to maybe hide this welcome message that we had at the top. Instead of our $w onready function, we're going to add and select the that exact element for the welcome message. So we'll just type in $W and we'll type in welcome Message. And autocomplete is already helping us out. So choose welcome Message and we can add some more properties to this message. So let's say I want to hide it dynamically instead of static, just like how we had it here on the side. So we could have done this the static way by selecting the option for hidden or collapse. But let's just do this with code because what if we want to create some other custom functionality and have it hide afterwards? If I was to just use this from the static version from the default values here, I wouldn't be able to add that. We have $W welcome message. That element is selected. And let's add a property. So just do a period here and then we get some more autocomplete options. So this just shows you exactly depending on the data type of that element, which properties are available for you to use. So I just want to hide this message on load just to show you, for example, what this looks like. And let's go in and look at that. So I can go here and click hide or I can type it in whatever way is easier for me. Velo is great because it definitely increases the velocity when you are developing these websites. We'll go here and click hide and we'll just see from when we click preview mode what this looks like and if that welcome message is actually going to be there. So let's click preview and our welcome message is gone. So that's how you use $W in order to select an element and add functionality. There's a few other things that you can do. You can add in functional program where I can create functions outside of this $w onready function and just call the function itself. Or I can write the function straight inside of our onready function in the beginning. So we'll go back to our editor and we're going to check out another example that I have here on the page as well that you may be a little bit more familiar with when it comes to using a website. So imagine you're going to a website page and there's a button there that says read more. And then all of a sudden some more additional text starts to show up. So this is a great example that you see on a ton of websites across the web. So let's recreate that experience right now with some code and see how that operates with Velo. So here I actually have an example already ready to go with Read more. So I have some text here that I have grouped together. I even have this space message and then I also have this additional text. This is just some messages giving you our perspective on what space is. Since this is a space themed website, we'll go here to preview. So you see, I have some messages here already letting me know a little bit more about space that I probably didn't know already beforehand. We'll click Read more and then some more additional text pops up. So now you know how to write code and also select an element on the page and add some interactivity to it. But you still might be wondering how these scenarios go and where to add your code. In this lesson we're going to learn about how to use events and how to work with loading elements on the page before it's presented to our site visitors. So back to the code panel. We have a few things already written here in code, and we have our onready function ready to go here. Our onready function already comes with our pages. Even if we create a new page, it will show up. Let's just try that out. For example, add a new page. You see right here. OnReady already comes ready for us to go. This is just where we're going to write our code so that before it actually presents to the page, our elements and the functions we create are already ready to go, so we don't have to look for those resources elsewhere. Back to Velo for beginners. We're going to go and work with our onready function here. So you see, I already have some code for our animation and even some for an on click for a button. But we'll go into detail of those in the next lesson. This time we're just going to focus on creating a simple function to display the time for whoever is visiting the site. So what we'll do first, we want to make sure that our page design is already ready to go before we start to add the functionality to the code panel. So we already have something set here for the current time, this one element called label. And we can either drag and drop this label in, or we could just copy and paste this label and change the id. So I'm just going to copy and paste this label element here. And copy and we'll paste it right here onto the page and we'll line it up and I'm going to change this text to display the time. So just so I can reference how it's going to look, I'm going to display the time like this and we're going to rename this text from text 49 to to time. And then we're going to copy this once again and we're going to make another text element here for the message that we want to display. So on top of me designing this page, I also want to keep in mind what I want this interaction to be like. I want to have this time display, but then also I want a message to display depending on the minutes that it is. So if the minute number is even, I want a message to show up different than what a message would show up if the minute number was odd. So we'll go here and just label this again as well. So I'll just type in display message because we're going to be changing this programmatically so we're having that dynamic mindset with us throughout creating this application. So we go display messages and we'll change out this ID again and we'll just change this to message. So there's no need to change any of the options for the default values. We'll just leave it as. So what we'll do is actually we'll take this outside of our onready function to show you how functional programming actually works as well. So there's maybe instances where I create a function, I want to reuse it and invoke it somewhere else. So we're going to take our function outside of this onready function and we're going to invoke it later on. So I'll show you how that works and what I mean as we build it. So again, we wanted to make sure that our design was already ready to go before we started to implement some code. And we already have in mind what we want to display on the page. So we have our current time is we have this one element here for our current time, and then we have another text element here labeled as message to display the message. So outside of our onready function and you can check with the scope here by going right next to this bracket and you can see where the scope ends. So right underneath line 17, I'm just going to go and space out and go to line 19 and we're going to create a new function to show the current time. So it's a function and we can name this function current time. Remember, you could use camel case here, just so we can easily read the function when we want to invoke it. And notice that when we create this function that it becomes idle. When it's idle like this, that means that this function hasn't been invoked yet. So let's invoke this function in our onready function so we can respond to the event that happens. So in this case, our response is showing the current time wherever our user is. So we're going to invoke this function by just simply putting the name of the function and also some parentheses next to it. So let's just go here inside of our onready function and we're going to type in current time and autocorrect or autofill is already there and showing us. And we can invoke our function here and current time. Another cool trick, we can just right click inside of our code panel and click format. And this is similar to some extensions that you might be familiar with for Our experience audience, if you're using VS code or Atom, any of those, there's certain extensions in those IDEs to format code like prettier and beautify. This is similar and it's already built in. So let's drag up our IDE real quick. And we notice here, right here on line 20, our current time function is no longer idle, so that means that it's invoked somewhere. But there's currently no code inside the scope of this function, so nothing's going to happen until we add it. So let's go here and start to create a constant variable for the current time, since we know it's never going to change because our current time is set in stone dynamically based on whenever the user visits our page. So let's create a variable here. So you go with const, and we'll call that now, and we'll equal now to new date. So now this date operator here is going to allow us to work with the date throughout our code and we can get the current time, the millisecond, the minute, you name it. So now we have this const. Now is equal to the new date. We're going to be able to use now in order to get the current time and even make a function so that if the current minute is even or odd, we'll show a different message. So let's start out with time. So Remember, I already ID this as time. Right here we're going to use our $W selector API $W and we're going to mark time in time. We want to change that display text or this default text that we have here already. So we're going to do this programmatically. The reason why we do this instead of just going into the text is because it's easier for me to create a function that I can change what the text looks like constantly with code without having to go back into the editor each time just to change the message that displays. So there could be an instance where I have an API that I'm connected to that's going to show me a different message all the time. And it's a hassle to go back and forth and work with static data when I can have something dynamic constantly feeding me something. We're going to change the text using the text property since it's a text or string data type text, and we're going to equal that to now, which is our current date. So it's getting everything down to the millisecond. And we're going to use get local to local when use tolocal time string. So this is going to allow us to get that current time. So we're just going to open up this array because we're going to place it there. And then we're also going to change the time style so we can put it in shorthand versions so we don't get everything down to the millisecond. Although that's great that we can have it. We don't want to display that much for our users. So time style. And we're going to change that time style to short. Cool. So let's just go into preview mode and take a look at this preview. So go here. You see how the current time just changed to 3:06. But this display message hasn't changed yet and we want to change it based on the number that the minutes are on. So right now six is an even number and we want to be able to change that message if it comes up as an odd number. So let's go back to the ED and what we're going to do is select the messages element here. Dolly W messages. Again, we'll use the text property as well and we're going to equal that to now get minutes. So we get the current minute and we want to check if the minutes are divisible by 2, and if not, we'll display a different message. Because if we can find out if it's divisible by two, we know that it's an even number. So we'll do here we'll get our percent sign and we'll just type 2 and we'll strictly equal it to 0. Next, what we'll do, we're going to set a ternary operator and this ternary operator similar to if and else statements where we are working with a condition. So if that number is even, we want a certain message to display. So let's just type in this message here. So we have to have something in question. So we'll have this question mark and we're going to put our quote of whatever we want the text to change to. So if we have this here, we'll say we are time to get even. Let's try that. And on the other side of this ternary operator, if the number isn't even and it's odd, we want to display a different message that says we live in odd times. Cool. So now that that function is written, remember, we can always right click within the code panel and format our code to make it look nicer. So you see how a few changes just happened. We'll go here to preview and remember we wanted our time and our message to change. Cool. We'll go to preview mode, we'll open this up, we'll go down and you see it's 3:08 and the message that's displayed is time to get even. If we go back to the editor and even if we preview and we wait a little bit, it's going to change to we live in odd times when it turns to 3:09pm so the time might have changed by now. Let's check it out. There we go. It's 3:09pm and the message that's on the bottom is we live in odd times. So these are some ways to work with your onready function. Possibilities are endless. There's so many things that you can do with your onready function. You can even create some other functions outside the scope like I showed you, and invoke them and nest them into your onready function or into other functions you have throughout your website. So in the last lesson, we learned about how to use $w on ready so that when the page loads, it's going to present or display the elements and the functions that we already have inside of our onready function. The difference here is that most interactions you have with the website only occur when you are actually interacting with something like a button or some type of text, maybe even an input, where you're typing in some type of message. These are instances when you're actually interacting with elements. Doesn't always happen when the page loads. So now we're going to go a bit further into creating and handling events dynamically with our website. So you might have seen before, inside of the Properties panel, when you select an element, there are a list of event handlers that are there. So let's take a look at what happens when we drag and drop a button onto our page and some of the options we already have available for us. So I can drag and drop this button here, add it to my page, even change some designs up. So I just change the color to something that's going to suit my website. So let's change it to this blue. There's no need for me to go and change anything with the label at the moment. I can do that programmatically. I can do that with the menu that's already here, but let's just take a second to look at the event handler first. So on the side here we could have our button 12 and let's change this button to something a little bit different Here, for this instance, I'm going to create a button to read more text. So currently, right now, above this button I have is a piece of text here that's labeled as space message. That's just explaining what space is. But let's just say our site visitor wants to learn something more. We can add additional text underneath it. And when we click the button, we want to display that additional text. So let's just go here to the button and rename it to read more. No need for us to change any of the options for the default values, but the event handlers that are here are already set for us to go. And we have on click on, double click on mouse in, which is like when we hover on mouse out is when we move the mouse away. So if we hover in and hover out, we also have viewport enter and viewport leave. That's when we enter a certain space we want an event to happen. A lot of these things are already built in and ready to go, but these are all static events, so they're only going to happen specifically when we click this event for that specific element that we have on the page. But we want to do things dynamically when we're creating these websites. So let's get to that. So instead of clicking this on click function that's here we can go read more. It creates this export function for us, but it keeps us sort of in the this box, which is good for some instances, but we won't be doing that in this lesson. So we have the button already here on the page. Let's change out what this says to instead of button, we're going to change this to read more. Now, I can do this programmatically using the label property for the button, or I can just change things right here in the menu. Just depends on what I really want to display. So what we'll do now is we're going to drag and drop a text element into the page to match the same style of the text that we have above for the space message. So we want to display some more information about space for our visitors that have a thirst for some more knowledge. So we'll go here to the I panel again and we'll even minimize our code panel just for some more space for design purposes. And we'll go here and add in a heading six, and in this heading six we want to match that same style that we have inside of this space message above. So I already have a message for the explain the rest of space here. So I'm Just going to do paste and match style. And what I'll do is also change the color because I want to keep things consistent. Then let's go and change our font to Open Sans. Open sans here. Size 14. Awesome. So we're gonna stretch out our text a bit and you can always continue to edit the text as you go. You have the freedom to do so if you're coding along. And we'll match it up here. And again, we'll just go and even some things out There we go. And we'll change this text 49 since we don't want to work with those weird names. And we're going to change that to additional text. Now, this additional text is something that we don't want to display as soon as the page loads. So there's some default values and options that we can actually mess around with now. So we're going to choose the default value to collapse this element before the page loads and displays to our users. Let's see what that looks like after we select the option. Right now, it's unselected. We don't have any collapsed elements here, but when I do select it, we won't see additional text showing up on our page. If we go to preview mode, we close down our developer console, you'll see that I do not see the additional text here. I just see our space message and the button that we have displayed. So back to the editor. What I'm going to do now open up my code panel a bit. Now, our additional text is collapsed by that default value that we've already selected. So you can check to see if an element's already collapsed by looking at it and seeing all these lines going through. So when it's not selected, you can understand that this was a collapsed element or not. Since it's collapsed, we want to change the action when a certain event is handled by clicking a button. So we already have this Read More button already here ready to be worked with. And what we're going to do is we're going to create a function within our onready function that allows us to click this button whenever a user interacts with it. So right now what we'll do will select the button and then add an event handler to the button dynamically instead of static. So we'll just simply select with $W again we'll select our Read More button. And with our Read more button, we're going to add an event handler for on click so that when we click this button element, we will have a certain action happen. So remember, the web is just full of different interactions. That's the whole point. Think about when you're going to a search engine and you type some type of input into the text element and you click search. You know what I mean? That search is going to have a different interaction than if I click the links that show up from my search on the engine. So everything has their own type of experience when you have it displayed on a webpage. And that's the whole point of of creating these event handlers right here. So with this event handler, we want to give it the action so that when we click it, something's going to happen. So we'll just type in on. And you already see from the autofill here on, click on, double click on, mouse in, on, mouse out, viewport, enter, viewport, leave. These are all different events that you can handle. When we're interacting with this type of data, type here for a string or for a button actually. So we're actually just going do on click. Because when we click this button, we want something to happen. And we'll open up this arrow function here. So within this arrow function that we have for this onclick, we want to add this additional selector for the additional text so that when we click the button, we expand the text instead of it being collapsed. So let's select our additional text with $W once more. Additional text. And right here we want to expand it. And expand is just a simple function here. So the next thing we'll do, I always like to format my code and make sure everything's nice and clean before I get ready to go. And you'll see here I don't have any errors, so that's looking nice. And we'll go here to preview mode. Just remember that element is collapsed at the moment. So when we scroll down here, we won't see that additional text at all. But we have this Read more button because we want to learn a lot more about space, right? So we go to read more, then you see our additional text shows up. So this type of experience doesn't just have to be text. It could be any type of element that you want to display. And there's so many different ways for you to use these dynamic events and respond to them on your website. When you're creating these experiences, just think about you being the user and you actually using that website, right? What's going to happen if I click this button? What happens if I hover over this element? Those are all things you should be thinking about when you're creating your site. And that's why Velo by Wix is awesome at helping you create these type of experiences beforehand by dragging and dropping. And what you see is what you get on the page. And then as soon as we know exactly how we want our page to be mapped out, we can then use Velo to add the code to actually give our users the more power to interact with our websites the way that we envision it. So we'll go back to our editor and we'll just go over this code once again, very briefly. We have our onready function already here for us, and on line seven we have our Read more button that we selected with our OnClick event handler. We're doing this dynamically because it's easier for us to reuse this code again once more. And we can also add some other dynamic type of data or content running through this function if we really needed to. Like an API, for example. And on the second line here, we're just using $W to select the additional text and expand it because by default we already had it collapsed. Let's just go to our API reference straight from the editor. If you remember, from the first lesson, we took a tour of the editor and we checked out our Velo Help section right here on the Velo panel. So we have a few resources. We have our API reference, like we just mentioned our form documentation, and these are all places that you can see different uses of our APIs, but the main source is the API reference. So let's just click API Reference and it'll open up a new tab right next to our editor and we can get ready to go. So the API overview just reads Velo APIs previously corded empower you to take full control of your site's functionality. Use the APIs to interact with your site elements, your database, Wix apps, and external services. The APIs also give you full access to information about your site, its users, and more. So API reference includes a lot of code, a lot of examples that you can copy and paste, and we'll take a look at some of those things. So remember, there's a lot of site elements to use, and there's also APIs. So our site elements have. Some of them have APIs like our $W, and our $W helps us interact with those site elements. Right? So. So buttons, dropdowns, text repeaters that we also have a lesson for. You'll be able to utilize and actually learn how to do that with the API reference later on. We do have a course for Velo, front end and backend. And the API reference does show you a lot of details of our front end and backend APIs. And you'll actually learn about that in those courses, a lot more in depth than in this beginner course. But for now we're going to focus on page elements and how to read and decipher the API reference with our page elements. So if we go over here to API Reference, Wix Editor Elements$w. Remember, this is the selector that we've been using the entire course to select an element and then add some type of functionality to it. So with the API reference we know we have the introduction, which is just additional information about the section. So this is just giving you a brief explanation as to what $W is explaining, what already was. And then also on the right side here, it shows you different code examples that you can copy and paste into the editor itself. So it has a few different scenarios when you would use $W. That's here. And that's the same case for showing different scenarios for each element. So you see here we have the description, the syntax, $W parameters, all of that. But let's go over to something else, an element that we already have on our page. So let's just go back to the editor for a sec. We have the WIX editor here, and on this new page we're just going to call this the STEM program page. So this whole website is about space exploring science. And this is now our chance to show students about all the different programs we have to offer them when they want to learn about science and just technology. So this slideshow we have our science section, Technology, Engineering, Mathematics. At the top, these are all different buttons. And below these buttons, these different colored buttons, is a slideshow. The slideshow is a page element. And this slideshow page element has an API that we can interact with. And these functions can be used to change the slide, check the index, and get as much information that we need to about the slide as possible. So back to the API reference we can go and check out slideshow. So under WIX editor elements, which is right here, let's expand this. We'll scroll all the way down to slideshow. In slideshow, open this up and we have a few different functions and properties that we can look through. Let's just look straight at the introduction real quick. You can use and open this Velo Properties Events panel for the slideshow and for the elements for each individual slide. So the first one that pops up here is to get the current index. This function so this just shows us the current index that we're in. So an index would be the current slide that we're in. So when you're working with computer science and programming, when you're working with indexes and arrays, you start from the number 0 and you work your way up from there. So you don't start from one, you start from zero. So slide one would technically be zero, slide two would technically be one and so forth. So this current index would just show us whatever current slide we're on. So we can create a function that shows us that current slide and then also equate that to if the slide is on slide number three, then I want this type of interaction to happen. But right now, what we want to do is we want to be able to change the slide if we click a certain button, right? So let's just go down the API reference and look for a function that we could use with the slideshow to change the slide. So we have current index, current slide, slides global. Okay, And I see here a function for change slide. So let's click change slide and take a look at it. You can change the slide shows current slide to a specific slide or index. Remember, we just learned about the index. So we have 0, 1, 2, 3. So in the editor we have science 0, technology 1, engineering 2, mathematics 3. So these are all different buttons that we want to change the index of the slide that's being displayed. If we look at this description, it says the change slide function returns a promise that is resolved when the slideshow finishes moving from current slide to the referred slideshow reference. So we can see the syntax of how this is supposed to be written. And then we can also see the parameters that are accepted if we create a function with the slide reference here, we're going to keep things simple and we're just going to use something similar to this first example we have here on the right side to move the slide using an index. So there's a few other examples here to move a new slide using a slide object, or move to a new slide and log a message when the slide finishes, which you could use for testing purposes. But for right now, we're just going to change the slide based on when we click a button and we change the index. Let's take a look at this code example. We also have this button here to copy code if we really wanted to. So this is just a way for you to use the API reference and have it as a real reference as you're coding along and creating these experiences. For your developers. So we can copy here, copy the code, and we'll go back to the editor. So let's open up our code panel on the bottom here. And we have our onready function. So remember, in the onready function we can, you know, do some, we can throw some functions in there. We can even do some functional programming. Just for this example, we're just going to create some event handlers and put them inside of this onready function so that when we do click different slides here, it's going to show and display a different index depending on the button. So for our science button, let's just select our science button that we have at the top here. And we're going to keep recreating that same event handler for a different button. So we'll just start with $W and we'll do science button that already comes with our autocorrect, our autofill actually. So science button already comes with our autofill and we're going to use on click again. So remember from the last lesson we used OnClick. In this OnClick function, we're going to add some type of action. We want to change the index of that slide. So when we click that science button, we want to change it to index zero. Because science is the first slide that we have, and that's how we have it all ordered right now. So if you want to change the order for a slideshow, you can remember, there's endless possibilities, customize these experiences that you're creating. So inside of this onclick function, I want a certain action or an event to be handled. Once that button is clicked, that exact event that I want handled is when I click, I want this slide to be changed to index zero. I already had the copy from the API reference in my clipboard, so I'll just come here and paste and I'll show you something real quick. So within this function here, this onclick function, you already see that I have an error. It's saying that my slideshow is not the id. Just remember, when you're using the API reference, these are references. And we're not going to know exactly what ID you have inside of your page elements, but it's a way for you to reference how you're going to create these different events and actions in your website, just as an example. So this slideshow, as you can see, we already have here id'd as stem slideshow, right? This ID is right here. We could even copy and paste it real quick and put it in here, $w stem slideshow. And we want to use the change function right here. And we're going to change the index from 2, which was in the example, to 0, because we're starting from this Science button. So go to zero. And when I click this button, it's going to bring me to this first slide. But we already know this is going to work out, you know, once we go and click this button. So let's continue to create this same action, the same event for all of the different buttons here. But we're going to be selecting the button differently depending on which button it is for technology, engineering, mathematics, and we're going to change the index as well, so we can keep reusing the same code we have from this dynamic event handler that I created for the Science button. So copy 1, 2, 3. So my code's a bit ugly right now, so I just right click format and it makes it a lot better looking right there. So next up, we have our Technology button instead of our Science button. So we'll just go here and replace Technology button. It's the same slideshow, so we'll keep it as stem, but we're changing the index. So for the next one, same thing, Engineering button, we're going to change the index to this to two, and then we'll do this lastly for Mathematics button, and we'll change the index to 3. So now that I have this all created here, when I click each button, it's going to allow me to go to each different slide that I have in index order. So let's just go over to preview mode and check out how these events are being handled. So we have Science. That's great. We already started there by default. Now let's head over to the second slide here for technology. If I click Technology, now that I have this event handler added to this button, when I clicked it, it brought me to this technology slide. Same goes for engineering and for mathematics. I was able to simply put this together by using the API reference and then also applying it to whatever experience I was trying to create. So there's many ways that you can get inspired from the API reference. The API reference also has example tutorials that you can see on the example page. There's even release notes and updates so you can check out all the new APIs that are coming out and even updates for existing ones as well. So the API reference is always going to be your go to single source of truth when you're using Velo. And again, you can see a lot of the use of these APIs within our next courses for front end, back end, and even for repeaters. And you can see the community talking about it within the forum as well. The API reference for me is something that I use all the time when I'm creating a website. I don't remember everything, but that's why the reference is there. So there's APIs beyond $W and the page elements. So for example, we have different verticals like WIX Stores, WIX bookings, and other APIs you can interact with, like animations and WIX Window that don't require some type of vertical. So in this lesson, we're going to take this deep dive with WIX Window and we're going to create a promo code experience for our STEM courses that we were just working with. So if we go back to our STEM program page, we're going to offer a new thing for our students that want a percentage off for their courses that they're going to take. So we're going to go back to the API reference and see how we can import some of these APIs into our code. Let's go back to Velo Help API Reference and we'll open this up. So let's go beyond $W and we're going to go to WIX Window. So you see, there's plenty of APIs here to use. And some of our other courses will go into way more detail about how to use these APIs. Some of them require front end experience, some of them require backend experience. But right now we're going to show you some of your user friendly approaches to using these APIs. So we'll open up WIX Window on the bottom here. You notice in the introduction we have something a little bit different with the syntax. We have an import function here as well at the top. And we're going to import WIX Window into our functions here. So you'll see that there's a lot of other examples that you could use. And we're going to focus here on Copy to Clipboard. So with WIX Window, we're going to use the Copy to Clipboard function. And this function copies text to the site visitors clipboard. So the function copies a specified text and you can put that specified text as a static value right here within the function itself. So let's break down the code a little bit here on the side. So first we import WIX Window and then we use The Wix window API's copy to clipboard function and we put the text that we want here. So this would be where we're going to place our promo code because we're never going to move it, it's going to stay static. Then we also use then to return a promise. After that this is copied. So when this is copied, we're going to have some other type of event happen. So you can do this when you want to change the text of a button or have something else happen as this is clicked. We also do have this error handling here so that if an error does occur, we can display some type of message or even have some other type of alternative scenario if an error does happen. We're going to recreate the same experience that we have right here in the API reference in our website. We're back in the editor and what we're going to do is import WIX window. So first at the top of the code, before our onready function, we're going to import our API. So just make sure that when you're using an import statement, there's nothing above it. This is the first thing that should be in your code. So we'll import WIX window and it becomes idle. That's because we haven't used this API yet or any functions within. So let's move up our code panel a bit here. And we're going to create a function outside of this onready function. Just because I like functional programming, I think it's a lot easier for me to organize my code. We're going to create a function called Copy to Clipboard. And inside this function we're going to use the WIX window API. But before we start to use this API, let's recreate our experience here on the page. And we're going to drag and drop a box and we'll change the color just so it fits the design. We'll change out the size too. We'll also bring in a button. Change the color of this button to match us back to that blue that we like. And we'll even change out the text of the button. So we'll change this to copy. We'll even bring in some text as well. So bring in this heading right here and we'll type in whatever random promo code we want. So I'll just use a six digit or six character promo code. So let's just say F7, capital L MX2, something real random. But we're going to use the same code later on within our editor as well. Let's just drag and drop. Let's get this ready to go again. We're going to use this same code within our code panel because we want to use this later, we'll drag this over, change it to design. We also want to change the ID of these buttons and the different elements there because we want to make sure we know exactly what we. So we're going to change this button from button 13 to copy button, and we'll change this text to promo code, and let's even add something else in here just to make our visitors understand what they're about to get into. So we'll have this here. It's going to say promo code. We'll change out the color of this text to black. Cool. And we'll leave this like this. And what we'll do now is since we have this button here for the copy button, we need to create an event handler just so that when we click this button, we're able to copy this same exact promo code we have right here. So let's just click this promo code and copy it in our clipboard for right now so that when we write this code now, we can just easily use it. So within our Copy to Clipboard function, I'm going to use the WIX Window API. But first I need to create this event handler so that when I do click the button, I can copy the text. So what I'm going to do is create an event handler for this button. So we'll select it with $W$W and that is our copy button. Copybutton on click. And when we click this button, we're going to use the WIX Window API so that we can copy the exact text that we have in the promo code there. So because we import a WIX window, we'll see already here in the autofill, it says WIX Window, do WIX Window, Copy to Clipboard. And Copy to Clipboard is looking for the exact text. So remember, we have this promo code here, and we're going to put this in quotes because it's a string or text. That's the data type that it's looking for. So we'll copy our promo code right here, and that should be ready to go. But we also want to make it so that if I do click the button, when the promise is returned, I want this button to change from copy the label to copied so my user knows that the button has been clicked. And they can have that like, type of satisfying experience knowing that something actually happened. Because if I leave it the way it is right now, for example, if I go to preview mode and I click Copy, nothing happens to the button. But I'm definitely copying this promo code right now. So go back to the editor and I'm just going to show you right here. If I go below and I do command V because I'm on a Mac, you'll see that the promo code has been copied. But I wasn't sure if it was copied or not. So let's return a promise that's going to change the text or the label of that button. So right below we're going to use then, we're going to use then to return a promise so that when we actually use this callback, we get the resolution for this exact thing that we want to return. So within dot then. Going to go here and inside of that, then we want to change the label of our button, right? So the label of our button is going to be changed from copy to copied. So what we'll do now is we're going to take the same exact copy button and use $W to select it and then change the label of it. So $W copy button dot label, which is a property of the button element. And this label is going to be looking for a string or text. And we're going to change this to copied just so our user understands that when they click the button, something actually happened. Next, what we'll do is we're going to create an error handler just so that if something was to happen to our copy function, we are able to understand that an error did happen. And we can have some type of alternative case or maybe a message that lets us know that it failed. So a way for us to give a message that lets us know if it failed is by using console log to test console log. And we could put this in text failure, failure to copy. Cool. Or we can just simply go error. So now in our copy the clipboard function, you notice that it's idle. That's because we didn't put it inside of our onready function or we haven't invoked it anywhere else. So let's just put it inside of our onready function. Copy to clipboard. Let's test this out. Now, when we click the button, we should be able to see a change in the label of the button. And on top of that, we should be able to copy and paste our new promo code that we have here. We have copy, and you notice the button has changed now to copied. So we know that it got copied. And we'll go back to the editor now just to see what the promo code looks like. And I'm just going to use some comments. So with JavaScript to create a comment is by using two slashes here, forward slashes and I'm going to copy right here my promo code. So look, our promo code is already ready to go and I can get a discount now on my new courses. So this in this lesson we learned how to go above and beyond just using $W to select page elements and use functions to manipulate them. Now we can use actual Wix APIs that are built in for you to create even more custom functionality and experiences for your site visitors. You know there's plenty of verticals to use like Wix stores, bookings, events that have APIs already built in, and there's other cool ones like animations, HTTP functions for you to connect to, third party services, you name it. The API reference is filled with different detailed information about all the APIs to use within Wix. And then on top of that you have the forum and documentation where you can see our community talking about it and even see some examples from us on the documentation page. Well, that concludes our journey together. We've covered everything from using the API reference, creating experiences with elements, and then also adding events and responding to them. So there's so much more to cover within using Velo by wix. So that's why we have some other courses for you, like the Back end, Front end and working with repeaters, so you can check out some more of these resources in the link below.