Help with condensing Javascript/jQuery

Question

Basically i wanted to test my knowledge of the javascript and jQuery that i have been learning here and reading from books elsewhere so I decided to make a very simple "web app", if you can even call it that, that generates a media query to your specifications. When you click on the fields to give it certain breakpoints and types i wanted a box to appear to the side to show a few common examples and the default value for the text area to disappear so the user doesn't have to back space a bunch of time before typing. Then all of this to undo when clicked away. I was able to accomplish all of this, but in a very very cluttered way. Specifically the examples and the disappearing text. I repeated my code very badly and was wondering if someone could help me with suggestions on how to condense it. Here is my code, Thanks!

The html

<input id="type" type="username" value="Type"></input> 
        <div class="examples example1">
            <p>A few common types:</p>
            <ul>
                <li>Screen</li>
                <li>Print</li>
                <li>All</li>
                <li>Aural</li>
                <li>Braille</li>
                <li>Embossed</li>
                <li>Handheld</li>
                <li>Projection</li>
                <li>Screen</li>
                <li>tty</li>
                <li>tv</li>
            </ul>
        </div>
        <input id="parenth" type="username" value="Style Breakpoint"></input>
        <div class="examples example2">
            <p>A few common breakpoints:</p>
            <ul>
                <li>Mobile Portrait: 320px</li>
                <li>Mobile Landscape: 480px</li>
                <li>Small Tablet Portrait: 600px</li>
                <li>Small Tablet Landscape: 800px</li>
                <li>Tablet Portrait: 768px</li>
                <li>Tablet Landscape: 1024px</li>
            </ul>
        </div>

The javascript

var $input1 = $('#type');
        var $input2 = $('#parenth');
        var default_value1 = $input1.val();
        var default_value2 = $input2.val();
        $('.examples').hide();

        $input1.focus(function() {

            $('.example1').fadeToggle('fast');
            if($input1.val() == default_value1) {$input1.val("")};

        }).blur(function(){

            $('.example1').fadeToggle('fast');
            if($input1.val().length == 0) {$input1.val(default_value1)};

        });

        $input2.focus(function() {

            $('.example2').fadeToggle('fast');
            if($input2.val() == default_value2) {$input2.val("")};

        }).blur(function(){

            $('.example2').fadeToggle('fast');
            if($input2.val().length == 0) {$input2.val(default_value2)};

        });

If you need the rest of the code just ask

Answer 1 · 2014-04-25T13:20:27Z

April 25, 2014 1:20pm

There are many ways to reduce the amount of code here. You could write a function and just call the function for each input... but in this case, you can reduce the code even further by doing something like this:

First of all, instead of the value attribute, use the placeholder attribute. It already acts the way you want it to, so there's no need to do the hiding of the text programatically.
Second, hide the elements with the .examples class in CSS, not JavaScript.
And finally, use the jQuery .next() method to get the next sibling of an element. Your example divs are siblings to the input fields. So, you can easily get to the next sibling of the focused input field and show/hide it.

The end result is visible in this CodePen.

Welcome to the Treehouse Community

Looking to learn something new?

Alex Cawley

Alex Cawley

Help with condensing Javascript/jQuery

1 Answer

Dino Paškvan

Dino Paškvan

Alex Cawley

Alex Cawley