Build a Buzzfeed Style Quiz in Webflow

Hey, Ben, welcome to "Automate All the Things". I'm excited to have you.

Hey Aron. Thanks for having me so glad to be here.

Uh, yeah, this is, this is weird because we speak in different mediums, right? So I've spoken to you on slack. We hang out on Twitter. I've seen everything you build, but this is actually I think today, the first time we're actually speaking.

So, uh, it means a lot, so I'm really excited to have you on it. And I'm like, I'm, I'm stoked of what we're about to be.

Let's see here. Thanks for having me. It's like, I watch your videos. I follow you all the time. And then, you know, to finally be, it's like really a surreal moment. Uh it's like an internet celebrity I talked to I'm actually on a stream with free fun.

Yeah, no, I, you know, it's funny. Cause I think like both I've used your tutorials use mine and so I'm actually like, I think it's. Place to meet. We're actually going to show off something that you built that I'm really impressed by, and we're going to walk through it. Step-by-step but before we get into to fan girling over each other, uh, how about for folks who don't know who you are, a quick introduction into Ben and what you do?

Totally. So my name is, uh, my name is Ben and I've been building for the web a long time. I'm old. Uh, and so I think I started building for the web in 2001. Um, and I learned by coding, uh, actually geo cities, Sandhya, Blogspot, and then learning to code, uh, building custom WordPress themes and templates, and then discovering Webflow in 2014.

And for me, that was kind of a big entry into the no-code space outside of geo cities, front page, whatever. And really discovering the power, like realizing I could code this, but my gosh, the time that this saves me, uh, and sort of become, uh, or became a really big Webflow fan was involved in the community.

And, um, ended up working in, talking with Waldo and some support team members a lot. And I made the site that was like, Hey, you know, I think I would like to work at Webflow and. Uh, Vlad messaged me one day was like, Hey, I work at Webflow. So, uh, I worked there on the support team, but I also, co-host a no-code podcast that I started with Matt Varghese and Lacey Kessler.

Um, Lacey who's at Italo, Matt, who is the CEO of . And so we talked no code on our podcasts, but it's super fun to be here, hanging out with you talking

about it now. Yeah. So, so if, if folks can just grab the visual dev FM website, drop it in the chat, um, and I'm curious. Who has used, I remember geo cities, uh, but I would, I would assume, and I would think that most people watching this back or in the chat have never heard of it.

And, and so, uh, um, you know, and it's interesting. I think like, we, we, you know, we remember no code before. No, Uh, and I think what's interesting about you is you actually are, uh, you know, a developer you write code and we're going to actually show some of it off today. So before we kind of jump in, I'm curious, like what, what saving time was an argument, but what actually attracted you to building apps without code and especially apps that you could have built custom?

Yeah,

it, it really is. It was, for me, the biggest thing was speed. Right? It was return of investment, you know, when you're building. One, and they're just not loving the WordPress platform. Like I'm not here to throw hate at WordPress, but you know, you write a bunch of PHP and there's just it's so, you know, local dev environments and all the work it's so intricate and detailed.

And I've found that like, when I worked with Webflow, I could have more projects in flight at a time. So it was also like greater return on investment. Better speed and just ease of use. And, and then the way, you know, Zapier just kind of coming around in the way of interacted with those tools and the kind of power it gave you where you're like, I don't have to write my own back end processes anymore.

I can literally just sort of this up click a few buttons and boom done. I can hand these things off it, just the power that it gives you. And it's such a, an easy to navigate way in a, in a, in a very speedy way.

I love how we're like. Yeah, no code is great. And now we're about to spend the next 45 minutes digging into like JavaScripts on Webflow.

You know, it's like, yeah, no code is great. Have you seen these 200 lines of code that we're about to like dig into is going to be great. Uh, but I think what I'm excited about is actually like merging of the two, right. Yeah. That's why, you know, I was really excited when you, you showed me this project and I was instantly like, Hey, let's show off how you did it because I hope it inspires people to be like, oh, like I'm building things.

I understand every building block. And there's this connective tissue with a little bit of code that I can create to truly build applications. So we're going to jump in, in a moment here and we're going to go ahead and kind of show off what you built, but I'd love to you kind of give us an intro into what it is like, what got.

You know, Ted lasso, obviously super fun, but like, what is it, what motivated you to build it? And then we'll jump in and do kind of an example here in a moment. Yeah. I

think one of the things that motivated me was so discovering no-code API the tool and kind of seeing some of their new features that came out, uh, specifically being able to secure an end point to a domain.

So one of the challenges that you have when you build Webflow is that. You have a backend in the CMS, but there's no backend where you can process things out of sight of the user. So if I want to make an API call, I've got to like expose a key or I have to write something here. Um, and so the motivation was finding this and being able to like, you know, I can connect a form and I can deliver results to the Zapier, but then how do I get that back to the front end of this split?

Right. People were using a member stack and all these things and trying to like point you to, to pages and tie an ID to a result. And like it was a mess. And then discovering this, I realized what no-code API does is it gives you an end point that you can say it only works from this domain. It doesn't require a key.

They keep your key in their system and make those calls for you and make it easier. So I was like, oh, Hey, I can make it. Right. Build an app, essentially, uh, deliver information, get information back, and then display it to the user, uh, with a minimal amount of code. And, um, I, you know, I was just like, I've got to try this.

