The Best Class Ever

Making a SMART goal on the spot is kind of difficult, especially since I'm thinking about what I want to achieve and obtain further down my life. There are multiple goals that I have in mind, however, while filling out this sheet, I was only thinking about my future, so these goals refer to my education and the education I wish to pursue further on. I came up with a short, middle and long term goal that represents my future thought process. My short term goal was to pass high school while having high grades for my classes on my transcript like 95 and above. My middle-term goal was to excel in college, which means I would do great in college and not give in to the pressure that it would apply to me. My long-term goal is to find a career in the gaming industry for my future job. This could be either becoming a game developer or making money off of playing them competitively (esports). 

 Within this workshop, I updated my resume. I added some of the past achievements that I have obtained including being a finalist for Games4Change and also winning the most entertaining award for emoticon. I also added two AP classes that I am currently taking. These classes are AP Calculus AB and AP Literature. Below is a screenshot of my resume that is updated to present 01/14/2020.

Lab #12 involved using json in order to display videos whenever you click on one of the images or the text as well as displaying the title of the video at the top and the amount of views it has, along with the author of the video. To complete this task, I added a div between the videos list div and the video watcher div. Within this div, I added a class that would represent the data of the video that would be shown when the video is clicked on to display. I linked each heading with an id which would contain the data associated with the name. All of the data was stored in the JavaScript under variables which allowed for them to be called anytime. Web designers would need to know how to do this in order to store their data and keep it organized. They can associate their data with a specific element within their page to display it like the headings in my page. In addition, json can be used to keep a database and you can also use that to make sure it is clean, organized and also not...

Within this lab, I was instructed to create a webpage that uses jQuery's .load method in order to load text from an external text file and display it on the webpage. This would involve AJAX which is imbedded inside of jQuery which I linked to the page as well as the external text file. In order to accomplish the completion of this lab, I created an external text file and included it in my files. To make sure this lab functioned properly, I linked the jQuery library and used the .load method within jQuery to obtain my text file and embed it into the document. In other words, the jQuery uses the .load method from AJAX to load my text file and then replace the div within my document. That's why when you press the button, the text that says it is to be modified by AJAX, will be changed into this text. In addition, everything that you are reading once you click the external text button is on the external text file.  Web designers could find this skill to be useful bec...

In this lab, I was given all of the code for the HTML, CSS, and jQuery for the page. My objective was to use that jQuery and a plugin called Cycle2 in order to manipulate the 3 sub-content holders on the bottom of the page to be animated into a slideshow. The left slide was supposed to be a vertical transition, the middle one was to be a horizontal transition and the last slide would be a fade-in/out. In order to accomplish the task, I first linked the HTML webpage with the jQuery file and the cycle2 plugin associated with jQuery. After linking the 2, I went into my JavaScript file and typed out a jQuery to create cycles for the transitioning of 'scrollVert' for the first one, and the 'fade' for the last one. I was unable to create the 'scrollHorz' transition within the JavaScript and it wasn't working for me. However, I was able to bypass the problem by going directly into the div of the second section and adding the special class made by the plugin ...

Lab #43 is titled, "Whack A Mole". As the title indicates, I created a webpage that allows you to play the game, Whack A Mole. In order to play the game, you first press the start button. The moles are going to start coming out one by one, and pretty fast too. Your objective is to click on the moles before they enter back their hole. Your score is calculated next to the "Whack-a-mole!" text. Once the game is over and the moles stop spawning, you can click start again to reset your score and have another shot at it. Creating this game had a lot of elements applied to it. Since there is so much to it, I will only be going over the important parts that make the website function properly. Within the HTML document, I created many divs (6) in order to represent holes where the moles would be hiding in and would pop out from. I then added another div within each div hole which would consist of a mole. So technically, all of the holes have a mole within it, it's ju...

