13 Jul 2024
For the past 6 months, I have collaborated on a website called Banana News. It features games, news, tech reviews and politics.
You can visit it at https://banana-news.github.io/banana
This website is made with standard web languages - HTML,CSS and JavaScript. It is the website featuring everything we wanted on it. Some of the challenges I faced during this website were the game development and search functionality scripts. One of the hardest games to add to the website was Spend Elon Musk's Money, a money spending game on many items of increasing price. There were continuous issues involving the buying and selling functions, such as being able to get infinite money by selling an item without even buying it. Eventually, after another person became a contributor on Banana News we fixed the issues with a simple fix. The way it worked was when you bought an item it simply pushed that variable to the array. When you sell the item it first checks with the .includes() function if the item is in the array and then if it is it proceeds to sell the item and remove it from the array, using the .splice() function.
Another of the Javascript features in the website is the search functionality, quite possibly the most complex file on the repository (it is hosted on Github). searchlogic.js is the name of the file where I put all of the search logic. Basically, there is an array of URLs to every page in the website and the search function simply filters through the .textContent of each page until it finds a match. If it cannot find a match, it simply displays No results found and a banana animation with question marks popping up around it (I created this with HTML, CSS and JS). Then I also slapped in some easter eggs on the search function and for any developer who wants to see, try going to https://banana-news.github.io/banana/scripts/searchlogic.js - you might find some hidden things that not every person could find.
One of the games on the website (this could be my personal favorite) is Image Combiner. It combines any two images of a person and an item of food. In the video shown above it is combining Taylor Swift with a watermelon, which is definitely one of my favorites.
When we created our news page, there was a dilemma about how we could show our news articles. At the start, the news page was just some text on the page, with some headings and body text but it soon evolved into these rounded white div elements that each had a seperate news article. Now it has changed so that they are side by side with many read more buttons and image enlarging by clicking on the image. I like the current news system because with short articles it doesn't seem to make sense to create a whole new page every single time you want to create a new news article so it is useful to have these side by side divs to display our media content.