Service Work BootCamp at The Door 10/22 and 10/29/2016

10/22/2016

      Since I don't have all my community service hours completed, I participated at this Service Work Boot Camp at The Door in Manhattan with my friend, Tanzil. It was such an amazing experience, the people there are extremely nice, and it was not what I imagined it to be. I questioned myself, "why have I not done this earlier?" It was so fun and so much better than what I expected. We first introduced ourselves with a game of toilet papers, where we all had to take a random amount of toilet papers, and for every square of toilet paper you take, you have to share a fact about yourself. 

      Then we started the Capstone Project where we all pointed out the issues of our community and were put into random groups to discuss and create a plan to help solve one of the issues. My group decided to focus on the issue of the homeless people and thought of ways to help them. And by the end of this capstone project, we've agreed on a project where we will be creating blessing bags to donate to charities to the homeless the following week. 

      We then had a little time to play games of 2 truth and one lie and went upstairs for the panel where we had two successful guests from Citi Bank to talk with us about the life, career, and education. When I asked them about Community Service, one of them said that, "After a certain level of education, everyone is smart, so the question is, 'what else are you bringing to the table', it can be community service or other things." This really inspired me because I really agree with his idea, and it helped me realize the benefits of doing community services besides fulfilling my school requirements and help out other. They also said that finding mentors are extremely important. And it can simply be just knowing people who knows someone in the field of your interest, and asking to have a short 15 minute talk with them, asking them questions that you are generally interested about. Some might ignore you, but those who agrees with you can be extremely beneficial. They also said that networking is extremely important, because you be opened to positions before it is told to the public or sometimes even before it's opened. The guy's brother also said that education is very important because it is what makes you go forward in life instead of staying in the same place forever. This panel was so interesting, it's just so nice to listen to people talking about their experiences. And I thank them for the what they have taught me.

      After the panel and lunch, we began to create these cute little Halloween mask for children who might not be able to buy their costumes. By the end of the day, I made around two owl masks. It was so an amazing day. I learned so much and had so much fun.

10/29/2016

      This is the second and last day of this Service Work Boot Camp. I really enjoy being there, everyone is so nice, and I felt quiet comfortable speaking there. There were not much plan for this day, we simply got all the supplies such as tooth brush, tooth paste, soap, and a hand written note to lighten their harsh lives, and assembled them into blessing bags so we can donate them to a certain charity that will give them to those who are homeless. We spent most of the time decorating the notes, because we wanted it to be pretty and really help make their day. We also spent time, communicate with students from all over NYC, most are in the top high schools, and it's really fun to talk to them. After we complete this Capstone Project that we planned. Kate, Marshal, and Ashley, the instructors of this Boot Camp taught us how to create our volunteer resumes and buzz works people look for while looking at your resume. Overall, I had a great time working with each other and completing this Capstone project.

Lab 6: Rollover

      In this lab, we have to create three types of rollover images: Javascript rollover, HTML rollover, and a rollover created with an Adobe software. This lab needs a separate JavaScript, HTML, and CSS document. All files need complete documentation comments. The HTML should not contain any JavaScript or Style, and the CSS should work properly and enhance the look of the site. The JavaScript shouldn't have any errors. Placing the mouse cursor over a JavaScript image should display the image in full size on top of the table.

      I created Adobe software rollover with Flash CS6 at first because I used it last year and I'm familiar and comfortable using it. It is also the one that takes the least amount of time for me to create. But a problem was going on to the server that I am uploading to so I had to use Thimber to display my lab. But Thimber has a limit for the size of the files that is uploaded to it, and since I create this rollover with Flash, it's swf file that is quit large, so I recreated it in PhotoShop CS6. Then I create the HTML version with the code:

<img src="image1"
         onmouseover="this.src='image2';"

         onmouseout="this.src='image1';"/>,

so when the image would change when you hover over it. Last, to do the JavaScript version of the rollover, I simply copied the code from the teacher without totally understanding the code. I know it's not good, but I'm very busy lately...

https://thimbleprojects.org/jh19tommy2/134557/

Lab 5: Rock, Paper, Scissor, and Computer Game

      In this lab, we have to create a game similar to the rock, paper, and scissor game kids play. And this game has to be within the webpage. We have to first complete the tutorial of building this "Rock, Paper, Scissors' game from CodeAcademy. CodeAcademy is a really helpful website that can teach you many types of computer languages. It taught me how to create this game with JavaScript from scratch. After we finish the tutorial and got the code, we need to modify the game to prove that we understand how to actually use the code. And we do that by creating a new chose for the user.

      After I completed the tutorial in CodeAcademy, I imported the codes into Dreamweaver CS6. I created another choice for the user called "computer". So instead of rock, paper, and scissor, it's rock, paper, scissor, and computer. I know, it's silly, but that was all I can think of... The computer can beat paper and scissors, and is beaten by rocks because of common sense... But I had a issue making the function to load after the page loads, then I realized I needed a function over everything and call that function with a onclick on a button. This not only lets the user decide when to start the game after the page load, they can also click the button to replay the game.

Lab 4: Sample Lab

      In this lab, we have to answer 22 questions in a worksheet with the class and demonstrate it in our website. It is a practice of all different types of JavaScript including JavaScript basics,  JavaScript I/O, event and handling,  and regular expressions that we did together as a class. After we completed these 22 questions, we used Dreamweaver CS6 to demonstrate what we learned from the practice we did together.


      To create a demonstration of this practice work sheet, I first created a table with a border with the color of my theme. Then I created 3 divisions, one for the question number, one for the question, and one for the answer. And if that answer can be demonstrated, I would also include a button at the answer box that if the user clicks on it, it will demonstrate the use of the code that the question is asking for.

