Usabilla challenge

Validate HTML

Before starting I validate the HTML. The HTML is valid, meaning that it does not have syntax errors. After completing tasks I then re-validate the HTML to verify that no errors were introduced.

Theme

The theme is based on that of the Rabobank. In many cases the corporate identity is already defined. This is why I choose to implement an existing corporate identity.

Annoying label + input

Who thought it would be funny to switch around the label and input fields while proposing that one is not allowed to change the HTML. After an hour struggling I choose to go with "text-align: center;".

Radio button

Radio buttons are not check boxes. Only one radio box within the group should be able to be checked and not both of them.

Mobile friendly-ish

The style sheet also contains styling for a narrower screen size. The narrower theme has bigger text and larger input fields. This is done to make use on mobile easier.

Style sheet

I have added classes to the HTML in two locations. If I remember correctly only the centered class for the centering of the radio and check boxes have been added to the HTML.

End result: https://www.dropbox.com/s/32rfkio80bu06wb/usabilla.html?dl=0

Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style type="text/css" media="all">

    * {
      padding: 0px;
      margin: 0px;
      box-sizing: border-box
    }

    body {
      background-image: url("https://pbs.twimg.com/profile_images/492199377671577600/oRWsEwIJ.jpeg");
      background-position: 100% 100%;
      background-repeat: no-repeat;

      padding: 0px;
      font-family: arial;
      font-size: 18px;
      color: #222;
      line-height: 110%;
      margin: 16px;
      margin-bottom: 200px;
      background-color: #F1F1F1;
    }

    label, h4 {
      font-weight: bold;
      margin-top: 18px;
      margin-bottom: 12px;
      display: block;
    }

    button, select, input[type="radio"], input[type="checkbox"], label[for*="checkbox"], label[for*="radio-choice"]{
      cursor: pointer;
    }

    input, select, textarea {
      border: 1px solid #CCCCCC;
      margin: -1px;
      display: block;
      resize: vertical;
      width: 100%;
      padding: 6px 1%;
      font-size: 100%;
      margin: 0px;
      font-family: arial;
    }

    select {
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url('https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png');
      background-repeat: no-repeat;
      background-size: auto 100%;
      background-position:  right 10px center;
    }

    form {
      width: 100%;
      margin: 0px auto;
    }

    input:focus, select:focus, textarea:focus {
    }

    fieldset {
      position: relative;
      padding: 8px;
      margin-bottom: 18px;
      background-color: #EFEFEF;
      border: 1px solid #CCCCCC;
    }

    fieldset legend{
      text-transform: uppercase;
      width: 100%;
      border-bottom: 5px solid #FD6400;
      font-size: 100%;
      background-color: #000099;
      padding: 2%;
      color: white;
    }

    button {
      background-color: #000099;
      color: white;
      border: none;
      padding: 5px 1%;
      float: right;
      font-weight: bold;
    }

    .centered label, .centered input {
      width: 100%;
      text-align: center;
    }

    .centered input {
      height: 0px;
    }

    .centered input:checked {
      height: 0px;
    }

  @media screen and (min-width: 960px) {

    body {
      font-size: 14px;
    }

    label, h4 {
      margin-top: 8px;
    }

    input, select, textarea{
      background-color: #fff;
      min-width: 256px;
      margin: -1px;
      padding: 4px 1%;
      width: auto;
      margin: 1% 0px;
    }

    button{
      width: auto;
    }

    form {
      width: 50%;
      margin-top: 50px;
    }

    fieldset legend{
      padding: 1% 2%;
      font-size: 100%;
    }

  }

  </style>
</head>
<body>
  <form action="#" method="post">
      <fieldset>
        <legend>Personal details</legend>
        
        <div>
          <label for="name">Your name:</label>
          <input type="text" name="name" id="name">  
        </div>
        
        <div>
          <label for="email">Your email address:</label>
          <input type="email" id="email" name="email">
        </div>
        
        <div>
          <label for="phoneNumber">Your telephone number:</label>
          <input type="text" name="phoneNumber" id="phoneNumber">
        </div>
        
        <label for="select-choice">Where are you from?</label>
        <select name="select-choice" id="select-choice">
          <option value="england">England</option>
          <option value="spain">Spain</option>
          <option value="france">France</option>
          <option value="netherlands">Netherlands</option>
        </select>
      </fieldset>

      <fieldset class="centered">
         <legend>Which is better?</legend>

         <label for="radio-choice-1">Mercedes</label>
         <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1">

         <label for="radio-choice-2">Audi</label>
         <input type="radio" name="radio-choice-2" id="radio-choice-2" value="choice-2">
      </fieldset>

    <fieldset>
      <legend>Feedback</legend>
      <div>
          <label for="textarea">Enter your feedback:</label>
          <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
      </div>
      <h4>How does our product make you feel?</h4>
      <div class="centered">
        <label for="checkbox1">Amazing</label>
        <input type="checkbox" name="checkbox1" id="checkbox1" />
        <label for="checkbox2">Happy</label>
        <input type="checkbox" name="checkbox2" id="checkbox2" />
        <label for="checkbox3">Sad</label>
        <input type="checkbox" name="checkbox3" id="checkbox3" />
      </div>
      
    </fieldset>
    <button>Submit</button>
  </form>
</body>
</html>

bas080/usabilla.md