Custom Fundraising (Progress) Thermometer

in this video we are going to use webflow to create a custom fundraising thermometer and we're going to hook it up to a cms collection so that it can update dynamically let's dive [Music] in hi i'm kyle the creator of no code collab a site with tips tricks and tutorials for your next no code project if you haven't already please like this video subscribe to our channel and check out our website where we have snippets and things to help you with these tutorials so i've got a client who wanted one of those thermometers on their website that shows a goal and then the progress towards achieving that goal and i looked into it and there's a lot of solutions out there but they actually are thermometers literally thermometers and we wanted something that was a little more on brand and so we decided that let's build something in webflow that is branded that is their logo and then also let's tie that to a cms collection item so that they can go in they can update this cms collection item themselves and then we don't have to worry about creating new images and loading new images of this custom thermometer so that's what we're going to do we're going to go through it conceptually and kind of show you what we're trying to build and then we've got some code that you can copy from our website but we've got some code that we're gonna walk you through and show you exactly what's going on okay so here's a little preview of what we're gonna be building inside of webflow this is our branded thermometer as more enrollments come in the level of the thermometer goes up and things color in and the gray shrinks so that's what we're going to be building just to give you a little preview of where we're going with this you can of course use whatever image you want but this is their logo and we've added some some markers on the left hand side to help people understand how close they are to achieving their goal so let's jump over to figma quick so that i can show you conceptually what we're doing so we're gonna use the embed code element inside of your webflow project now when you drag that into your project it just naturally creates a div and we are going to call that div block or that embed code element we're going to give that a class of thermometer you can name it whatever you want but for the sake of this we're calling it thermometer now that thermometer div we are going to put a background image on so inside of the css properties on the class thermometer we're going to have a background image and that background image is going to be our branded thermometer image so as you can see here we've now added our background image in there so we've got this div that now has a background image and then inside of the embed element we are also going to have a little javascript that is going to create a div on the fly inside of thermometer so inside of this thermometer element we are going to create a new div now the nature of css or of html is that these elements float to the top left of their parent element so the thermometer div or the div inside of thermometer is going to start out and it's going to look like this it's going to be full width but it's going to be right at the top and then what we can do is we can tell it to grow we can give it a larger height relative to the parent and so it can grow and it can grow from the top now a gray bar on top of our image is not our thermometer so we have to also do inside of our embed element is we have to use a custom css property called a blend mode and it's not native to webflow they don't support it on in their ui but we can write custom css and so the way that that works is we are going to have a little bit of css and effectively what it does is we are going to use the saturation mix blend mode and you can see now what's happening is it is creating everything underneath it is now grade it's in a gray scale so this div here effectively acts as the empty part of the thermometer so if we're only at 25 enrollment then what we do is we make our new div we make that 75 percent so that's what we're going to be doing it's just a little css trickery we're not actually creating new images or anything we're just using a blend mode to create the illusion that there is an empty spot on the thermometer above above what has been donated or how many enrollments so let's jump over to webflow now and show you how to get this done so i am inside of webflow i am on the page where we want our thermometer to be what i have here is i have our embed element that has a class of thermometer the other important thing to note is that it does have an id of thermometer because we need to have an id so that we can grab it with our script that's inside of the embed code so remember that is that you've got to give it an id remember that id but also we're we've called it the same thing our it's the same class but if we scroll down here we can see that our embed element has a background image that is the image from figma that we just looked at so you can see we've got a background image and then the other important thing is we've given this a fixed width and height and the reason for that is because if it's dynamic sometimes your images can kind of get cut off you'll have a container and then the page will grow and then the the dimensions and the the proportions are off and then your your thermometer level can get screwed up so if you give it a fixed width and a fixed height then we know it's always going to be good and those width and height also match the background image that we have so it makes things makes things easier so if we jump into our embed element we've got a couple parts here and what i'll do is zoom in so that we can all see this a little better the first part is our css so as i mentioned there is a mix blend mode css property that we're going to use called saturation and all we're doing is applying that to this class called meter level so the div that we're creating on the fly with javascript we're going to give that a class of meter level and then meter level is going to have a mixed blend mode applied to it of saturation that gives it that black and white jumping down now we've got our script pretty simple little javascript code here we have to use vanilla javascript because it's inline on the page if you want to use jquery you just need to add it to the footer below at the bottom of the page in your page settings so you could do that this is because it's such a simple javascript function it's easy to just add it right in the in the page here so i'm going to skip over this first part and what we're going to do is we're going to create this little object called meter and what meter is is we're creating a an object that is a div so it's just an empty a blank div we're then going to give it a class name of meter level which matches our class name up above and then we're going to give it a a height we're going to give it a style we're going to get a give it a height and that height is going to come from our variable up here and then we're adding the percentage sign so that it is treated like css and we know that it's a height percentage then what we're going to do is we're going to get our embed object our embedded div by the id and that's why we needed that id field we needed to give our thermometer an id our id is thermometer we're going to grab that div and what we're going to do is inside we're going to append we're going to add the child element of meter and so we're adding this that we just created above so basically what we're doing is we're grabbing our thermometer we're adding the meter the meter level and the way that we are determining the height of it is you'll see we've got height equals 100 minus the enrollment percentage so if you remember from the figma if we have 25 enrollment we actually have 75 percent gray so we have 100 minus 25 equals our 75 percent if we have 75 percent fundraising achieved then really we only have 25 percent left so we've got 100 minus 75 is 25. so the way that we're determining the height of that div is by doing 100 minus the enrollment and so that is what's going on here now you'll notice that we've got our little purple our purple field that's because this is from a collection item which we'll go over in a second but we're pulling in our collection field that has our enrollment percentage and we're using that to drive the height all of this is over in our on the page on no code collab so you can just go and you can grab this and you can you can paste this right in but it's pretty simple that's what we've got going on well that's what we've got going on on the on the embed element so jumping over to our collection here's what we've got going on we have a let's see that we have a collection called enrollment progress and i'll zoom in here too enrollment progress and we've got current enrollment progress or current enrollment percentage excuse me and all we have is one field and that one field is enrollment percentage and so what happens is as my client has a new has a new enrollment percentage they come into the collection they find the one record that's in there and they update from 50 to 60. 60 to 75 they just update that one number and because the javascript embed element is using that field dynamically in the code then it will dynamically change the height of that div this is a method using just one record in our cms collection so it there is a little bit of manual work where you got to come in you got to update it if you wanted to what you could do is you could create if you had an air table base that had all of your donations or if you had a google sheet or you had something that was tracking donations you could have a calculated field in there that was percentage you know enrollment percentage and it's just calculated based on you know how what the total percentage is and so it would calculate it then every time a new donation or a new enrollment came in and that field is calculated then we could send it over to webflow using zapier or maybe like the noble the noble sync maybe power importer there's a few ways you can do it and then what you would do is in your embed element you would just make sure that you're filtering only by the most recent enrollment or the most recent record in that collection so we'd all only be looking at the most recent record and every time that came in it would have the most up-to-date progress percentage so that is an alternative way where you could do it more automated so that you don't have to update this number additionally the way that we've done this is we've just on our page we've dragged in our collection we have on our individual record we've just dragged in our thermometer embed element we've got that code we pasted the code the last thing that i did was added another embed code where it was just a heading a very simple heading with some text and then i pulled in the progress field and that is just so that we've got an actual number representation not just the the visual thermometer so you don't have to do that if you want to you could but really that's that's all we've got is we've got that little bit of code and we've got a little bit of code we've got the collection that's embedded and there's a few ways to do it so you've got a lot of options hopefully that tutorial was helpful head over to no code collab to get the snippets so that you can just paste that right into your webflow project and you don't have to type it all out by hand again if you haven't already please like this video subscribe to our channel and we will see you at the next tutorial [Music]

Channel: No Code Collab

Views: 70

Keywords: Fundraising Thermometer, No Code, Progress Thermometer, Webflow, Webflow custom code, Webflow tutorial, low code tutorial, no code tutorial, webflow tutorial for beginners, webflow tutorial website

Id: TlL6RnKQ0ZE

Length: 13min 38sec (818 seconds)

Published: Wed Sep 15 2021