Home/ Questions/Q 8050893
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T07:11:02+00:00

I recently had a 30 min test for a job application using only Javascript

  • 0

I recently had a 30 min test for a job application using only Javascript with jQuery. Didn’t have to be styled well or anything. I created a very basic “30 min” page with Javascript and jQuery which I thought was “ok”.. I just wanted to get some feedback if there was a more efficient/better way of doing this? as it turned out, I didn’t get the job.. always learning, and also the job was quite a way from where I live.

Anyway, the original HTML page given was as follows, and after that is my humble attempt to turn the basic HTML into a tab based content page – again within 30 mins.

<html>
<head>

<!-- stylesheet, javascript, etc. here -->

</head>
<body>

<h1>My Page</h1>

<h2 class="subheading">The first section</h2>
<div class="content">
    <p>Lorem ipsum...</p>
</div>

<h2 class="subheading">The second section</h2>
<div class="content">
    <img src="/some_image" alt="Image" title="Image"></img>
    <p>Some other text</p>
</div>

<h2 class="subheading">The third section</h2>
<div class="content">
    And some more text here
</div>


<div class="footer">
    This is at the foot of the page
</div>

</body>
</html>

Ok, so my humble attempt is as follows:

<html>
<head>
    <title>Test JS page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <style type="text/css">
        #tabs
        {
            width:457px;
            height:60px;
        }
        #tab1, #tab2, #tab3
        {
            width:150px;
            border:1px solid #ccc;
        }
        #tab1
        {
            float:left;
        }
        #tab3, #tab2
        {
            float:right;
        }
        #tab2_content, #tab3_content
        {
            display:none;
        }
        .clear
        {
            clear:both;
        }
        #content
        {
            height:300px;
        }

    </style>

    <script type="text/javascript">
    $(document).ready(function () {

        $('#tab1_link').click(function (e) {
            e.preventDefault();
            clearContent();
            $('#tab1_content').show();
        });

        $('#tab2_link').click(function (e) {
            e.preventDefault();
            clearContent();
            $('#tab2_content').show();
        });

        $('#tab3_link').click(function (e) {
            e.preventDefault();
            clearContent();
            $('#tab3_content').show();
        });

    });

    function clearContent() {
        $("div[id*='_content']").each(function() {
            $(this).hide();
        });
    }

    </script>

</head>

<body>

<h1>My Page</h1>

<div id="tabs">
    <div id="tab1"><a id="tab1_link" class="subheading">The first section</a></div>
    <div id="tab2"><a id="tab2_link" class="subheading">The second section</a></div>
    <div id="tab3"><a id="tab3_link" class="subheading">The third section</a></div>
</div>

<div class="clear">
</div>

<div id="content">

    <div id="tab1_content" class="content">
        <p>Lorem ipsum...</p>
    </div>

    <div id="tab2_content" class="content">
        <img src="/some_image" alt="Image" title="Image"></img>
        <p>Some other text</p>
    </div>

    <div id="tab3_content" class="content">
    And some more text here
    </div>    

</div>

<div class="footer">

This is at the foot of the page

</div>

</body>
</html>

So as you can see, not pretty for sure.. the stylesheet was inline as is the script, however this was meant to be a test to show if you knew Javascript/jQuery enough to perform the tasks.. I figured it wasn’t great, but not too bad either..

I would be grateful for any feedback on other ways to achieve the desired result.. again it doesn’t have to be pretty, just functional.. and of course all within 30 mins..

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <div id="tabs">
    <ul>
        <li><a href="#tabs-1">The First Section</a></li>
        <li><a href="#tabs-2">The Second Section</a></li>
        <li><a href="#tabs-3">The Third Section</a></li>
    </ul>
   <div id="tabs-1" class="content">
        <p>Lorem ipsum...</p>
   </div>

   <div id="tabs-2" class="content">
       <img src="/some_image" alt="Image" title="Image"></img>
   </div>

   <div id="tabs-3" class="content">
      <p>Some other text</p>
   </div>
</div>

<script>
   $(function() {
    $("#tabs").tabs();
   });
</script>

    http://jqueryui.com/demos/tabs/

    • 0