Color Match: Building in JQuery

· · · · · · · · · · · | Always On, Always Connected

For now I have decided to table the NYPee idea and focus on a project I started last semester in ICM.


Henceforth known as Color Match (maybe, I’m still working out the name).

I spent some time imagining how this game could be expanded and shaped into a more dynamic mobile app:

2016-02-15 23.40.45

For now I would like to focus on building out the “play” section of the app:

2016-02-15 23.41.09

2016-02-15 23.41.29

oooohhhh fancy wireframes:

color match balsamiq wireframes

And then hours spent pouring over JQuery tutorials. (loving my NYU lynda subscription)

I made it this far:

And then I made it a bit farther:

Not bad too start. Still a lot of work to do but I am feeling capable.

Code so far:

<meta charset=”utf-8″>
<title>jQuery Mobile: Theme Download</title>
<link rel=”stylesheet” href=”themes/puple.min.css” />
<link rel=”stylesheet” href=”themes/” />
<link rel=”stylesheet” href=”” />
<script src=”../jquery-1.11.0.js” type=”text/javascript”></script>
<script src=”../” type=”text/javascript”></script>
<meta name=”viewport” content=”width=device-width”/>
width: 100%;
border: 2px solid #ffffff;

<!– This is the first page –>
<section id=”firstpage” data-role=”page” data-theme=”c”>
<div data-role=”header”>
<h1>COLOR MATCH!!</h1>
<div class=”content” class=”ui-content” role=”main”>
<p>learn the ropes:</p>
<img class=”image” src=”” />

<div class=”ui-grid-a”>

<div class=”ui-block-a”><p><a href=”#secondpage” class=”ui-btn” >settings</a></p></div>

<div class=”ui-block-b”><p><a href=”#thirdpage” class=”ui-btn” data-transition=”slide”>PLAY!</a></p></div>


<div data-role=”footer”>
<h2>Match the colors :)</h2>

<!– This is the second page –>
<div id=”secondpage” data-role=”page” data-dialog=”true” data-theme=”c”>
<div data-role=”header”>
<h1>COLOR MATCH!!</h1>
<h2>Settings: </h2>
<div class=”ui-grid-a”>

<div class=”ui-block-a”><p><a href=”#firstpage” class=”ui-btn” data-transition=”fade”>home</a></p></div>

<div class=”ui-block-b”><p><a href=”#thirdpage” class=”ui-btn” data-transition=”fade”>PLAY!</a></p></div>


<!– This is the third page –>
<div id=”thirdpage” data-role=”page” data-theme=”c”>
<div data-role=”header”>
<h1>COLOR MATCH!!</h1>
<h2>Match the colors!!</h2>
<div class=”ui-content” role=”main”>

<div class=”ui-grid-a”>

<div class=”ui-block-a”><p><a href=”#secondpage” class=”ui-btn” >settings</a></p></div>

<div class=”ui-block-b”><p><a href=”#firstpage” class=”ui-btn” data-transition=”flip”>home</a></p></div>




*** I need to brush up on my css and get rid of the <style> tags in my html doc (sooo ugly) but for now I’m a bit nervous to edit the stylesheet… as I said grateful for lynda…

No Comments

Leave a comment