Trivia Game — Rails/JS
For my Rails / Javascript Portfolio Project I decided to make a trivia game application. Where users can choose a category and answer questions about that category. I set up my backend and front end in separate repositories, the back end located at https://github.com/Wendyv510/trivia-backend-.git , and the front end located at https://github.com/Wendyv510/trivia-frontend.git .
In the backend I have my models of Category and Question. The associations are set that a category has_many :questions, and a question belongs_to :category. Within my migration, schema database I have the category have just a name attribute, and the question having description, answer, option, and category_id attributes. Both controllers have full CRUD capabilities, with index, new, create, show, edit, destroy actions. My routes are namespaced with :api, and :v1 (version 1) , with resources :questions, and resources :categories. I included the fast_jsonapi gem into my gemfile, and created serializers for both categories, and questions. JSON(JavaScript Object Notation) is a data format that encodes objects in a string. Serialization is the process that transforms an object into a string to be translated between the server and browser, as well as server to server. Then in my gemfile I implanted the gem rack_cors by commenting in, and in the config/application.rb file implemented the middleware by commenting in and adding my specific attributes for the models. By enabling CORS (Cross-Origin Resource Sharing) it makes the JSON data stored in the backend available to get through fetch requests from the front end Javascript file.
In the frontend I started out making just an index.html and index.js file. With the index.html file having the main HTML structure tree of <head> containing the title, and <body> containing a script tag linking it to the index.js file. Within the body I’ll implement my div, p, buttons through DOM manipulating in the js file. Within index.js file I started out setting my category and questions variables as const, to my backend https://localhost:3000/api/v1/categories and questions. I then initialized the js file with a document.addEventListener(“DOMContentLoaded”, function so the event of categories is presented to the page’s DOM is fully parsed. I implemented a folder of src to hold my catgeories.js, questions.js, and index.js files; and constructed my classes for categories and questions within their own files. Issues I came across, getting a ‘Uncaught SyntaxError:Unexpected Token < ‘. Which was coming from having ‘text/javascript’ as the content-type in my script tag in html file linking js files. Whereas, I needed to have ‘application/json’ as the content-type. As well as coming across issues with everything functioning fully as planned, going down rabbit holes of debugging and trying to figure out, is hard with Javascript because many times you don’t get errors just not working parts of your application.
