monsteronfire/beginner-workshop-part-2.md

## beginner-workshop-part-2.md

      
    Raw
  

              beginner-workshop-part-2.md
            
          
    Beginner Workshop | Part 2

1. Markup for contact page

Your contact.html page should now look like:
<!DOCTYPE html>
<html>
  <head>
    <title>Shaii Ong | Contact me</title>
    
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="site-wrapper contact">
      <header>
        <ul class="site-menu">
          <li><a href="index.html">home</a></li>
          <li>|</li>
          <li><a href="about.html">about</a></li>
          <li>|</li>
          <li><a href="contact.html">contact</a></li>
        </ul>
      </header>

      <div class="main-content">
        <h1>Contact me</h1>
        <h2>I'm available for hire.</h2>
	
	<form class="contact-form">
          <input type="text" name="name" placeholder="Name" />
          <input type="text" name="email" placeholder="Email" />
          <textarea name="message" placeholder="Your message"></textarea>
          <button type="submit">Send</button>
        </form>
      </div>

      <footer class="site-footer">
        <span class="divider"></span>
	
        <ul class="user-social-media">
          <li><a href="#">Twitter</a></li>
          <li><a href="#">LinkedIn</a></li>
          <li><a href="#">Github</a></li>
        </ul>
      </footer>
    </div><!-- end of site-wrapper -->
    
    <script src="script.js"></script>
  </body>
</html>
2.1 Update the menu for the other two pages

Go back to both the index.html and about.html and make sure their site-menu blocks also look like this:
<ul class="site-menu">
  <li><a href="index.html">home</a></li>
  <li>|</li>
  <li><a href="about.html">about</a></li>
  <li>|</li>
  <li><a href="contact.html">contact</a></li>
</ul>
3. Adding styles to the form

The form looks pretty basic right now, so let's add some styling. Add the bottom of our style.css file, add the following:
/* Contact form styles */
form {
  width: 400px;
  margin: 0 auto;
  padding-top: 30px;
}

input,
textarea,
button {
  display: block;
  width: 100%;
  margin-bottom: 15px;
  padding: 10px 12px;
  font-size: 14px;
  border: 2px solid #EEEEEE;
  border-radius: 4px;
}

input,
textarea {
  background-color: white;
}

input {
  height: 30px;
}

textarea {
  resize: none;
  height: 200px;
}

button {
  background-color: transparent;
  color: white;
  cursor: pointer;
}

input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input:-moz-placeholder,
textarea::-webkit-input-placeholder,
textarea::-moz-placeholder,
textarea:-ms-input-placeholder,
textarea:-moz-placeholder {
  color: #D3360B;
}

input::placeholder,
textarea::placeholder {
  color: #D3360B;
}
4. Our finished contact.js JavaScript file:

Your finished JavaScript file should look like this:
(function () {
  // Firebase settings
  var config = {
    apiKey: "<your-api-key>",
    authDomain: "<your-auth-domain>",
    databaseURL: "<your-database-url>",
    projectId: "<your-project-it>",
    storageBucket: "<your-storage-bucket>",
    messagingSenderId: "<your-messaging-sender-id>"
  };

  firebase.initializeApp(config);

  var database = firebase.database();


  // Contact Form
  var form = document.getElementById('contact-form');

  form.addEventListener('submit', sendMessage);

  function sendMessage (event) {
    event.preventDefault();

    var name = document.getElementById('contact-name').value;
    var email = document.getElementById('contact-email').value;
    var message = document.getElementById('contact-message').value;
    console.log(name, email, message);

    database.ref('messages').push(
      {
        name: name,
        email: email,
        message: message
      }
    );
    
    form.reset();
  }

})();