Take a Penny, Leave a Penny | Alex Tonetti
  • Twitter
  • Facebook
  • Google+
  • GitHub
  • Instagram
  • LinkedIn
  • RedBubble
  • Society6

Thursday, February 18, 2016

Take a Penny, Leave a Penny



Take a Penny, Leave a Penny was my second venture onto the web after Alex Tonetti Photography. Alex Tonetti Photography has been a labor of love. I truly did enjoy getting it up and running, so much so that I wanted to do it again. Looking for a topic, I chose finance because I really enjoy investing, earning money, and saving money for the future. Since finance is such a broad topic, I decided to further niche down my site. I remembered how in the past multiple friends have asked me how they could earn cash from their phones in their spare time just like I do. This is where I decided to focus the topic of the Take a Penny, Leave a Penny blog.
I started by creating a second Blogger blog and purchased the domain name with Google Domains. I found a simple template online and began to customize it to fit the needs of my site. I created some graphics, a logo, and a post header image template in Adobe Illustrator for the site. I added several different widgets to the side and bottom bar—an about me section, popular posts section, a Facebook widget and some ads for the iPhone simulations that I had yet to create. I updated the links on the site to point to my own social media profiles and created three new pages; Contact Me, iPhone Simulations, and Earnings Report. Additionally, I optimized the site for improved search engine optimization (SEO) using some of the tips I had picked up from Alex Tonetti Photography. Besides those SEO tips, I also added several other imperative components for a successful website. The components are listed below with some that have already been mentioned but in more detail:

Customizations Added

  • A MailChimp email list and subscriber pop-up to entice users into joining my newsletter.
  • A Facebook page that I will be use to post blog content and expand my audience.
  • A custom form with Font Awesome icons for the Contact Me page.
  • Graphics to promote the iPhone simulations I had created.
  • An Earnings Report page with tables that auto sum the amounts in each column (Example below).
Auto Summing Table Example with Code
Prior to Starting this blog
Field Agent $24.60
Survey.com $30.35
Quickthoughts $40.00
Dscout $750.00
Loot! $81.53
Pact $32.79
Rewardable $14.10
Total
On the left, is an example of the auto summing table from my Earnings Report page that I created. Below, is the HTML code underneath it.
        window.onload = function() {
          var sums = [ "lifetime" ];
          for(var i = 0; i < sums.length; i++) {
            var tds = document.getElementsByClassName(sums[i]);
            var sum = 0;
            for(var j = 0; j < tds.length; j++) {
              sum += (tds[j].innerHTML == "-") ? 0 : parseFloat(tds[j].innerHTML.replace("$", ""));
            }
            document.getElementById(sums[i] + "-sum").innerHTML = "$" + sum.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
          }
        }
      

Custom iPhone Simulations

For the custom iPhone Simulations, I created two subdomains for Take a Penny, Leave a Penny—makemoney and finance for the cash earning and finance apps simulations, respectively. I trialled out a few different free hosting options including Google Drive, Blogger, and Wordpress but finally landed on GitHub Pages because each simulation is only a single HTML page. I did continue to use Google Drive to host the shared iPhone simulation CSS and JavaScript files, though.
Replicating the iPhone's User Experience
I wanted the look and feel of the simulation to duplicate the user experience of an iPhone as much as possible. In order to do this, I added several different components using two different open source Javascript & CSS libraries including JQuery, and Fotorama. JQuery is the underlying animation for the iPhone's sliding content tray as well as a dependency for the Fotorama library. For now, I will skip the iPhone's sliding content tray because I will get into more detail on that later on. The Fotorama CSS & JavaScript libraries are used to replicate the iPhone's multiple pages of applications. I had some experience working with this library before, because it is my header gallery on Alex Tonetti Photography posts. This allowed me to quickly implement multiple app pages in the simulations, marking the completion of my first iPhone user experience component.
The second major user experience feature I added was giving functionality to the home button. I utilized a circular HTML map over the iPhone's frame and centered it above the home button to make it clickable. Next, I updated the sliding content tray's JavaScript function that controls the sliding animation—adding the ability to close the iPhone's sliding tray by clicking the home button if and only if the tray is visible to the user. Besides those two major user experience features, I made several smaller cosmetic edits to reproduce the iPhone's look. A quick Google search and I was able to find the iPhone's font. Resizing the icons recreated the app grid in both number of rows and columns, and spacing; adding a dock with some of the default Apple applications—Mail, Phone, Messages, Music; and developing a live updating clock for the top banner bar, pushed my simulation closer to performing and looking like a real iPhone. Check out my example of the live updating clock below:
Live Updating Clock for My iPhone Simulation Header Example with Code
On the right, is an example of the live updating clock that I created for my iPhone simulations. On the left, is the JavaScript code behind it. See it here or check it out in action by following either Cash Earning Apps iPhone Simulation or Finance Apps iPhone Simulation.
      
              function getTime() {
                var date = new Date();
                var hours = date.getHours();
                var minutes = date.getMinutes();
                var ampm = hours >= 12 ? 'PM' : 'AM';
                hours = hours % 12;
                hours = hours ? hours : 12; // the hour '0' should be '12'
                minutes = minutes < 10 ? '0' + minutes : minutes;
                var strTime = '' + hours + ':' + minutes + ' ' + ampm + '';
                document.getElementById('iphone-time').innerHTML = strTime;
                setTimeout(getTime, 1000);
              }
            

