Web Client Programming By Andoni N.

Plan for Spring Project: April 18- 26: research for the project, mainly on NYC, 4 tourist attractions. Collect all images and content necessary to complete the project. Figure out the theme and layout of the webpage. April 26-30: Create Storyboard and wireframe for all pages. Begin coding a template webpage that can be manipulated to create all 20 pages in order to have a constant theme May 1-5: Finish the template and then start working on changing each page to make it individual. Adapt it to each Tourist attraction/ Borough  May 6-10: Finish designing each page with content and make sure to upload it in order to troubleshoot and see what can be improved May 11-15: Take feedback and make final improvements. Plan for Final Portfolio: May 16-18: Decide on a final design for the portfolio, includes the way labs and projects will be displayed. Draw a storyboard and wireframe with the final design. May 19-22: Work mainly on the Labs and Projects display, possibly use Lab 40 t...

Link to Game:  This game is a quiz that teaches people about diversity and the proper attitude to carry within the workplace. We cannot control what people believe in from where we are standing, but we should encourage that there should be safe places where everyone feels comfortable. Believe what you want at home, but in public areas, everyone should be treated fairly. I was inspired to do this game is that even in today's world people are facing discrimination and oppression at their workplace and in order to promote a better mindset, we should show people are the point of view. The Quiz I made isn't supposed to ridicule anyone, but rather show the user how they should be treated others.

Link to Game: This game is a multi-purpose calculator, so within the game, there are many different calculators for different daily situation where people may need assistance.  There is a home page where everything can be linked to so the theme will be evident.  What inspired us was that there are many daily scenarios where a calculator for that scenario will be very useful.    

This past month, I had the opportunity to attend a career fair at the Armory on the Hudson. At this event, a bunch of technology companies and colleges gathered at this expo as well as host other events throughout the building. There were many booths with different activities and each stall gave merch. Some of the booths had very interesting activities, one of them offered to test run a Virtual Reality system which had a long line. One of the highlights of the whole event is that the Mayor of NYC. Bill de Blasio. showed up to the event. This event was very fun to attend, not only because I got a bunch of free merch, but it was a good opportunity to learn about companies, job/internship opportunities, and just network in general. There was a raffle at the event, but sadly I didn't win anything. I am sure that the future classes will enjoy this trip.

Link to Lab 43: For this lab, we made a fully functional whack a mole game that generates mole at different time intervals, at different holes, and keeps score. While this may seem like there is a lot of JavaScript involved, but honestly, it is a lot less than anyone would expect. There are some main functions such as a function that makes it so a mole is generated at a random hole by having a number assigned to each hole and then generating a random number within the interval and setting the mole to that number hole. There is also a function to make the mole appear at different time intervals. There is a function to start the game and a function that keeps score. Whack-a-mole is a common game and it is nice to know the actual code behind it and it shows that even though something may seem complicated at first, using the right method, it can be very easy.

Link to Lab 42: In this lab, we were assigned to create a timer with predetermined times that can be started using the buttons and an added feature where you can add the number of minutes. The time remaining would appear in big text on the webpage. This lab was created using multiple functions that would handle the display of the time left, display end time, to start the timer. For the different buttons there is a single line of code that handles it which is:  buttons.forEach(button => button.addEventListener('click', startTimer));. This lab could be useful when we want event triggered by a set time interval or even for games where the clock is ticking and the user has added pressure which adds to the intensity of the game, or it cpuld simply be used as a timer for people to use. Either, I believe this lab has some very useful skills I learned.

Link to Lab 41: In this lab, we were assigned to make a webpage with a video and a panel at the side that the user can use to control the speed of the video. There are consts that would handle all the information and a single function that makes it so the height of which the handle is filled changes, and the event listener would perform the function. This lab doesn't seem to be very important, but it can be useful if we want to create a more user interactive website in which case the user will have more control over what is occurring on the web page.

Link to Lab 40: For this lab, we were assigned to create a page that would contain this sort of panels where you can scroll through and it would look similar to a very long brochure. This lab was made using mainly slider.addEvent Listeners that would listen for mousedown, mouseleave, mouseup, and mousemove. When all these actions were combined the panels would move. the actual design of the panels were dealing with the CSS of the page. This lab could have a lot of potentials because it can contain a very long list of items without dragging the page to long vertically. I am thinking of incorporating this to my labs in my portfolio.

