Web Client Programming Brian V.

            For the Final Portfolio I will try to work on it during the break a bit since I will already be working on the Spring Term project mainly and by doing so I can start a bit on the Portfolio. For the Portfolio I have to start by creating a theme for my website and creating a unique way to display my work to others creating a better experience for the user. After completing the Spring Term Project I would then turn my focus completely on the final Portfolio by adding my labs and projects from all 3 previous years of work.

            For the spring term project I plan on starting it on Monday April 22 during the break in order to get a head start. The first thing I plan on doing is researching the content I will implementing into the project as well as try to create a storyboard and wireframe for each page in the project in order to become more efficient in completing the project. Since the project is due a month from now if I can organize my time in doing it by working on it day by day like maybe creating a page everyday and then after doing so and implementing the basic content I can then update it by adding CSS as well JavaScript and jQuery to create a more interactive experience for the project. This is my plan for the Spring Term Project.

            Okay so this is actually something we started in February and was actually in extremely helpful in learning what its gonna be like growing up and having to pay bills like rent, interest, credit card bills, etc... When first introduced to the budget challenge I was actually pretty confused but as we continued to go through it by picking our vendors such as our rent, cell phone, etc.. I learned more about the decisions we will soon have to make in our lives which can influence our everyday life and how we spend our money. A main factor of the budget challenge was making sure you have enough money in order to pay the bills on their respective due date and because one mistake can cause penalties which would lead to more penalties and live you in debt which is where you don't want to be. I was able to keep track of my payments throughout the entirety of the challenge and paid all my bills in time except the latest rent bill but luckily I was able to...

            This lab was actually pretty different from the others and pretty interesting to do but without the video it would have definitely taken longer to do as we have never done something like this before. For this lab we needed to create basically a search box which would be used to search for in this case cities or states and to complete this a JSON  file was used which contained cities and states and a function was used which placed them into an array and then whatever what was typed into the input box would then be searched for in the array and another function was used to filter out what was being searched for.             I have to admit I still don't quite understand how to complete this on my own the only reason I was able to finish this was due to the video provided but I know if I continue to try to understand the code provided I can figure out how to do it on my own and apply it to my own work even. In t...

            For this lab we needed to create a list which would order the words in a created array by itself but disregards words such as "the", "an", "a", and "I". To start the lab an array needed to be created containing a list of anything whether it be shows, movies, bands, etc... After that a function was then created utilizing the strip attribute which would then allow use to chose the words which would not be read. Lastly all that was needed was to select the li tags using the querySelector and then the list was placed into order with the function into the HTML.             The skills gained from the lab will be really useful when it comes to sorting am assive amount of information instead of ordering something one by one with this code from the lab it can be done itself using the function. Someday I know that this code will be useful to me as I am pursuing a career in computer science and every piece of code I learn ha...

