iamricard/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Make the card

When the user clicks “Submit”, their input should display on the card

Get the value of each input field
Add it as HTML to the correct element in the business card template

Change the color

When the user clicks “Submit”, their input should display on the card

Get the value of each input field
Add it as HTML to the correct element in the business card template

This is an online business card, so let’s add a link to the email element.


add an anchor tag inside the email element
when the user submits an email, add an href property with the correct mailto: URL like this example:

<a href="mailto:hi@example.com">
    hi@example.com
</a>
"Extra" points


How about having the card update when you press enter as well?
Validation on submit?
Real time validation?
Can we have one function for changing colors instead of two?


## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery exercise</title>
  <style>
    body {
      font-family: Helvetica, sans-serif;
    }
    input {
      height: 20px;
      padding: 5px;
      font-size: 16px;
    }
    button {
      height: 32px;
      font-size: 16px;
    }
    .colours {
      margin: 20px 0;
    }
    .biz-card {
      margin: 30px 5px;
      height: 300px;
      width: 500px;
      border: 1px solid gray;
      position: absolute;
    }
    .contact ul {
      list-style: none;
      position: absolute;
      bottom: 5px;
      width: 440px;
      padding: 0 30px;
    }
    .contact li {
      font-size: 14px;
      display: inline;
      text-transform: uppercase;
      letter-spacing: 2px;
      position: relative;
    }
    .right-align {
      float: right;
    }
    .heading p {
      text-align: center;
    }
    #name {
      font-size: 34px;
    }
    #job-title {
      font-size: 20px;
    }
    .blue {
      background-color: #21325D;
      color: #fff;
    }
    .yellow {
      background-color: #F5FF8D;
    }

  </style>
</head>
<body>
  <h1>Business Card Builder</h1>
  <form>
    <input type="text" name="name" placeholder="Name">
    <input type="text" name="job-title" placeholder="Job title">
    <input type="text" name="phone" placeholder="Phone">
    <input type="text" name="email" placeholder="Email">
    <button id="submit">Submit</button>
    <div class="colours">
      <button class="blue">Blue</button>
      <button class="yellow">Yellow</button>
    </div>
  </form>

  <div class="biz-card">
    <div class="heading">
      <p id="name">Sharon Kennedy</p>
      <p id="job-title">Professional Trapeze Artist</p>
    </div>
    <div class="contact">
      <ul>
        <li id="phone">694 37 28 02</li>
        <li id="email" class="right-align">sharon@ironhack.com</li>
      </ul>
    </div>
  </div>

  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script>
    (function() {
      $('#submit').on('click', function(event) {
        event.preventDefault()
        // your code for creating the business card goes here
        // get the values from the form fields
        // add them to the business card
      });

      $('button.blue').on('click', function(event) {
        event.preventDefault()
        // your code for changing the colours goes here
        // add the 'blue' class business card
      });
      $('button.yellow').on('click', function(event) {
        event.preventDefault()
        // your code for changing the colours goes here
        // add the 'yellow' class business card
        // you can also make your own classes and add them!
      });
    })()
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>jQuery exercise</title>
	<style>
	body {
	font-family: Helvetica, sans-serif;
	}
	input {
	height: 20px;
	padding: 5px;
	font-size: 16px;
	}
	button {
	height: 32px;
	font-size: 16px;
	}
	.colours {
	margin: 20px 0;
	}
	.biz-card {
	margin: 30px 5px;
	height: 300px;
	width: 500px;
	border: 1px solid gray;
	position: absolute;
	}
	.contact ul {
	list-style: none;
	position: absolute;
	bottom: 5px;
	width: 440px;
	padding: 0 30px;
	}
	.contact li {
	font-size: 14px;
	display: inline;
	text-transform: uppercase;
	letter-spacing: 2px;
	position: relative;
	}
	.right-align {
	float: right;
	}
	.heading p {
	text-align: center;
	}
	#name {
	font-size: 34px;
	}
	#job-title {
	font-size: 20px;
	}
	.blue {
	background-color: #21325D;
	color: #fff;
	}
	.yellow {
	background-color: #F5FF8D;
	}

	</style>
	</head>
	<body>
	<h1>Business Card Builder</h1>
	<form>
	<input type="text" name="name" placeholder="Name">
	<input type="text" name="job-title" placeholder="Job title">
	<input type="text" name="phone" placeholder="Phone">
	<input type="text" name="email" placeholder="Email">
	<button id="submit">Submit</button>
	<div class="colours">
	<button class="blue">Blue</button>
	<button class="yellow">Yellow</button>
	</div>
	</form>

	<div class="biz-card">
	<div class="heading">
	<p id="name">Sharon Kennedy</p>
	<p id="job-title">Professional Trapeze Artist</p>
	</div>
	<div class="contact">
	<ul>
	<li id="phone">694 37 28 02</li>
	<li id="email" class="right-align">sharon@ironhack.com</li>
	</ul>
	</div>
	</div>

	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script>
	(function() {
	$('#submit').on('click', function(event) {
	event.preventDefault()
	// your code for creating the business card goes here
	// get the values from the form fields
	// add them to the business card
	});

	$('button.blue').on('click', function(event) {
	event.preventDefault()
	// your code for changing the colours goes here
	// add the 'blue' class business card
	});
	$('button.yellow').on('click', function(event) {
	event.preventDefault()
	// your code for changing the colours goes here
	// add the 'yellow' class business card
	// you can also make your own classes and add them!
	});
	})()
	</script>
	</body>
	</html>