Link to Lab 39: For this lab were assigned to create these drop-down menus that would appear when the mouse hovers over the element and then disappears when the mouse leaves. This was done using costs that would collect information such as the content that the drop-down menus would contain as well as making so the transition between the menus would be a change in dimension, position, and content instead of creating a completely new menu. Then there would be event listeners that would run the function that makes the menu appear when the mouse enters and disappears when the mouse leaves. This lab could be useful in the future if you want to create a webpage where the user has no need to click or possible to make a message appear when one hovers over a specific element.

Link to Lab 38: For this lab, we had different divs within each other all the way to the center with different colored backgrounds so it would be more visible. You could select the different divs and their values would appear in the console log and when the button at the bottom is clicked a message would also appear in the console log. Most of the code involved query selectors which meant that I got a chance to understand the property a bit more there was also the "this." command which I haven't had much of an understanding, but with this lab, the property has become a lot clearer.

Link to Lab 37: This lab focused solely on the navigation bar. Most nav bars are sort of placed and forced to the top of the page and, in most cases, to reach the nav bar, you have to scroll all the way to the top of the page. With sticky nav bars, the actual nav bar stays on the top of the page no matter if you scroll down.  The main coding logic behind making this lab possible is setting the y value of the window equal to the top of the nav bar, this would create the visual of the nav bar never leaving. there is another part of the lab where when you scroll, another section to the nav bar is added, which is part of a simple if-else statement that makes it so when you scroll, a class list is added to the HTML document.  This is a simple addition to the webpage, but it is definitely something important to know because it just adds a very nice aesthetic and makes the nav bar more accessible throughout the page.

Link to Lab 36:  This lab was very interesting because we were creating a webpage that would take whatever text we input and a voice would repeat it. There are also additional features such as the voice that repeats the text can be changed, as well as the speed of which it is said and the pitch. This lab was created using a lot of constants that mainly stored the values of the buttons, sliders, and text box. There were also functions that made changing the voice possible and other actions. Finally, there were quite a few event listeners that handled the voices as well as the actual performance of the computer speaking. I believe this lab could be very important because with this we could use it for the visually impaired or even make it so the website can be translated into different languages. Overall, this lab has the potential to make all our websites more accessible to others.

Link to Lab 35:  For this lab, we had a base webpage with a navigation bar and filler text. The point of this lab made so when you hove over certain words, there would be this highlighter property that would follow. All of the CSS properties were actually done through Javascript. which meant putting code to add a class named, 'highlight', and setting the properties of the class with JavaScript code. Another part of the code was to make it so the highlighter wold link between the words, have a smooth transition and not look choppy. This lab was very interesting to make and is a very cool aesthetic to add to a webpage. It definitely helps draw the attention of the user to a specific element, which can be useful to know in the future.

