QCC Trip - College visit and 3D printing workshop 

On December 17th, 2014, we went to a trip to visit Queens  Community College to get our College IDs and go to a 3D printing workshop.  First, we had breakfast to start off our day. Then, the juniors went to the 3D printing workshop while, seniors went to get our College IDs.



Then, we switched. In the 3D printing workshop, we learned how objects was made through a 3D printer. In order for that to happen, first, you have to make a sketch of the object you want to print online then, click print like you would do in a regular printer. The machine slowly started printing a 3D cup and it took a little while for it to be printed.

The 3D Printer

                                                                                                               

This cup is 3D printed.

We were shown 3D printed machines that were much more bigger than the one you see above.






                                                             College Tour

Later, we were given a college tour where we were shown the different departments the college has. QCC is really huge and has a place where students can relax after their classes. 

We were shown the holocaust exhibition where QCC displayed pictures, diary, etc. that ere donated to them by people that faced the holocaust. It was amazing to learn about QCC because they have a great faculty who tries their best to help students and works hard to create a great learning environment.

Lab 17- JavaScript/Jquery Included Together (Labs 11-16)

In lab 17, we had to included everything we learned through labs 12-16. In lab 12, we learned to create sliders where the information appears on the bottom when a user moves their mouse arrow on top of it. I did this by adding javascript where I included it to slide down and slide up. Through my labs, I added jquery to make my labs work.




 

   On the top of my HTML coding, I included all the CSS from my labs 12-16 including day and night, contact form, etc.

In lab 11, we had to create day/night where the background changed when a user clicked on the different buttons. The function "lightSwitch" stands for the day button, "darkSwitch" stands for the night button, and "resetSwitch" stand for the reset button.










In lab 13, we had to create a cloning where the image clones when a user click on it. Inside my javascipt, it says if the image is clicked, clone it and I included 6 images so, whenever a user clicks on one of these 6 images, it will clone it.



In lab 14, we had to create an article using blockquotes. Inside my CSS, I included the width of my article/blockquote. Uisng Javascript, I created the blockquotes and kept the function names the same 'span.co'. Inside, my article I used the tag <span class=co> </span> to create the blockquotes.

In lab 15, we learned to create contact form. inside the CSS, I told how I want it to look like defining the color, width, etc. I included the speed of it to appear inside my javascript script.





We learned to do so much using jquery/javascript and one of the things was to make the text appear fast/slow. I create two revealing text: slow revealing text and fast revealing text. Inside my javscript, I included "slow" function to appear slowly and "fast" function to appear fast.

In lab 16, we learned to make box adjustments. I made 5 box adjustments: increase, decrease, center, fade out, and fade in.

I kept the same function names: <button id="dec"> (Increase) , <button id="cen"> (Decrease) , <button class="btn1"> (Fade Out), and <button class="btn2"> (Fade In). Inside my javascript coding, I told what the button to do. For example, the "btn1" fadeOut and "btn2" fadeIn. In addition, "cen" decreases the box while, "inc" increases the box.

Lab 16 - Box Adjustment

In lab 16, we had to create a button that did adjustments to a box. Inside, the box, we had to write about our favorite teachers and I wrote about Ms. Kaso and Dr. Liu because they inspired to keep on trying no matter what. The adjustments I added to my box was increase, decrease, center, fade in, and fade out.

Inside my CSS, I included how I wanted my box/buttons to look like defining its color and size. 

I created a <table> tag and inside it I included the box adjustments buttons. I added the <button id="dec"> (Increase) , <button id="cen"> (Decrease) , <button class="btn1"> (Fade Out), and <button class="btn2"> (Fade In). Inside the <div class="box"> tag, I wrote about my favorite teachers. I also attached the jquery inside my lab.

As you can see inside my javascript coding, I still have the same function names: <button id="dec"> (Increase) , <button id="cen"> (Decrease) , <button class="btn1"> (Fade Out), and <button class="btn2"> (Fade In). As you can see, the javascript coding telling what button does what. For example, the "btn1" fadeOut and "btn2" fadeIn. In addition,  "cen" decreases the box while, "inc" increases the box.

Lab 15 - Contact Form

In lab 15, we had to create a contact form that a user can use to contact you. I created the contact form to let a user give me feedback or ask me questions. In order to send me a feedback/question, the user have to click the "Contact Me" button below my lab 15 page and fill out the information to submit it.

Inside my CSS, I include how I wanted my contact form to look defining the background color of it, width, etc. The div id "#contact" is for my contact form. 

I wrote the tag <div id="contact"> to tell it how I want my form to look like using CSS coding. I included name, email, and feedback/questions inside my contact form. I include jquery inside my lab 15 also.



 Inside my javascript, I include the speed of the contact form to appear.

                                          

 





