Portfolio
Restaurant Page
My most recent project is a simple restaurant page containing a menu of dishes, desserts, and beverages from Bosnia & Herzegovina.
This is the first project I have completed using npm and Webpack. Getting each tab of my restaurant page to render its respective content dynamically was really simple.
What I did was add an event listener to each tab, and when clicked, the innerHTML of the ‘content’ div is set to an empty string.
Afterwards, I run the functions home(), menu(), or about() (depending on which tab was clicked), and have them be displayed once the content section is removed.
Fun fact: the line of code for the menu section of this project goes up to 635 lines!
Tic-Tac-Toe
Another project I created is a functioning two-player tic-tac-toe game, which allows players to enter their names.
This was made using factory functions and the module pattern. To make the game fairer to play, I changed the rules so that player 1 (X) does not always go first. Instead, the starting round is now random, giving player 2 (O) a chance to win the game as well.
It was interesting to learn how to make this work without relying on global variables for added security.
Library App
One of my favourite projects to work on is a functioning library app that can store all the books you have read or plan to read.
This project utilizes constructors to create book objects, which hold a unique ID generated using crypto.randomUUID(), as well as the title, author, number of pages, and whether the book has been read or not. Each book added to the page will be pushed into an array that displays each item on the page.
I also added a function to change the library card’s border colour from green (has read) to red (not read). This was an enjoyable and rewarding experience, as I learned how constructors and arrays work while also learning how to append divs and utilize addEventListener.
Admin Dashboard
Another basic project where I get to practice using CSS grid to keep my UI more structured and cleaner.
What I learned was how to position everything correctly by using percentages when calculating the templates for columns and rows.
This helped make the UI of my dashboard look much more appealing, and being able to structure sites this way helped make web design much more straightforward.
Sign-Up Form
A basic Sign-up form to test out my UI skills, which I have learned while going through the intermediate HTML and CSS Course with Odin.
Getting the inputs to change colour when text was entered was fun, especially when invalid passwords changed to red using the “:invalid” pseudo-class, as well as “:focus” for styling.
Etch-A-Sketch
A browser version of a well-known toy that is enjoyed by millions, an Etch-A-Sketch. This was a fun and challenging beginner project, as one of the instructions was to avoid using CSS grid.
This was where I was also introduced to using a hover method to change each cell of the grid to black, allowing the user to draw whatever they desired. I also added a reset button that would change the covered cells back to white, so the user could start over without needing to refresh the webpage.
Next.js Calculator
My very first project using Next.js was a simple calculator. However, it may be one of the most basic projects anyone could make.
I felt a great pride in getting this to calculate correctly and having the glow effect work the way I wanted to. You can check it out for yourself when you click on the header above.