Lab #42, consists of a webpage that has a timer. That's it. It's literally 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. (Update from the screenshot: I changed the timer to the color black so it is easier to see, and the same goes for the time in which the timer will go off at). To create a timer, I used multiple elements in JavaScript to get functions like real-time and using time functions to calculate the amount of time set, time that is left, and the time when the timer will actually go off. The timer is based on the real-time in which the functions wouldn't work if it couldn't get the current date and time. There are also functions that translate the minutes into hours or seconds depending on the amount entered into the timer. The estimated time the timer will go off is also acc...

For this lab, I had created a website that allowed you to control a video's playback video speed. I added a video via the video tag in HTML and then added a bar that you hover your mouse over in order to change the playback speed. It can either slow it down or make it faster. To create the playback speed feature, I added a speed bar as a div. To create the functionality for it, I used JavaScript by setting the speed, bar and the 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. Also the JavaScript contains the event listener that checks if your mouse if over the bar, and it changes the playback speed depending on the position of your mouse on that bar. Web designers can use this feature to allow users more control of your website. For example, websites like YouTube have a playback speed modifier that allows you to make a video play slower or faster. This can also be u...

Lab #40 was titled, "Click and Drag". This title indicates that this lab will be demonstrating a click and drag characteristic on a website. Within this website, you can drag a bunch of numbered tabs to the left or right to navigate through them. The website is shown in the screenshot below. To create the functionality on this website, I first created a bunch of div items in the HTML document, exactly 25 of them. 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. However, in order for it to register, you must have your mouse held down because that is what the event listener is waiting for, to function this properly. When the JavaScript hears a 'mouseup' it won't allow you to drag and nothing wil...

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. Below is the screenshot, you can see me hovering over the "about me" part on the navigation and it displays a picture of me and a short bio. 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. The JavaScript has an event listener that checks to see if you're hovering over any of the navigation tabs. This means you don't have to click on it for the dropdown to be revealed. Web designers would be able to use this feature to show a sense of professionalism when creating their websites. It can keep t...

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. (The colors in the screenshot might have been changed on the actual website). To make this feature function properly was very simple. I created 3 divs in my HTML document and then created a CSS for each one and gave them their own color. The same applies to the one-button I created. To make the console logs, I used JavaScript to select the divs and when you click a div, it will console.log the name of that div in terms of class. For example, the biggest box is "one", the second biggest is "two" and the smallest div is named "three". The event listener checks for when you click any of the divs. When ...

The title of this lab is "Sticky Nav". As the name indicates, 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. This list was inside of a <nav> tag which is tagged with an id called "main". 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, but it is worth mentioning because the feature wouldn't function properly without it. The JavaScript consisted of a query selector that got the data of the nav tag and then updates the location of the navbar to the top of the page as you scroll to the bottom of the page. When you scroll up, the navigation bar gets ...

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 JavaScript contains storage for whatever is typed in the box, which is then translated by the voice and logs what the bot will say. Once the text is analyzed, it will choose whichever voice you have selected and then plays the text via the corresponding bot. Web designers might want to use this feature on a dictionary page ...

Lab #35 is titled "Follow Along Link Highlighter". This lab was about creating a website that allowed users to hover out text and it becomes highlighted. The entire text doesn't highlight, but only certain words will give a highlight effect when hovered over. They can be identified by the turquoise background, and they are highlighted with a white background. To function this website, I used JavaScript to create the highlight effect on all of the hyperlinks on the website. The hyperlinks don't really go anywhere but since they are interactable, it made it easier to create the highlight effect on it. When you hover over any of the hyperlinks (<a> tags), it would create a span tag that highlights that text and then moves from one text to the other when you move your mouse to another hyperlink. Web designers may want to use this in news articles or other websites that contain information. Specifically, this feature can be used to highlight the main points of...

Lab #34, is titled "Geolocation". As indicated by the title, it is a website that tracks your location if you give the website permission to. Of course, it is blocked on many networks due to it being insecure. The information that it gathers is the longitude and latitude of your location and there is also a speedometer that tracks how fast someone is moving. Of course, a feature to track speed shouldn't be used on a desktop or laptop unless your running with it, which if you want to, then go ahead. It is recommended to try that on a mobile device, however, tech teach doesn't load on mobile devices. On the screenshot below, I used the preview in my Dreamweaver to try and simulate how the website works. If you load the page and successfully allow it access to your location, it will allow you to check the console and see your latitude and your longitude based on that location. Due to the preview being in my Dreamweaver, it shows no value for the speedometer, which change...

