WCP 2017 by: Lesli Cuamani

Lab 43 was the 30th video to the whole Javascript30 series and what I have to do for this one was to create a website that would serve the purpose of playing a game. Basically, what I had to do was to use files given from javascript30 such as the dirt and mole image to make a "whack-a-mole" virtual game. I changed the background to some sort of green grassy area like the ones in Mario games. I felt like it combined well. I used javascript to have the moles pop up and down from random dirt areas which are actually divs. I created a span class in order to show how many moles the user clicks on to show the result. This lab was pretty cool to end the series with.    Overall, this lab was actually interesting as I had never done something like this before. It was pretty cool learning about this funky virtual game as I can have my family, friends, and other users enjoy this little game. This has actually motivated me even more to pursue a career in Web Design; to create websites a...

Lab 42 was the 29th video to the whole Javascript30 series and what I have to do for this one was to create a website that would contain a timer which would be set off with different buttons. Each button would set off the timer at different intervals. For example, at like either 10 seconds, 20 seconds, 25 seconds, etc. Once the seconds finish, an alarm or a loud ring would be executed. You also have the option to write in how many seconds you want in the input box on the top right. Using the video of javascript30, I was able to make the timer work properly with jquery and javascript. I thought it would be harder than expected and I customized it by adding a film like background to make it look like the website has a theme.    Overall, this lab was actually interesting as I had never done something like this before. It was pretty cool learning about this timer since I haven't necessarily done this before. I see myself using this website for my own personal purposes when my sis...

Lab 41 was the 28th video to the whole Javascript30 series and what I have to do for this one was to create a website that would include of a bunny video. This bunny video wouldn't be like any other tough. I had to create some sort of slide for the video specifically so the video can either speed up, slow down, or play with the length of the video with it. It was pretty complicated as I wasn't able to get the video at first and I had to consecutively move things around on my page since I didn't like the format. Withe the help of the video on javascript30, I was able to have the slider work accordingly in pace with the video and things worked out fine. All I changed was the background which are falling leaves and put in my header like always.    Overall, this lab was actually interesting as I had never done something like this before. It was pretty cool learning about this slider since I was able to play around with it by the end. The Bunny video itself was pretty funny sin...

Lab 40 was the 27th video to the whole Javascript30 series and what I have to do for this one was to create a website that would include of a transparent box and inside the box, you have some of paper-accordion. Basically, inside the box, it is responsive so you would have to grab on the first fold with your mouse and drag it to the next. You can keep dragging until it comes to an end. Originally, there were numbers on the front of these folds but I wanted to be different and change it into animals. I went alphabetical order so from A to Z, I used different animal names and species. I guess I changed the background to a blue snowing gif, customized the folds, and kept it pretty simple.    Overall, this lab was actually pretty weird and funny. At first, I had no clue what I had to do because the website itself was sort of set up in a funky way. I didn't know where to click or move or do whatever to. But with the help of the video on javascript30, I realized that the folds had ...

Lab 39 was the 26th video to the whole Javascript30 series and what I have to do for this one was to create a website that would have three different words highlighted. When your mouse hovers over the words, a tab of information or a table would pop up at the same time. The way this information immediately pops up is due to the following of the mouse which executes the action. I used a nice wavey blue gif to bring some sort of soothing feeling onto my site. No lie, I was feeling pretty relieved making this website knowing I only had 4 more sites to go. I used very basic and typical font colors. For the words that were highlighted, I used a yellow color because I felt it would stand out in the blue background. I wrote things that I favored to just give it a more personal touch.    Overall, this lab was actually useful and cool. I am hoping to integrate this sort of theme or skills to plenty of my future works as it is a very nice way of having the website be responsive. I have...

 Lab 38 was the 25th video to the whole Javascript30 series and what I have to do for this one was to create a website that would have three different divs on top of each other, and when clicked upon separately, it would change things in the console. So this lab itself has something to do with the console, which many find useless. Basically, originally what I had to solve in this lab was how to make sure that every time a div is pressed upon on, whichever div it may be, will pop up as the number of the specific div in the console. I also had to make sure that no matter how many times a specific div is pressed upon, it will only show as once in the console. After the divs, I also worked on a button that would function about the same; regardless of the amount of times the user can click on the button, it will only show up as once in the console.    Overall, this lab was very boring. I didn't like it because I was expecting more from just clicking these random boxes and the...

