New Plus Tutorial: Build an Awesome Calculator

New Plus Tutorial: Build an Awesome Popup jQuery Calculator

on Mar 4th 2009 with 33 comments

We’ve got a fantastic Plus tutorial for you this week, from Chris Coyier, of CSS-Tricks. In this tutorial and screencast, Chris will show you how to build a really neat jQuery calculator. Join Now!

Preview

“Sure is nice to have a letter opener right next to your mail basket, a shoehorn next to your loafers, and a flashlight by your nightstand. Likewise, it’s nice to have a calculator handy when you need to perform some math. This tutorial and download shows you how to put one right on any website.”

calculator

Join Tuts Plus

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at nettuts+, psdtuts+, and vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.


 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Chris Coyier is web designer and developer from Madison, WI currently residing in Portland, OR. He enjoys old time banjo music, photography, and bringing ideas to live with XHTML, CSS, and jQuery.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Deddy

    Cool

    • http://www.pryde-design.co.uk Andrew Pryde

      Uncool.

      1. Interesting
      2. Done by one of my favourite authors on webdesign
      3. Paid subscription required :(

      @Prydie

  • http://twitter.com/nazmy_my Nazmy

    Got to join tuts plus soon

  • http://www.solutiondesigns.net Philo

    Looks Great!

  • Alex Korey

    normal

  • http://blog.insicdesigns.com insic

    holy awesome!

    • Rik Girbes

      i agree!

      BTW: your new site design is great!

    • http://www.pryde-design.co.uk Andrew Pryde

      I disagree but I do really like your site design :)

      @Prydie

      • Abhisek

        I disagree…the design is based on wp-remix.com’s wp premium theme but nowhere it is said or acknowledged. FAIL!

    • http://juarezpaf.com Juarez P. A. Filho

      I don’t see the video, but your new site design is Great. Congrats girl and very nice job there.

    • http://www.quizzpot.com crysfel

      i think it is a good design hehehehehe

      @nettuts: keep posting good stuff for free ;)

  • http://www.saroverhees.be Saro

    Very nice calculator!

  • http://eyoosuf.blogspot.com Yoosuf

    chriss on Net.Tuts?

    • http://snedekerdesignz.com/blog/ Craigsnedeker

      Kewlz!

  • http://snedekerdesignz.com/blog/ Craigsnedeker

    Looks sweeeet!

  • Danny

    Very cool.

  • http://www.aldrinponce.com weblizzer

    great cool

  • http://eyoosuf.blogspot.com/ M.A.Yoosuf

    u disrespected :Sm i was really happy when the video was streaming but finally i saw only see u later and bye bye :(

  • http://themeforest.net/user/JeffreyWay Jeffrey Way

    @M.A. – Sorry. :(

  • http://themeforest.net/user/JeffreyWay Jeffrey Way

    We spend a lot of money on these tutorials; that’s why we have to charge $3 per site.

  • http://www.quizzpot.com crysfel

    it looks good!! i like it

  • http://www.freshclickmedia.com Shane

    I’m sure the concepts covered in the video are fantastic – I don’t doubt that there’s some great CSS/jQuery in there.

    I do, however doubt the assumption that you’ll think ‘oh, I need a calculator on this page to work out a quick sum’ :)

    On another note, I did something similar with an iPhone style keyboard on a site I recently did. Some of the users didn’t have acess to physical keyboards but still needed to enter text on some pages. (Don’t ask ;)

  • Pingback: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

  • Pingback: My Bad Attitude » Build an Awesome Popup jQuery Calculator

  • http://jason-boyle.com Jason

    I’ll sign up when Jeffrey Way finishes the second part of his ‘Login System’ tutorial. *nudge nudge. :)

  • http://douglasheriot.com/ Douglas

    The design is just a rip off of Apple’s dashboard widget calculator (even close button X in the corner), but still interesting.

    I wish these plus tutorial previews had a live demo, but that would provide less reason for people to pay to see it.

  • http://www.amberweinberg.com Amber Weinberg

    Pretty nice. I’ve been collecting jQuery tutorials lately to jump into this summer once I finish with PHP ;)

  • http://ivorpadilla.com iPad

    Great tutorial, Chris Coyier as always surprising us =) Good work.

  • http://www.brandonlroach.com Brandon Roach

    Nice calculator, I love the final effect, it moved much smoother that I thought. Great job. :)

  • http://www.designbuddy.net Nicholas

    What a great Tutorial

  • Pingback: 25 Powerful and Useful jQuery Tutorials for Developers and Designers : Speckyboy Design Magazine

  • http://twitter.com/saurabhshah saurabh shah

    good one….

  • Pingback: 25 Powerful and Useful jQuery Tutorials for Developers and Designers | guidesigner.com

  • http://www.advise-art.com advise-art

    not bad …

  • Pingback: 25 Powerful and Useful jQuery Tutorials for Developers and Designers | designersmantra.com

  • Pingback: 25 Awesome jQuery Tutorials | Search-End

  • Pingback: HTML, CSS, PHP and jQuery Killer Tutorials | Evan Mullins Circlecube ReBlog

  • http://wwww.2topic.ir wallfa

    good script ajax

  • http://www.codehunterbd.wordpress.com Khairul Alam

    Nice tutorial and this is another great job.Thanks for this Nice calculator.

  • http://www.victoriaexpert.com Hary

    Awesome! This is what i am looking for. Thanks for the tutorial.