Lab 3: JavaScript Dispply Possibilities

      This is one of the complex laboratories that we have to create. In this lab, we have to show all the different display possibilities with JavaScript in the browser. This includes using alert() or window.alert() that pops up a window of notification on the browser, an HTML output using document.write() that can write in the HTML side, write into a HTML element using innerHTML, and last, use console.log() to log information into the console of the browser. We also need a different type of pop up that asks that user ok or cancel, a prompt that lets the user input into the browser. And demonstrate that we know how to use variables.

     So first I use alert() to greet the user, said I wanted to introduced myself, and told the user of a number I created using variables and JavaScript algorithms. Then I would use document.write() to write down the introduction about myself on the webpage. Then I have a few buttons below that to showcase the other code required in this lab. The first buttons ask the user whether he/she want to provide their name, then there will be another button that prompts the user to enter their name. After the user answered their name, there will be a greeting to the user and ask the user to see more by clicking another button, but there aren't actually any more to it, it's just to show the different type of possibilities.

Switch and Loops

     In JavaScript, there are if/else statements and there are switch statements. Switch statements are similar to if/else statements. Both execute actions in which when another event or condition occur to cue it to execute. But unlike if/else statements, switch statements have a default value in which codes executes when nothing happens. Then they have case values that can be as much as you want, which are executed when a case is true. The syntax of a switch statement is:

switch(expression) {
    case n:
        code block        break;
    case n:
        code block        break;
    default:
        default code block
}.

This switch statement is evaluated once. The values of the expressions are compared with the values of each case then the case with the block of code that matches the values executes. Within the end of each case, there will be a "break" keyword to break out of the switch block so it would stop looking at more cases. Then there will be a case all the way on the bottom of all cases with a "default" keyword that will be executed when no cases match. Sometimes, the cases can have the same code block, and the default case does not always have to be at the bottom.

Exercise 1:



in this exercise, it is missing a case for "Apple", so I added a case for it and added the text: " An apple a day keeps you healthy!"

Exercise 2:



in this exercise, it is missing a default case that executes when a unknown fruit is typed into text box, so I added the default case with the text "I have never heard of the fruit".

Exercise 3:



in this exercise, there are syntax errors in the switch statement. It is missing the ":" after the cases and the "break" at the end of each case. After I added the missing parts, it works.

Exercise 4:



In this exercise, I am requested to add 3 cases and a default case shown in the image above.


      Loops are for running the same codes over and over again with different values each time. There are different Kinds of Loops that JavaScript supports. There are for, for/in, while, and do/while loops. for loops through a block of code a number of times. for/in loops through the properties of an object. while loops through a block of code while a specified condition is true. do/while also loops through a block of code while a specified condition is true. The for loop is the most common and have a syntax of:

for (statement 1; statement 2; statement 3) {
    code block to be executed
}

where statement 1 is executed before the code block began, it is to initialize the variable used in the loop, but it doesn't have to be, it's optional, and it can be more than one values. Statement 2 defines the condition for running the loop, it is also optional, and the loop will run until this statement returns false. And Statement 3 is executed each time after the loop has been executed, it is most of the time increasing the value of the initial value, but it is also optional and it can be adding or subtracting to do any math basically.


Exercise 1:


Here, I replaced the values in statement 1 and 3 to make it execute number from 0 to 10.

Exericise 2:



Here, I change the value of statement 1 from 0 to 5.

Excercie 3:



Here, I changed the value of statement 1 into 5 from 0, then change statement 2 from i < 10 to i <= 50, and statement 3 from i++ to i = i + 5.

Exercise 4:


Here, I changed statement 1 from i=0 to i=10, statement 2 from i < 10 to i> 0, and statement 3 from i++ to i--.

Excercise 5:



Here, I added all the statements shown above.

Exercise 6:



Here, I have to create the whole loop from scratch with the instruction give as shown in the image above. 

Lab 2: Pop Up Windows

      In this second lab of the year, we have to write about 3 paragraphs of our smart goals for this school year and make it pop up when you click on its button. These pop ups are also known as an alert boxes within buttons. And last, include a nice picture of ourselves on the webpage. We have to create buttons that includes JavaScript functions that are exceptionally well organized and very easy to follow.

      To create this lab, we have to create 3 buttons and to make it look better than the default look, I added a class called "button" with CSS into it, made it larger and match the theme color of my webpage. Then create 3 function for each of the buttons. The function will be call goal1(), goal2(), and goal3(). And within each of the three functions, there will be an alert written in the form:

   function goal ()
   {
  alert ('content of the goal');

   }

And within the buttons, I have add the function to the onclick code, so when you click on the button, the alert will pop up to the window. It'll look something like this:

<button type="button" class="button" onclick="goal ()"> Goal </button>

And last I added an image of myself, I really like my design of the circular images from last year so I made a class for the image. I cut in into a square first, then I gave it a class of CSS that changed its border radius so it is a circle.

JavaScript Conditions: If/else Statement

      Conditional Statements are used to perform different actions for different decisions and situations. In JavaScript we use "if" to specify a block of code to be executed, if a specified condition or statement is true. "else" will be used  to specify a block of code to be executed, if the same condition from the "if" statement is false. "else if" will be used to specify a new condition to test, if the first condition is false and the condition of this statement is true, this statement will be executed before the "else" statement.

example:

if(expression){

code will execute if expression is true

}

else if (expression2){

code will execute expression is false and expression2 is true

}

else{

code executed when both expressions are false

}

      "switch" is similar to "if"/"else" statements. They have a default value in which codes executes when nothing happens. Then they have case values that can be as much as you want, which are executed if a case is true. 

example:

switch(expr){

case value1:

execute if expr==value1

break;

case value2:

execute if expr==value2

break;

default:

executed if no case values match the expression

}