Lab 37 was the 24th video to the whole Javascript30 series and what I have to do for this one was to create a website that would be responsive as to when you start to scroll down, the navigation bar would follow at the same time. That is why I guess they called this lab "Sticky Navigation". So using the video, I personalized my heading and added somewhat of random information into the middle section of the website in order to have something to read to while scrolling to see what the navigation bar does. This trait can become useful as to when you keep scrolling and if the text were to be very long, then, you can click on either of the links (buttons) or the button that brings you to the top of the page again. It saves the user time from scrolling all the way up again, which becomes annoying. Using this would save time and help the user.    Overall, this lab was very impressive to work with. Following along the video for this lab did take time since I would get lost here and ...

  Lab 36 was the 23rd video to the whole Javascript30 series and what I have to do for this one was create some sort of wicked "Voiceinator" which is like an online machine that talks. So, I had to make an option box in which would contain multiple people with different voices. This was provided by the video of the javascript30. After that option, I would also have to add two distinct inputs for Rate and Pitch, which would affect the way you hear the voice being spoken. The voice speaks whatever the user writes in the text area. You can control when it starts and stops to speak. It's overall intention is to show how I can use javascript in order to make website a bit more interactive and interesting or funny for myself or a user to use.    Overall, this lab was somewhat difficult. Even when paying attention to the video and trying to do the lab at the same time, I would get confused as to what does what. I actually try to understand what is going on most of the time so t...

   Lab 35 was the 22nd video to the whole Javascript30 series and what I have to do for this one was to do a follow along navigation where I have certain highlighted words that will glow when hovered on and it will take you to a website of that specific word. Some of the words that I have that can be hovered over is in the navigation bar. Plenty of other words are in the rest of my website which are in separate paragraphs like "cats, ice cream, snow, coffee, anime, and party", when hovered over, the background color would be yellow and the font color would be red. I picked those colors because I felt like the colors would match with the theme of my website. Yellow because of the same color of my header and red since it is a bold stain color on a light yellow. Overall, all I did was a gif background to make it look interesting and attractive and tried to add colors that would flow. Following along the video of javascript30 made this lab pretty simple and easy since the only th...

  Lab 34 was the 21st video to the whole Javascript30 series and what I have to do for this one was that it on a phone or any mobile device, the compass shown on the website is supposed to work and move in the direction that you move to. I don't really know if it works because I have never tried it, but with the help of javascript30 and the tutorial, I am confident that it works properly and will guide you to success. I felt like this lab was pretty quick and wasn't as time-consuming as I had originally thought it would be as I personalized the background and the colors. The rest I fixed using the video and boom, finished. Creating this compass was in way interesting because I was satisfied by the outcome of the compass and it looked good too in the end; It's outline makes it stand out a lot.    Overall, this lab was entertaining and cool since it was interactive and the user can directly interact with this lab by moving around and exploring places with the compass. As I...

 Lab 33 was the twentieth video to the whole Javascript30 series and what I have to do for this one was that it involved using the microphone of the computer for it to work, which unfortunately it didn't for me. What's supposed to happen in the lab was that when you enable the use of the microphone on this page, when you talk, the page should detect you talking and automatically type what is being said onto the page. You can also type on the page, but that is not the objective of the lab. This lab is here, but it doesn't really work for me so I didn't even try or continue to stress about having this lab work, even though I followed the tutorial. This lab in general didn't work out so great for many of my peers and myself. We tried real hard to troubleshoot and figure out what the problem was but no solution was ever found.    Overall, this lab seemed like a complete failure to me. Even though I followed through with the video in every possible way, the microphone j...

 Lab 32 was the nineteenth video to the whole Javascript30 series and what I have to do for this one was to adjust the RGB photo colors when I take a picture using the camera of the computer. For unexplained reasons, the camera only worked or for others, worked better on Mozilla FireFox and not on Google Chrome, which was weird to me since it said allow camera to be used on Chrome, but it never showed. Working hard on this lab made me realize some things a bit slowly compared to others as my perspective was more narrow. It took me a while to figure out that FireFox worked as I was continuing on Chrome for this lab, but after a little, I finally figured out that the camera on FireFox was working. After and during taking a picture, I or any other user that gets on this website can adjust the red, green, blue colors of the image with the adjustment bar. I think having this adjustment opens up to so much more creativity but at the same time, the pictures would look really weird as well...

  Lab 31 was the eighteenth video to the whole Javascript30 series and what I have to do for this one involves the console again and specific commands that are to be put inside the console to perform a specific result. So basically, all the videos on the page have a specific time on them and when you put any of the 3 commands in the console, it will tell either the seconds, minutes, or hours. I personally changed the times of the videos to see what would occur if the time changed and as a result it did, which I found to be very cool. This whole lab was pretty simple and easy to do since I watch the video and it guides me in coding and understanding it. To make sure that the users will be able to understand what they have to do when they get on this website, I clearly put the directions at the top of the page and the videos at the bottom, so the user will understand the moment they come onto the page on what to do. Doing these commands in the console are interesting, but this lab wa...

  Lab 30 was the seventeenth video to the whole Javascript30 series and what I have to do for this one was to create some sort of list that has names It was an interesting lab because it would sort all of the text in a certain order. When you type all of these words in the code, it will rearrange itself on the website in a certain way. In this case, all of the words that I put were all put in a list form so it is easier to look at and I could also customize the form as well. I put whatever came to mind and added it to the list to see what would happen and at the end, it all was rearranged in this sort of way.    Overall, this lab was fairly simple and easy to finish in my opinion. It was easy to change things up in the menu in order to personalize the website. It was some sort of practice given to us by the teacher so that our knowledge in programming keeps expanding and whatnot. I really enjoy doing these sort of labs because I can do whatever I preferably want to it an...

 Lab 29 was the sixteenth video to the whole Javascript30 series and what I have to do for this one was to have text where it would have many different shades of colors to it when moving the mouse all over the page. So basically, I customized the website so that it would have the word "WOAH!" and many different colors that would go with the background gif I found on the internet. The background gif actually comes from a tv show I used to watch and its pig that blinks named Waddles. I really like how Waddles is right in the middle giving this simple website some color and vibrant vibes. The pink header fit in with my background perfectly and having the words be of various other colors, it was able to stand out from the almost dominant pink background.    Overall, this lab was fairly simple and easy to finish in my opinion. It was easy to change things up in the menu in order to personalize the website. all I had to do was have a text that would have more text move wh...

   Lab 28 was the fifteenth video to the whole Javascript30 series and what I have to do for this one was focused around a fake menu. So basically, when you type in anything, it would be part of the menu of the imaginary restaurant that I created. This is a form that was created where it stores all of the data that is put when typed into the input box. What I create for this lab was a Mexican Food Shop that would have anything the person wants inside the menu and nothing could stop them from putting it inside the menu as they could type it in the input box and it will stay there until I delete when I delete the file. I enjoyed creating this lab and like creating a menu where it can be customized for the user who enters the website. With the help I receive from watching the videos, I easily built this menu to be as responsive as it is.    Overall, this lab was pretty simple and easy to finish in my opinion. It was easy to change things up in the menu in order to...

   Lab 27 was the fourteenth video to the whole Javascript30 series and what I have to do for this one was mainly focused around the console. So basically, there were a specific set of commands that could and had to be put inside the console. When using these commands, a certain outcome would be shown in the console when executed. If you type in the word "team" inside the console, then a list of 4 names would appear as that is equivalent to a team. There are more commands that could be put inside the console like "players", "AT", "dev.name" and more that would result in several other results in the console when these commands are put inside. I customized the commands to make it so that when these commands are plugged into the console, the names would be of my Web Design Peers and would appear in a different order from that of the video. This was somewhat of an interesting lab but at the same time, it was pretty boring since not a lot of people kn...

   Lab 26 was the thirteenth video to the whole Javascript30 series and what I have to do for this one was about scrolling down a page and what happens when you scroll down. So basically, when you scroll down the page, images will appear from several side with some sort of transition either from the left, up, down, and other sort of movements. This was a SUPER easy lab that required creativity because there was a bunch of random text that could be replaced with anything you want it to be, so it was all up to you to do whatever you want with it. I wrote about some personal things for this website to give it a more personal touch and for the reader to enjoy the text. The code was relatively short as I didn't have to do much in terms of coding and with the help of the video, I got this done easily without trouble.   Overall, this lab was pretty simple and easy to finish in my opinion. It was really cool being able to change the pictures to anything I wanted. Since I wrote a...