Junior Field Trip - Google

On November 2nd,2016 we had the chance to visit  google's office in the city. It was a great a experience for us to go and see how it is to work at Google and we were able to meet people who are  software engineers or designers at the company. They put us in groups of 4-6 people and every group had someone from google to show us around the place. During the tour we were able to see how employees spend there time such as how they have a play lounge where they can play games with fellow peers. The benefits of working at google is that They offer free gourmet chef cooked food from cafeterias that are between every two floors, 2 game rooms in the office where anyone can just take a break and play, scooters to get between offices. After the tour around google we went to a conference room, where we had the chance to discuss and ask questions to people who work at google. The people at Google made it clear that working at Google wants only about having a boss to push you to do work, it was more like they had the chance to make their own work decisions. They know when its time to relax and have fun and when to work. An employee stated that sometimes they leave early and just decide to finish any unfinished work at home. At the end of the day we had a better knowledge about how would it be to working in a place like google and how hard we should be working now so in the future we could come to that point. Overall, it was great seeing how work can be viewed more than just a place where we stress but a place where we can interact with others.

Final Portfolio

             Its finally the time of the year when we must create a portfolio consisting of all the work done this school year. Last year I did the visual design portfolio but this year we must create a website that shows all the work I did during my Digital Design year. When creating our portfolio we must include our blog link, our teachers blog link, our link to our lab index page, our link to our projects lab index page and a link to our biography page. For this portfolio I decided to add a theme of a starry night since I have always loved looking at stars as a little girl. For my index page I wanted to do something different. Thus, I made a sky scenery with stars and within the stars I decided to add rotating stars and add links to them to send people to my blog, teachers blog and my biography. At the bottom of my webpage I wanted to add two buttons, one to direct people to my labs and another to direct them to my project. I left some space in between because I wanted to add something later on. I then worked on my labs and projects index page. I wanted to show a small description of what each lab or project I made was about. Thus, I decided to make a page transition up the page when hovered on. Therefore, revealing the description I made for each lab or project. I also decided to add my recent lab and project o the top of the page. Since we needed to add javascript I decided to make a navigation bar that opens from the right. Since we must keep a constant design throughout our website, I used the same starry background and the same blue and lavender colors and indie flower font I used in my homepage index. I tried to put much thought and make my portfolio simple to follow so the user does not get lost.
            I would say my favorite part of making my portfolio was the javascript I added in the beginning which made a box appear asking the individual to type their name and then to type any color they wanted. I decided to ask the user to input any desired color they want because when typing the color they want, when entering my website at the bottom middle of the page, the users name will appear in the color they desired to choose. This was my favorite part of the website as it make the user feel more welcomed in my perspective. I also found making the descriptions for my labs and projects hard because since the decoration is hidden until the lab or project image is hovered on, it would bot work at first. Although, its a lot of work I really enjoyed doing this because I was able to reflect on the work I have done and i was able to see how much I progressed.

Upon entering website

Homepage

index Homepage

Project Homepage

Lab 17

         This lab consisted of using learning how to display a confirm box when an individual clicks on a button. When creating a confirm box we also had to understand and learn about if and else statements. An if statement will allow a specific block of code to be executed if the indicated condition is true. An else statement will allow a specific bock of code to be executed if the indicated condition is false. A condition is an expression that evaluates to be true or false. In this lab since a confirm box displays a dial box with a specified message along with an OK and a Cancel, we will use the if and else statements so when a person clicks ok something will happen and if a person clicks cancel another thing will occur. Since I used the confirm () method, when an individual clicks ok, it returns true (if statement)  and in any case when an individual clicks cancel, it returns false. However, before creating the confirm box, I had to create a form asking the user to inout two values. which is something I learned back in lab 12. Then I created the confirm box which asked the individual "Do you want to add these two values?" When clicked ok, then it will add the two values, if clicked cancel then it will not.
         This lab was sort of difficult for me since we had to use if and else statements. I had to read articles to learn about if and else statements. I was scared of this lab because during our APCSP create task I had a hard time doing if and else statements. However, after this lab I was able to understand the process of an if and else statements. Most of the components such as creating a form was a skill learned in previous labs. Therefore, it was already easy creating a form. I was really excited to do this lab because before joining the web design academy I would see these confirm boxes in websites but I would not know who people were bale to make them. However, after this lab I realized it isn't so hard to create a confirm box as I thought. I hope in future labs I will see components I see in other websites online.  I know this lab will help me in the future because I can use confirm boxes in my portfolio or in any other project.

