In this video, we walk through building an icebreaker party game on screen with Ionic.
– Theme Switcher tutorial:
– Learn Ionic:
– Find me on Twitter:
– More Ionic tutorials:
in this video we're going to be live coding and application as I've done a few videos like this before and the basic idea is that I just have a general idea of what I want to build in my head but haven't really done any preparation or research for this so we'll just walk through issues as they come and we'll try to you know build a simple example of an application and so the general idea for this came from just those party drinking game type apps me and my friends use one of those recently when we went to the Gold Coast and I can be quite a lot of fun to play they asked you know truth or dare style questions get people to vote on things that kind of stuff a bit of icebreaker type stuff I guess but I had the idea just to develop my own version of one mainly because I feel like the the pricing of these apps maybe maybe take advantage of the fact that people who probably have been drinking when they're playing them so I thought it'd be cool just to host like a PWA of just a simple party game style app but I also think it provides just some interesting stuff to walk through on video as well and so basically what I want to build is an app that will display a question or prompt on screen it'll set a different background color for each question and it will just randomly cycle through those as you click so you can just kind of endlessly click on the screen and it's going to cycle through different questions and display them on the screen and so the interesting thing about that is that it's means we'll have to load up some data so we'll probably be making HTTP or HTTP requests to loads and data we'll have to figure out how to change the background color dynamically so we'll probably do that using CSS variables I'm also going to need a way to randomly cycle through those questions so with that said let's just jump into trying to code this thing so I've already generated a blank ionic application and I think what I'm going to do first is just set up some dummy data I'm also going to get rid of this header section because we're just going to have just the content section and we'll get rid of this boilerplate stuff here uh yeah I think a good first step will be trying to display some dummy data on the screen will cycle through some questions by clicking in the ion content area so let's switch over to home page here and eventually we'll probably load in this data from a JSON file or something like that but for now we'll just code it directly into the home page because as we're really just trying to work on a bit of a prototype I guess so I'm gonna set up the on init hook here and we'll set up a say an array to hold our questions public questions we weren't really worried about defining an interface just yet actually no let's do that that'll be it's good way to sort of define what I doubt it's going to look like and it's better to do these things now rather than probably to put it off till later and then maybe never do it so let's say from create a separate interfaces file here yes I'm going to create a new folder for interfaces and then I'm going to create a question interface and so the point of an interface is basically to just define the structure of your your data so you're basically making your own type so you can enforce that particular data structure so I'm going to say export interface call this question let's call it party questions to be a bit more specific and we are going to have for each question we have the question itself so let's just say we'll call that question and that's going to be a string and we'll probably have a I think a specific background color for each question we could either set a random background color for each question or have a specific background color assigned to a particular question I think I like that better because then you can I don't know maybe have a bit of a theme certain questions or we certain colors so we'll just call this background and that's going to be a string as well okay now with that interface defined we can import that so we're going to import a question from interfaces question I didn't call that question to what I call a party question import party question from there and then we're going to use that as a type on here so this is going to be an array of party questions there's a party question and we'll just set it to be a blank array to begin with and so eventually like I said we're going to load up the questions from from somewhere maybe from a JSON file eventually but for now let's just set up some dummy data here so say this start questions equals this is going to be an array and then as I mentioned each question is going to be a it's going to have the question itself and a background color so I'll just use a placeholder for now so let me just check that was question say question and it's going to be I would say question one so it can't be all the thinking of that just yet and the color and I was called background wasn't it background can be we'll make this just black for now so I'm just going to copy this out a few times and basically I just want to you know check that the general ideas you know working fine and then we can work on building this out of it better so it changes to two three four and we changed I went to white this one two gray color and this one can be black as well that's fine and so we have our questions there and we also are going to need a way to I guess select was set the currently active question so I'll create a separate class member for that and we'll call this active question that's going to have a type of just a single party question and now we're going to need to create some kind of method to set the active question so we'll create a method here called why not set question and eventually we might decide to move some of this stuff out into its own provider to separate some of the logic out of this page a little bit but for now we'll just do in here and we'll figure that stuff out later and so basically I just want to set the active question randomly to any one of these so I should be able to do that by saying this dot active question equals this stop questions and let's I've set this out into its own variable here to make this a little bit clearer so I'll let selected question equal we're going to use a random integer here so we should be able to select a random integer between we want between zero and three to randomly select one of the you know they're currently the the current questions in our questions array so it should be able to do that with pretty messed up floor math dot random times the length of the array I think that should work so basically the math dot random will give us a random integer or rather random number between zero and one and then we're using floor to round that down to the nearest whole number and my times by multiplying math dot random by the length of the array that you know if we had math dot random game at zero point six three times it by four or say two or something like that so I've had zero point six times at two I guess it's one point two and then flooring that will give us one and so this should give us a random integer between between zero and three hopefully that's a figuring this wrong maybe we'll have to Google search that later but we'll go with that for now if we start running into problems we'll fix it up so now we had to set this active question to distil questions selected question hopefully that works just fine so we'll just initially set this I will call that you know the first time we run the code because we need to set initial and initial question so for this don'ts that question and we'll check now in the browser and probably see some errors okay so it says compile it successfully so everything does seem to be working so far obviously we've got nothing on the page yet so let's let's display the active question on the page so we should be able to come into here and we'll just use an interpolation and we'll use the active question here there's an active question darts question was it yes okay so save that and we'll see if we have a question question one perfect exactly what we want so now we've got a way to display one question on the screen there like an initial question now we want to display a different question every time we click so we should be able to just attach a click method to the ion content itself that's our want this to work I'm not sure I've ever actually done that before but I don't see why it shouldn't work so set up this event binding here click to our set question so we'll call that and since an iron content isn't meant to be tapped at the tap abour property here or attribute so that it doesn't have a tap delay on mobile devices it's not the best way to use this or make changes in the future it's better to use elements that are meant to be clicked but this should work for now so we'll just test that that does indeed work okay so it seems so as I click it is cycling between questions hopefully I've run to any arrows yet and just wondering if my math dot random was wrong or not but we seem to be able to get every question and we're not you know we're running into any errors or anything like that so it's probably right so we're just trust that it is for now okay so let's let's just style this a little bit to begin with so I don't know we'll just put put this inside of a h3 tag before we weaken in messing with the styling too much let's just do handle the background color first so I want to doubt I'm going to have to have enough time to do everything so I want to focus on the important stuff here and so what we want to do is basically set the background color to whatever is in here every time we you know run this set question and so we could do that by using CSS variables with the ioniq that's how ionic styles their components which you know I own content is a component here and CSS variables can be changed dynamically they can be changed at runtime so we should be able to this change the background color as a CSS variable and have that change for us and so I've actually written the tutorial on a theme switch a service I think so just to make sure we're doing this correctly I'm gonna just look up that tutorial now search for switcher I think I registered or yeah okay so I've forgotten how I went about doing it at the time so let's just see yeah so we're just using grabbing the document element here and setting a particular variable to a certain value so we're going to do the same thing in a home page and again you can see here we're using a in this tutorial I'm using a theme switch a service which is a using a provider which is in a separate to the page which is a good thing to keep this stuff separate for now I'm just going to do it in the page it's so just because not only have enough time to do everything properly here so I'll probably have a nother follow-up video where I'll finish this stuff off maybe improve things a little bit I'm going to need that in shift as well because we want to inject the document into the page and you can see here we're in checking with the dom controller so we can perform those dom rights efficiently and also injecting the document so we're not just grabbing the global document object we're grabbing it in i guess an angular friendly way so let's add a constructor and inject those in there and again I'm just going to copy the code from here I have to modify a little bit to do what we want so we don't need this for each we don't need to loop through anything here so I'll just remove that and we'll just have document.documentelement styled at set property and now this is the variable we want to change which we'll have to look up I guess and then we want to set that to the background of that question so we'll say this dot active question dot background and now to see what the variable want to change is I can just come back into our app here so we're trying to change the background color on this ion content so if I just search for background you can see ion background color it's currently set to white ffffff so we should be able to just modify that I own background color set that to whatever the background value is for the particular question and hopefully that will work maybe so looks like that's working I see it's gray I click throughout other questions it's cycling through different colors which are basically white black and gray which is obviously not entirely pretty so let's go to flat UI colors calm the website I use when I want some you know test colors to work with I just have some pretty defaults we can use so let's go copy a few of those and we'll just use those in here so what is just turquoise or try this Peter River wisteria and sunflower now probably also going to want the color for these questions to be white as well so let's just set a style in here for h3 I'll just set that to white so they stand out a bit see what that looks like okay that's pretty cool okay so we've come pretty far so far we have pretty much it's like pretty close to what we want in the end this is the basic idea where we're just able to click and tap through various questions randomly thought of on screen we have cool you know background colors showing I'm probably going to cut this the lesson or there's a video off here we're going to finish this up in a part two I think I don't think I have the battery power available to finish yourself entirely and I don't want to rush through the rest of it so what we do want to finish up after this lesson is we want to load in questions from a JSON file or you know from maybe even from a server somewhere or something like that rather than just hard coding them into the page and also we want some some real questions as well so so we can see what it's going to look like if the app has really been new so it's intended maybe you can leave some suggestions for questions or I don't know dares or whatever that I can add to this and so basically yeah we just need to load in those questions from an external source at a bit of styling obviously one is centered and the questions displaying fully maybe you know had a text shadow assigned to the two other questions and then maybe we'll also refactor this code a little bit might be worthwhile separating this stuff out into its own some kind of question service that this the home page can call okay so I hope you enjoyed part one of this video and likely release part two for next week's video so if you want to see that feel free to subscribe if you like this style of video please do like the video it's a little different to what I usually do I guess so yeah it would be great to know if you do enjoy this kind of I guess half hazard playing around just yeah messing around with code style video if you want to check out my website the the tutorial I mention my Twitter stuff like that I'll have links in the description but otherwise yeah hope you enjoyed the tip here and I'll see you in the next one