Taken from the CS Fair website             Today we the Web Design academy had the opportunity to go to the CS Fair held within the Armory Track. At first before the entire trip even started I was wondering what we might see at this event and I really wasn't prepared for what was actually there. Once we got to the location I was astonished to see how many people actually went and even how many companies, colleges, etc were there at the fair. The place was massive and there was so many things to do, people to talk to and I was dumbfounded in where to start. The first thing I did during the fair was try the different activities they had to offer including playing with lights, driving a robot which was created to complete in a competition and was built in around 30 days which was extremely impressive. After trying the activities I then moved on to the actual fair itself and had the opportunities to talk to companies such as Facebook, Accenture, and eve...

            Okay so like today got me a bit nervous because of the mock interview workshop scheduled but I knew that today's main goal was to help me better improve my interview skills to prepare me for the future job interviews I would have. When I first came into the classroom I saw just as last time that the chairs were arranged so that we would all be split up into groups so we can be interviewed by a teacher who volunteered to help. The teacher who came to my group was Mrs. Sakhno and I was relieved because she is someone I know as she taught me the previous year and the current year and I felt a bit better. When it was my turn to be interviewed I did surprisingly better than last time and surprised myself and i'm grateful for the feedback I received because it all helped me see that I need to improve in some areas when speaking towards the interviewer. She also taught me that when a job doesn't feel right it's okay to walk away from the interview and...

            The final topic for the Games 4 Change project revolves around the matter of endangered species. The group I was in created a quiz based app in which people will learn about what endangered species are and what we can do to help stop species from becoming extinct. The overall app is suppose to carry the hope that people will learn that in the world they live in there are animals going extinct and more and more are becoming vulnerable to extinction everyday. After the creation of the app I worked the website in which the app will be held on and one of my group members put 10 facts about endangered species so the user can learn more and more about them.              Working on the app and the website with my group was really good in understanding that the topic of endangered animals is really important. It was an interesting topic to focus on due to it being something that is truly affecting environments all...

            The 3rd topic for the Games 4 Change project revolves around Disrupting Age, Data shows currently that children who are 10 years old today will most likely live to be above 100. Therefore the app created for the project is to help the people who will theoretically live to be over 100 to have a healthy lifestyle and make sure that they will have good long lives. My group created a colorful design in order for the app to portray health as well as it covers important knowledge people should have when the grow up in the future. Such as things like what kind of food to eat, what relationships to have, what kind of mindset you should have, etc. Overall all of these factors are important to make sure the people of tomorrow live to have a long healthy life.             Creating this project was interesting as all the information that was put into the app I can utilize in my whole life so I myself can have a healthy lifest...

        So this time for the 2nd project for G4C instead of working in a group like the previous one I worked on this app by myself. The topic focused on was diversity, gender equity, and inclusion in the workplace. My idea for the app was to create a type of multiple choice game where 3 different scenarios for each part of the topic were explored and the users goal was to choose the correct choice which would improve the workplace whether it be by improving diversity, gender equity, or inclusion. The main objective was to get the user notified that there is such a thing as lack of diversity or inclusion in a workplace out there in the world and it is possible to be subjected to it but there are also ways to go against it and to improve the workplace for others and yourself this game will show you how you can do it whether be for a friend, employer, employee.              To complete the project I utilized App Lab on code.org and ...

            So for this project we had to create a game or website which would mainly focus on the topic of communities in 2050. For this project there isn't that much to talk about since this was completed bu handing in the same game or website my group created for the congressional app challenge. The idea for the app we created was to create a basically pocket bill of rights in which the user would be able to view their rights simply by opening up the app. The idea for the came from me and was inspired by one of the teachers in Info Tech Mr. Anthony. Mr. Anthony was complaining in class and pointing out indefinitely how not many people seem to know the rights that are there to protect which leads to negative consequences so that's how I came up with the idea since we are always on our phone why not have an app which can quickly be loaded and display the rights available to U.S citizens. My group submitted this towards the topic of 2050 because by then ev...

            This lab focused upon and was mainly displayed on the JavaScript Console which can be found in the developer tools. This lab introduced us to constants which are used to declare a variable but the variables cannot be reassigned. In the lab we created arrays within the const which held a list of important women throughout history due to it being women's history month it also contained the birth & death date of the person as well as the reason why they were considered important, another const held a list of people who inspired us or motivates us. Using these const we then created functions which would organize these list into order depending on things such as birth date, death date and their total age, even a list which organized the names alphabetically.              This lab overall is very useful as it gives us a new way to organize information and even within the JavaScript console which is important...

            This is the final lab this marking period and it was actually the funnest of them all as it was a whack a mole game displayed on web page so that anyone who comes can visit it and have fun playing with it. We created the whack a whole came by creating constants which held various amounts of data such as the mole, the score, etc. With the constants function were created which when the start button was clicked the mole would pop up in a transition like manner in a random hole each time because of the function and if clicked on time by the user a score would be added. There is no really objective to game except have fun and try to score the highest you can and of course have fun.             The skills gained from the lab are actually extremely useful and cool to have in our arsenal of code because with it we can add it to games by maybe making a clicker game or maybe utilizing it in a different way if desired. Ev...

            For this lab we needed to create a stopwatch of sorts which had pre-made buttons as well in case the user wanted to use them instead of typing in the time himself/herself but that is a option if the user wants to type it themselves. To complete the lab multiple constants were created in order to hold information such as the end time the start time as well as the input and pre-made button information. Using this information then functions were created gathering data such as the exact time now and as well as the countdown which countdowns directly on the web page second by second which is a really cool thing as you have a digital stopwatch on you website or web page. The lab relied heavily upon JavaScript as a bunch of data was taken from the page such as the time of the buttons as well as taken from the computer which is the time which is set upon it and with the data constants were made to hold the information and functions were made in order t...

            This lab is actually pretty similar to a previous lab we were tasked to do before lab 24 where we were tasked in creating buttons or sliders for a video we placed into the web page which would manipulate the video itself. Instead of creating buttons or sliders we created divs which were towards the side of the video and allow you to determine whether you want to speed up or slow down a video when you hover upon you simply select the speed in which you want the video to go in JavaScript was also added so when the div was hovered upon the colored div would follow where the mouse hovered upon which was a really cool effect to see. The overall code it took to complete the lab was mainly JavaScript as a function was needed in order to determine create an event so that when the div was hovered upon it would manipulate the video itself. The video I chose was best pranks from the T.V show the office.             The sk...

            For this lab we created a fun cool way to display information in a carousal like way and this actually got me really interesting as in all the labs we previously did I've never seen something like it but I wanted to know right away the code it took to create such a thing. To complete the lab divs were created and intertwined with each other in order to start off the lab. Soon after JavaScript and CSS were key factors in finishing the lab as with JavaScript event listeners were used to determine when the mouse clicks a div and or leaves it with this the effect was created which is actually really cool. CSS was used in order to style it the way you see fit maybe if you want it white and black you can do that if you want a rainbow you can do that also as well as adjust the height and width of the boxes.             The skills gained from the lab gives us a new way to organize information for the user to view the t...

            For this lab the objective was to create a nav bar with a special feature added to it which is when hovered over the elements a pop up would appear with information whether it be images or just more links to go to. Depending on the total amount information contained within the pop up will determine the size of it. In order to complete the lab we added constants which held the drop down  elements as well as the li tags of the nav bar. Then by creating a function for the drop down elements so that when hovered over they would appear will simply complete the lab objective. You can also manipulate the color of the drop down inside the CSS which would add I guess more pizzazz.             The skills gained from the lab are actually momentously useful as they give us the option to create a more interactive web page for the user to experience making them surely to remember it and maybe even come back to view it agai...

            For this lab we needed to select multiple divs which were located inside each other and when the divs were clicked a message would display on the JavaScript console which would say "three" for the outer div "two" for the middle div and "one" for the inner div as well as trigger an event when the button below is clicked which writes the text "Click" onto the console. We completed this lab by using the querySelectorAll code which selected all the divs and with it I created a function so that when the divs were clicked then within the console log there id would be displayed. For the button a simple event function was created which when clicked would displayed the desired message.             The skills gained from the lab are useful as we start implementing more pieces of information such as divs and other elements this gives us a way to identify ids or even classes within the console. Creating an event with the bu...

            For this lab we needed to create a sticky nav bar and add it to a webpage. A sticky nav bar is simply a nav bar which follows wherever the user goes on the page which is pretty convenient in order to navigate the page easier if it contains a lot of content. In order to complete the lab we needed to create a constant which would hold the nav bar as well as a function which when scrolled down the page the nav bar would then transform to a different type of way such as in the beginning it just sort a long rectangle with elements to navigate the page when you scroll more down then the nav bar will cover the top of the page and be bit bigger as well as the tex within the nav bar too.             Even though creating a fixed nav bar wasn't new to me since there is another way to do it using "Position: Fixed", even though this way is simpler the code gained from this lab allows us to manipulate the elements of the nav ba...

            For this lab we needed to create a translator on our webpage essentially. To work the translator all that needed to be done is to select the voice in whatever language which you want in then the pitch as well which would determine if the voice is low or so high that you can't hear, you are even given the option to increase the rate in which the translator speaks in meaning it can be tuned to talk really slow or really fast,  after this all that is left to type in what you want to say into the text box and then press the speak button and hear your computer translate your message. There is even a stop button added if you have heard enough or if you want to type in a different message. We completed this lab using constants that would give access to the buttons "Speak" and "Stop" as well as the sliders which control pitch and rate and even the text box. Using the speechSynthesis to allow the voice of the user to be heard as well as adding an...

            For this lab we basically created a highlighter which essentially follows you around the web page. I did this by surrounding the words which I wanted to be highlighted when hovered upon with a tags so that not every word is selected only the ones I want. Using JavaScript we created a trigger which is hovering over the tex which would then trigger the white background to follow the words.             Using the skills we gained from the lab we are able to highlight important words on a site and can even implement this to other things such as images. This can help create interesting effects onto the web page which would catch the eyes of people visiting the site and people will remember seeing it and be like "WOAH". I'm thinking about using the code onto my own portfolio to highlight links such as to my labs and projects and other work.

            For this lab we created basically a compass which can not only track what direction you may be heading but also how fast you're heading there. We completed this lab by first creating individual constants which each would hold the respective vector speed and direction. After creating the constants then the navigator.geolocation.watchPosition was added into the JavaScript in order to be able to keep track of the speed of the user as well as the directions in which the user was faced was tracked by arrow.style.transform=rotate($data.coords.heading)deg).             The code we used for this lab can be seen used in many things today such as fit-bits which tracks how many steps the user takes the speed in which they are going and other things. Learning this code is cool as it gives insight on how somethings use this code in order to function which is pretty interesting like you essentially have the code to make your ow...

            For this lab we created essentially a recorder of sorts which would record whatever the user says onto the microphone into the web page in the text box. We completed this lab by first creating a constant which would contain the p tag and then using the recognition element anything the user says would be placed inside the p tag recording anything which is said such as below "Hello" was recorded. Although this only works when previewed due to the host not being able to ask for permission to utilize the microphone this lab was overall cool as anything I said appeared onto the web page which I found interesting.             The skills gained from the lab can be easily used in any type of manner whether it be to record your thoughts, keep a journal, or even write a paper by simply speaking. This is something I see myself using at one point in the future whether it be for fun or for my portfolio its just something reall...

            For this lab we had to utilize the camera of the user whether it be on his laptop or his desktop the web page needed to ask access to use the camera and then the user can choose whether or not to apply a filter which is done by using the scroll bars. Unfortunately, this lab didn't work as intended due to the host not permitting the use of the camera therefore rendering the code pointless as it cannot be used in this server, also I wasn't able to complete the filter feature therefore no effects desired could be created. But overall the lab was completed by using a constant and the snap element so that when a picture was taken it would then be displayed upon the bottom of the page. The main function would be for the filter feature but I was not able to complete it as it got to complicated.             The skills gained from the lab can be used to create a more interactive experience for the user when visiting your p...

            This lab is something I might use myself as I spend most of my free time watching videos on YouTube and this can come in handy. So for this lab we needed to create a list in which there would be videos each with a different time and the total amount of time for all videos will be displayed on the console log. To do this the data-time attribute was added to the li tags and then using the querySelectorAll code all the data-time attributes were selected each containing a different amount of time for each individual video and it was placed inside a constant. Then after doing this separate constant were made for hours and minutes using this the total amount of hours and minutes would be calculated and then display upon the console log.             The code gained from the lab will most likely come in handy in future work whether it be towards ones own portfolio or a personal project the code can be used to make calcula...