How to Code with No-Code! Velo + Editor X

[ad_1] In this video we'll be exploring velo and its functionality in relation to editor x for building this pricing calculator i'm putting together we're gonna do a couple of things such as hiding and showing different elements with clickable events and lots more so let's just get started right now now This site is one that i've been working on for the last few videos we've got a pretty good design going and now it's also responsive but it isn't really well a clickable demo just yet so what i'm thinking is that we should make one that basically works with different sort of i suppose Clickable events that takes you to different screens now if we open up the figma design we'll have a better idea of what i mean by that so we'll head over here to the design for the pricing calculator and here what i've done is actually built out several screens with the very First one hearing being this step one that we have now in order for this to work we'll be using velo and what i'm thinking is that we could probably create a number of pages here that are kind of invisible until you have the clickable events so when you click on this button Over here you'll land on the very first page which is the pricing calculator page i'm thinking to even maybe replicate this design here that we have um as maybe like a master um section let's have a look here i think it's just over here masters Let's see if we can turn this into a master so i'm going to right click here i'm going to select to set this as master section i want to rename this section over here but it is showing up and if we click edit we can see it immediately here Now what this means though is i should be able to maybe duplicate it yep here is our duplicate and this one here i want to change so let's actually have a look at it it actually has the header here i probably need to move this outside of its current section uh so let Me first remove this one over here it will be deleted uh then let's create a new header actually you know what no no we might even be able to keep the header because we can see the second page here doesn't have that same header it's completely different so actually let's go back We'll duplicate this one this one will exist here below so i want to sort of make sure it's right here below which it is if we do a preview of the page we can see both of them here back to back but what's going to happen is we're going to Make one of them invisible until we make a clickable event so this one here i'm going to delete a couple of these things i'm going to probably have a different description here and i'm also gonna do a couple of other things but for the time being let's open Up our dev mode and it will occur when we see this code on the left hand side so that has appeared now for this section here below i want it to not be displayed so we just have the main section here and we're gonna display it only when for Example we click an item uh so let's actually have a look at creating that function so the first thing we've got here is we've got our very first item here box nine and i want to create an event here for this box nine now uh here i'm gonna select start Editing the code here at the very bottom and i want to head over to the master page dot js section what we're going to do is we're going to select our box 9 here and you'll be able to see on the bottom right hand side there are a Number of little options here that we can do i want to create a different id first of all we're going to call this maybe a website oh let's keep it simple home hourly pricing there we go so that's a nice clear name you'll notice i've got the Upper case that's to show when a new word is coming through and i do that normally in the same way with javascript so this is where we can start doing different types of events i want to create an on-click handler so i'm going to create one by selecting the on click Here selecting and enter and it's already created the function for me just over here so this is the function that will run when we do an on click what's interesting here is that this event here we can now structure how we're however we want so the next thing i want to Happen is this entire div here which currently is called section one i'm gonna call maybe um home one i'm going to make this entire div disappear i'm going to do this by going to this function called home hourly pricing click we're going to do a w which is going to reference the editor And it's all its little commands and we're going to reference the home section home one this is this main section that we have and what i want to do is i want to make it hidden the reason i want to do this is because i want the other section which we're Gonna probably call maybe hourly pricing let's do that now hourly pricing we're gonna make this visible in comparison so i'm gonna do w and we'll go hourly pricing here we go we're going to make that visible or maybe this has to be show actually yeah show we'll do show and this one Will do hide maybe even i think it might be hide yep because hidden will be like a boolean that gets returned whether it's visible or not whereas hide will actually make it hide now this is a pretty simple on-click handler and this should work and i think the Only other thing we need to do here is just make sure this item here looks clickable i think with this javascript it might already be but let's actually give it a test so i'm going to click publish over here and we're going to call this pricing i'll click save and continue And let's see how well this works this is just loading up right now and it's published let's view the site so here we have the two i'm gonna click this and the first one disappeared while the second one is still visible of course the second one should ideally Be invisible so this is where we can start playing around a little bit more so this second section here that we previously had i'm going to select to do not display let's publish this once more and give it another test one thing i'd love to be able to do is Just to do a preview and see if that does it all right i think it does now it's definitely made my section disappear but as to the second section here that i've had which i've manually made disappear inside of the layers it's not exactly appearing once more so This is where we can start doing other things like on the on ready handler we can make sure that the home one section and the hourly section are preemptively hidden or displayed depending on what state they need to be in so in this case i'm going to make this section here for Hourly pricing hidden and i'm going to select a preview on that let's give that a shot great so this section here you can see below is hidden whereas this section here is visible we'll select to do a click event and we can see now the bottom section is visible while the top isn't However we kind of want the entire section to also lose its scroll ability because we can see that we don't want to scroll down to see the next section we just want it to appear now i think i know the reason for this and this is because the current Instances of show and hide they're probably updating a variable in css called visibility visibility hidden and visibility visible basically imply that the content is always there we just can't see it there is another type of variable called display which is display block or display flex or display none which literally collapses all the Content if it for example is set to none and we can probably identify and change this figures here that we have of hide to maybe something like collapse and this should do that for us so here where we've got hide i'm gonna also update that to collapse and the Alternative to that where we want to show it will most likely be expand now with these new figures let's actually save that do a preview and see how that works so here we've got our only item which is our website calculator visible if we select the first option here we've seen Our title disappear which means we've expanded out the next page of this so we've successfully done it and this is exactly what i was after the only other thing here that we probably need to do is this on ready handler it's kind of a little bit slow Here i'm going to see if it's any faster if i take this collapse outside of that function because i noticed that we could scroll a little bit when we originally loaded the page but possibly we might need that yes so that'll definitely need to kind of exist here In this section but now that i know this command i want to see if for example if we set do not display if that'll actually fix up the problem we're having so let's give that a shot and no no that's not the exact item that i'm Looking for but i think i'll figure that out sooner or later now with this done we can probably figure out the elements that we want here for this next section so let's actually close these out which was my little research into finding out how hide versus collapse works let's jump onto This next section which we currently have hidden here in our masters make it visible once more and let's update this so here i'm going to remove that i'm going to update our options here that we have from 10 to 20 hours 5 to 10 hours 2 to 4 hours and i think we only have the three main options yeah that's correct and the other one i can probably delete here we have a little bit more of a description so i might actually move to make that visible uh let me copy paste this element Not sure where it's going and here as you can probably see i'm just filling out the content similar to the design we had earlier so that we know exactly what's happening uh so i think this box here this needs to be white so let me just update that now Uh we also need a little bit of a title here so let me see if i can pull that across i'm just going to reuse some of these elements we previously had here's me troubleshooting a little bit just to move all the elements into place and This makes it a lot more easy to tell this is a completely different section now so now when we do a preview we have this main section here for the website calculator we select hourly pricing calculator and we get move to this next step here where is essentially You deciding what your skill level is now uh there's probably still a few things i need to do here in terms of styling and editing so i need to update this section here to have that nice little circle as well as some of these uh i suppose Positions of items being in the same as the previous ones a lot of this right now is being docked let's make sure it's stuck the same way percentage percentage uh let's do the little circle here that we had at the top uh let's see we should be able to just Jump on to the layouts tool i think i'm going to select at the circle over here and just drag and drop this into place just making sure that it's in the right position here and i think in the design we had like a gray color with the number one here Uh it's more like a blue tint but i should be able to easily design that just over here let's add the hex value uh beautiful and then i'll just copy paste a number into there now with that done uh i think this section should be good i'd love to Give it a quick test once more uh let's move this here number one beautiful but that's looking quite good there the next thing i want to do is also possibly resize it i've got a feeling that it's not going to resize well but i'm sure i can play Around with fixing that up a little bit later okay um so here this is currently set i think as a pixel amount yep so i'm going to set the docking of this one over here also as a pixel amount and let's click preview so we'll start off we've just got the Website calculator here we're going to hover over hourly pricing we've got our skill level here and our hourly pricing options so perfect uh that seems to be working quite well the rest of it will just be an extrapolation of that aspect essentially creating the on click handlers to take us to the different Pages so i'm going to do this in the background because it's going to be quite time intensive but this is more or less how you would create clickable events like this i hope you guys enjoyed this video in the next one i want to have a look at How we can store some state inside of velo so when we transition from one screen to another we'll be able to do some real pricing calculations now if you guys want to be part of this project if you want to help join the discord below otherwise i hope you guys enjoyed This video hit like subscribe and i'll see you in the next one thank you [ad_2] #Code #NoCode #Velo #Editor For More Interesting Article Visit : https://mycyberbase.com/ https://mycyberbase.com/technology/how-to-code-with-no-code-velo-editor-x/?feed_id=10408&_unique_id=6479c01142d52 #Technology