When I was beginning to really sink my teeth into JavaScript, I, like many people, resorted to watching tutorials on YouTube and coded along with the videos as they were being presented. This is a great strategy when you’re learning, but not so great if you’d like to show prospective employers what you’re capable of. There are plenty of To-Do List videos on YouTube, but the To-Do List already exists – it doesn’t solve any new problems and all beginning developers have one. But what if the To-Do list could do more?

In order to learn the sorcery that is CSS element positioning, I constructed a mostly-accurate map of my current workplace, complete with aisle numbers to help with navigation. With this already constructed, I realized that a To-Do List – re-imagined as a Shopping List – and merged with the store map – could be something incredibly beneficial to many shoppers and businesses. All that would need to be done is merge the two projects into one, and create a way to search the map using your list.

Because at the time I was not making use of any databases, I created a CSS file with the co-ordinates for almost 400 items on the map, and each item name would be labelled as a class name in the CSS file. Once the list item is clicked, the page creates a new element directly overtop of where the item is in the store by calling the CSS class of the item name on the list.

Of course, only having a desktop version of this wouldn’t work too well in a store environment where you would be using a mobile device, so when the project was made responsive, the look changes – when held up in portrait view on your phone, only the list itself appears, and once the button to find the item is clicked, the user would turn the phone to landscape view, where the page view would change from a list to a map – with the arrow directly above the item. Once the user finds the item, they merely rotate the phone back to portrait orientation, cross out the item off their list, and continue on.

As an additional functionality for businesses – the page makes suggestions for products to add to the list, which change based on seasonality, day of the week, and month of the year. The user can dismiss these suggestions, or add them directly to the list.

This project also differs from any tutorial as it builds out the list from an array, rather than creating an element with each list item directly in the HTML code. It was my first somewhat-big endeavor in the web development field. It could use some upgrades, but I’m very proud of this piece, and if you shop at the store this is modeled after, I hope you find it useful.

Due to the nature of working in a supermarket produce department, I have encountered many instances where needing to know the PLU code (or price lookup code) was important. However, information for that is not readily available in many cases, and there was opportunity for me – a budding developer – to turn lemons into lemonade; to build an app that could tell you the code for said lemons, and all you had to do with type in the item’s name. And an app that would work just as well on a desktop or mobile screen.

But why stop there? Oftentimes, you don’t just need a single PLU code, but many, as signage needs to be frequently changed or replaced. If you had to look up an item’s code for a list, why should a user need to hold a mobile device in one hand, and write down the code to a list with another hand? To make it easier to make a list of codes, I created a method with which to add the looked-up PLU codes to a list, which could then be stored until the user requested a full listing of items. This list appears upon user request when they are ready to create the signs at the in-store computer workstation, and then disappears from memory once the user closes the list or navigates away from the page to ensure excess data doesn’t accumulate, and that extra signs are not made unnecessarily.

This project was built in March of 2020 and currently gets data from JavaScript Objects. A future version of this project incorporates this data into a far larger project with far more data and new ways to store data. Stay tuned for that one!

In April of 2020 – admittedly some of the earlier days of the current pandemic – I was eager to build my skills as a developer and incorporate an API into a new project. It hadn’t been my first time doing a project involving an API, but it was the first time where there would be no readily available tutorial on the subject of using this particular API for anything since the topic was so new at the time.

I decided that that was the time to build a project that allowed a user to select a country from a dropdown list of every affected country, with that data populated by looping through the country names in the API, to get further information on how the virus affected that nation in a pop-up modal, as well as to give the user information on the first 10 affected countries at a glance. This was achieved using CSS flexbox, allowing for responsive viewing across multiple screens.

This project still receives data daily as the pandemic spreads in some areas and eases in others. Overall, it serves as an informative project and makes an important addition to my portfolio.

In February of 2020, in addition to a physical Valentine’s gift to a wonderful woman I’m fortunate to have, I decided to build her a digital extra.

The project starts with the image of a Mouse head – Mickey’s, that is, on a black background, pulsating with a brighter shade every few seconds. Once you move the computer mouse over the Mouse head elements, the Mouse head changes colours from grey to white, and scrolls down to the first of two slides which show random (and true) sentences that change on the screen at a rate of 20 sentences per second. Once you click each sentence, the cycling of multiple sentences stops, a setTimeout event happens which pops a Font Awesome icon onto the screen at the end of the sentence, and the site automatically scrolls down to the next slide.

This project was a smaller one – did not take long to build at all, but gave me experience with scrollIntoView, setInterval, setTimeout, and mouseover events, as well as randomizing the text that appears on screen. Colours were chosen with help from paletton.com, icons used are from the Font Awesome free icon collection, and design inspiration came from Mickey Mouse.

Also, she liked it 😀