This is going to be, this is going to be fun. And, uh, and then I had a teammate at Webflow who was looking to try a similar thing. I was like, Hey, two birds, one stone. Let's see if we can make it happen. And, uh, and so this was kind of my exploration.

Um, we've already lost 80% of people here with like no code endpoints and authentication and, and restricted domains.

But, um, I, I think I don't want people to be intimidated here. Whereabouts to just build a Webflow website. We'll talk about why you can't do this natively in, in. In a Webflow and frankly, all of this uses no code tools, right? The whole stack. Uh, and actually it's a very common use case, right? So if you want to create a calculator, a pricing calculator, anything that has any kind of calculation that you want to return to someone, this is a good bill.

So, uh, let's actually jump in. I think people will be much less scared when we show what the end product is and talk about the, kind of the steps to get there. So I'm going to go ahead and share with everyone. You should see, uh, football is life. I let me know if folks have watched Ted. Like I I've obviously like I've watched the two seasons.

It's been a breakout. I've loved it. So let us know in the chat, if you've watched less as well, if you haven't, this might all feel a little weird, but it's okay. You can just listen to like the, the part of it. Uh, Ben, I'm going to go ahead and share my screen with you. Give me a thumbs up when you're good.

Got it. Okay. Awesome. Okay. Ducks. So, uh, our agenda for today. So first, um, we're going to show up the quiz, then we're going to talk about how do you actually capture focuses responses? How do you capture that initial. Then, how do you send those responses for a calculator? Right? How do we return a result?

And then how do we do that in Webflow? Right. So how do we take the responses? Uh, take what the user responded, return, uh, you know, a number or whatever, and then show that to the user and then we're going to do confetti and do it all at once. Um, so first item, what is this quiz? Okay, so. For folks who are not Ted lasso fans, a great show, essentially this quiz, uh, I answer questions and it's like a, it's like a, it's like one of those, uh, the buzz Buzzfeed questions.

Yeah, I'm very inspired. In fact, I think one of the challenging, most challenging pieces was writing the quiz. Like, even if you're just wanting a sample, you're like, I've got to figure out like, how do we, how do we do this? And literally it was Googling, how do, how does Buzzfeed design and build their quizzes?

It was pretty interesting. So, and

so, so walk me through it. So, so I pick one. Okay. My favorite restaurant. So kebab cafe. And then I pick, so I am, is this a form? Uh, how should folks who are familiar to Webflow? Think about this.

It's not a literal form, but you can think about it like a form. What I did was I. Uh, section for each question or dim for each question with a prompt and then for items that are clickable and they're just his, and I changed the pointer type. So it looked, you know, people know that I should click this right.

And give it a little interaction. And then when you click on it JavaScript fires, and it seems the value that's tied to it. So, um, how about we, you know, there's an ID on that island.

Yeah, go ahead and run it. Yeah. Yeah. Let's do like before we get into like the details here. So I picked kebab cafe. I'm angry.

I like doing yoga with elderly women and John wooden is the person that inspires me. Do you know what this is going to result?

Probably Roy, always

Royce. Roy, we got Roy. Awesome. So that was all done in the front. Right. So we instantly returned a result. So that was amazing. So, uh, Yeah, let's actually, let's, let's go in and break it down. I don't know if that was a confetti moment, but I'm happy. Let's do some confetti. Let's do one confetti because we did the quiz.

Okay. Let's let's dig into the Webflow side. So you said it's not a form, so I'm here and I'm happy to share this. Uh, if you go, uh, um, use case in the. I'm happy to share, uh, the Webflow website and there's the get hub repository that you can copy. So talk to me a little bit about how you structured this page, right?

Oh, where's my

Liz a good question. The navigator.

Let

me refresh it. Let me refresh it. That always fixes it.

Oh, is what up? Up the pressure on the stream

we're doing. Okay. We're good. We're good. We're good. We're doing

it. We're good. We're good. We're good. Okay. No worries. No worries here. Okay. Talk to me about the structure of this.

Yeah. So, um, if you scroll down, basically what I did is I created a div with each question and. Uh, that wraps reps, reps, that question, we have just a text element that says it's a prompt, choose X, whatever, uh, or, you know, what is your whatever, and then have a div that's a grid that those, uh, if using a CSS grid to lay these out, but these are answer rapper boxes as the class I gave them answer rapper.

And so it's an image it's. And then if you click over into the settings, like the Cockwell, um, on the right-hand side, uh, up at the top, if you have one of those selected, so if you select one of the answer wrappers, uh, now you'll see that I added a custom, uh, a couple of things. There's a, there's a custom attribute there.

Well, there's idea to top one, four. So like this is question one, option four, and then I have a data answer in that's tied to a specific character, right? So that the answer is. And so, uh, and so when you click on that, the JavaScript is basically saying, this ID says your answer is to let's set that, uh, and that's how it works.

And then I create an interaction. So like when you click on it, it dims the others. Right. And, uh, and then it, that's a link that takes you to the next question, essentially like a

section Lincoln in. Okay. So let me, let me say that back to you. Cause it's going to be important, how we actually structure, uh, uh, you know, the response.

So you're saying that for every question, what your going to kind of track or log right? Is, uh, if I go to the re the wrapper, right? You're saying that this is answer four. So if, if I pick Joe's Kansas city, what you want to log is this person picked. For question one. So this is one, one. Then you have 1, 2, 1, 3, 1, 4, and each one of those answers has an attribute, right?