Layout of Lab 17

When Confirm Box Appears

     

Result After Clicking "OK" in Confirm Box

 

WBL Reflection Journal

          In the WBL workshop made by Mr. Franck, we learned about the importance of learning how to create good habits as it will help us save money rather than waste it ineffectively. We learned and were given tips from Mr.Franck to understood how we should set our priorities straight. A great way to start the presentation was by mentioning a term I never heard of before, Financial literacy. Financial literacy is the ability to understand how money works, how to manage it, how to earn it, and how to invest it. As a teenager all one can think of is making money. However, we get so excited by the idea of earning money that once we have it we tend to waste it all in less than a week. We go overboard buying unnecessary things and then a split second we have no money on us. Therefore, Mr.Franck. told us to create good habits. Some good habits are
 * Don't waste your money buying unnecessary things or too expensive things
 *Do not waste time on social media. Do something productive.
 *Surround yourself with people who have the same goals as you.
 *Create goals maybe not long term goals but small term goals are a great way to start
You won't see results really soon but sticking to these habits are a great way to start saving and spend less wasting. As a teenager these may seem like a waste of time but this will just help us not only save money but create good habits for the future. As Franck, said "Time is Money". We cannot waste our time taking selfies and posting them in social media, we should find what our interests are and try to explore them.

         One of my favorite parts of the workshop was when Mr.Franck told us that we should become a learner instead of one who looks to be entertained. He told us that risk comes from not knowing. Thus, we should become readers, talk to ourselves, keep a journal, find what our interests and goals are, and explore them. Many say we never have time to do such things but thats when we should keep in mind the importance of time. In web design our teacher is always telling us how we met use our time wisely. This saying should not only be applied to one class but to everything we do because if we don't then we can never do what we want to do like hobbies we like. When thinking of managing time we should think about Asset vs Liability. Assets are your mind, reputation, physical and mental skills and our ability to adapt to changes while liability is when you lack of time management, your obsession of making friends. In addition to learning how to learn to save money we also learned the importance of knowing ourselves and creating good habits. This is what I liked about this workshop as it linked to create important components into one.

Lab 14- JavaScript Math Operations

       In lab 14, we had to learn the JavaScript arithmetic operators. For instance, + stands for addition, - stands for subtraction, * stands for multiplication and / stands for division. Using the skills we used previously of creating forms, we had to create two forms and add addition, subtraction, multiplication and division buttons. First, I started with a form and typed in two inputs. One input was for the first number with the id first and then the second input was for the second number with the id second. Next, it was time to create the addition,subtraction,multiplication and division buttons. I started off by creating the addition button. Creating the addition button required me to use the input tag and within the input tag I put the type and onClick. For the onClick I made sure I put AdditionBy and I gave it a value which will be used to call the button on the website. I did this for the other three buttons but all I changed was the onClick name into SubtractionBy,MultiplicationBy, and DivisionBy.  Putting the name next to the onClick will help later on wit the javascript because it will represented as the function in javascript. I also changed the value of each button into the indicated operation they will perform. Once I finished this, I  used the paragraph tag to type "The final Result is" because once the user fills in two numbers in the form and clicks on any operation button, the answer will be displayed next to the words in the paragraph tag. Now it was time to add Javascript. I decided to begin with addition. I started off by typing in script and from there I typed the function AdditionBy(). I then typed num 1 as my variable and put document.getElementById. The id we gave the input in the forms, now comes in handy because we will make the document get the element by the id first. I did this again for my second variable. Finally, I put document.getElementId ("result").innerHTML= Number (num1) + Number (num2). I put the plus sign in between the word num 1 and num 2 because the operation that is going to be done once a person clicks the button is addition. I did this for the following three operations (subtraction,multiplication and division). Except for the other unions I champed the arithmetic operator into its corresponding operation. Like subtraction is -, multiplication is * and division is /.
     Once I did all this process, if someone is to fill into two numbers in the form and click a certain operation button, it will work. At first I did not know how to write the code. When first writing the code I used s1 and s2 but it would not work because in my code I specified that s1=150 and s2=20. Thus, when I entered any other numbers other than 150 and 20, the calculations will not work. Therefore, I went to w3schools and tried learning more about the arithmetic operators. It may have been difficult making this lab but it was actually fun and exciting to se the final result. I know when I finished completing the lab I got so excited seeing how I would fill in two numbers in the form and then when I clicked any operation button it will work. I realized that the skills I learned in the previous lab was useful because in this lab we were required to create a form. I think this lab will allow us to understand how to create a calculator in the future.

