[Final Project CodePen: APA 7 Website Citation Generator](https://codepen.io/src2193/pen/XWegede)

# MSTU5003 Fall 2021 - Final Project
This was a programing intensive project for me that presented many challenges that required some creative solutioning so that I could continue to progress. I decided to create a reference certification generator and had initially planned to include several different formats, but the extensive coding required forced me to focus on creating the working elements for a website reference generator specific to APA 7.

I had three primary goals when I started working on this project:

1. Create something that I would actually use.
2. Build a complete solution for the task I targeted.
3. Challenge myself to try to build something just outside of my capabilities.

When I am conducting research or building a reference list for a paper, properly formatting website references always had me searching online for the formatting rules. I thought that having a generator handy would be useful. The project seemed straightforward, but when I built out my blueprint for the generator, it was clearly beyond my current capabilities.

I wanted a very simple design, but it had to include conditional fields for the various formatting requirements and I also wanted to be able to copy the resulting citation so it could be easily pasted into a word document. From the beginning, I faced signifigant challenges.

As for the application itself, there are three options to choose from to begin the generation process. Users will select Author, Group, or No Author depending upon the type of website they are referencing.


---
A specific set of fields will display for the user to fill out. The form contains both a Submit and a Reset button. I had to include a seperate Submit button that would generate with each dropdown selection because they each pointed to a different javascript function I did not know how to program just one button to conditionally go to each of the different functions.

Once the user has filled in the fields and clicked the Submit button, the formatted reference will appear below the form.


---
The user can then click the Copy button to copy the formatted citation to the clipboard. The citation is programmed to output in Times New Roman as it is the standard font for academic papers.

I was able to program both the conditional appearance of the fields based upon the option selected in the drop-down as well as display the correct order of elements and formatting of the citations.The copy feature also works as expected. This took a tremendous amout of trial-and-error as well as research to find just the right code snippits I could edit and use in my code. But this resulted in numerous, often frustrating stops and starts and dead ends. It seemed like my solution to one problem was the cause of another. These struggles I documented in the commenting of my CodePen and can be seen in the code itself. For example, I continued to use the id=textarea in several instances even though I had to abandon that approach and used an output element instead.

I will say that one of the disadvantages of my eventual solution was around the conditional formatting. I had to figure out how to hide all the fields until they were called (using a nifty line of jQuery code -- $("div").hide();). The problem is that anything else that I had in a div was hidden as well with no way to call it up. I could add an exception element to the jQuery line, but it wouldn't work with nested divs. So anything that was not conditional had to come out of its div tag.

This limited my ability to style the form and I had to get creative spacing and styling individual elements. For the most part I am satisfied with how the project turned out, and I believe it has greatly extended my understanding of JavaScript and how it works. It was a great challenge and I am glad I was able to successfully realize my initial vision.

**This was a great experience. Michael and Steve - thank you for running a welcoming and encouraging class this semester.