Web Client Programming Blog

Project Duration:  5/16/19 - 6/10/19 5/16/19  - 5/17/19:  Complete filling basic content 5/18/19 - 5/24/19:  Consult wireframe and storyboard for inconsistencies 5/24/19 - 5/31/19:  Launch and troubleshoot 6/1/19   - 6/7/19:  Organize code and optimize 6/8/19   - 6/10/19:  Last-minute refinements and finalize This is the tentative plan for my final portfolio, the wireframe and storyboard were done early in the year which resulted in the first iteration of my final portfolio. After looking over the first version, I decided that I would redesign the portfolio from the ground up. This resulted in the current version of my portfolio available.

Project Duration: 4/17/19 - 5/15/19 4/17/19  - 4/17/19:  Wireframe, Storyboard, and Theme 4/18/19 - 4/20/19:  Research content and resources 4/21/19 - 4/25/19:  Basic HTML structure 5/26/19   - 5/3/19:  Include necessary content 5/4/19   - 5/10/19:  Launch and troubleshoot 5/11/19   - 5/15/19:  Redesign and finalize This is the tentative plan I have for my Spring Project, the wireframe for this project is applicable to the topics presented to me.

In this lab, we are making a whack-a-mole game. The game itself includes a few CSS elements but mainly relies on JavaScript. When the start button is pressed, the game will start and moles with pop up which you will have to click on. After a predetermined amount time has passed, the moles will stop popping out. After messing with the game, I found out that it is easy to get points by repeatedly clicking the start button and clicking all the moles that come out.

In this lab, we are making a countdown timer. At the top of the webpage, there is a selection of buttons: 20 seconds, 5 minutes, 15 minutes, 20 minutes, lunch break, and a custom input. When you select a value, the page will starting counting down and includes the time at which the timer ends. Other than that, there is not much else to this lab. It is just a simple countdown timer with a few extra features.

In this lab, we are making a video speed controller. On the page, we have the video itself and to the right of it we have the speed controller. The playback speed of the video is determined by the multiplier seen on the controller with values greater than 1.00  increasing playback speed and vice versa. We have actually seen this lab as part of another lab, namely Lab 34. Lab 34 also featured a playback controller.

In this lab, we are making an interactive element that moves when you click and drag to the left or right. This will create an effect where it looks like a small carousel; the look of it is all handled by the CSS file. I don't have a practical use for this effect because to me it seems gimmicky and doesn't fit the aesthetic I'm going for in any of my projects.

In this lab, we basically made a dropdown menu that appears when you hover over an element. When looking at the code, we can see that we are using JavaScript to add classes to the hover elements which will then cause the dropdown menu to appear. While the effect is cool, I don't really think it has a practical purpose to me. All I'm doing is adding a whole junk of JS and HTML just to make a small but appealing effect.

In this lab, we are supposed to make a responsive box that responds differently based on where you click. If you press on certain rectangles in the box and look at the console, you'll see different console logs. I don't think this would be very useful in any of my projects so I only see this lab as a demo of JavaScript and HTML working together.

In this lab, we are working with a sticky navbar. This navbar will remain in a fixed position on your screen regardless of where you scroll; however, the appearance of this navbar changes once you leave the top of the webpage. The navbar will change to have the title of the website present along with other existing elements of the navbar. While I do think this is interesting, I don't think I'll use it since I don't have a practical use for it in any of my projects.

In this lab, we are working with a text-to-speech tool. In my opinion, this is one of the more interesting labs we've done because listening to a robot say sentences that you input is always interesting. I would imagine that we are getting the different voices from an external source but there is nowhere in the code that says so, so I would assume that the page is getting the voice from an internal source. While I like this lab, I don't think I'll be using a text-to-speech tool that often.

In this lab, we are supposed to make a website that whenever you hover over a certain word, there would be a box surrounding it which will highlight it. The special words would be "a" tags with blank "hrefs". In the JavaScript, whenever the user's cursor is over a special word, the class highlight would be appended to the a tag and be taken away once the cursor is away.

This lab is supposed to track your location but since we are working on mostly stationary computers, this would only apply to something mobile like your phone. However, after moving my laptop around my home, I can verify that it indeed does work. Since I am limited in moving my laptop around a lot, I don't really have much to say about this lab.

This lab is really similar to lab 32 except we are working with a microphone. The webpage is supposed to type out what you say onto a box. The same problems I had with lab 32 also apply to this page; the webpage would only write down what I say on my local file and when I actually uploaded  on to the server, it wouldn't work anymore.

In this lab, we had to work with the webcam on our computer. The intended effect is supposed something akin to chromatic aberration; on the top left of the page would be our normal webcam looking at us. While writing the code was pretty easy, getting the website to work was the problem. For me, the problem was mainly attributed to me not allowing access to the camera. There was another problem when I actually uploaded the webpage, the camera wouldn't turn on.

