WCP Jason Batista

 During lab 25 we had to write an sentence to interact with the viewers.  The point of lab 25 was to make the viewer type out a secret code that will in return give them a reward. In order to do this lab I created an h1 tag that had id of display and in this display allowed the user to type in it. Doing so took the use of javascript which used an evenListener to see once the correct code was typed in. This is very useful as a web designer because it allows for you to create easter eggs on your website if you want and create a better user interaction with the site.

During lab 24 we were given the code and to create a custom video controls.  This lab was very easy to do because we just had to insert a video with a custom mixer controls. In order to do this i created a video tag and inserted my link of the video into. To change the controls of the video I used javascript to code different mixing controls and that effected the video as well. This is very useful to a web designer because it allows for videos on your site to be unique and have there own specific mixing controls and cool effects towards the video.

During Lab 23 we had to create a list that also incorporated a check box. The check box had to also work with the shift key if you wanted to check all the boxes at once. In order to create the list I added a div and an input tag under it with a p tag. This using css to make it look nice created the list that is above. The input was for the check box in each list. Then after this in order to make the list work with the shift key I had to insert javascript code. This code was a function using an if statement to see if the shift was being held while clicking the check boxes. This is very important and useful to a web designer because if you want a survey or the using to check multiple boxes at once using this code would help create a more efficient way for the user to check all of them. When creating list I would use this code because it makes the site more user friendly and faster to go through the list.

 During lab22 we had to write a simple text on the screen that would be clickable but change into a different text. This lab was fairly easy because all i had to do was edit the javascript code into changing the innerHtml to a different sentence. The point of the lab was also to check the console log and see different tabs that you can open and see age, dog age and name. Doing this by calling the console log in javascript so when it opens up on the site you can view it using developer tools. This lab is useful to a web designer because practicing how to use the console log allows them to see if there is a problem they can fix or allow people debug their code. I will try to use console log on my sites to help create a more efficient website and see if there are any issues with it.

During lab 21 we had to create a canvas for the viewer to draw on. Lab 21 was possibly the funnest lab because you got to draw after you were done knowing you used code to create this. First I added the canvas tag that created the white blank space to draw on. Next after this of course we had to add javascript in order to allow the viewer to draw. Had to code in functions and variables and eventListeners to make sure when the mouse was clicked it would begin drawing. This was a very interesting lab and as a web designer it can be useful in a site. It can be useful because it gives the viewer of the site interaction and can be used various ways not just a big canvas page.

During lab 9 it consisted of another downloaded file we had to retrieve off of Jupiter Ed. The point of the lab was to take the images at the bottom of the page and code them into a carousel that sorts through the pictures by itself or using the next and back buttons.  In order to do this the carousel used javascript to cycle through the images. As a web designer this is very important to know because instead of have the complete images throughout the page taking up space, each can be cycled through as a carousel and linked to the article making the page cleaner looking and easier for the readers to go through.

During lab 20 we had to create a flex panel gallery. The point of this lab was to create 5 different panels with text but when clicked it would enlarge and show the rest of the text hidden. I used 5 pictures that I had to insert. The flex gallery used javascript in order to create the opening and closing of all the flex panels using evenListeners and functions.  As a web designer this can be very useful to create unique and creative ways of portraying an heading image that is in the home page of the site and making it clickable allows for more user interactivity with the site.

Lab 17 was about taking css vairables and updating on the site using a simple scroll bar to change the blur of the image or the spacing of the image and base color. First to do this t here was javascript included so that there was an event listener for scrolling the bar and as you scroll the properties are changed. This lab came with a template for java30 which really helped with the javascript and i learned in this lab to change a css variables using code. As a web desinger this can be useful if you're  making a site that lets people change how something looks to accommodate  their taste and how they want it. A store or something online can use this to help change css variables so the customer can view different options themselves

In lab 17 we had to create a very famous game that settles everything, its rock, paper and scissors. In order to first start the lab i created 3 buttons on top for each representing entity in the game, the rock, the paper and the scissors. After this I used to css to make them look nice and pretty by giving them background images and text on top to know which is which. After this i added 3 lines of text. One that says "your throw", another that says "cpu throw" and finally the "winner". These 3 lines of code is what will change every time you throw a rock, paper or scissors. Each line will change corresponding to who wins and what beats what. The code for this used javascript to create the game.  Entirely it was a function with a bunch of if codes and  document . getElementById because it was a repeated set of commands to see if your throw would win or not. As a web designer i wouldnt use this in a site unless you want to make a quick game but it is...

During lab 15 we had to create a clock that worked and include a set of keys that would play a specific sound each time clicked.   The  drum set that plays a sound every time a key was pressed, as well as how to code a clock that displayed the real time. For the drum part I used key mapping in my tags so that every time that key was pressed the command would run to play audio. This used some javascript/jquery so that there was event listener to listen for the keys pressed and when that key is pressed the sound would play. This lab isn't  very useful to us web designers unless on your site you want to have a key that makes a specific sounds, but it does make it fun and can be used very well in game design

 In the lab 11 we had to reveal a message using jQuery and Ajax.  In order to start the lab we had to create a simple webpage having a div holding the first message "Let jQuery Ajax Change This Text" and creating a button using the <button> tag. The <script> code used to make this happen is:  $ ( document ). ready ( function (){           $("button").click(function(){                 $("#div1").load("Text.txt");             });         }); This code allows to change the text once the button is clicked and locate the url "Text.txt" in the folder and reveal the message stored in the file. This is very useful to a web designer because it allows for you to swap out text using jquery in a simple click

During lab 10 we were given the files for this current site. The point of lab 10 was to use javascript to cycle through multiple images using different effects. The first cycle of this was to scroll the images up to down in order to change it. The next one was to slide it from left to right so it also changed. Finally the last effect was the fade in and out to change images and give life to the website. These skills are very important to a web designer because having these effects on your website gives it life and is more user friendly. Now with these changes the content automatically switches without having the user to keep clicking it over and over just to change it. As a web designer this shows creativity and can be used for more than this and give other things effects so that your website is more captivating and interesting to be on.

During lab 8 we were given the task of troubleshooting the given website to figure the problem with the code in order to create the changing heading each time the site was refreshed . We had to download the files off of Jupiter Ed and open it ourselves. We were given the list of quotes wanted to be used part of the changing heading but in order for this to work we would have to add javascript code to it. Then in order to actually getting the lab to work you would have to store these into a variable and create a function that would call a different variable in the array holding the quotes every time the site was refreshed and call on it.  As a web designer this is very useful because it helps the website be less static and more pleasing having a changing quote every time its refreshed.

During lab 7 we had to choose a subject in school and create questions and answers for it to help us study. The point of the lab was to create a web page in where once the question is hovered the answer would appear like an accordion. First in order to begin this lab we had to create a description list using the <dl> tag as the beginning. After this followed the <dt> tag that helps   defines a term in a description list. Finally after followed the <dd> tag that is the description of the term. Once this list was created you would add css to it to add the visually appealing details. Then finally in order to get the hover over each item in the list you would add the javascript. Every <dd> tag contained a class of "answer" so that way when you add the javascript code it affects all. The code used was:                   $(document).ready(function() {  $('dd').hide();  $('.answer').hide();  $...