Monday, December 22, 2014

Lab 17 Reflection Blog

In this lab, lab 17, I had to combine all the previous labs I did that consisted of jQuery into one lab in the form of an accordion.  The accordion consists of  6 previous works, text cloning, text wrapping( creating a block quote with an article), a contact form, revealing text which consists of fast revealing text and slow revealing text. Also Text box adjustment and the day and night labs.

To make things easier I copied the same code from the prior lab, however instead of having a link to the jQuery for each individual lab, all I had to do was create one link to the jQuery that would send the data to each individual lab within the accordion.  To start off, the original accordion from lab 12 had CSS so that its text boxes as well as the text inside could have colors and specfic heights and widths. This is the link I put at the top to connect the lab to the lab12 CSS:

 <link href="../Lab 12/style.css"rel="stylesheet" type="text/css" />

Following that I added a style for Lab 17's own CSS that would be applied specfically for Lab 17. Here you can see the code below:

<body style="background-color:#FC6">
<body><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>
This code  is for the contact form, this is the specified text style, position, font family as well as background color and padding. The code following this  is for the first box, text cloning. Here is the code for it: 
<dl>
<dt>Text Cloning</dt>
<dd><div class="container">
<h2>Click me!(don't Click me)</h2>
<script src="../../jquery-2.1.1 (1).js"></script>

<script>

(function() {
$('div.container').delegate('h2','click', function() {
console.log('clicked');
$(this).clone().appendTo('.container');
});
})();

</script></dd>

<d1> opens the text box, <dt> Is the title for the box,  after that the div class allows the table to be a container which shall include a heading two form of text called "Click me!(don't Click me)". After that the code is connected to the jQuery. Following that, the java script is added.  it allows for the div container to operate and contain h2 which will be cloned once clicked.  After this set of code the text wrapping is next. Here is the code for text wrapping: 
<dt>Text Wrapping</dt>
<dd>
<style>
article {
width: 600px;
margin: auto;
}
blockquote.co {
float: right;
background: #e3e3e3;
font-size: 2em;
width: 35%;
text-align: center;
}
body,td,th {
color: #FFF;
}

</style>
<article>
<h1>Creative Writng</h1>

<p> My favorite subject since the start of high school is Creative Writing Honors from Junior year</p>
<p>
I took this course Junior year with Mrs. Hyde and I enjoyed it very much. I read many books in this class from The Scarlet Letter to the Great Gatsby and all the of the things I read had some form of significance or impact for me. The Scarlet Letter was about a woman who committed adultery and how she is branded with a Scarlet Letter "A" for adulteror on her chest. As it turns out due to her adultery she ended up having a child so all of town shunned her for her "sin". Little do the people know that infact the father of concieved child is the reverand of the church, a high powered official inn town that everyone admires. We had a lot of dicussion in class about who should be blamed, the woman or the man? I felt I had true college experience with the help of these conversations.</p>

<p> Also in this class I wrote the hardest assignment in my life, a 10 page research paper on the topic of my choice. My choice of topic was American Schools v. Asian and European Schools. I wrote about how American schools are not united well and is something that people should take into account since the USA is falling behind in academics compared to other countries in Europe and Asia. I presented evidence, quotations and such and <span class=co>supported with intextual citation.</span>
</p>

<p> This class was very important to me because out of all the classes that I took in high school I feel this was one of the few classes I felt really challenged me and asked me to look beyond anf put my self in another position. This class also helped me get out of my comfort zone and I honestly felt pushed to partcipate on a daily basis</p>
</article>


<script src="../../jquery-2.1.1 (1).js"></script>

<script>

(function() {

var co = $('article').find('span.co').each(function() {
var $this = $(this);

$('<blockquote></blockquote>', {
class: 'co',
text: $this.text()
}).prependTo( $this.closest('p') );
});

})();
</script>
</dd>
In this code as you can see the title of the box is Text Wrapping, followed by that is a style css so that the text following after that will be in the firm of an article with a width of 600 px with a margin set up automatically.  Following that there will be a block quote that will be floating towards the right of the article. after that is font color, background color and text alignment of the block quote After the style and article tags are closed I inserted paragraphs explaining my favorite course from high school, creative writing. After all the pargraphs I then added the Javascript for the article to analyze the block quote and take text from the paragraphs to put in the block quote. This is an example with code of a piece of text put into a block quote: <span class=co>supported with in textual citation.</span>.

 Next is the contact form, one of the most difficult ones I had to incorporate correctly into the lab. Here is the code for it :
<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>

(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( sdf )
.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>

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 lab. After that 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.

After that was the revealing text portion of the lab. Here is the code for it:
<dt>Revealing Text</dt>
<dd><h1 id="slow">Slow Revealing Text</h1>
<div class=content>
<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 oncerns peratianing 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>
<p class="p2">&nbsp;</p>
</div>
<h1 id="fast">Fast Revealing Text</h1>

<div class=content>
<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."

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 class="p1">&nbsp;</p>


</p>
</div>


<script>

(function() {

var co = $('article').find('span.co').each(function() {
var $this = $(this);

$('<blockquote></blockquote>', {
class: 'co',
text: $this.text()
}).prependTo( $this.closest('p') );
});

})();

</script>

<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: 500
});

})();