In lab #33, I create a website that (if you allow it access to your microphone), it will type whatever you are saying in your microphone. I used my in-browser preview to get it working since techteach.us isn't trusted on my laptop. Here is a screenshot of what it would look like when you say something. To add the functionality for this lab, I used mainly JavaScript. In the HTML I added a div in a class that I modified with CSS to make it look like looseleaf. The javascript I used consisted of commands revolving around the window.SpeechRecognition commands and setting variables that would track anything you say into your microphone. Also, the JavaScript would document.createElement('p'); which would a new paragraph each time you talk which would then contain everything you say if it is clear to the speech recognition. Web designers would be able to allow to make web-apps that catch voice recognition to be useful when trying to make typing easier. For example, for a me...

Lab #9 was another lab where I was given all of the code but needed to add something in order to make it function differently. In this case, I was supposed to make a carousel for some images which is basically a slide show that you can interact with to scroll to the next set of images. The screenshot above is not the whole website but just the aspect that I added to the website aka the carousel. The image shows that I added two ways to scroll through the top news subjects. You could either use the arrows on the top right to scroll or use the three circles on the bottom to navigate. The things I added in order to create this functioning carousel lies within mainly the JavaScript. The HTML aspect of the page consists of divs containing divs that would hold the data (images and titles). I added classes to the divs wrapping three of the images and text so they would be in a set. I then added JavaScript that would enable when a user clicks the buttons on the page to navigate and modify...

Within this lab, I was given a full website that had some troubleshooting to do. In order to troubleshoot the website, I had to add quotes to the page which would change each time the page was loaded. To complete the troubleshooting, I added JavaScript to make the functionality possible. What I did was create an array that contained the quotes, then each time you refresh the page, an RnG would calculate a random number to determine which of the quotes to display. Web designers would want to know how to do this in order to make their websites more displayable. It would also stand out from other websites that just put up information and doesn't do more than that.

Lab #32 is titled, "Webcam Fun". Within this lab, I utilized the webcam on a webpage that you can use to take pictures using it. If you have allowed access to your webcam, you will be able to see yourself and take pictures by clicking the "Take Photo" button. As you can see in the screenshot above, I took many pictures of nothing because my webcam wasn't enabled on my laptop. The functioning of this webpage lies within the JavaScript. First off, my HTML consists of a div layout for where the photos will be displayed as well as the controls to take the picture. In the JavaScript, it will obtain the video feed broadcasting in your webcam and then create a canvas of that moment, resulting in a picture of you the moment you click the "take photo" button. Web designers would find this skill useful in case they are making a web app that would allow users an alternative to their default camera app. This can also be used to make modifications that defau...

Lab #31, titled "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. The website doesn't really show much, because most of it is on the console. If you inspect element my webpage, you can see how long each said video is, and in console, the total time for all the videos together is displayed. 4:58:58 is the time added up for all of the 'videos' on my webpage. I added them all using JavaScript functions that used jQuery to select all of the time nodes of the videos to convert them into seconds, minutes and hours. This then made the three different numbers that display in the console, which is the total amount of time all the videos are together in hour:minute:seconds format. Web designers can use these functions to estimate watch time for multiple videos on a website. For example, you can own a streaming website and calculated watch time based on the playlists that the per...

This lab was titled, "Sort Without Articles". This lab basically 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. A web designer might want to know how to sort out a list of items and exclude some terms like "the" or "a" in order to keep consistency within their data. This can be useful as to staying organized and so their website doesn't become a mess of unorganized information. Even using console to organize data is a good method because you can always check even after you update your page.