For this lab, we had to work with the console again. In this case, we had to assign values in units of time to elements of our HTML document and use a JS function to add them up to a total time. All in all, this lab was really simple to do, we just had to retrieve the values from our elements and using JavaScript, add them all up and check what the total is. I don't really see myself using this for any projects in the future unless I'm creating something that uses videos or music.

For this lab, we had to sort various articles alphabetically. This is done through a function that automatically sorts the articles in our array alphabetically. I might consider using this for a main index for my final portfolio as it can be quite useful for sorting things without manually doing it myself. Otherwise, I wouldn't see myself using this for anything in the future.

For this lab, we created a special text shadow that moves based on your cursor's position. To do this, we first had to create a word that acts as our "anchor". Then, through a series of JavaScript commands, we create four separate text shadows that circle around our anchor word based on our mouses position. The result is a psychedelic effect which is quite appealing to the user's eyes. I actually saw this particular lab showcased on a senior's laptop in last year's CTE Expo.

For this lab, we are dealing with local storage. What this means is that anything you put into this webpage will be stored in this webpage only and nowhere else. In some cases this is useful as you may need to come back to some information that you need to get only to find it deleted a long time ago. Local storage can be useful in this sense as any data you put stays on this webpage only.

For this lab, we had to use a combination of CSS and JavaScript to manipulate images to slide in when they are on-screen. We had to create a div for the image to inhabit, special CSS classes, and JavaScript code to create this effect. In the end, we get a satisfying webpage with cool images that slide in when they are on-screen. I don't really want to use this as it doesn't match image I'm looking for in my works; therefore, I pretty much see this as a cool demo.

We are using a JS library in conjunction with this lab. For this lab, we had to create a special password which would then call upon the library to add elements to the page. In my case, the password was "boi"; once the password was put in the library "cornify.js" would add corny elements to the page such as unicorns and pink text. I would not definitely not input this in any capacity to any of my works since I don't expect a regular user to actively put in a secret password which will clutter up the webpage.

In this lab, we created a custom video player that is essentially the same as a YouTube video player with a few extra features. I chose a video that I want to play on the player, and in the script and CSS, I create sliders which bring the video to any point in its runtime, increase or decrease its playback speed, and change its volume. Like any video player, it has a pause/play button which can stop the video at any point. I don't see myself using this video player in particular as it's quite finicky about where you put your cursor.

In this lab, we had a "keyword" detector which automatically sorts states and cities based on the words and letters you put. We retrieve our list of cities from an external source and create a function which reads the letters you inputted and matches it to various cities and states until it finds any the contain your input. I thought this is an interesting lab and made me consider the applications for this specific type of detector.

For this lab, we had to make sure that if the user presses a button and holds down the shift key while doing it, all the buttons would become pressed. To do this, we only need a simple if statement with an "and" conditional. If this conditional is satisfied, all the check boxes would be ticked. We also have an additional if statement that checks any boxes between two ticked boxes. I don't think I have any work that would utilize this function, so this lab would be just a demonstration of what JavaScript can do.

For this lab, we are working with JavaScript again. More specifically, we are working with the console debugging; we are working with of course "console.log" but this time we are also using commands like "console.count". These commands are very useful if you are planning to debug anything that has gone wrong in your code; for example, if a small line of code in your JS has suddenly broke. You may want to use these debug commands to fix it.

In this lab, we created a canvas with a shifting paintbrush. The paintbrush will shift between colors and change sizes at regular intervals. This lab is really similar to things I’ve seen on code.org so all in all this lab should ring a few bells for me. I don’t really see myself using a canvas for any of my work in the future but I will consider using a canvas if any of my projects requires some sort of creativity.

In this lab, we created a message and a gallery using flex panels. In my opinion, this is the most aesthetically pleasing lab out of all of them. However, this comes at a price; there is a lot of complex code (mainly CSS). While I was watching the video, I was curious on CSS techniques used in the video. After completing the lab, I determined that this would be something I would have to master in the future.

We were working with arrays again in this lab. This time we are filtering results from our arrays. To do this, we had to create an array with a list of teachers we know and an array with comments from students. The next we had to do is to filter our teachers down based on a given year based on whether they were adults; we further filtered it by determining whether all the teachers were adults. Additionally, we used JavaScript to pick out specific comments from the array.

In this lab we had to experiment with arrays. Specifically, we had to create an array and store objects in it. We had to choose from a variety of famous women in history and collect information such as their birth year and what they were famous for. The next thing we were supposed to do is create an array with names of our choosing and sort them alphabetically. In my case, I listed all the names in the Senior Web Design Academy.