Link to Lab 34: This lab isn't meant so much for computers but is rather meant to be used as an app. This lab is essentially a compass that also gives you how fast you are traveling. Since a computer isn't traveling, no data would be given so the webpage would not work, but on a phone, it will work because more likely than not, you are moving. There is very little code involved because all devices today having GPS built in, so in my opinion, the most important line of code is navigator.geolocation.watchPosition((data) ==> { that line gives the computer it needs to perform the function including position and speed, so without the line of code, the computer would have no data to use. While compasses are common, I believe it is important to understand how they work, so it can be connected to other uses, this may just be how PokemonGo was created.

Link to Lab 33:  In this lab were assigned to create a webpage that would detect speech. The code involved being able to make it so when you speak, the webpage would understand what you are saying and store it. Next, it would have to create a new element that would show all the words that are stored. The speech detention is not perfect, but it is quite amazing that it can be done just using the browser. There is another part of the code so that whenever the word "poop" or anything similar is said, it will be replaced with the poop emoticon. Now, this lab was quite amazing to do cause it just funs seeing what you're saying is translated onto the screen. There wasn't that much code involved which was honestly quite surprising. I may not create a webpage with this exact code, but maybe something similar such as making words appear on a set trigger.

Link to Lab 32:  In this lab, we were assigned to essentially create a photobooth webpage. This webpage would include projections of what the webcam is seeing, a regular webcam in the top right corner and then a bigger projection in the middle of the webpage with an effect on it. The sections that are needed to complete this lab is to project what the webcam is recorded to a canvas with set dimensions, the code to add the property to take a photo, and code that adds the effect of the canvas so it has the 3D effect. A little disclaimer of the lab is that the webcam only appears in FireFox. This lab was very fun to create because it was our first time coding with webcams and it could potentially be a very fun aspect to an art webpage about Andy Warhole.

Link to Lab 31: In this Lab, we were assigned to create a page that would display a list of videos and would tally up the time and give a total time it would take to watch all the videos. Although from the front of the lab you can't see how long the videos are, they appear in the actual code. The JavaScript is coded so it adds all the video times and then calculates the hours, minutes, and seconds in total it would take to view the videos. Most of it is possible using simple arithmetic Javascript such as dividing the seconds by 3600 to get the number of hours. In the end, a console log would display the hours, minutes, and seconds left. This was relevantly one of the simpler labs so far and while it definitely isn't that important to know, it is still a nice thing to know.

Link to Lab 30: This lab, if the title didn't give it away is creating a list that would sort alphabetically, but at the same time ignoring the articles such as "the" and "a". The two main parts of the code needed to make this lab possible are actually the code that basically eliminates the articles of, in this case, the artist's name and the code needed to actually create a sorted list. The code used to eliminate the articles is simply a function with one line of code that replaces specified articles such as "the" with " ", which is just empty space. The code to sort the artists is simply an if else statement that compares the first letter and sees which one is greater and returns a 1 or -1. Although this lab may not seem very interesting, I still believe this is a neat trick to know just in case one needs to eliminate articles when creating a list

Link to Lab 29: In this lab, we were assigned to create a user interactive webpage where different text shadows would move as the mouse moves. In the image below, you can see exactly what I mean, there are four different texts of the same word and those four will move depending on the location of the mouse. Honestly, the Javascript isn't very long, it is just one function that controls everything which is the function below. function shadow(e) { const { offsetWidth: width, offsetHeight: height } = hero; let { offsetX: x, offsetY: y } = e; if (this !== e.target) { x = x + e.target.offsetLeft; y = y + e.target.offsetTop; } const xWalk = Math.round((x / width * walk) - (walk / 2)); const yWalk = Math.round((y / height * walk) - (walk / 2)); text.style.textShadow = ` ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7), ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7), ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7)...

Link to Lab28: In this lab, we were assigned to create this input form that would populate list items when there are entered. It is like a shopping list except digital. There is also this part of the lab that acts as a checklist where you click the item when it is done. All these aspects of the lab mainly just require one functions to handle all of them and also event listeners. Although this wasn't one of the most important or flashy labs, it is something that could potentially be useful in the future. Lists are something that could be useful for restaurants or websites that want reminders.

Link to Lab 26: In this lab we were assigned to make the page so as you scroll down, images will fade in with animations. This code mainly involved making a JavaScript function that will handle the animation of the images fading in and an event listener that will perform the functions as the user is scrolling. This Lab while may not be as exciting, in my opinion, as the other labs, can be useful in the future. This feature can add a specific aesthetic a page might need and it is very much visually appealing to the user. I believe I will use this code in the future, possibly in my webpage or in a page dealing with biographies.

Link to Lab 25: While this lab may look simple, the real magic occurs in the console log of the lab. As the website says, the secret password is pizza. When you look at the console while typing on the website, you will see the characters you type appear. Once you type the letters that spell out pizza in order, then the ding dong text will appear in the console log. The JavaScript is very short and the following code is about 90% of the total JavaScript needed for this lab: const secretCode = 'pizza' window.addEventListener('keyup', (e) => { console.log(e.key); pressed.push(e.key); pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length); if(pressed.join('').includes(secretCode)){ console.log('Ding DIng'); } console.log(pressed); }) This code actually orchestrates that a ding ding texts will appear after you type pizza

Link to Lab 24: In this lab, we were assigned to create a video player where you can change the volume as well as the speed of the video which is being played. The JavaScript that made this lab functional was very confusing and took me some time looking over it to completely understand all the components and how they work. The main code that was created so the video can be played and paused, the video can be skipped to anytime, and the code that will handle the speeding up or slowing down of the video. This lab was very exciting to create since we could use our own videos. I can see the skills and code I used in this lab to very valuable in the future if I wish to include a video in a webpage. Also, it was very amazing all the components that go into what seems so simple up front.

Link to Lab 23-2: I personally found this lab to be very interesting because we were assigned to make a search form that when only a few letters are types, a lost of cities or states with that combination of letters would appear. The parts of the code that were needed included code that would search through both the list of cities and lost of states, code that would ignore words such as "an" because it is not part of the city or state name and code that would display the results. Honestly, looking at the code, it is simpler than it looks. I thought this lab would be very useful in the future because it could be a great addition to a website where I am looking through a long list and want to narrow down the options. This code isn't just limited to cities and states, it could be applied to books, movies, and so much more

Link to Lab 23: In this lab, we were assigned to work with this checklist and make it so it would check when clicked as well as when you hold shift, all the boxes in between will also be checked. The technical side of this lab which is the more important is that there are three parts of code: the code that checks if the person in checking, the code to determine if the shift key is being pressed, and the code that makes it so the boxes in between are checked as well. Most of the code relies on an if statement that is performed with the shift key is being pressed and when the box is checked. Some of the code includes: if(e.shiftKey && this.checked){ //loop over every check box checkboxes.forEach(checkbox =>{ if(checkbox === this || checkbox === lastChecked){ inBetween = !inBetween; console.log('staring to check them inbetween'); }

Link to Lab 22: In this Lab, we experimented with different ways to change the text as well as different console elements. The front text starts off as a simple white text, but once the user clicks on the text, it changes to this big green text. That is the only aspect of the lab that can be experienced on the surface and can be done with a simple function by changing the style of the text. An example would be since the element is a paragraph tag, the code would look like p.style.color = "#BADA55". To experience the other part of the lab, the console is where you need to go. In the console, there are various different console elements that include console.log, console.error, and console.error. Each one of these appears differently in the console and there is even a piece of code that can be used to change the CSS of the console text.

Link to Lab 21: Lab 21 was creating a canvas where the user can draw in multiple colors and stroke sizes. Most of the magic behind the scene was done using JavaScript which involved defining the canvas’ dimensions, the stroke style, and line width. Next was to make sure whenever the user holds the mouse down, it will draw and as you draw the color and stroke width will get alternate from small to big.

Link to Lab 20: In this lab, we created five flex panel with text in the middle that when clicked would expand and hidden text would appear on the top and bottom of the panel. The panels were just divs with three paragraph tags within. I really enjoyed this lab because it was very visually appealing and I can think of situations where I can use this to improve a webpage, such as my own portfolio. The JavaScript mainly dealt with toggle that would affect the flex aspect of the panels’ CSS, that would be triggered using an event listener that would listen for a click and transitioned.

Link to Lab 19 Similar to Lab 18, this lab isn’t noticeable from the front, all of the code affects the console log and contains two arrays, one with the teacher’s name and the year they started teaching. The second array contains comments and a corresponding student’s ID. The requirements to complete the labs were to answer yes or no questions in the console log. The questions were if someone was 19 years old and if everyone is over 19 years old.             With the ID and comments, we were assigned to find the comment that corresponds with a specific ID.  This lab was a way to find more efficient code instead of using if else statements also we learned a more efficient method of figuring out how to find an element based on a corresponding aspect. 

Link to Lab 18             This lab isn’t noticeable from the appearance, utilizing the JavaScript console log we were able to create ways to organize arrays. Because it was Women Empowering Month, the array we organized in various ways was a list of great women throughout history. The array contained details such as their first and last name, the year of their birth, the year of their death, and the reason they were well known. There was also another array containing a list of people, just anybody who came to mind.             The first step was to filter the list of women so only those born in the 1800s would appear, this was a simply JavaScript statement using .filter that could be done by stating to only show women whose birth year was between 1800 and 1900. The net activity was to give an array of women with their first and last name, next organize the women by ...