CSS/JS Animations - Black Thunder FLL Website

· 1 min read

I haven't posted for a few days, and in that time I have begun reading 'The Territory', by Sarah Govett, and finished Black Thunder FLL's website! I have greatly increased the efficiency of the JS; have been working mainly on the home file.

Firstly, from what I have read, 'The Territory' is a very good book: I love fantasy.
Secondly, I have made Black Thunder FLL's home page a lot more efficient (and hopefully bug-free). I used to use setTimeout() statements to remove the underscore from the end of the title and main text. This was very inefficient, for multiple reasons:

  • Sometimes the typewriting code was delayed, so the underscore was never removed;
  • CPU usage was slightly higher, as the computer was running a timer;
  • Instead of utilising the already running function, I ran another;
  • The value of the final text was hard-coded, so there were two variables with the same contents - one in the form of an array; one in the form of a string. Thus, if the text needed to be changed, this had to be done in two places. Annoying.I fixed this by using the part of the already-existing function that runs when the typing is completed, which eliminated the need for setTimeout()s. CPU usage was reduced, and now the underscores will always be removed. Furthermore, I am now using array.join() to combine the elements in the one and only variable containing the title's content, and the one and only variable containing the main text's content.

The third thing I have changed is the code for the skip button. While I used to use clearTimeout() to stop the text typing and run another function, I now alter the variables used when the text is typing to make the function finish. This function does the rest for me, as it is only skipping to the natural end of the function; no code is repeated.


Black Thunder FLL also has a blog now, accessible at rs-blackthunder.blogspot.com; we will be posting at least once a week from September onwards (when we begin working on the FIRST LEGO League). All of the source code mentioned in this post is available on the @rs-blackthunder GitHub, and please also check out my own GitHub, @mgrove36. Any feedback on this website is greatly appreciated.