CodePen

HTML

            
              
	<form action="#" method="POST">
		<label for="name">Name:</label>
		<input type="text" name="name" id="name" required autofocus/>
		<label for="number">Number</label>  
		<input tpe="tel" name="number" id="number" required/>
		<label for="friend">Is he a friend?</label>  
		<input type="checkbox" name="friend" id="friend">
		<input type="submit" id="submit" value="Add"/>
	</form>
	    <ul id="numbers"></ul>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
                  .friend{color: green;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              # localStorage.clear()
$('#friend').click -> $(this).toggleClass 'checked'

$('#submit').click ->
    ul = $('#numbers')
    number = $('#number').val()
    name = $('#name').val()
    if $('#friend').hasClass 'checked'
    	$(ul).prepend '<li class="friend"><span>Name: ' + name + '<br/> Number: ' + number + '</span></li>' 
    else
    	$(ul).prepend  '<li><span>Name: ' + name + ' <br/>Number: ' + number + '</span></li>' 
    localStorage.setItem 'contacts', $(ul).html() 
    $("form")[0].reset();
    return false


if localStorage.getItem 'contacts'
	$('#numbers').html localStorage.getItem 'contacts'
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................