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.


Meet RGB MATCH.

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:


<html>
<head>
<meta charset=”utf-8″>
<title>jQuery Mobile: Theme Download</title>
<link rel=”stylesheet” href=”themes/puple.min.css” />
<link rel=”stylesheet” href=”themes/jquery.mobile.icons.min.css” />
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css” />
<script src=”../jquery-1.11.0.js” type=”text/javascript”></script>
<script src=”../jquery.mobile-1.4.2/jquery.mobile-1.4.2.js” type=”text/javascript”></script>
<meta name=”viewport” content=”width=device-width”/>
<style>
img{
width: 100%;
border: 2px solid #ffffff;
}
</style>
</head>
<body>

<!– This is the first page –>
<section id=”firstpage” data-role=”page” data-theme=”c”>
<div data-role=”header”>
<h1>COLOR MATCH!!</h1>
</div>
<div class=”content” class=”ui-content” role=”main”>
<p>learn the ropes:</p>
<img class=”image” src=”http://www.addictedtoibiza.com/wp-content/uploads/2012/12/example.png” />

<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>
</div>

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

<!– 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>
</div>
<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>

</div>
</div>

<!– This is the third page –>
<div id=”thirdpage” data-role=”page” data-theme=”c”>
<div data-role=”header”>
<h1>COLOR MATCH!!</h1>
</div>
<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>

</div>
</div>
</div>

</body>
</html>


 

*** 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