In our first lab, our assignment is to create to this entire website and its first four webpages. We can only use HTML and CSS. The webpages we have to build are a home page, labs page, a page for personal information, and a resume page. The home page has to have a header, footer, and a navigation bar. The labs page needs to have a layout for us to link our labs throughout the semester. We also have to create a folder for the images that we use.

I have used some HTML and CSS in the past, but this assignment is the most I've used both of them. Some of the techniques I employed in this lab include using floats to style the home page, adding multiple links throughout the project, adding several images to a couple pages, and creating a table in HTML and styling it with CSS in the labs page. I've never styled a table with CSS before, so I watched this video to learn how.

When I first started this assignment, I could not figure out how to format the layouts of the pages. I watched a few videos and still had trouble understading. I thought the lab was tedious then, but Professor Pascucci realized that he didn't finish teaching us CSS layout and finished the lecutre. His examples during class made the process much easier to understand and I managed to finsih the lab within a few hours after.

In this assignment, we had two tasks to complete. The first task was to create a single responsive web page that was comprised of four separate virutal pages and a navigation bar. The first page was the had the header and introductory text to the site's topic. The second page was composed of three different sections. Each section had a title, an image with a caption, and some text. The next page had a form made of ten questions using various html controls. The final page of site was a gallery of six images. In desktop mode, there are two rows of three images. In mobile form, the images all stack on top. Second part of the assignment required me to modify my original site and make all the pages responsive.

This assignment made me search for lots of example code and watch multiple videos to understand many different elements of HTML and CSS. From this lab, I learned how to implement features to make a web page and its elements responsive. I also learned how to create a form in html and how each type of control works and is created. I can now additionally make image galleries that can stack in smaller screen sizes.

This lab was long. There was not only a lot of time I had to invest into learning the different techniques and coding but also a lot of time spent actually coding it and playing with CSS to create the pages I wanted. The second part of but also a lot of time spent actually coding it and playing with CSS to create the pages I wanted. The second part of the assignment, the modification of the main site, took the longest because I had to basically redo all the pages so that I could make them better suited for responsiveness. Despite the tediousness, the separate single web page was fun to make and it was intersting to see that I could make forms within HTML and actually collect data with it.

In this lab, we had to create a pet adoption site. The site had to let the user choose between three categories of animals: birds, cats, and dogs. When the user clicks on the search button, they should be able to see the animals up for adoption. Each animal came with an image, description, and a button for adoption. The user can see which animals they chose to adopt at the bottom section of the page. This site was created with HTML, CSS, and JS.

This site used JavaScript to implement the buttons and show the animals. I watched a lot of videos and looked at some example sites to help me understand the language better. I created many functions to cut down on the amount of code as many events were repeated numerous times throughout the program. I have a better grasp of JS now that I've spent several hours coding it within this lab.

JavaScript is a difficult language to understand at first after spending years coding in languages like C# and Java. I had many errors throughout the programming of this site, and many times JS would not tell me the issue, so I had to look through all my code and try to find the problem. I watched a lot of videos to help me understand this language better. I think I have a better understanding of the language now, especially when it comes to creating functions and attaching events.

In this lab, we had to create an upgraded version of the previous lab's pet adoption site. Alongside the home page for the pet site, there is now a page for the user to add pets to the site, a page to let the user modify the data of the pets or delete them, and a donation page for the user to add donations to the site. The home page is identical to the previous lab in that it allows the user to view pets of whatever type they want.

This site, like the previous lab, uses JavaScript as the main source of code. Alongside the advanced JS, the site also implements some JQuery. Local storage amd JSON are also used to keep record of the pets on the site as well as the pets that the user chose to adopt. JavaScript is used in every page of the site. Unlike the previous lab, there is now a class to create pet objects. Many functions are implemented and attached to the numerous buttons and textboxes for data input. This site additionally validates the data that the user inputs. Textboxes will check for empty inputs and whether the user has entered a number. When adding the brithdate of animals, the user is unable to choose future dates.

This lab has proven to be by far the most time consuming assignment in the class. My total lines of JavaScript in my site is about 1000. The home page was not too difficult to create as most of it is from the previous lab. The add page and the donations page were also not too difficult to create and they had the least code per page. The modification page, however, went through many trials and errors. This page took the most amount of time to figure out. The remove operation was not too difficult to deal with, but the modification option took much time to create a solution for. I did not think that using JS was as annoying as last lab because I now have lots of experience with it and can find my coding errors faster. Overall, I honestly am pretty proud of the site that I ultimately created. The use of local storage makes it behave like a normal site that I use everyday.

For out final lab, we had to create a web API that used our Temple SQL server database to allow the user to interact with pet objects. In this single web page, the user can add a new pet to the database and all its information. They can also update the information of a pet given the ID of the pet. They can also adopt a pet with its ID and add their name, which will add the customer into a separate customer database. The user will also be able to delete the pet. For display options, the user can view all pets, view a single pet given the ID of the pet, view the pets of a specific animal type, and view pets that are of a specific user-given age.

This site is comprised of a mixture of languages. The web page's code consists of JavaScript, JQuery, and AJAX. The JQuery was used to code the functions of buttons. AJAX is used to create requests to the API to make changes to the database or retreive data from it. The API portion of the solution uses C# to create the code. The methods used in this lab include POST, PUT, DELETE, and GET. Within these functions, SQL statements are created to implement changes to the databases.

This lab proved to be the hardest lab in the entire semester. The hardest part of the assignment was understanding the configuration of the solution itself. Installing NuGet packages and creating the configuration code in the Startup.cs was difficult. However, the API did not prove to be too difficult. After spending multiple hours reading through slides and watching videos, building the API did not take too long. While I did run into mutltiple errors, I managed to solve them and was ultimately able to connect the web page to it. Overall, this lab took a long time to finish, but I did enjoy being able to create a project that allows users to manipulate data.

For our project, my partner, Jason Huang, and I chose to research the framework Blazor. The aspects of Blazor that enticed us were that it imlemented the ASP.NET framework, a tool we are familar with, and that it uses C#, a language we both enjoy, to write code for web pages instead of JavaScript. For our application, we decided to create a video game store that, using features of Blazor, allows the user to add/edit/remove game products to their cart and add/edit/remove reviews of games to the site.

In our Blazor application, we have four pages. The first page is our home page and serves as a simple intro to the user. The second page is the video game list. In this page, using a class for games, the page instantiates multiple game objects. Each game is displayed with their details and allows the user to modify their quantity and platform fields with data binded HTML input elements. Next to each game, there is a button that lets the user add the product to their cart using the local storage. There is also a search bar at the top that lets the user search by genre. The third page is the review page. Here, the user can add a review to the page with a HTML form. For each review, the user can either delete the review or modify its data. In the final page, the cart, the page automatically accesses the local storage and retrieves the game products. The page displays each product and its details including the modified quantity and platform. Each game also has a button to delete the product from the page and the local storage.

Overall, this project has been a great opportunity to learn a new framework. Blazor was no doubt a challenge to learn. Many hours were spent watching videos and reading tutorials on how aspects of Blazor worked and how to use its main features, specifically Razor components and the binding of HTML elements to C# code. One of the biggest challenges of using Blazor was that it did not come with built in tools for using the local storage of a browser. We had to learn that we needed to install a separate package for Blazor local storage functions and inject JSON into our pages for us to actually store and retrieve data in the local storage. While learning Blazor was difficult, our final product was a success and a project I am satisfied with. Our pages look great and every function works properly. All of our issues with local storage were solved, and the final website is a fully functional application.