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.

Lab 11- Final WireFrame

     After creating the first three drafts for the wireframes, it was time to create the final draft for our websites homepage. When creating this website I decided to use dark warm colors. I decided to use the little figures and place them to the side of the website in order to give the website a little touch.  When creating this wireframe I realized I was not as enthusiastic about the topic as I thought I was. I felt my lack of enthusiasm for this respect for all topic was the reason as to why I was unable to come up with ideas. When creating the wireframe for the homepage I was thinking of adding texture but I found it a bit difficult trying to find a gesture that will match with the colors and that will not distract the audience from the rest of the information. Just as I expected when sharing and giving each other feedback in class, I use too much texture. Too much texture does not create a balance. Thus, I had to keep in mind that I must choose between having a gradient or a hard type of texture.  This final wireframe allowed me to see whether or not I added to little or too much features in the homepage.

Final WireFrame

Lab 10 - WireFrames

     Before beginning Project 3 we were required to create a set of wireframes that illustrate the information that will be shown in the final website of project 3. The wireframes were created using adobe photoshop cs6. We were required to choose a respect for all pic and I decided to use race because it is something that is very problematic not only present day but in the past as well. I know for sure I wanted to include a slideshow in my homepage Thus, when creating the first three drafts of my homepage wireframe, I included a space in which I will add a slideshow. The adding color to my wireframe I was not thinking of the moment of which colors best contrast each other. After seeing the colors I have chosen I knew I had to change the colors as soon as possible because the colors were not appealing to the eye nor did it grab attention. I kept in mind that I wanted to use a font that is bold. After designing the wireframe of the main homepage I started designing the pages for the other pages. I created a different design for each page but due to my wireframe I realized that I must keep a constant design throughout my webpage or else it can make the website confusing and unattractive. What is important to keep I'm mind is keeping a constant design throughout the entire website. 

     I am glad we used photoshop because when designing the wireframes, I used the grid element in order to help me design the wireframe. Using the grid allowed not only me but others to align text and boxes in a proportional way. In this lab, the most difficulty part was coming up with a design for the homepage. Since the homepage is the first part of a website that the audience views. I felt that I was overthinking too much that I was unable to come up with a design. I wanted to make a design that is not to exaggerated nor to simple. In order to improve I knew I had to use different colors for my website because the colors I picked were not the best for this website.

First Draft for WireFrame

Second Draft for WireFrame

Third Draft for WireFrame

Why Respect WireFrame

Facts Wireframe

Promote WireFrame

Project 3- Respect for All HTML/CSS Site

       Project 3 required us to use our HTML and CSS skills by using Dreamweaver. As a part of this project, we had to create a project that shows respect for all. I decided to make  website regarding how individuals must keep their environment clean. I created 5 separate sections that includes the websites homepage, a page stating why people must respect the environment, facts, and ways to promote cleanness. I decided to use different types of green shades because I felt that its the color that represents the environment. I even added a slideshow. However, what I felt distinguished my website the most was the page transitions. I wanted to add a different effect to my website this time. I tried to increase my css skills and tried adding as much css as I can to make the website appealing to the eye. Thus, I decided to go online to learn a new skill in which the webpages in my website will have smooth page transitions when the user clicks on the buttons in the navigation bar. The main key that allowed me make a smooth transition was by adding the element transition:all 0.6s ease in out. I used this transition to apply it to every button on the navigation bar so when the user clicks on a certain button the page with transition in the matter of six seconds to the page there heart desires. I decided to use 6 seconds because when making a transition of 1 second, the transition is too fast. Thus, the user is unable to see how the transition adds a nice effect to the website.
      Creating this project required much work and patience. At first I was having difficulty finding out how to create a transition in the pages. But I believe what was most difficult about this project was finding the information necessary to complete the webpage. I had difficulty finding sources such as facts and information. I first started off by wanting to create a webpage showing respect for race. However, I had difficulty finding information about it and I was not as enthusiastic about the topic. It may have been difficult making a transition in the pages but I would say learning how to make transitions in pages was my favorite part of the website. It may have taken me a while to create this website but i am very satisfied with the results. If I were to add another feature I will try to add some javascript into the website to make things more appealing. Overall, this project allowed me to realize who much we can do with css and what Ia m capable of doing as long I am eager to learn new things step by step.

Main Homepage

Why Respect Page

Fun Facts Page

How to Promote Page

CTE EXPO Reflection Journal

      The CTE Expo is a very important event in which we web design students must present the best of our work to future web design candidates. It is a very important event because not only are we trying to get people interested to join the academy but we web design students are able to show case our web design skills through our best pieces of work to not only students but teachers. During class we learn and develop many skills that allow us to create websites that can be appealing to the eye. All the work and effort we put into our labs and projects are able to be shown and complemented by others such as students and teachers. During the CTE Expo 2017, both video and web design students had to put their communication skills in order to not only show but explain the work they have done. When showing other people our work, we had to explain how we did it and give them a brief description of what people in the web design academy do. However, when trying to explain others our work it was difficult because some people were not interested and others were rude. When people acted rude it sort of made me give up talking to some people but in order to try to get people interested I went with the students who actually seemed to look at projects in detail. In next years CTE Expo I plan to ask people their interests and try to connect their interests to web design, maybe this way will allow people to feel more encouraged and motivated about joining web design.
    Although, their were some rude students it was fun showing the work to teachers I have had in the past. I would show my teachers my work and show them how much I have learned in this class. I hope my past teachers will keep being proud of me and the work I have accomplished because they were the ones who wrote a reccomendation that allowed me to join web design. I know I will try to expand my knowledge on coding to make my websites look more nice in appearance. I will try my best to learn javascript as it will give me more opportunities to make my webpages more interesting. The CTE Expo helps me develop my communication skills and help promote the web design academy.