So it's, it's a data answers for, it can be one to four. And then you do like an average to figure out which, uh, you know, person it is. Is that understanding the structure of this page properly?

You have a thousand percent hit it. Like that's exactly what it is.

Got it. Got it. So I, again, w what I hope people take away from this, it's not necessarily like, oh, I want to create a quiz, but you can think of it as, like, if you want to create something that says which pricing is right for me.

And then you ask people like, are you a big team? Or you're a small team, right? You can, in that page without redirecting, or frankly, logging information about that user can say, oh, you. And this type of user or that type of user by logging each one of their answers and adding some logic in to return a specific response.

Right. So I think that's, what's really

interesting about here's a, here's a mother. Oh, sorry. I was going to say in another use case would be like, Hey, if you have a spreadsheet that, uh, does some math on some financial figures and you don't want to reveal all of your formulas, you can put some fills in here.

Uh, instead of grabbing that ID, like people fill out that value using the value in that, in those inputs. And when they hit the button, it takes, it puts it in the spreadsheet. It does the math for you returns the value back for the user. So a lot of fun use cases

with this. So I guess the, the, like, if I was thinking of building this, been my natural first question, you know, the enemy, like you're really good at creating like the little animations and things and going to the next section, but what would worry me more?

Is how do I actually log or like, how do I know that this person clicked Joe's Kansas city barbecue and therefore is a four. And how do I, like, how do I track that? How do I get that number for that visit? Does that make sense as a question?

Okay. No, that's a great question. And it's, that's all in that code.

And so basically in the code, the very top of the. We have said, Hey, if they click on things on this page with this ID, right. With any of these ideas, we're going to set that as X and you can see that right at the top. Uh, 1, 2, 1, 3, 1, or 1, 1, 1, 2, 1, 3, 1 4. Let me click on that. That's we're going to make that answer one.

Okay. This is this. Yeah. So wha I, some people might be intimidated by this, but like, walk me through you have it four times, right? One for every single. Uh, you know, possible section. So talk me through this one little bit of what I think is JavaScript slash jQuery. Um, talk me through this one piece of code and let me know folks, if, if we're too far away, this should be readable for you guys.

Okay.

Yeah. The great part here is that Webflow includes jQuery. I know there's a lot of JavaScript people out there here, like don't, don't use jQuery. Well, it's built in it's really easy. We're gonna, we use it. And essentially what it's saying is it's displaying the IDs of those elements. 1, 1, 1, 2, 1 3, 1 4.

And we're seeing for each of those, when this has clicked on let answer one equal and you can see we're going to get that thing that was clicked in the data answer, uh, attribute. And then we're going to put it in local storage. So if you click on one of those four boxes, we're going to say answer one is that data you are.

Uh, attribute, boom, let's store it. Now we've got a stored in that set. Um, and that's what we're doing. And we have one of the, have that repeated for all four of those questions. Uh, so that way it's, you know, as they click and they can click and change their mind doesn't matter. It's just going to keep storing it.

So, uh, so it should, should work just fine

for them. I get the structure of this. One question I have for you is what is in. So you're saying set the, the, you know, the variable answer one as this various. Answer one. What does this log exactly? Does it log the value of what they clicked on? Right. So is it logging it this right here?

Let me see. Let me go grab that the little wrapper. So it's logging this data answer equal four. Is that right?

Yep. That's right. That's right. Okay. That's exactly it. And so it pulls that and then we're setting it local storage. So we just have it saved there. And then whenever they click the button, we're going to call that back up and use it to sync.

Okay. So let me, uh, it is a little bit intimidating, but what I'm seeing here is that you're saying if a clicker clicker, a user clicks on any of these four, uh, um, uh, uh, what do you call them? IDs, uh, classes you call them classes right in, in. In Webflow. Uh, well

go IDs.

Yeah.

Their, their IDs, their IDs. Right.

All right. Um, go ahead and store in answer one, what they selected and that's going to be like the four answers, which has a numerical value. That's we then calculate on

that's right. That's exactly it.

Okay. Got it. Okay. So I think that, and again, we're not going to go through like the whole. Uh, M code. What I want to kind of show is just the abstract of it, and folks can play around with it.

And if folks are interested, I'm happy to do like a session with you, Ben, where we write the code. Right. And talk a little bit about jQuery, uh, which I have fun. I dunno, fond memories is the right word. Do you have memories of learning it way back? Um, so that is how we capture the responses, right? So at this point, when the person clicks all for.

And goes to the bottom. Let me hide the, the agenda here. Um, and we're going to talk about how do we send and receive responses when they click show my results. You actually have to do that calculation somehow. But talk to me a little bit about, without talking about code, like what happens when I click show me my.

Yeah. So essentially you click this button and what we're doing is we're making an API call with no code API and that call is going to Airtable. So basically we're taking all of the responses, 1, 2, 3, 4, and we're sending them to an Airtable base and we're just creating a record and their Table. We're creating a row and air table, and it's going to put, you know, 1, 2, 3, 4, 4, 4, 4, 4 1, 1, 1, 1 or whatever they choose.

Into an air table. And then we have a formula field that calculates a result. And so that formula field is, is basically just averaging. We're taking all the numbers, we're averaging them out and what the four answer quiz. It's probably not the best. It should be longer, but it, this works. So we average those out.