As you can see, my contact form has the background color I told inside my CSS code and the user has to fill in their name, email, and feedback/questions to submit the form.
                                                                                                           

Lab 14 - Article

In lab 14, we had to create an article that included blockquotes. Basically, we had to put the main quotes from our article on a block next to our paragraph. As you can see, I added 2 blockquotes inside my web design design article. I did this using jquery and javascript.

Inside, my CSS, I made my article 600px width and my blockquote to be 35% width and which color I wanted it to be. Inside the <article> tag, I wrote my article about web designing and ended it with the </article> tag. To have a blockquote, I used the <span class=co> tag and wrote inside what I wanted to include inside the blockquote and ended my tag using </span>. At the bottom, I included the jquery to make my lab work.

My JavaScript

As you can see inside my javscript, I include the function name 'span.co' that is my blockquote.

Lab 13 - Cloning

In lab 13, we had to make a image or text clone if someone clicks on it. I did a image and choose Nemo from finding Nemo because I think it will be a cute idea idea to do that. I wrote on the top, "Click on Nemo so, he have more fishes to travel with while going home!." Attaching the jQuery file was important to make this lab work.

This lab would be useful to me in my future labs/projects because if I want something to clone like text again and again in my website, I can use this coding. This is another step for using jQuery and I have more knowledge of it.

The following code on the right is the javascript that I used to make Nemo clone. It basically says if someone clicks Nemo, clone it inside the <body> field. 

                                                            My HTML coding

Lab 12

In lab 12, we had to pick a subject and create a mini quiz that we could later use to study. We had to make the answers slide down when a user puts the mouse arrow on top of the question. I choose geometry and added 5 questions. To make this lab work, the first step was to attach our jQuery file.  For the questions, I used the tag<dt> Question </dt> and for the answers, I used the tag <dd> Answer </dd>.                                                                                                                                                                     

Javscript was another major step of doing this step. As you can see in the image on the right is the javascript coding I used to make my lab work. The code is basically telling to hide <dd> which are the answers of the questions and slide down the answer if a person puts their mouse arrow on top of the question. 

My HTML coding

I can use what I learned in lab 12 in my future projects to organize my text and make it easier for the user to use my website. In addition, I can use it if I don't want to give a answer and let the user think and when they are ready, they can see if they were right or not. This lab is also a great way to review for geometry because it has the most important things to remember for a test or the regents.

Lab 11- Day & Night

In lab 11, we had to change the content of an HTML page by using jQuery for the first time. The first step of this lab was to attach our jQuery file to it otherwise, it wouldn't work. The "day" button is for a sunny background while, the "night" button is for a dark background and the reset button changes the background to the                                                                                 original background of the page.
Day:

For the "day" button I used the coding, "<input type="button" onclick="day();" value="Day" />", I named the button "Day" and a user can click it. I added javscript to it, "function day() { body.className = "lightSwitch";" I named the day function lightSwitch. Inside, my CSS coding, I added the image I wanted it to go to when the user clicks the day button using, ".lightSwitch { background-image: url("sunny.jpg"); }" and as you can see, the function name is "lightSwitch" to tell the CSS code which function I want this image to go to.

                                                          Night:

I did the same coding to create the "night" button but instead of naming the function "lightSwitch", I named it "darkSwitch" and I added a darker image inside my CSS coding.

My HTML coding:

This lab taught me how to change the background with a click of a button using jQuery. I can use this in my future work to let a user choose which background they want to see. This is a very useful tool because you can add not 1 background but 2 or more and you can do so much with creating different buttons.

My CSS coding:

Lab 10: 10 Forms

In lab 10, we had to create 10 forms using javascript. We had to make a separate receiver html page so, when the person clicks "send" button, it will say I have received your message. The "clear" form button clears all the information typed by the user. However, a person can't send me unless the user have typed in a password. For forms 1-3, the user only had to type in 1 password. However, through forms 4-8, the user have to type in two similar password. If the passwords doesn't match, it wouldn't let the user go to the receiver page. For forms 9-10, we had to create a destination form, where the user can decide which page they want to go.

Doing form 1 was the most easiest form to do out of all the 10 forms. As you can see on the bottom, my html/javascript coding for form 1. I told javascript, if someone did't type in a password, turn false and tell the user "Password field must be supplied." But, if a user did type in a password, return true and go to the receiver page which I linked in my html coding. Doing all the other forms was some what similar but adding a little bit more to it.

Form 1 Coding:

HTML

JavaScript

My HTML Coding

 This lab helped me learned how to create different kinds of forms. Now, I can create a form with 1 or more passwords and doesn't let the user go forward until all the information is filled. I can use it in my           future labs/projects.                                                            

                                             

My JAVASCRIPT coding