Additional Home Screen Features
Feeling good about the look and feel of the iPhone, I added a few more features that I thought might be fun additions. I started by creating a Coming Soon overlay in CSS for the applications that I am testing but not yet able to write up a review for. The overlay consists of a heading tag rotated and positioned with a span tag inside of it, containing the text and background color. For the background images of the iPhone, I thought it would be a cool idea if my photos from Alex Tonetti Photography could rotate in and out. I formatted a couple of my favorite photos to fit the screen size of the iphone. Then, I wrote up a JavaScript function that loads a random background on page load. An example of my random background rotator is shown below with some minor modifications. On the production simulation, the background will only change when refreshing the page, not every second and a half like below.
iPhone Simulation Background Rotator Example with code
On the left, is an example of the iPhone simulation background rotator I created for my iPhone simulations. See it here or check it out in action by following either Cash Earning Apps iPhone Simulation or Finance Apps iPhone Simulation. Below, is the JavaScript code underneath it.
        function getiPhoneScreenBackground() {
          $('').appendTo('#screen');
        }
      
iPhone's Sliding Content Tray
The final piece of the iPhone simulation development was the iPhone's sliding content tray. I created a JavaScript function using jQuery so when a user clicks on one of the apps, the iPhone slides left and a new content tray slides out from the right. Inside that tray is where all the content goes about each app. I will start from top to bottom describing the features that I added to the content tray. The initial components I added were two different rating systems. The first is the user rating system powered by PollDaddy and the second is a static rating that I give each app provided by the JavaScript library RateIt. The second component I added to the iPhone's content tray was the app category. I used Bootstrap to create a tooltip that would show the description of the category when a user hovers over the app category text.
Category Tooltip Example with code
Below is an example of the category tooltip that I created for my iPhone simulations. Hover over the links below to see it in action or check it out on either the Cash Earning Apps iPhone Simulation or the Finance Apps iPhone Simulation. Below that is the HTML and Javascript code that creates it.
Survey App      Task App      Photo App      Shopping App
HTML Code:
        Survey App
        Task App
        Photo App 
        Shopping App
      
JavaScript Code:
        var shoppingAppsCategoryText = "Category Text";
        $('.shopping-apps-category').each(function() {
          $(this).attr('title', shoppingAppsCategoryText);
        });
        ...Continued
      
Next, came the post text which was the hardest part for me, I am not a natural born writer. I did notice though while testing, the long text was being cut off without signifying to the user that there was more content. In order to fix this, I created a fading div for the bottom of the article text area that would hint to the user that they needed to scroll down to see the rest. An example of this can be seen below with some text from Alice's Adventures in Wonderland, by Lewis Carroll. Afterward, I created custom graphics in Adobe Illustrator for the iTunes App Store and the Google Play store to allow users to download the apps that I recommend directly. After setting up the hyperlink references for a few of the apps I realized that not every app was going to be available in both stores, some might be in one but not the other. This lead me to develop a similar overlay as the Coming Soon overlay that I had created for the iPhones home screen. This new Not Available in this Store overlay used the existing CSS code with a few minor tweaks. And with that, I finished the iPhone's content tray.

Fading Bottom Text DIV Example with code
On the left, is an example of the fading bottom text DIV that I created for my iPhone simulations. See it here or check it out in action by following either Cash Earning Apps iPhone Simulation or Finance Apps iPhone Simulation. On the left, is the CSS code behind it.
        Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, `and what is the use of a book,' thought Alice `without pictures or conversation?'         So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.
              .fadeout {
                position: relative;
                bottom: 50px;
                height: 50px;
                background: -webkit-linear-gradient(rgba(225, 225, 225, 0) 0%, rgba(225, 225, 225, 1) 100%);
                background-image: -moz-linear-gradient(rgba(225, 225, 225, 0) 0%, rgba(225, 225, 225, 1) 100%);
                background-image: -o-linear-gradient(rgba(225, 225, 225, 0) 0%, rgba(225) 100%);
                background-image: linear-gradient(rgba(225, 225, 225, 0) 0%, rgba(225, 225, 225, 1) 100%);
                background-image: -ms-linear-gradient(rgba(225, 225, 225, 0) 0%, rgba(225, 225, 225, 1) 100%);
                text-align: center;
              }
            



Check out TakeAPennyLeaveAPenny.com



After much thought and consideration, Take a Penny, Leave a Penny has been retired. It was a labor of love but in the end I had too much on my plate to be able to give it the attention it desereved


Connect with Take a Penny, Leave a Penny


    

Contact

Get in touch with me


Location

Washington, DC