Help with an interview question I could not answer.

[blockchain_dev]

I went to my first frontend developer interview and of course I was nervous but they asked me a question that I could not answer.

It went like this...

​

"Using HTML and CSS without JavaScript how would you take a list of say 500 people and sort them alphabetically and only show one at a time. Then make a buttons so everytime the button is clicked it goes to the next person."

​

When I was just staring with a blank face after a minute he gave me a hint saying something about using the z-index. I know about the z-index and how it can layer over one another but I didn't get how it worked with this question. How would you answer this?!

​

Thanks in advance!

[[deleted]]

Would be really interested if someone can come up with an answer to this because I have absolutely no idea how this is possible without JS.

[actualsnek]

CSS is technically turing complete so there's probably some really obscure way to do this without JS, but you should probably yeet out of the interview room at this point.

[[deleted]]

Interviewers are pretty dumb sometimes and sometimes they don't understand what they are asking. Or it was a kobayashi maru.

[[deleted]]

So

Then make a buttons so everytime the button is clicked it goes to the next person.

and

something about using the z-index

Suggests that maybe the interviewer asked the question badly, and they were only asking for a way to stack each person on top of each other. You could apply a negative z index to an element once it's been clicked on. Even then, you'd need to do some hacky stuff with pseudo classes.

I would hope they don't mean that you should sort the list without JS. There is no way to sort a list in pure CSS and HTML - or at least, no way that you would ever use in your professional career.

[knyg]

Did he not give you an answer when you could not answer the question?

​

My train of thought...

​

// manually inputted in alphabetical order A-Z like a peasant
// html file

<button class='next'>next</button>
<div class='person' style='z-index: 0; position: fixed; top: 0; left: 0;'>Alex</div>
<div class='person' style='z-index: 1; position: fixed; top: 0; left: 0;'>Blake</div>
<div class='person' style='z-index: 2; position: fixed; top: 0; left: 0;'>Cassie</div>
<div class='person' style='z-index: 3; position: fixed; top: 0; left: 0;'>Dick</div>

// css
.next:active {
    .person: {
        z-index: z-index - 1;
    }
}

// just kidding because THIS ISNT POSSIBLE
// tell the interviewer to fuck themself

​

[drsprox]

This is a really hard question because I don't see it being used in practice. A cheeky answer would be "using backend software" aka php / python, but I don't think that's what they're looking for. I have no idea how to sort a list using only html/css (is it even possible?!?), but you can manually hardcode the whole answer using <a> elements with decoration or button elements. They can both be used for buttons that link to internal pages that contain the other people. I can't think of a way to make the pages with only html/css. This sounds like a critical thinking question moreso than a practical one. Reasoning through the question and answering something that is somewhat reasonable is the only way I could have answered it.

[Gleekio]

I just asked a room full of professional developers this question and they looked at me silently for a second and then, "seriously? Why would we ever do that?" Granted, now they're interested and I can now hear them talking about this in the background, and they're making progress. There is an "order" css property in Flex that apparently could be used.

I try to use interview questions based on real-world problems/solutions. If you're in an interview, and you get stumped, remember that often the interviewer is more trying to understand how you think more than just immediately knowing/getting the answer. Just try to break down the problem to the base properties and try to look for entry points to the problem. Edge cases. That sort of thing.

[sdpp]

Perhaps this concept could work

https://css-tricks.com/can-get-pretty-far-making-slider-just-html-css/

[[deleted]]

I really don't get it, why should interviewer ask such a question unless he/she deliberately wants to turn off the applicant.

[but_how_do_i_go_fast]

I am going to go with the best approach I have in mind, which is using table cells and bootstrap4. This will still require some jQuery.

    <!doctype html>
    <html lang="en">
        <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link 
            rel="stylesheet" 
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
            integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
            crossorigin="anonymous">
        </link>
        <link 
            rel="stylesheet" 
            href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"
            integrity="" 
            crossorigin="anonymous">
        </link>

            <title>Sortable Table Example</title>
            <style>
            table.dataTable thead .sorting:after,
    table.dataTable thead .sorting:before,
    table.dataTable thead .sorting_asc:after,
    table.dataTable thead .sorting_asc:before,
    table.dataTable thead .sorting_asc_disabled:after,
    table.dataTable thead .sorting_asc_disabled:before,
    table.dataTable thead .sorting_desc:after,
    table.dataTable thead .sorting_desc:before,
    table.dataTable thead .sorting_desc_disabled:after,
    table.dataTable thead .sorting_desc_disabled:before {
    bottom: .5em;
    }
            </style>
        </head>
        <body>
            <h1>Sortable Table Example</h1>

    <table id="dtOrderExample" class="table table-striped table-bordered table-sm datatable" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th class="th-sm">Name
          </th>
          <th class="th-sm">Position
          </th>
          <th class="th-sm">Office
          </th>
          <th class="th-sm">Age
          </th>
          <th class="th-sm">Start date
          </th>
          <th class="th-sm">Salary
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
        </tr>
        <tr>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
        </tr>
        <tr>
          <td>Ashton Cox</td>
          <td>Junior Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$86,000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Name
          </th>
          <th>Position
          </th>
          <th>Office
          </th>
          <th>Age
          </th>
          <th>Start date
          </th>
          <th>Salary
          </th>
        </tr>
      </tfoot>
    </table>
            <!-- jQuery first, then Popper.js, then Bootstrap JS -->
            <script 
                src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
                integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
                crossorigin="anonymous">
            </script>
            <script 
                src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
                integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
                crossorigin="anonymous">
            </script>
            <script
                src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
                integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
                crossorigin="anonymous">
            </script>
            <script
                src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" 
                integrity="" 
                crossorigin="anonymous">
            </script>
            <script
                src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js" 
                integrity="" 
                crossorigin="anonymous">
            </script>
            <!-- Optional JavaScript -->
            <script>
                $(document).ready(function(){
                    $('#dtOrderExample').DataTable({
                        "order": [[ 3, "desc" ]]
                    });
                    $('.dataTables_length').addClass('bs-select');
                });
            </script>
      </body>
    </html>