Lab 13- JavaScript Forms and Alert Boxes

     After creating our first ever javascript, we had to further improve that lab. In lab 13, we had to make sure our form functions well. The form we created in the past lab was still used in this lab except we changed the forms name to alert form. In order to make the function work we had to use the input tag and within the input tag we had to add the type and value. This input tag allowed the user to create a button that says go to work when it gets clicked on. However, we are not done yet. Afterwards we must add an onclick which met equal="window.alert(_____);"> Inside of the parenthesis the user is allowed to add words that will be shown in a window when a person clicks on the go button you created earlier with the tag input. The user must keep in mind that when you write inside the parenthesis, the words you want to appear in the window should be surrounded with single quotation marks and must be followed by a plus sign and the phrase "document.alertform.yourname.value". You must add this into the parenthesis because it will allow the document to understand that when the user types in a value in the form the will be able to get a response from the computer due to the arms input name. If done correctly, in the website if a person fills in the form and press the button go, they will be able to see a window pop up with the information they gave.
   This lab was difficult compared to the previous lab because unlike the previous lab, in this lab we had to make sure the form works when someone fills in their information. At first I found it very difficult to make the words pop up in the window. However, I realized that I did not out single quotation marks around the words I wanted to appear on behalf of the window. However, just as the previous lab, my favorite part of this lab was being able to style the website using css. After finishing this lab I was excited because I was able to make a form work and that was something i never expected to do, so it felt like a great accomplishment.

Lab 12- My First JavaScript

      This lab was the first time I ever used Javascript. In order to complete this lab we were introduced to a knew topic which was forms and adding a function to a button. The purpose of this lab was able to create a form and create a button that will function using javascript. To start off we first used the form tag and before closing the form tag we had to give it a name. Then within the form tag we put the name, phone and email and next to each of them we put the input tag. However, when adding the input tag we must also add a name. The name well help us later on with javascript. After creating the form we had to create a button. Inside the button tag we must add the type, class and we definitely must add the onClick. In between the beginning and end of the tag, users are able to add a few words that will be seen on the front of the button. After creating the button, we wrote "Ready for the hidden part" within the h3 tag and we gave this tag an id named demo. Once creating the button it was time to add javascript to it. When using javascript we used internal javascript in which we started off by typing the element script. Next to the tag script we type function button() and then we add document.getElementById 9"demo').innerHTML="Hello". When typing this inside the script tag it tells the document to make the text Hello appear when you click the button you created earlier.
      This lab was not as difficult as I expected it to be. The steps were easy to follow. The best part of this lab was using css to style the features such as the button in the html code. I used this opportunity to try and experiment with different types of fonts by going to google fonts. I was also able to experiment with decorating the buttons such as adding a border, shadow, coloring the words,etc. I believe this lab was a good lab to start with because it gave us an introduction the to main features that we may use in our websites. This lab allowed me to learn how to link a javascript file to a html file externally. Overall, I know this is just the beginning and that javascript will get harder but I am ready to learn more in order to improve my labs and projects.