And then basically, um, I'm using, uh, formulas on the rest of those rows too, and saying like, if the result is a three. You know this person, and this is your description, and this is a link to the image will show the user. Uh, and so it's just using, uh, Airtable, uh, formulas to, to decide what gets displayed.

So it makes that calculation when you click that button, it says. And it figures out who you are and then we just make one other call to get that specific record that you just created. And we display all this

information back to you. Okay. Okay. So just for folks, I opened up an Airtable base with a bunch of numbers, so just want to walk people through here.

So what happens this actually the response we just did, right? So if I look at this record, let me expand. Um, and then I have some, some qualms with how you structured this base, but that's a whole other conversation that we'll have, uh, uh, another time. Uh, and, and I'm happy to talk about it at the end. Uh, so this was created by API about 11 minutes ago when we ran, we, this was our results.

So you can see there was created via API by Ben cause B Benzie PIQ, that's stored with no code. Our answer. One was three or answer two is 3, 3, 4, 3, and then four for answer for, right. So that's re getting those IDs that we clicked and using JavaScript to send them to air table and in the logic part, which Webflow doesn't do today.

Right. We always think of a backend, but here it's actually just business logic is just saying, okay, there's two things we need to do. We need to run the average of every single risk. A formula field and air table. And then we need to map that average to a specific character that you're doing this using an F field, right?

So you're saying, oh, sorry. There's like some, uh, stuff here, but let me just refresh. Um, you're saying an if statement that checks what your result is versus the type of character that you should return. And this is where I have some qualms with how you've done this, but that's. Uh, if result calculus for return this text, if there's three returned that text so on and so forth, and then same thing for the image.

So based on the average, I'm not sure why I'm getting these little, uh, um, little things here, but that's okay. Uh, return a different image that we're going to display. So two things happened while I get three things happen. We write, we write the. In air table, air table does the calculations. And then we fetch, we go and get that record to get these two results.

So the result image and the result description are the two things we need. And so you mentioned you do it via no code API. So let's actually go into the code and show where you do it and then we'll jump into like, how do we actually do it in no coding PI, but why? Why no code API? Why not just run a regular API called directly to air tables, API.

Uh, and then we can go into the specifics as to how.

Yeah, there are a few reasons why you might, might want to use no API. The first and the very most important is this code is going to be in the page. And so, you know, if I'm going to use the air table API, I have to have an API key in order to make this call right now, there's an API key that comes with air table in order for me to create things so to get things.

And so that means what if I want to use this and Webflow, it's going to go on my code and people could just right. Click. See my API key, and then they can do terrible, awful things with my API or with my API key and air table. Now they can change things, delete things, you know, or what have you. They have a lot of power.

So what no-code API does is it says, Hey, you give us your API. And we'll put all that together for you. And then we'll give you an endpoint that you can use. And what's great about API is they also let you secure that to just a single domain. So I can say this will only work for my website. If somebody else takes this and tries to use it on theirs, it won't work, but I can kind of secure it.

And then the third thing that it does is they do some caching. So if you're worried about running into air table, like, so you're gonna have a, like a lot of traffic and you're worried about running into air table API limits. Well, this should help you with that. Uh, no coding API is getting the results.

And then they're kind of caching those for you and letting you make that call. And they're, they're delivering that information for you instead of every time going to irritate. Um, so there's a few benefits

to using it. So I think, you know, for folks who might be a little confused by this is that when you do an API call using air tables, API, you have to write this a URL just like here, but then question mark API key equals blah, blah, blah.

So, if you actually want to write, uh, an API call from Webflow or anything, that is like a script on your website, that is in the console is in the actual HTML what's out in the HTML, but it is viewable by the end user. Uh, that's a big problem, right? Because then people can start writing to your base doing all sorts of things, maxing out your APIs, very, very bad practice.

And so no KTP is actually like a different type of authentic. It's going to make sure that you have the right API call the API key to write to this base, but then it's going to say, okay, well, here's another URL you can write to that. We'll do the same thing, but we're going to add a layer of security that only allows it to be used from your domain.

That means that if I was to go and kind of copy paste, this, go to Postman. It's not going to work because it's gonna say, oh, this is a Postman URL. We are only allowed to run this from this Webflow URL that you've specified. Uh, um, so that is kind of why no code API is interesting in this use case because we are exposing the endpoint, uh, in the Webflow page.

Big words. Let us know if there are any questions about that. So no difference between using this and the air table API, except that you're hiding. When the page so that people are not stealing your API key, which is a big no-no. Yeah.

Awesome. Okay. And then the cashier too, depending on how much trash.

Absolutely. I'm sure this is going to blow up. Right? So after the stream, we're going to get millions of views on how to create a Ted lasso hook, who is, uh, we definitely need that caching in place, uh, to be able to do that caching for folks who aren't is it that'd be, uh, uh, air table's API has a limit. I think, I don't remember what it was 20 per second.

I'm not sure what the exact. Uh, but what no code API can do is make sure you're always under that limit by seeing like, Hey, this is the same result as before, or I have a little less traffic here. Let me spread out the traffic such that we're not hitting that air table API limit a lot of math involved there that we're definitely not going to get into, uh, uh, at the moment.