Lab #29 is titled, "Mouse Move Shadow". As the name implies, I made it to where on a webpage, if I move my mouse over some text, it will make different color shadows. I demonstrate this in the screenshot below... As you can see, when I hover my mouse over the text, it becomes illuminated in different colors and goes in different directions. To do this, I used jQuery to select the text I wanted to hover over to do the effect, then I created a shadow function that allowed for different shadows of the text to appear. Turning this into a mouseover effect, I was able to change the direction of the shadows as I moved my mouse over it and then into different colors. Web designers would want to know how to do this to make their webpage eye-popping. This will allow them to catch the attention of others very easily as this animation really stands out. Depending on where they use it, web designers can easily create astonishing animations with this to promote their website or a pr...

Lab #28 is titled "Local Storage". In this lab, I created local storage that allows you to input data that will stay in your browser until you clear your cookies. In my case, I made a to-do list which you can type in an activity name, press "+ Add Item" and it will store it on the list. In order to create this list, I used a form to keep the items together when they were to be added, and also input so that the user can type their activity they would like to save on the list. In the CSS, I used formatting to keep the list in the form while also keeping the multiple layers of the form intact. Lastly, I used JavaScript functions to allow users to push items to the list, while also adding a function to interact and check off the activity that has been completed. A web designer might want to use local storage items to create unique apps. Some of these apps may be shopping lists, to-do lists, etc. This basically means that web designers can allow others to easily k...

Lab #27 is titled "JavaScript References". In this lab, there is really no HTML or CSS to create anything. JavaScript is the only language used in this lab. Console may not really speak accurately, but in this lab, I learned to use a copy instead of an array reference when trying to rewrite an array if needed. With a copy, you can just update it and the original array stays untouched. This also applies to objects which can also be copied instead of referencing it. Check the JavaScript within my webpage. Web designers can use copies instead of references for both arrays and objects so they don't cause any problems within their code that modifies the original array/object in any way, shape or form. It can allow for them to be more secure and safe with their own data.

Lab #26 is titled "Slide and Scroll". Within this lab, I created images of myself that slide onto the screen when you scroll down to it. I can't really show the animation in a screenshot but here is the page. The sliding animation is mainly JavaScript but there other things I want to mention within the HTML and CSS. In my HTML, I created the image tags and linked them with classes that identified what kind of animation they would do before I made it in JavaScript. The CSS on this webpage is to set the initial position of the image and set it up for the animation. For the JavaScript, I created a function that set the animations for the images by checking for the position of the images and when you scroll to a certain point, they would appear in a fade-in animation, and when scrolling away from the image it would fade out. Web designers would want to know how to do this in order to Make their webpages more styled with animated images. They can use this technique to c...

Lab #25 was titled, "Key Sequence Detection". In this lab, I used JavaScript to track every key that has been pressed on your keyboard with this webpage open. You can check it via console. As you can see in the screenshot above, I attempt to type the entire alphabet which I end up doing but it goes all the way down in console. You can see how the progression and sequence of the keys is stored in the console as I start with "a" and move forward. In order to do this, I used JavaScript that stored all the keys pressed in an array and then logged it. That's pretty much it. Web Designers could use this to track the user's response for interactive pages including games, etc. This could also be used to unlock some kind of secret on a page after doing a certain combination. Don't believe me? Try typing the word "lord" on my page and read what happens on the console.

The name of this lab was "Custom Video Player". Within this lab, I used JavaScript, CSS, and HTML to create a custom video player. As for the video used in the demonstration, I was at comic-con and one of my friends wanted to record me unsheathing my sword. In the end, it didn't really turn out the way we planned... ANYWAYS DON'T WORRY ABOU THAT! It's just a demonstration that the video player controls work. In order to create this beauty of a video player, I used many divs that had classes related to what their function was, like the player itself, player controls, player button, etc. I also used input sliders for the sounds and speed of the video. The CSS on the webpage was made to center the video and adjust it so that it was displayed as flex and wouldn't interfere with other elements on the page, like my heading. The main part was the JavaScript which added the functionality to all of these controls. I created functions for toggling the play and paus...

