Visual Design Journal by Jorge Carty

Visual Representation of Lab 36 Lab 36 consisted on making a Box where you can type and a voice generated by the computer will read it. I used JavaScript and HTML to create this little program and it was fun to design it. JavaScript was used to make the voice reader read the text that was inputted into the text boxes. Also, there are bars that control the Rate and Pitch of the voice. If I was you, I wouldn't touch them. I used CSS and HTML to make this look decently nice and pleasing to the human eye. This is important for a web designer to know because if someone is disabled and wants to read something on your website, you can give them a chance to listen to your work and alt texts. JavaScript of Lab 36

Visual Representation of Lab 35 This is one of those labs that are simple and fast to explain. Let's see how fast I can explain this. JavaScript work with the highlighting of each work that works as a link, there are multiple words that have been linked to something in the paragraphs and every time you hover over them, they get highlighted. The HTML is just there to hold everything together. This is important for Web Designers to know because they can decorate their website and make them visually more interesting. I will use this functionality in my own website, I like the animation and the concept, maybe I can modify it and make it even better. Let's see how that goes. JavaScript for Lab 35

Visual Representation of Lab 34 All I will say is 🤯🤯🤯🤯🤯🤯🤯. Once again, a lab blew my mind. All I will say is that this lab can track you and see how fast you're traveling. I used JavaScript and HTML for this lab. In simple words, JavaScript was responsible to find the Geolocation of your device and depending on what device you're using, it will display the speed you're traveling. For the HTML, I used an external source for the Geolocation since it looks complicated to code from 0. Web Designers can develop cool stuff with this. They can make a map like google maps to find locations of different places or to get directions to travel, etc. Ideas are limitless. HTML of Lab 34

Visual Representation of Lab 33 I didn't know this was possible but it blew my mind. The basic concept of this lab is that the website uses you mic to capture your voice and type all words you say in the div shown in the middle of the lab. In the JavaScript, I used the Speech Recognition webkit to make this possible. An event listener was used to hear everything the user says and it was displayed in a P tag within the HTML file. This app won't type everything you say in sentences type form, instead, what it does is, it types one word per line. This can get reworked so it can type in sentences form, but let's leave that to the future. This skill is important for a web designer because it can be used in many ways. You can make an app for a computer that uses your speech to type instead of using the keyboard. I'm pretty sure people would prefer to use that instead of a keyboard since not everyone is comfortable with using a keyboard. JavaScript for Lab 33

Visual Representation of Lab 32 This lab was complex but interesting to make. Its concept is simple but making it sure is not. Basically, when you access the website, you will get a pop-up asking if you give permission to the site to use your camera. DON'T WORRY, I'm not going to spy on you, I don't know why I would do that but still needed to be said. If you give permissions, your camera will appear within the white canvas. As you can see, there's a button called "Take Photo" on the top left corner of the white canvas, that button is there to turn off your computer. No, but it's self-explanatory what that button's for. Once you click the button, little images will appear at the bottom, and by clicking them you will be able to download them to your computer. This required HTML and JavaScript. We used the HTML to make the div which ends up being the white canvas and also the "Take Photo" button is also made in HTML. When it comes to Jav

Visual Representation of Lab 31 This lab consisted on placing information about videos, to be more exact, their duration. For this lab, I used JavaScript (WOW what a surprise) and some basic HTML and CSS to link this lab to my website and make it look like it's part of my website. For the JavaScript part, an array that held all the information for all the videos was required, but that's not it. In the JavaScript, I created consts that have the basic job of getting the duration of each single video and add them up to a total of X hours. In my case, the duration of all the video add up to 5 hours 50 minutes and 7 seconds. This skill is important to a web designer because it helps us organize data in many ways. In previous labs I've shown different ways to store or organize data and this seems like a different way of organizing such data. I can't think of something I would create that I need to include this functionality but I'll think of something. Ja

Visual Representation of Lab 30 This lab was short but fun to make. This required HTML and JavaScript, CSS was optional to make it look nicer. All you can see in this lab is a div with names inside of it, but, have you noticed that they're sorted by names? HIYA! I got you there! The work behind it is all JavaScript and some HTML. HTML was used to make the list itself. Then the names and the function of sorting them out were done with the help of Mr. JavaScript. The names are stored in an array that later on with the help of a function and a const, it accomplishes the job of sorting them out. This is very important for a web designer because you can visually organize information, unlike previous console labs, where you were able to do this only in the console. JavaScript of Lab 30