Cool. So are we feeling comfortable? Uh, why use no code API? So I think the, the rule here is any time you search your pages inspect and you could find the URL, it should never have the words X API key in it.

Um, okay, cool. So let's actually, yeah. Uh, so let's actually go ahead and. Run the API calls as an example from Postman, just so folks can understand how to use no code API. So I already have my Airtable base connected, right? The Airtable base you guys just saw. So I just said like, he hears, uh, the Airtable base I want to use.

And when I use this API in no coding, It's going to kind of give me all of the options so I can get records. I can create new records. I can update records, delete and get a single record. So, Ben, what is the first thing that we do when someone fills out the quiz?

So the very first thing that happens is we create the record.

So we're making a post. Uh, to create new records. And what I love about a no code API is that they let you test this and then they actually give you example code that you can use,

which, okay, so I'm here on the actual endpoint. So this is a URL and I want to create new records. And then I input the table name, which is quiz, and then I need to, uh, specify.

Body talk me through what I need to do to actually run this API call.

So you need to make sure that in the body, every field that you want to create matches the name. Of the, you know, uh, and the contents the same as in the Airtable base. So we're, we're, we're passing numbers through and you can see the names of our columns are answer one, those spaces, capital a answer to answer three and so forth.

So we're just going to use those same exact names. Um, and we put those in quotes. They already have like the little bracket set up for us and they give you an example code when you start. So you just go through and change this to answer. One is one as a sample value here, comma. And so to, to whatever you want it to be 1, 2, 3, answer four.

And then you can click, uh, the button that says click and test this API. And then it's going to make a test call for you, which is really. Okay. And they give you, then once you make that test API call and it's successful, they give you this link. Now that you can use this end point, that you can go and put in your code and say like, this is the end point I'm going to use when I make my call.

Okay. So if I click in test the API, it's going to go ahead and create the record. Right? So if I create this body, Parabola is required. I think I do have a body Parabola. I'm trying to copy paste that click and test. Here we go. Okay. So it created, it should have created record. And what a returns is the record ID.

Right. And you return that's the magic. Right. And it returns the whole record. Right. So it's saying this is all the values in the records. So we actually go to air table. We see 1, 2, 3, 4, that's the record that was just created. Now we could do the same thing from Postman, right. So I imagine I could. Copy paste this URL in Postman.

Like I would any others, you know, no, I don't need any authentication. Right. Cause it would be authenticated on the no-code API side. And right now I'm not restricting based on the, you know, the, the, where I'm using it from. So in this case it should work. Right. So let me just go take the body, take this one right here.

And go into raw. Like that's what I'm saying. Okay. Go ahead and run this API call with this body. Let's send it.

Oh, it should. It should be an array. Whoops. That is, uh, well

actually you, I think you're okay. You might need to change your text to J like over the far right-hand side. Oh, it's

just, oh, oh,

Jason draft UL. You might want to trace that to Jason. Yeah. Okay.

That's good. I did add the actual array, which might be a specification.

Uh, you need to send like an array of the records you want to update because you can create multiple records. Right? So if we wanted to create two, you can set an array of two. I think that's the case. Let's try that. So we're saying one record with these values. Okay. And then there we go. So if we go back here, we now have a second.

Uh, but that is, I'm able to do this from Postman because I haven't restricted the domain from which I'm pinging, no code API from, but I could say like, Hey, if this is from any URL, that is not my website, don't let it work. Right. And Postman would actually block, but what's great is you don't see an API key.

Right? So this URL has new API key, uh, and it works.

And the area you would get in that case would be restricted. It would say like, you're not allowed to use this end point.

Right. Okay. And so actually, like that was the first example, right? So that was writing the results. How do we retrieve the results of, there were two fields that we wanted to get.

We want it to get a result and the actually three, the result, the description and the image. How do we go about retrieving that information using no coding?

Yeah, essentially what we're doing is we make the API call and we say, create this record, which we did. And then when you created, it gives you an ID for that record. Like that's part of that response. And then we can use no code API here that our option to get a single record, which is right down at the bottom there.

And we can use that to then get a single record. So that's what we're going to do, uh, is we'll say, Hey, get this record and show us the information. And then we write that to the

patient. Yeah. So right here, we're saying go to this particular URL right here and then return, it returns the whole record.

Right. Um, but here, what we need is these three fields right here, and then you display those on the page. So let me actually go to, uh, Webflow actually, let's go to the. And understand how you actually display that. So I just maybe, uh, does everyone understand the API call? Right. So there are two API calls that happen.

One sending the responses to air table, air, table using a few formula fields, uh, which are the right field sorta to do this, but then return a, um, a response that we then want to show in irritable. So air table here is doing the kind of what we call like. Right. It's a union, a little bit of logic, a little bit of formula to return the response.

Quick question, man. Couldn't you have just written out the logic in code in, uh, your code itself, right? That if formula could have just been right here, right. You wouldn't have needed him to Table. Okay.

Yeah. I could've said if you know, X, Y, and Z, whatever, average this out, give me the average. This is the recent.

If the result is this, but this, this code goes from quickly being, you know, 80 to a hundred lines of code to two to 400 lines of code. And, and, uh, and it's, it sort of takes the power. And on my hand, the air table has so much that we can leverage, right. And so not only do we have the ability for it to calculate things, but are scripts and automations and all these things that can happen.

