#019 - Project Endgame #100DaysOfCode
Thank goodness for a restful sleep and a day off from work! What did I achieve on my day off? Well, I fixed the pesky loop bug on my JavaScript project.
I had sketched out some rough notes the night before only to scrap the same notes the following day. Why? Because, it dawned on me that for me to overcome the loop bug, I had to focus on the div container of the HTML document.
You see, I wanted to flush out the core div container (which holds many sub div blocks), so another function would redraw the corresponding HTML elements. This strangely worked for the initial two questions of the quiz stack, but the program would spit out an 'Uncaught TypeError' at the third question. I suspect the program struggled to remove HTML elements that didn't exist, even though they appear on the DOM within Google's Chrome DevTools. And I may have confused myself with the initial coding of the createDocumentFragment() method.
I drafted a mini solution using a singular HTML document and bundled the script and trigger event on a low-scale setup. The mini solution worked. I 'ported' over the concept to the main program after tidying up related functions and re-arranged the furniture of the underlying div blocks. I wanted to mirror the div container that I was rendering to the DOM, alongside referencing the same div container to be cleared at the prompt of a new question from the universal quiz stack.
Eureka!
In short, I have a working JavaScript game - all coded from scratch by myself. On the surface, the quiz is a basic game that is currently pulling in a single quiz stack, but I have coded unique features to jazz up a plain quiz like randomising the question set, whilst also randomising the selected hero image and order of choices.
The reason for spicing up the quiz was partly to make the game less boring and predictable. Above all, I wanted to exercise my confidence in functional programming and I am happy with the results. I have been deliberate to create a function that does one thing. I recognise it may seem counter-productive to write further code to achieve this, but it follows through the DRY (Don't Repeat Yourself) principal and it is easier to follow how each line of code is processing each nugget of data.
I have since finalised the general scoring mechanism, but I wish to explore a JavaScript library to deploy coloured graphs and charts. I also need to create a general theme using CSS to complete the project. At the time of writing, I am tidying up my code by trimming the fat and adding comments. I would like to return to this project later without scratching my head with confusion.
In all honesty, I have tallied an A4 page of future features that would push me to commercialise the game as a mobile web app. Nonetheless, I want to bundle my code as a mobile app, as I want to learn the process and at least have fuller project to showcase, which should prove useful as I seek out software development roles in the near future.
I will likely use Adobe XD to sketch out the narrative of a mobile app design and see how I can fit this project in the form of a mobile device screen. I don't have Sketch, as my MacBook Pro laptop keeled over a few years ago.
I also want to look at MongoDB and Node.js, as I want to explore web databases - because I now want this basic quiz to connect to the Internet and achieve greatness!
But first, I have promised myself to look at C# (as long as I had the core functionality of the JavaScript quiz working). I understand that knowledge and experience in JavaScript alone isn't going to get me far in terms of a programming job. I'm aware there is a wide range of web standards from ES6 and ES7 to fully digest, alongside a host of trending libraries like Vue.js and React.
For the most part, I am content that I have a firm grasp of the basics of JavaScript and interacting with the DOM, and I am enthused to grow by leaps and bounds. I look forward to exploring other programming languages and extend my practical knowledge and understanding of good programming techniques and practices.
~Richard