jQuery Exercise: Hidden Form

jQuery Exercise (object, encapsulate...)

HTML

<!-- 
Create the javascript code w/ jQuery that:
1. Hides the form
2. Adds a button at the end of the page 
3. When clicking that button the form should appear from the top of the page (some effect)
4. A close button should be added to the form that allow us to hide it again

 var contactForm = {

    container: // the Form selection
    config: { // the effect should be configurable
		},
    init: function(config) {
    	// use the config passed as parameter
			// creates the button and adds it
    },
    show: function() {
      // show the form w/ effect
    },

    close: function() {
      // adds the close button and attach the proper event
    }
  };

-->


<article>
  <h1>My Awesome Post</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
</article>

<div id="contact">
  <h2>Contact Me</h2>
  <form action="#">
    <ul>
      <li>
        <label for="name">Name: </label>
        <input name="name" id="name">
   ...

CSS

body {
	  width: 600px;
	  margin: auto;
	  font-family: sans-serif;
	}
	
	#contact {
	  background: #e3e3e3;
	  padding: 1em 2em;
	  position: relative;
	}
	
	.js #contact {
	  position: absolute;
	  top: 0;
	  width: inherit;
	  display: none;
	}
	
	#contact h2 {
	  margin-top: 0;
	}
	
	#contact ul {
	  padding: 0;
	}
	
	#contact li {
	  list-style: none;
	  margin-bottom: 1em;
	}
	/* Close button on form */
	
	.close {
	  position: absolute;
	  right: 10px;
	  top: 10px;
	  font-weight: bold;
	  font-family: sans-serif;
	  cursor: pointer;
	}
	/* Form inputs */
	
	input,
	textarea {
	  width: 100%;
	  line-height: 2em;
	}
	
	input[type=submit] {
	  width: auto;
	}
	
	label {
	  display: block;
	  text-align: left;
	}

JavaScript

(function() {

  $('html').addClass('js');

  var contactForm = {
    container: $('#contact'),
    config: { // the effect should be configurable
    },
    init: function(config) {

      //this.show();
    },
    show: function(container) {

    },

    close: function() {
      // adds the close button and attach the proper event
    }
  };



});