Lab #23 was titled "Hold Shift and Check Checkbox". Literally, the point of this lab is to allow you to click the first checkbox and then hold shift, click the last checkbox and it will select all of the checkboxes. Why is this even a lab? Seriously, there isn't much to explain. This lab was really focused on being able to check multiple boxes at once by holding shift and skipping over the others. Anyways, I began this lab by creating many divs that help an input type checkbox and a paragraph tag to say something near the checkbox. Within my CSS, I just made the layout of the divs with the checkboxes so it looked organized. In my JavaScript, I used a selector all which was bound with an if statement to check if you were holding shift. If you were holding shift and clicked over a few checkboxes, it would allow you to check them all with one click. Web designers could probably use this technique to allow answering on surveys more easier. If all of the above applies t...

The name of this lab is "Dev Tool Domination". As stated by the lab named, this lab involves using dev tools which exist in console. There are many things that take place in the console within this lab. It may not all show in the console due to the console.clear command that runs a few times but I will explain all of the things that were inputted in the console. Within the console, many commands are run with JavaScript into the console that can be done with dev tools as well. A simple console.log can say anything in chat like hello, which is done in the lab but not shown (inspect my JavaScript within my HTML to see it). Also, a warning message can be ran through the console that can display a warning of your choosing, in my case it was "WATCH OUT!!!". I also run a console.error message that says "Oof!". In my JavaScript, I also have a console.info message that says, "Brandon why are you up at 12 AM doing labs? Go to sleep! You need it!". The...

Lab #21 is titled "Fun With HTML5 Canvas". In this lab, I create a canvas on a webpage that users can draw on using their mouse by holding left-click or right-click and moving their mouse on the screen. The screenshot below is an example of me drawing "Hello !!!" upon the canvas. To create this canvas, I used HTML, little CSS, and JavaScript. The HTML on my page consisted of using the <canvas> tag with a set width and height to cover a good portion of the page as well as an id called "draw". In my JavaScript, I used a selector to focus on the canvas in my HTML and then set the stroke style to change when you reach a certain point on the page. Notice how the left of the page is colored red and it flows to yellow, then green, to blue, and so on. Also, the modifications of the stroke change based on the location of your mouse on the page as well, like the line type, width, hue, etc. Web designers would want to know how to do this as it allows ...

Lab #20 is titled "Array Cardio Day 2" and is a continuation from the first day of this lab. This is another lab that has really no HTML to talk about but everything lies within the JavaScript console. I'm given data yet again and it happens to be people's named and a year they're born. The first thing I do is check whether at least one person is 19 years of age, which is returned by the console. Next, I try to find out whether everyone is 19, which turns out to be false. Then, I try to find the comment associated with the ID 823423, and I must delete it. In order to delete it, I used comments.splice(index, 1); which removes it. Wanting to moderate data should always be on a web designer's mind, considering their page won't always stay the same. The data they hold on their page should always be monitored and checked for errors. If they do occur, then they can just splice it out by searching it out and then removing it. They can also try to find out ...

Lab #19 is titled "Type Ahead". This lab consists of creating a search bar that allows you to find the population of any city or state in the United States. In the screenshot below, you can see I typed in New York and got a bunch of suggestions as well as population numbers. I highlighted the population number of New York as a demonstration that the search bar works. To make this search bar function, I used some HTML, a lot of JavaScript and a handful of CSS. The only thing in my HTML document itself was a form that I gave it a class named "search-form". I also added an input with it so that users could type in it because it wouldn't be a search bar if they couldn't search anything. Within my CSS, I set up the format for what the results would look like after a user has typed something. Lastly, the JavaScript had been linked to data on the population of every city and state in the United States, so all of the data given on this page is based on that dat...

Lab #18.2 is titled "Flex Panel Gallery". In this lab, I had created 5 panels in HTML, and then I used JavaScript and CSS to turn them into images that expand in more text if you click on it. For instance, if you click on "BEEN", it will expand into "I'VE BEEN GRINDING". This signifies that I am doing this lab late at night and I want to sleep but I'm dedicated to my work so I'll get it done, indicating the "grind". Anyways, if you click on any of the panels, they expand into more text. I'll leave you to explore it. To create these functioning panels, I used a combination of HTML, CSS, and JavaScript. In my HTML, I stored all of the panels in a div with the class name "panels" which I then made the 5 individual panels inside of it. Using CSS, I formatted the panel's spacing the way I wanted to, in order to fit the page of course. There were other properties I edited here like the text color and the images w...