Uh, and so having that tool at our disposal is super powerful. And for me, this was more of like a test, a proof of concept. Can I do this? And then, okay. Now what can I dream up that I can do with, uh, with air table, uh, and, and really, uh, push it to

its

limit. Yeah. And I think there's actually, when I was thinking about this, there's a few other advantages to separating your backend from like your actual code is that let's say you're like, Hey, I'm way off.

Right. It doesn't mean everyone's getting. Right. Like if we look at the responses, like we can see like, okay, 75% of people are Roy, does that make sense? Can we adjust the algorithm algorithm? It's an if statement, but people like to call it an algorithm, uh, to say like, oh, we actually balance this out a little more.

Um, so because we have dislike backend, we're logging what people are answering, uh, so we can actually look at it. And what's great about this is like, You as a developer are separating the code from the decision-making in that someone else can come in and be like, oh, we need to change this a little bit.

Right. So maybe if you get 2.8, you're something else and you don't actually have to write code to be able to understand that. So it creates like a separation of, uh, responsibilities, uh, which is really interesting, especially when you kind of generalize this to apps, right? So you've got your code and your code is going to work.

Absolutely. Yeah. So I thought that was really cool as well. Then you could create like graphs and, and analyze this information in a way that you couldn't, if you were just giving back the, the response without actually, um, logging the information. So I think it was really cool. Um, where were we? We were at.

Okay. How do you actually run the API call from the code? So let's go here. Um, so talk me through the, the, this first API call, which is right.

Yeah. So essentially, if you, yeah, perfect. If you, uh, scroll up just a little bit there, we're basically saying when you click this, um, it's, we're going to say, yeah. Uh, the first thing we're going to do is we're going to get that, what I call result rapper, as I've defined it, that's basically the button that they click.

I'm saying, Hey doc, like get rid of that. Let's get rid of that. And then I have a div with a loading GIF in it. That's hidden from everybody. And I'm saying, Hey, while we're looking at. Show them this loading thing. So they know something's happening in the background. And then this next little bit, it's just writing a custom error message, but then basically we're saying, let answer one, let the answer to let answer three lengths, let answer for it.

Let's go get those things we stored in local storage. Let's get. And define them. And then basically we start to make the call. We say like, Hey, here's the call you're going to make. And then you can see the body here. Answer one is the, is the, uh, you know, that, that, uh, variable, we set answer one, answer two Institute.

So we're building that body that we just built in Postman. We're just building that out right here. And then whenever you go down here and you'd see, like, this is the end point I'm hitting. Boom. That's the no-code APM. Um, and then that first option says, if there's an air, let's do that first. It'll skip down to the cash and display that, or we're going to say, okay, then the data let my results.

So the result for the person equals, you know, the data ID. So we just created a record, get the idea that record, and then let's set it in local stores. So it gets sent in local storage. So the idea of that, that air table record, and then we run a finally run what's called pool results. So we've created the record now let's pull it.

So we're just doing, it's the same thing. Now we're doing the same thing, except we're saying, okay, let the result ID be what we set in local storage, which was that. Yeah. And then on this call, because we're getting that, that specific record, the, uh, the URL is dynamic. We were saying like, here's the InPoint plus this variable.

So this record, we're going to get that record. Um, and then we're going to make the call and it's the same thing. Once we get the data, let's go ahead. And with the same thing we have air handling. And then, but when that data comes in and then now we're just using JavaScript to build an element in HTML.

And so we're saying, let the content target, I have an element called the result target in the, in Webflow. That's just a div that has the ID result target. That's going to be where we put everything. And then I say, you know, let you are equal a paragraph element know, and then the attributes we give a class result name, you know, we're just creating that.

And how I did this was I actually built it in Webflow, viewed it in the browser, inspected it. And I just copied the HTML and I looked at it on one side and just recreated it and JavaScript. And then this is just putting all of that back on the page. And then at the very bottom, we're just saying let's clear local storage.

Let's delete everything that we have with. Um, and then let's remove that loading element. So now that the loading element is done, let's remove that. Um, and then it displays the result

so far. I know folks who are going to like look at this and be like, oh, how would I ever write this? Uh, you know what, I, I remember learning some jQuery and some JavaScript.

Uh, once you understand a Webflow, it's actually really easy to then, uh, understand this type of quick. Right. It's just saying, add a P L add a paragraph, write this text in that paragraph, show this image. And this is actually just kind of like, you can almost map this to Webflow visual development. So what we're going to do is we're going to let people play around with this.

So, uh, if you go a use case in the chat, I'm going to do that now. Uh, um, I don't know if it runs, when I. But, uh, I think we'll give the get hub repo and, uh, oh no, it's base. I think it's in base. There we go. Okay. We've got both. There we go. Okay. So we've got both of those. So, uh, um, go ahead and grab the GitHub repo and, uh, uh, the Webflow project and kind of play around with this and understand how you could use this in your page.

This will be a little different, but what's great about this is Richard. In the front end, the response from air table. So I want to, I want to do the quiz one more time and talk through what's happening as I'm filling it out, uh, or, or bed. You talk to me about what happens as I'm filling it out and then we'll do some confetti and then I'll talk to you about ways we can improve this, uh, from air table and from some suggestions in the chat.