</script>

<script>


$('div.content').hide();



$("#fast").on('click', function() {
$(this).next().slideToggle('fast');
})

$("#slow").on('click', function() {
$(this).next().slideToggle('slow');
})




</script></dd>

For  this  code I had to create slow and fast revealing text using java script and j Query along with various different tags. Besides the standard tags for the text box in the accordion and the title I added a div class tag for content, where the following afterwards would be content related to what ever was in h1. For h1 it is important to keep in mind I set the content inside to reveal slow. After I wrote the paragraph that would be the content I closed the tag and repeated the same process for fast revealing text only difference was that I put fast this time. After all that I added the java script into the code. The java script was used to manage  the toggling for the text as well as the slide in and slide out speeds.

Following this, was the text adjustment tab. Here is the code:

<dt>Textbox Adjustment</dt>
<dd>
<div class="box">
<style>
body {
background-color: #33C;
}
.box {
width: 500px;
background-color:#960;
padding: 2em;
position: relative;
}
p {
font:"Comic Sans MS", cursive;
color: #99C;
}
button {
background-color:#009;
color:#CC0;
display:compact;
width: 100px;
height: 100px;
}
</style>
<h1> Mrs. Hyde</h1>
<h2> My Inspiration</h2>

<p>Mrs. Hyde is one of the teachers in my life that has been a great inspiration to me. She has taught me many things, given me the chance to explore many different ways of thinking. In her class I had the opportunity to take part in a socratic seminar and voice my responses on questions she had given previously for homework. She made us follow the three A's: Add, Ask or Argue. Each person has to either add, ask or argue to what the previous person said.
</p>

<p> Furthermore, something that I took from this class was specfically the assignments. One assignment inn particular was a 10 page research paper on a topic of my choosing. My topic was regarding American Schools v. Asian and European schools, basically the concept of no child left behind. I wrote about how the US is behind other countries in education and how the statistics show the socio economic status of different families in the US makes a huge difference when it comes to showing how poverty contributes to how good of an education a student gets.
</p>



<table>
<tr>

<td>
<p>
<button id="inc">
Increase Font Size
</button>
</p>
</td>


<td>
<p>
<button id="dec">
Decrease Font Size
</button>
</p>
</td>

<td>
<p>
<button id="cen">
Center the DIV
</button>
</p>
</td>


</tr>
</table>

<script src="../../jquery-2.1.1 (1).js"></script>

<script>
(function() {
var box = $('div.box');
w = $(window).width() / 2 - box.outerWidth() / 2,
h = $(window).height() / 2 - box.outerHeight() / 2;
$('#cen').on('click', function() {
box.animate({
'left': w,
'position' : 'absolute'
})
.animate({
'top' : h
}, {duration: 2000, queue: false });
});
$('#inc').on('click', function() {
box.animate({
'font-size': '+=3',
'width': '+=200'
}, 1000);
});
$('#dec').on('click', function() {
box.animate({
'font-size': '-=3',
'width': '-=200'
}, 1000);
});
})();
</script></dd>
This code starts with me adding a tag of adding a background of a book shelf, I thought this would appeal since she is an English teacher. Following that, I added two headings for her name and that she is my inspiration. After that, I used <p>  tags to add the two paragraphs of content. Lastly I used the table tags for the buttons, within the tables I used <p> tags to organize the text inside and give each button id's so they will be given a specific task to complete. Lastly I connected the lab to the J query. The JavaScript contains the function for allowing the the lab to be interactive so that when I press the buttons, they actually change in width and height, and can move around the page. There are various tags here varying from window width, window height, outer width and outer height, as well as box. animate that allows the box to be animated. Each set of code applies to each distinct box, especially the code that shows the increase/decrease in font size as well as width.

 Lastly was day and night. Here is the code for it:
<dt>Day and Night</dt>
<dd>
<div>
<body id="body">
<input type="button" onclick="day();" value="Day" />
<input type="button" onclick="night();" value="Night" />
<input type="button" onclick="reset();" value="Reset" />
</div>
</dd>

<script>
function day() {
body.className = "lightSwitch";
};
function night() {
body.className = "darkSwitch";
};
function reset() {
body.className = "resetSwitch";
};

$(function() {
var button = $('input[type=button]');
button.on('click', function() {
button.not(this).removeAttr('disabled');
$(this).attr('disabled', '');
});
});
</script> </dd></div>
</dl>


<script>

(function() {
$('dd').filter(':nth-child(n+4)').addClass('hide');

$('dl').on('mouseenter', 'dt', function() {
$(this)
.next()
.slideDown(200)
.siblings('dd')
.slideUp(200);
});
})();


</script>

I added 3 buttons, day, night and reset to rest whatever type of format the page was to its original form. After that was the java script,  There was a dark switch,light switch and reset switch code for each button. After that was the code for the reaction to be triggered by a click. After that was the speed at which the page would show up at.


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)