This week I was given the go ahead to turn my python APA referencer into a website by the schools librarian. I got conformation that this may be something that could be distributed to other students. This gave me the opportunity to learn html+css, and start learning front-end JavaScript. Although this is not related to my IT classes, it is something I have been meaning to learn regardless. On Friday, I completed the html+css beginner course on Grok, which gave me a decent understanding of the concept. I learnt how to make crude headers, document structure, coloring, images, essentially all the basics. The only I had with the course was it’s directions, it was too explicit in coding instructions, meaning there was no need for problem solving, and no need to properly learn how, and what each function does. Despite this, on saturday I began work creating the homepage for the referencer.
I did not put much thought into the design, I went into it with the idea of simplicity. The main header displays the title of the tool with a blue background. In my opinion, this takes away from the vast whites, and adds just enough amount of colour. The subheader is a crude version of the header in this blog, as I liked the fonts and layout. The subheader contains the buttons necessary for using the tool, and is sticky so the user can access it at all times. These are the only design decisions I have made so far, and I am quite happy with the outcome, the website looks quite clean. The next step in my process was scripting.
I did not have much opportunity to make scripts, so I decided to lay the groundwork for further scripting. I implemented a script to add blank references to a homepage, and then learnt JS cookies to hold the number, and contents of these references. Adding the references was simple, using a for loop to repeatedly append a new <article> to the document body. The article currently contains text saying “(insert reference here)”, but is styled properly with large, rounded surrounding boxes. The cookies were harder, first my browser would not store them (I had to switch to localhost), and then I had to write a function to get a cookie. I now have a system that can call for the cookie of a specific reference, and insert it properly into the homepage, I just have to create the referencing logic. The tool is most likely going to be hosted on this website.