Lab #18 is titled "Array Cardio Day 1". This lab has literally little to no HTML within it. Everything for this lab is in the console. Within this lab, I take a set of data of inventors and then organize it into arrays. The first thing I do with the received data is to filter the list of inventors for those who were born in the 1500's. Next, I get an array of the inventor's first and last names. After that, I sort the inventors by birthdate, oldest to youngest. Then, I calculate how many years all the inventors had lived. Using that data, I sort the inventors by the years lived. Finishing up with the inventor data, I move on to create a list of Boulevards in Paris that contain 'de' anywhere in the name. Moving back to the inventor data, I sort the people in my data alphabetically by last name. I then receive data about transportation. Lastly, I sum up the instances of each of the data of cars, trucks, bikes, walks, vans, and pogo sticks. This is literally th...

Lab #17 was titled "Rock Paper Scissors". As the title implies, this webpage will not be for only display but you can play rock paper scissors with a CPU opponent (computer). This lab had no instructions on how to actually complete this task, so I put it into my own hands to make an interactive JavaScript rock paper scissors game that allows you to pick one of the three and get a result based on what the computer threw. In order to complete this lab, I had used a lot of JavaScript and little to no CSS. In my HTML, I had created three buttons that would allow for the user to select either rock, paper or scissors. Upon clicking the button, the javascript to run a long function executes. This function consists of using a random number generator to roll for the cpu while also producing the results and displays what you and the cpu threw. This function also compares both your throw and the cpu's throw to see who won and then displays it in the middle. A web designer wou...

Lab #16 was titled "CSS Variables". What this implies is that within this webpage, you will be able to modify the values of CSS on a page like the spacing, blur and base color of an element. In this lab, you can experiment with these properties on an image. In this lab, there are multiple properties you can modify on the image. You can use the sliders to adjust the spacing of the image (revealing more of the colored background), blurriness of the image, and the color of the base (background). In the screenshot above of my website, I clicked to modify the base color of the background and a color palette opened up. This demonstrates that you can really make the color of the base anything you want from RGB to hexadecimal.  In order to create this page, in my HTML I had put many labels and inputs to collect user interaction data. The inputs include the sliders which work with the spacing and blurriness. As for the color input, I had kept a JavaScript variable as the color ...

Lab #15 was called "Clock + Drums". In this lab, I created a website that allowed the user to play sound effects in a drum-kit using the keys on their keyboard (A, S, D, F, G, H, J, K, and L). On this page, the user can also see a clock made using javascript that keeps track of the actual time (realtime updates). In order to successfully create these two mechanics within one page, it required much CSS and lots of JavaScript. To explain the drums briefly, in the HTML, I stored different drum audio (the sound effects) in each key that was associated with it. Then in the JavaScript, I had created the function that would play the audio file that was associated with that key. Moving on to the clock, there was more CSS and JavaScript to it then HTML. In the HTML aspect of the page, I had created many divs to store properties like the clock itself, the clock's face, hour hand, second hand, and minute hand. In addition, I used CSS to shape the div into a circle by giving ...

Lab #7 was titled "Simple Accordion". Basically, within this lab, I had created 10 questions based on a subject of choice. The subject I chose was AP Computer Science Principles. Within this lab, I had implemented my 10 questions on a webpage and then put the answers hidden in the document. Then, using jQuery I created a feature where if you hover over the question, it will reveal the corresponding answer, which would then go away if you move your mouse to another question, revealing that identical answer.  In the screenshot above, you can see that I am hovering over the question, "What is a bit?" and the answer is revealed under it which states, "A bit is a single unit of information in a computer, typically represented as a 0 or 1". In the HTML part of the document, I had created one <dl> tag which holds all of the questions and answers. The <dt> tags nested within this tag held all of the questions while the <dd> tags held the ...