Lab 15 Reflection Blog

In this lab, lab 15, I was tasked with  making a web page that is basically marketing my assets and making a slide in and slide out button that will let potential clients able to contact me. In this lab I used Dreamweaver and the types of code I used were HTML, CSS and Javascript, as well as jquery. Here is the CSS that I used

<style>
	body {
	width: 600px;
	margin: auto;
	font-family:"Times New Roman", Times, serif;
	background-color: #C90;
	}
	#contact {
	background: #FCC;
	padding: 1em 2em;
	position: relative;
	}
	.js #contact {
	position: absolute;
	top: 0;
	width: 600px;
	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:"Arial Black", Gadget, sans-serif;
	cursor: pointer;
	}
	/* Form inputs */
	input, textarea { width: 100%; line-height: 2em;}
	input[type=submit] { width: auto; }
	label { display: block; text-align: center; }
	body,td,th {
	color: #00F;
	}
	</style>

So in the CSS this the code that I used to choose the font color  and background color for a slide in, slide out box that would provide the user to leave their name, email address and any questions or concerns they may have. under js contact, this is the code that allowed me to modify the width of the pink box, originally it wasn't the width i wanted but I was able trouble shoot and it turned out fine. The rest of the code managed the style of font, as well as size of text boxes and centering the headers  for each of the text boxes. Now moving on to the next piece of code: 

<article>
	<h1>What does it mean to be successful?</h1>
	<p>To be successful is to have the mentality that you will indeed succeed. With that being said, words that I follow are: "A person is not measured by what they can or cannot do but the efforts they take to succeed and keep pushing forward."</p>
	<p> By following these words I have been able to achieve some of my greatest achievements in life. From being able to study abroad to Europe, to being Vice President of National Honor Society</p>
	<p>This also transfers to Web Designing, my work is a reflection of my determination, not just my skill. If you have an questions or concerns pertaining to what it means to be a web designer or a hard worker in general, feel free to send me your name, email address and any questions or concerns you may have. I am available Monday- Friday after school hours. If I don't respond within the first 48 hours feel free to email me back once more.</p>
	</article>
	<div id="contact">
	<center>
	<h2>Contact Me!</h2>
	<form action="#">
	<ul>
	<li>
	<label for="name">Name: </label>
	<input name="name" id="name">
	</li>
	<li>
	<label for="email">Email Address: </label>
	<input name="email" id="email">
	</li>
	<li>
	<label for="comments">Questions or Concerns:</label>
	<textarea name="comments" id="comments" cols="30" rows="10"></textarea>
	</li>
	<li>
	<input type="submit" value="Submit">
	</li>
	</ul>
	</form>
	</div>
	<script src="../../jquery-2.1.1 (1).js"></script>
	<script>

 In this code much like my previous lab I put the text in the form an article,  three simple paragraphs explaining my assets and how if anyone has any questions or concerns they are free to leave their contact information.  The following code after sets up the table in the slide in slide out box.  It labels each, so for example, the box for sending email was labeled "email address" and the box for comments was labeled "questions or concerns". This code is very straight forward and was necessary in order to complete this label. After all of that, I linked the lab with the jquery in order for it to work properly. This is the last piece of code to explain:

<script>
	(function() {
	$('html').addClass('js');
	var contactForm = {
	container: $('#contact'),
	config: {
	effect: 'slideToggle',
	speed: 500
	},
	init: function(config) {
	$.extend(this.config, config);
	$('<button></button>', {
	text: 'Contact Me!'
	})
	.insertAfter( 'article:first' )
	.on( 'click', this.show );
	},
	show: function() {
	var cf = contactForm,
	container = cf.container,
	config = cf.config;
	if ( container.is(':hidden') ) {
	contactForm.close.call(container);
	container[config.effect](config.speed);
	}
	},
	close: function() {
	var $this = $(this), // #contact
	config = contactForm.config;
	if ( $this.find('span.close').length ) return;
	$('<span class=close>X</span>')
	.prependTo(this)
	.on('click', function() {
	// this = span
	$this[config.effect](config.speed);
	})
	}
	};
	contactForm.init({
	// effect: 'fadeToggle',
	speed: 300
	});
	})();
	</script>

So for this code, this was the java script function code for the lab. This code what was allowed the slide in and out box to be toggled and able to slide in and out. This is also the code that if you read where it says speed, determines how long it takes for the box to slide in and to slide out. This lab was very informative and I hope to do more things like this in the future.  This is relevant to web design in the way that when search for a job, instead of working on confronting a potential employer, they can confront me instead.