Adding Interactive-iPhone App
So you have a cool project you built with HTML, CSS, and JS, and you think it would be perfect as an app for the open-source Interactive-iPhone project on GitHub but you have no idea how to go about integrating it?
The good news is you don’t have to worry, in this guide I will walk you through all the steps. You will have your app up and running smoothly and ready to commit in no time.
So first things first, this tutorial might be difficult to understand if you haven’t familiarized yourself with the project and the code itself first. So I highly recommend doing that. Here is another link.
So now that you’ve had a look around, let's look at the project we are going to integrate.
Those of you who have completed the first half of Colt Steeles Web Dev Bootcamp will be familiar with the Color Game Project, for those who aren't familiar, the point is to guess which color matches the given RGB color value. Here is a live demo and the repository to give you a better idea.
We will be turning this small web application:
Into a working ‘interactive iPhone’ app, that will look like this:
A good place to start would be to have both projects open in different workspaces in your text editor of choice, that way it will be easy to copy the code in.
Next, go into the src directory in the interactive iPhone workspace and open index.html.
Inside of index.html, scroll down until you find the clearly marked section close to the bottom of the file commented:
<!-- Add New App Here -->Without deleting any of the existing code or comments hit enter a few times to give yourself space then add the app's container div with a class of app and another class with a unique name for the app, in this case color-game, then comment in the appropriate title, our code will look like this:
<!-- Color game app --><div class="color-game app"> <!-- Content of app goes here --></div>
From here you copy and paste the body of the app into your div and search the HTML file for the class on-display which will be a bit further up on the ‘Lock screen’ container div.
The app container with the class on-display, will be on ‘on display’, but more on that later…
Remove on-display from the lock screen and add it to the container div of your app.
<!-- Color game app --><div class="color-game app on-display"> <header>
<h3 id="top-tit">THE GREAT</h3>
<h1>RGB(x, y, z)</h1>
<h3 id="bot-tit">GUESSING GAME</h3>
</header> <div id="options">
<button id="refresh" class="option">New Colors</button>
<span id="message" class="option"></span>
<button data-squares="3" class="mode option">Easy</button>
<button data-squares="6" class="mode option">Medium</button>
<button data-squares="9" class="mode option">Hard</button>
</div> <main>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</main></div>
and the iPhone looks like this (gross):
Well, nothing that a bit of CSS can’t fix right? So why not just try copy in the styles from our apps stylesheet, that won’t make it any worse right?
So you make a new file in /src/stylesheets/ and give it the same unique name that you used for your apps class name. For the color game its color-game.css and then just dump your styles in there, nice, now you need to connect it.
This is where the magic of webpack comes in, you won’t connect your stylesheet directly to the HTML, instead, you will connect it via your apps script. To do that you will first need a script, so go ahead and create a new file in /src/scripts/, use the same name as the CSS file. For the color game its color-game.js.
Inside your apps new script import the stylesheet with a simple import statement, the correct path to the stylesheet and an alert to let you know you’re all connected:
import "../stylesheets/color-game.css";alert("I'm aliiiive!!!");
Nice, but wait a second, you didn't connect the script to the HTML, what's the deal? Well, we can thank webpack for that. I’ve configured webpack to look through the /src/scripts/ directory and automatically connect any file ending with .js to the HTML, pretty cool right? Check out this free tutorial, if you want to learn about webpack.
Okaay, so now that everything is all connected and talking to each other, let's move along…
Since you already have your script setup, why not get rid of that annoying alert and replace it with the script from your app? Here is the result:
Well, it still doesn't look great but hey, at least it’s sort of working.
This next step is very important not to leave out.
In your script and stylesheet wherever you have selected an element, you must use your apps class name as a parent selector to select the element. You might have to change some of the selectors in your JS file to query selectors. This is an attempt to ensure that you don’t apply your styles or effects anywhere else in the project. Here are two snippets for reference:
* /src/stylesheets/color-game.css *.color-game .buttons {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap; width: 100%;
height: 50px;
margin-top: 5px;
}.color-game #refresh {
margin: 0 30%;
}.color-game button {
border: none;
background: none;
font-size: 0.9rem;
letter-spacing: 1px;
color: rgb(100, 180, 220);
transition: all 0.5s;
outline: none;
border-radius: 2px;
}--------------------------------------------------------------------* /src/scripts/color-game.js *const squares = document.querySelectorAll(".color-game .square"); const newColors = document.querySelector(".color-game #refresh");
const background = document.querySelector(".color-game header");
const message = document.querySelector(".color-game #message");
const guess = document.querySelector(".color-game header h1");
const modes = document.querySelectorAll(".color-game .mode");
The next matter of business is to ensure that your app will close correctly when you want it to. To achieve this, add the following styles directly to your container app using the unique class name:
* /src/stylesheets/color-game.css *.color-game {
position: relative;
width: 100%;
height: 0;
z-index: 0;
opacity: 0;
}
Which will be overridden by on-display :
* /src/stylesheets/phone.css *.on-display {
height: 580px !important;
z-index: 1 !important;
opacity: 1 !important;
transition: opacity 0.5s;
}
From here you will have to do somethings on your own. You will have to play around a bit to get everything looking good. While doing this keep in mind the importance of using the apps unique class name as a parent selector whenever selecting a new element.
I often found that this step seemed a lot harder to do before I started messing around with things. If you need a helping hand or just a nudge in the right direction feel free to join the interactive iPhone discord and leave me a question, I’ll be happy to help you out.
And so, we arrive at the final result:
Beautiful!
But we aren’t at the finish line yet, all that’s left is to create and connect the app icon to your app. If you can’t find an app icon that works and you don’t have any image editing skills then feel free to join the discord and send me a message for help.
Once you have the icon, save it to /scr/assets/imgs/ then head back to /src/index.html and find the clearly commented section:
<!-- Insert New App Icon Here -->Once again, give yourself some space above the comments and copy-paste the following HTML:
<div> <img
width="54"
height="54"
data-name="<unique class name goes here>"
src="./assets/imgs/<icon name goes here>"
>
</img> <p> <Name your app here> </p></div>
Fill in all the necessary details, move on-display back to the ‘lock screen’ container div and that should do it.
All that’s left is to test that it opens and closes correctly and that all the other apps still work as they should and voila!
If you were able to connect the app and get it working then you deserve a huge congratulations. This certainly isn't an easy thing to do when you haven’t worked with someone else's code before so you can give yourself a pat on the back.
If you felt that this tutorial was hard to understand and the code difficult to read then that’s probably on me. I am fairly new to development and this was my first large scale application and the first tutorial that I ever attempted to make. If you have any feedback then please get hold of me on discord or leave it in the comments, anything constructive will be greatly appreciated.
Thank you again for making it this far, here is a cute cat meme to relax your brain after all that.
