Color Match: Building in JQuery
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:
For now I would like to focus on building out the “play” section of the app:
oooohhhh fancy 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