I'm ready. I'm ready to hear it. Okay. So I'm ready to hear it. So basically you're selecting one of the 1, 1, 1, 2, 1, 3, 1 4, right? Yeah. And you're saying, this is my favorite. So it sets that value from the data URL. Um, and we just stored it in local storage. In fact, you can even show people that if you want, oh

yeah, we can get it right.

Click. Yeah, totally. So let's do that. It's a great idea. Let me pick a different. And then how would I actually, and if you go to the console, can I see my local? So go

to application and the console? Yep. Yeah. If you go to the application tab there, up at the top, um, and then you go to local storage and if you, uh, open that up, you should be able to select for this page and you can see the answer one, answer two.

It's just being stored there and you can see the values that are being.

Oh, wow. Okay. This is really cool. So I was actually, I was seeing it in console, but you have like a proper whole app storage. Okay. So I like to do, I don't want to get Roy, so, uh, no, this is Roy doing yoga with elderly women. Also, Roy, I think fancier dinner parties.

That's Roy as well. No, that's not Roy. Well that's Rebecca. Okay, good, good, good, good, good. And who inspires me? Definitely not Gordon and Ram. Megan, Bobby. Bobby is not. Roy.

Bobby is not really that's coach beard.

Okay, good. Good. Let's see what I get. So I've got 1, 3, 1, 2. And how would I see the API call? It would be a network, right?

So here, when I click this button, be never be able to see the two API calls. All right. So let's click show me my results.

there we go. So that's API call number one, API, call number two, and then I'm beard and that's a returning and then fetching the JPEG. All right. That was exciting. Let me do some confetti here. That was really exciting.

And

All right. Who's who's going to be like go out and build applications on Webflow. After this, I feel pretty, pretty jazzed up to like, put this in action. Um, you know, maybe, maybe quizzes are like, I think a perfect starting point for folks, you know? And then you can build like pricing.

Yes. Yes, exactly. Uh, and, and this is a, this was a good place to start. So, um, I think Colleen said that the preview link worth of work, and I'm just going to post this back in the chat. So, um, everybody should have it there now. Um, Yeah. And so this is like, this is a great use use case quizzes, uh, calculators, uh, you know, anything that where you can find the power of air table.

Now here's what I did know. Aaron, I knew I was going to come on this stream. We were going to show this off and I knew you were going to take issue with my Airtable base. And so I'm ready to learn from

the champion. Yeah. So let's talk about this. So, but, but first I think before, I think there's a good point from, from mold, if I'm saying, uh, their name right.

Which is, uh, so the first improvement is actually when you write this, create new records, API call, right. You actually receive what's in the record. So that second API call can be inferred. So I'm going to create a new record. I'm going to 1, 2, 3, 4, you'll notice in the response you actually get, you actually get the response.

Right? And so that, because this is calculated before couldn't you use this as like what you showed me.

I could, and I actually did in my first iteration, but, um, I wanted to, so there is a use case that came to mind where maybe air table is going to take a second to calculate something for me. And maybe it's not going to be quite as instantaneous as I want it to be. Right. And so I wanted to play with the proof of concept.

Give it a second. And, uh, my next play was I even, well, I even did this a little bit. I added a bunch of fields and did a bunch of calculations and I used a set timeout to just, Hey wait just a second. Or so before you call and get this response, just to make sure everything is finished. So that, that was my use case, but totally you can do it with just the one as well.

Um, and that's a great point. Uh, I should have kind of called out that this is kind of what I was thinking. This was a total experiment for me or my

no, and I think that's a good point. So if you don't need that timeout, if you don't need that time and you expect the response to be really quick, you can save.

But I think we're like, this is in the weeds, right? Like if you're running two API calls instead of one. Yeah, no, no quarter is going to like, you know, talk shit. Uh, so I think that's number one. Um, I think the other one that's really interesting is the way you've structured your base, which is very much a, uh, uh, you've structured it as an Excel person would structure their base.

Right. And I know you're an Excel person and I could see that, um, because what's really interesting is if you have a characteristic. Right where you have their image, you have their description and you have their name. Right? So this, if statement could just be a lookup, right? Because what you're saying here is get the average result, get which character they are, but then you could create a link to say this response is this character, and then go and get their description and get their image.

And you will. Why would I ever do that? That feels like this feels so much more efficient, but let's say your quiz, you need to update something, right? Let's say you want to update and be like, you know what? I need to change the image. I need to change the description. I want to add more characters potentially.

Well then instead of just adding a record in your character Table, you have to then go and be like, oh shit. Uh, like what is my calculation logic? What is my description? You know, an update in different places. If you're using the relational database structure, you can do that in one, go in all of this can be linked together.

Relational databases. Maybe,

can you show us this real quick? Is this like something you could spin up or is this like a more in

depth time? I think it would take a little bit of time, right? Because I think the challenge here is that you want to turn a formula into a separate field that then inputs that into.

That, uh, result description, and then looks up the rest of the values and you would need, you can do that using air table automations. Right. But you need a trigger. Right. And, uh, I would have to like, make sure it might be a little finicky to say like, oh, when this updates get the value from this formula field to then create a linked record.

Right. Um, now we've, if we've lost anyone before, we've definitely lost. Right. So it would be a little

come to my stream where we write code were like, we're no coders, but, um, it would be a little finicky. And I think actually, like, I'm being very difficult with you because you're not going to update the descriptions. Right. You're not going to do all those things. And so this is like a really easy way to do it.