Visual Representation of Lab 29 This lab was... unique. The main concept was to make the text have different types of shadows of different colors. JavaScript was used to make the shadow move with the mouse cursor as you navigate inside the canvas. I managed to make the shadow of the text appear in different colors and float in different ways and different positions, so they don't look symmetrical and plain. In my opinion, this gives it a crazier look to it. This skill can be or it cannot be useful for a web designer. It's up to your imagination to see what you can apply this skill to. Maybe you're developing a game and this can be used to make a character that can be used by hovering the mouse over the canvas? Imagination is unlimited. JavaScript of Lab 29

Visual Representation of Lab 28 Lab 28 was similar to the checklist, the only difference is that in this lab you can add stuff to the "Checklist". Also, the context of the lab is different, this is supposed to be a menu of a restaurant. JavaScript was used and its main purpose was to receive data from the text box to add it to the checkbox or menu. Also, every time you check one box, the box will become a little taco which looks very cute. This is important for a web designer because it can help design another type of checklist or checkbox that can be constantly updated. From the top of my head, since I can add anything whenever I want, I would make one of these for daily goals. HTML of Lab 28

Visual Representation of Lab 27 This lab was short and yes, it's about the console once again. In this lab, I had to make a copy of an array so I don't have to modify the original array and avoid future problems that might occur with the coding. It makes our lives easier. Basically, we are holding information in a copy of an Array so we can update it safely without having trouble. This is very important for a Web Designer because they can save a lot of time of troubleshooting while updating information in arrays. JavaScript of Lab 27

Visual Representation of Lab 26 This lab was also simple, simple enough to explain it in one sentence. This lab consisted of using images that we own or we don't and place them in between the big text. The interesting part, as usual, comes with the JavaScript. What the JavaScript does is that it will slide the image from its opposite end to the text with a fade-in effect added to it. It only gets triggered when you scroll up to the point where the photo is located. This is very important for a web designer because you can make a web site more interesting by adding animations but you need to be careful to not add too many animations because it can slow down the loading of the website and can get users bothered by it. Keep it nice and simple. HTML of Lab 26

Visual Representation of Lab 25 Another Console Lab, why do we keep doing these? This is very nice and simple, a lot simpler than what you can expect, it's so simple that this reflection will probably conclude in the next 2 sentences. The JavaScript part of this lab stores the buttons you pressed on the website and saves it in arrays. Yes, that's absolutely it. I can't say more about the HTML since it barely has something. This is very important for a web designer to know because this teaches us how to store information depending on the actions of a user, kind of like a game. Let me say that again, not exactly like a game but like a concept or layer of a game. HTML of Lab 25

Visual Representation of Lab 24 This lab was nice and simple. The mission was to create a video player with buttons and other options. I used JavaScript to add actions to each button. You can skip the video for either 10 or 25 seconds due to the dedicated button created for such purpose. Also, you have a bar that will change the motion of the video, if you drag it all the way to the left, the video will be in slow motion and vice versa. You have a duration meter so you can rewind to any moment of the video in case you missed something, you can always go back to it, or even fast forward it in case you get bored of it. This skill is important for Web Designers because it allows them to put videos on their websites or even create something related to video playing. I will make the next YouTube. HTML of Lab 24

Visual Representation of Lab 23   In Lab 23, I made a checklist and if you compare this lab to the previous labs, you will notice a change in the layout, which is more detailed by having a title and less "plain". Basically, you can see a checklist in which you can obviously check things. This was possible to make using JavaScript but to be honest, there isn't much to say about this lab. I had to make the script check a box once you click on its box. The most interesting part is pressing shift while you click one box to check all boxes. This is an important skill for a web designer because they can make checklists for themselves and since we tend to be lazier than other people, we like doing everything with one click. HTML of Lab 23

Visual Representation of Lab 22 I can say with a lot of confidence that I have console.log labs, I don't like them at all. The most noticeable thing you can see in this lab is the change of the sentence "I'm not depressed", it does from a simple text to a green big text by clicking it. In the console, you can appreciate data about Snickers and Hugo, stating their name, human age, and dog age. This is important for web designers because it can help you organize data and/or make easter eggs on a website like the text I had. Would you ever expect that non-random text to transform by clicking it? I don't think so. JavaScript of Lab 22

