Visual Design Journal by Dayanna Arias

  This lab was called, "Sort Without Articles". This lab had given us a list of bands which then was sorted out by alphabetical order in the console.log. To accomplish the sorting, I had first taken the list of all the band and then removed the "a" and "the" from the sorting to make it more accurate and not have these words affect the sorting. After that, I sorted the bands out using a jQuery selector and then created a login console with the sorting having been completed. Lab 31, called "Adding Up Time With Reduce", was a lab where there were a whole bunch of video times given to me and I had to add them up using JavaScript. Most of it is on the console and you inspect element my webpage, you can see how long each said the vide is, and in console, the total time displayed for all the videos together.   Lab 32 is titled, "Webcam Fun". Within this lab, I utilized the webcam on a webpage that you can use to take pictures using i...

Lab 36 is titled "Speech Synthesis". In this lab, I created a voice simulator, which basically is a web app that you can use to allow a bot to say whatever text you type in. You can also switch the voices, the pitch of the voice, and how fast the bot says it. Within this lab, the functionality of the text to speech revolves around the JavaScript and the HTML. In the HTML document, I added labels with input detectors that allow users to input the amount of pitch and rate they want the bot to play their text at. I also added buttons that are used to stop whatever the bot is currently saying while at the same time, a button that starts the speech.

The title of this lab is "Sticky Nav". I created a website that included a navigation bar that is sticky. This generally means that if you scroll down the page, the navigation bar should follow you and be on the page at all times. To make the navigation bar sticky, I first created the navigation bar using an unordered list with list items containing each panel. The CSS linked with it was styled with a black background and text that was white to compliment my page colors. There wasn't that much JavaScript involved in making this function.

Lab 38 is titled, "Event Capture, Propagation". This lab demonstrates how events work in JavaScript and how you can get the information of what is clicked on a page, demonstrated by a div with 3 layers and a button. In order to get the data, you would have to open the console and click on either of the rectangles or the button to get a response.

Lab 39 was titled, "Stripe Follow Along Nav". In this lab, I created a special kind for a navigation bar that opens a special dropdown that displays information and can be turned into a hyperlink.   In order to make this function, I created a navigation bar using a <nav> tag and I included all of my information in it. The dropdown animation is created with JavaScript and CSS. To create this effect, the dropdown is hidden and then it fades in when you hover over the navigation associated with the dropdown.  

This lab is titled "Click and Drag". This lab has the click and drag characteristics. It consists of a bunch of tabs with numbers that go from  the left or right to navigate through them. The website is shown in the screenshot above. To create the functionality on this website, I first made a bunch of div items in the HTML document. I added CSS to make the number displays look easy to see on any background they were on, which were also added in the CSS. The JavaScript has the click and drag feature, and does this by logging an event 'mousedown' which will allow you to click and drag the numbers across the screen to go forward or backward.  

In this lab, I created a website that allows you to control a video's playback video speed. I added a video via the video tag in HTML that I got from a website full of small clips. It can either slow down the video or speed it up. It mostly works with JavaScript,   by setting the speed, bar and video as variables. I then used these variables to calculate what rate the video would be played at based on the progression of the bar on the right side. 

Lab 42 is a webpage that has a timer. It's a web page used to keep track of time. There are also preset times set via buttons and if you click them, it will set a timer corresponding with that button. You can also manually enter a number of minutes to set a custom timer.

Lab 43 is called, "Whack An Otter" in which I created a webpage that allows you to play the game. In order for you to play the game, you press the start button. The otters are going to start coming out one by one, and pretty fast too. You have to click on the otters before they enter back their hole. Your score is calculated next to the title. Once the game is over and the otters stop spawning, you can click start again to reset your score and have another shot at it.