Right. Um, also by the way, air table hosts. Your images, right? That way you don't have to have a Webflow URL here. You could actually take the URL from the image right here as well. Right. So that's more for like, if you really want to like scale, that would make sense.

Yeah. And I played with this a little bit while you're talking about that's one of the reasons I did two calls.

Cause I was like, oh, call this, look this up running automation. Hey, it takes a second. So you're like, you're like, okay, I need to like. Um, and so I ended up going back to just, you know, the ifs, but, um, I mean, you make a great point because I was, I was doing the same thing and it really, I was dreaming about all of these different things that I can do with it.

I literally was trying to sit down and think about like, oh, what are the really fun things we can create with this? And how can we empower people? Um, and so. I think I, well, I love that color because I think you're right.

I think, um, maybe this is what we're end and folks let us know in the chat. If you've got some like suggestions for what we could do, but I think there's been like this, this really big dream is like, you input what you need.

So like, let's say I'm looking for a form builder and you're like, okay, do you want to take payment? Do you want to, uh, uh, Uh, what's your budget. Do you need to integrate with any of these tools? Right. And it folks, I kind of pick what they want. And then on the back end, you're like, here's what tool we would recommend under those situations.

Um, this would actually be like a really good structure for that. And especially that in the backend, you would need some, some slightly sophisticated logic, right. To be able to say like, okay, here's, here's something that fits all of your criteria. Uh, and I know a lot of people have tried it, but it was always like very static is it was like, uh,

sorry, can you still hear me? I just got a call on my phone. I don't know if you can hear me. Yeah, I can hear you now. I can't

get in and out just for just a second. Okay.

Well, I like hearing that.

Yeah. There's some echo that we should be. I can hear you. Okay, great. We're back. Sorry about that. No, no, we're good. I have messed up on the stream enough times to know how to catch it up. No worries. We're back. Okay. So, uh, sorry. I lost what you just said. Go ahead.

Oh, I was just saying, get out of my head because I was thinking the same thing.

How can I recommend a stack for people have no code tools based on what, like, this is, this is one of the things that came to mind for me. I thought of, I know I've built some other things, uh, in, in sheets, like where it does calculate some things. I, as a, as a former basketball coach. I have some calculation tools for coaches, players.

I was like, oh fuck. Can I do that's fun with this too? Um, so, uh, I'm just, I don't know. I was really excited about the possibilities and I just, haven't seen a lot of people do right to the back end, right. To the front end, without creating their own systems. Like I've done this in the past, but I literally spin up my own environment and Heroku made a call to it.

I've got my credit, my own web hook had my own code that I wrote in Heroku that said when you hit that do X, Y, and Z. And it's so funny. No code API is so powerful because it lets you say, I don't need to do all of that. Like I just, I can use this tool. Um, it's it's so great. And it looks like mode said he's working on something where we're not going to need that jump JavaScript code soon.

So I don't know. Stay tuned, I guess.

That's awesome. Yeah. Yeah, absolutely. Okay. Well, a few things here, so thank you, Ben

did.

Oh, no, I got this. I got this one second. I know folks on the stream could still hear me. So it's just, you just give me. Can you hear me now? I can hear you now. Okay. There we go. I got you.

Okay. Uh, while I was thanking you, so thanks so much for coming on the stream. Uh, this was a pleasure. I hope what people leave here with is like, I can build an app on air table with the little bit, a tiny bit of glue. Um, and, and I just wanted to thank you for, for other resources and, and, you know, I, everything you do for the no-code community on behalf of myself and everyone.

Uh, as new coders, uh, we all appreciate it. Uh, and yeah, just a huge thanks for coming on and for everything you do,

thanks for having me and for people who are here, stay tuned because we'll have Aaron on the podcast very soon to kind of stuff, too. So we'll, we'll trade back up. We'll trade back up.

I fear that you're gonna, well, this is what's going to happen.

If I come on the podcast, you're going to bait me into talking about. And I'm worried about that. More worried that with Jake Lacy and, uh, uh, um, you're going to, I'm going to be, I'm going to be baited because I have strong opinions that I disagree with. That's what the podcast is for. I know the

best part is the podcast is alive.

We can, we can edit it, we can edit it. So, um,

yeah, I will, I will accept the. I will get some coaching. I will have calming tea before. And, um, is Jake going to be, cause if Jake is there and he's, he's talking about, I don't know if we could do an episode with Jacob. What I'm joking. Okay. No, I'm joking. I would love to come.

It would be a pleasure. And, uh, if you guys get any good snippets out of me, you're, you're free to share them. Uh, it'll be a lot of fun. Um, no, but huge. So it folks don't listen to visual deaf podcasts, uh, go ahead and check it out. Uh, uh, definitely where you get kind of summary of news and, and just enough controversy, uh, to kind of get us through.

So, uh, um, huge. Thanks. Uh, um, yeah. And so Andy, you can watch back the stream actually, right now it's instantly available. Uh, huge. Thanks to you. I hope people will be motivated to write some code, uh, learn, build applications on top of air, table Webflow, no-code API and others. Uh, at the end of the show, we're going to have resources for everything.

Get hub, uh, the, the link to the Webflow project. No-code code API, all that. And then come back. We'll write some code next time. It'll be huge. Fun. We appreciate you coming on by y'all would love to thanks for having me here. Appreciate it. Bye.

‍