Visual Representation of Lab 21 Lab 21 was interesting to make. Very little HTML, but mucho color! In this lab, the user has the freedom to draw whatever they want on the canvas with either holding right or left-click. As shown in the image above. HTML, CSS, and JavaScript were used to make this and a canvas tag in HTML was necessary to make this possible and I gave it the id of "draw" to later on in JavaScript work with that. What the JavsScript does is change the colors as you paint in the canvas and it also changes the stroke size of the "brush" aka mouse as you paint. So it will go from thick brush to a thin brush and reset after you hit the limits. A Web Designer can utilize this skill to make a game. This reminded me of a game where you can play with friends and you will be given words and you have to draw it, while other players try to guess your drawing. It is really fun when you play with friends. JavaScript of Lab 21

Visual Representation of Lab 20  In this lab, I had to make panels with images that expand to show text. That is the simple way of saying it. I used images from a game called Rainbow Six Siege, being that said, I do not own any of those images. Let's leave that over there. What the JavaScript does is that it triggers the panels once you click on them. Once clicked, it will expand the panel and reveal extra text coming from the bottom and top of the central text. If you click on the opened panel again, it will go back to normality, meaning, it will shrink the image and only show the middle text. This was fun to make, especially with something I like. Having the freedom to do this kind of stuff is very enjoyable. I can see myself using this kind of stuff on my website to showcase some photography shots I took, and I would make a text appear explaining how I got inspired to take that shot. HTML of Lab 20

Visual Representation of Lab 19 Lab 19 is a simple lab that has a search bar in which you can type the name of a state, and it will highlight the letters matching with the name typed and will show the population of that city or state in particular. To complete this lab I needed to create a search bar by using the input and form tags, the rest was pure JavaScript. Functions and Consts were used to identify the letters typed in the search bar and to remove the options that don't match with the letters typed into the bar. This is very important for a web designer or someone who has to analyze data because it can be combined with the previous labs. Sort information or make it easier by typing a keyword. JavaScript required for this lab

Visual Lab Lab 18.2. Here we go again. This lab was not as bad as the previous one. Once again, this barely required HTML or CSS, everything takes place in JavaScript. I had to chance to input my own information and work with it. The main idea of the lab is to identify if someone in the Array is an adult or how many people in the Array are adults. More or less, that's the main concept of it. This was similar to the previous lab but different at the same time. The previous lab was about how to sort information inputted in an Array, this time we are finding information that has been inputted into the Array. Very Useful. Code used to make the lab

Screenshot of the Visual Lab Lab 18 isn't called Array Cardio 1, instead, it's a patience tester 1. This lab was SOO oagashgiohasklglajksheoahglkas. I managed to finish it. I can see why this lab is useful, it helps you organize data and sorted it out depending on how you want to sort it out but WAS IT NECESSARY TO GET THIS MUCH INFORMATION TO SORT?  😂 😂 😂  Anyways, this was tedious, veryy tedious but useful. Leaving all jokes aside, this lab had no HTML nor CSS at all, all took place in the console. We were given information about Inventors? Scientists? and my job was to make different lists sorting these people by names, last names, age (youngest to oldest), etc. In order to achieve this, many const were used, these were responsible for the sorting of the list. The reason why I used many Consts because I needed to make multiple lists. Another thing I had to do was calculate how many years each person lived. This is very important for a web designer because even

Lab 16 was fairly straight forward. The website is self-explanatory and as you can see, there is a bar after the properties Spacing, Blur, and Base Color. As someone can deduce, by changing the value of the bars, you can change the property of the mentioned property in CSS, How was this made? This was made by labels and input tags for the user to change the properties in CSS. As for JavaScript, works as an updater and value changer so it makes visual changes to the image. A function and multiple const were made to change the value in the CSS properties. This skill is important for a web designer because it gives you an options to use your creativity. In my case, the first thing that comes to my mind when I see this kind of concept is an image editor. I can now make an image editor so a user can upload a picture and by dragging the bars, they can modify different stuff, not only the properties shown in the lab but other important things like brightness, saturation, color correcti

In lab 15, I was required to create a website that allowed the user to play sounds from a drum kit using the keyboard, to be more exact, with keys like "A", "S", "D", "F", "G", "H", "J", "K", "L". Also, this lab has a clock that tells you the real-time and it's constantly updating. To develop this idea I had to design the clock and the drum kit in HTML and CSS, and add its functionality with JavaScript. For the drum kit, divs were made with specific data-keys and using audio tags that also react to data-keys which makes the sounds work, and the other makes the div get highlighted once you press a key in the drum kit. A function in JavaScript was also made in order to allow the user to spam the sounds, otherwise, the sound would play and the user would have to wait a couple of seconds to play it again. As for the Clock, it was made using divs and changing their form by modifying the radi