Web Design Journal by Jhoan Muy

Jhoan Alexander WCP Reflection This lab was made with a Javascript 30 tutorial. JavaScript 30 is an online resource website which supplies alumni with Javascript tutorials. In this lab it required HTML, CSS and Javascript.  In this lab, we constructed the highlighted text seem like it was your ghost by following you by highlighting linked words in the text. We did this by making a constant using a querySelector that would select all the a tags. The text in these a tags would then be highlighted. We then made a constant that would highlight this text when hovered upon, which was then implemented into a function. This function would set the style in which the text was highlighted. Finally, we set a trigger that would sense when the mouse hovered over the text. Overall an intriguing lab which I as a webs designer will use in my future website as it is great at helping with navigation bars.

Jhoan Alexander WCP Reflection This lab was made with a Javascript 30 tutorial. JavaScript 30 is an online resource website which supplies alumni with Javascript tutorials. In this lab it required HTML, CSS and Javascript.  In this lab we created a compass which would point to whatever direction you were facing in, and the speed at which somebody is going. We did this by making separate constants for both the speed and direction. After that, we used  navigator.geolocation.watchPosition to sense the speed at which someone was going. To rotate the arrow of the compass, we accessed the css through javascript based on the direction that the person is pointing to using  arrow.style.transform = `rotate(${data.coords.heading}deg). This lab was constructed with a tutorial, I didn't face much issues as they were resolved through looking at the video and finding my error. Overall a great lab and now I'll never get lost, all I have to do is open my lab 34.

Jhoan Alexander WCP Reflection This lab was made with a Javascript 30 tutorial. JavaScript 30 is an online resource website which supplies alumni with Javascript tutorials. In this lab it required HTML, CSS and Javascript.   In this lab we constructed a speech detection device that would write in the provided space anything you were saying even some foul language. We did this by using the recognition element to be able to detect speech. We then created a constant containing the p tag in which the text was typed on to. The speech that was detected would be put on to there. This lab was constructed with the use of a Javascript tutorial, I didn't face any problems because the video was there guiding me with the code and how they work. Overall a interesting lab now I know how Siri is able to compute what I say to her on the daily.

Jhoan Alexander WCP Reflection This lab was made with a Javascript 30 tutorial. JavaScript 30 is an online resource website which supplies alumni with Javascript tutorials. In this lab it required HTML, CSS and Javascript  In this lab we had to create a photo booth using javascript. We also had to add effects to the camera, and be able to take a picture and display it at the bottom. We did this by adding out video tag into a constant using querySelector. We then used  navigator.mediaDevices.getUserMedia in order to obtain the user's webcam access. Then we made another function that would that would paint certain colors onto the area where the webcam feed was displayed. In order to take a photo, we made a new function using the snap element, and also added where the image would be placed. Overall a simple lab with the help of Javascript 30 by providing an in-depth tutorial.

Jhoan Alexander WCP Reflection This lab was made with a Javascript 30 tutorial. JavaScript 30 is an online resource website which supplies alumni with Javascript tutorials. In this lab it required HTML, CSS and Javascript. In this lab, we had to add up the length of all the videos in a list and display it on the console log. We did this by adding a data-time attribute to the li tags containing a certain amount of time. Then using querySelector, we selected all the data-time attributes and placed them in a constant. We then made separate constants for the hours and minutes. In these constants the total hours and minutes would be calculate and would then be displayed on the console log. We did this using javascript. Overall an easy lab with the use of the tutorial by side.

Jhoan Alexander WCP Reflection This lab was made with a Javascript 30 tutorial. JavaScript 30 is an online resource website which supplies alumni with Javascript tutorials. In this lab it required HTML, CSS and Javascript. This lab required the use of Javascript to make a table displaying my favorite bands. With just a <ul> tag I was able to make this table. This could have been constructed with just plain HTML and a bit of CSS but also with Javascript and that is what I did. It just included an array which was preset so like Jack boys it was already in the array it just needed to be displayed. Overall an intriguing and questionable lab should it have been done with Javascript?

Jhoan Alexander WCP Reflection This lab was made with a Javascript 30 tutorial. JavaScript 30 is an online resource website which supplies alumni with Javascript tutorials. In this lab it required HTML, CSS and Javascript. In this lab we made a shadow appear through a function with X and Y being the mouse position. This lab had a tutorial which I used to construct this lab. It was a fairly easy lab the Javascript was just 15 lines of code with one function displaying the shadow of the text at different positions when X and Y was moved. Overall a fairly simple and intriguing lab to do.  

Jhoan Alexander WCP Reflections This lab was made with a Javascript 30 tutorial. JavaScript 30 is an online resource website which supplies alumni with Javascript tutorials. In this lab it required HTML, CSS and Javascript. In this lab the combination of an array and function which would add into the array and be displayed into the list. The rest just included styling the list to your liking. This was the same list style from the starter file and it worked fine in the lab. The tutorial supplied by Javascript 30 helped immensely I didn't need to spend hours looking for code which can help me program a list but easily follow along in the video. Overall a good lab making a list which is useful in the day to day. 

Jhoan Alexander WCP Reflection This lab was made with a Javascript 30 tutorial. JavaScript 30 is an online resource website which supplies alumni with Javascript tutorials. In this lab it required HTML, CSS and Javascript. In this lab required styling the console log with a table and array - as shown in the image. In order to style the console log it must styled in the HTML with Javascript. Overall a simple lab the tutorial did most of the heavy lifting it allowed me to understand how to code the console and is my first insight on how the console log can be styled.

Jhoan Alexander WCP Reflection This lab was made with a Javascript 30 tutorial. JavaScript 30 is an online resource website which supplies alumni with Javascript tutorials. In this lab it required HTML, CSS and Javascript. This lab used Javascript to make the images appear on the website as it scrolled down this was made using two functions one which checked the scroll of the website which was powered by an event listener and another being a debounce function which powered the time which it would take for the image to bounce in. Together they programmed the webpage and it this I see is in a lot of websites displaying ads which I now know how to use and can start charging for ads once I start getting individuals on my website. Overall a great lab using Javascript to give images more life within a webpage.  

Jhoan Alexander WCP Reflection This lab was made with a Javascript 30 tutorial. JavaScript 30 is an online resource website which supplies Javascript tutorials. In this lab it required HTML, CSS and Javascript. In this lab I constructed a video player which would be able to play at different speeds which is similar to youTube. The code behind making this was a combination of CSS, HTML Javascript. The CSS styled the video player with its colors and borders the HTML allowed for the inputs which would range the speed and placement of the video. The Javascript basically programmed the play button. Overall the tutorial helped immensely and it was an overall great lab in case I want to start my own streaming service.

Jhoan Alexander WCP Reflection This lab was made with a Javascript 30 tutorial. JavaScript 30 is an online resource website which supplies alumni with Javascript tutorials. In this lab it required HTML, CSS and Javascript. This lab similar to lab 22 made us code the console log, this time the console log would record every key clicked and display it in the console log. This was made making a constant named pressed which was an array which would add the keys being clicked on with a event listener and display all of it in the console log. This entire lab was simple to do the tutorial helped immensely and overall a great lab to widen my knowledge in how the government can be using this same code to see everything that we are typing. 

Jhoan Alexander WCP Reflection This lab was made with a Javascript 30 tutorial. JavaScript 30 is an online resource website which supplies Javascript tutorials. In this lab it required HTML, CSS and Javascript. In this lab we need to construct a check list. In constructing the check list it was a combination of styling the box and Javascript to allow for the list to be checked and unchecked. The main function was one the Check(); function it needed to place the check in the box and cross out the list. Overall a simple lab the tutorial did a great job in demonstrating the steps needed in constructing the lab and made my lab easy to construct.

Jhoan Alexander WCP Reflection This lab was made with a Javascript 30 tutorial. JavaScript 30 is an online resource website which supplies alumni with Javascript tutorials. In this lab it required HTML, CSS and Javascript. In this lab required styling the console log with a table and array - as shown in the image. In order to style the console log it must styled in the HTML with Javascript. Overall a simple lab the tutorial did most of the heavy lifting it allowed me to understand how to code the console and is my first insight on how the console log can be styled.

Jhoan Alexander WCP Reflection This lab was made with a Javascript 30 tutorial. JavaScript 30 is an online resource website which supplies alumni with Javascript tutorials. In this lab it required HTML, CSS and Javascript. In this lab I made a canvas which the user will be able to construct with their mouse click -  as shown in the image. This lab required Javascript which would program the mouse with a function called Draw which is self explanatory. The function included if statements which would alter the width, so it varied when making the canvas. The tutorial made it easy to construct the lab and explained every aspect of the code that goes into making the lab. Overall a great educating lab.  

Jhoan Alexander WCP Reflection This lab was made with a Javascript 30 tutorial. JavaScript 30 is an online resource website which supplies alumni with Javascript tutorials. In this lab it required HTML, CSS and Javascript. In this lab we needed to supply images which would be displayed in a flex panel sort of thing. As you can see in the image above this is the end product. It required very little lines of code and just two functions which one would open the image to display and the other to flex the image to take more space on the screen. Overall no difficulties the tutorial helped greatly in helping me finalize my lab.

Jhoan Alexander WCP Reflection Lab 19 This lab was made with a Javascript 30 tutorial. JavaScript 30 is an online resource website which supplies alumni with Javascript tutorials. In this lab it required HTML, CSS and Javascript. This lab included an abundance of javascript, using the tutorial it simplified my task, I was able to follow along and analyze functions, constants and JSON. The lab included a total of 150 lines of code and it was basically a search engine for Cities and States.  Overall an intriguing lab, in which I computed my first search engine using JSON.

Jhoan Alexander WCP Reflection Console Log 18.1 Console Log 18.2 This lab was made with a Javascript 30 tutorial. JavaScript 30 is an online resource website which supplies Javascript tutorials. In this lab it required HTML, CSS and Javascript. Using Javascript 30's tutorial I constructed this lab and from the screen it doesn't look like much but it's what is within that counts. This Lab has a coded console log which can be seen when it is inspected, as shown in the picture the console log is fully functioning and holds arrays which can be called upon. This lab had an extension and that is Lab 18.2 which also involves the use of the console log but this one doesn't have arrays within the console log but has Booleans and text statements. Overall not a difficult lab the tutorial made it easier to construct. It was intriguing seeing the console log being programmed and not the webpage for once.

Jhoan Alexander WCP Reflection Game Screen This lab was made with a Dev Ed tutorial. Dev Ed is an eminent youTuber known for Javascript tutorials. With HTML, CSS and Javascript together in this lab I constructed a Rock Paper Scissors Game. This lab required lots of lines of code it began with making a section for the start of the game it when started it was taken to the game screen - which is showed in the picture above - Dev Ed provides images of rock paper and scissors to use and I used them in this lab. I then began to program the game using if statements for player one being the user and player two being the computer it randomly chose a signal and if the same it would be a tie -  everyone knows how rock paper scissors works. This game mainly used Javascript to make the game functioning. Overall it was a long lab involving lots and lots of lines of code but at the end a infamous game was constructed.

Jhoan Alexander WCP Reflection   This lab was made with a Javascript 30 tutorial. JavaScript 30 is an online resource website which supplies Javascript tutorials. In this lab it required HTML, CSS and Javascript. We were obligated to make use Javascript and CSS to customize controls which would make our image in my case a stick figure blur, alter frame color and space out. Using the tutorial I didn't run into much issues and when I did I was able to use the video to correct any flaws. Javascript helped immensely in the construction of this lab.  Overall an essential lab to start getting accustom to using CSS and Javascript together to construct projects. 

Jhoan Alexander WCP Reflection This lab was constructed using a Javascript30's tutorial. Javascript30 is an online resource educating minds with Javascript tutorials. Lab 15 involved both Javascript, HTML and CSS. Together it made a live Clock and Piano. I used Javascript 30's separate tutorials to make the clock and piano. The only obstacle I faced within this lab included coding the Javascript and keeping track with all the divs needed to compute the clock. Other than that the Piano was easy to construct it only needed sounds(wavs) and a few google searches to figure out key ID's to make the key sound on an event click. With the use of Javascript 30 tutorials and my knowledge of CSS and HTML I was able to construct this Lab which you can see right above and it was an overall intriguing lab allowing me to use Javascript to construct an everyday tool and musical instrument.