Eliott Bourassa

A selection of projects written for The Odin Project curriculum

Memory Card

(React)

A Lord of the Rings themed memory game.

Features: Dynamic webapp with state variables (useState), side effects (useEffect), and external API calls via fetch.

CV Builder App

(React)

A CV builder app with simple forms and a live preview.

Features: Dynamic webapp with state variables (useState), which updates the CV preview in real-time, based on user input.

Homepage

(Advanced HTML/CSS)

A polished landing page.

Features: Responsive design, with three distinct layouts based on user viewport size: mobile, tablet and desktop.

Battleship

(JS)

A human-vs-AI Battleship game.

Features: Test-Driven Development (TDD), good separation of concerns between modules, user-modifiable game settings (board size, difficulty, player name), challenging AI gameplay strategy algorithm.

Weather App

(JS)

A weather app that fetches weather data from the Virtual Crossing Web API, processes the data and displays it.

Features: Dynamic import, fetch API, and promises. Was built in a very modular component-based way.

Todo List

(JS)

A productivity app to manage and plan projects and tasks.

Features: ES6 Modules for modular code, Webpack to build the website, localStorage to automatically save user changes, single-page website with dynamically generated content

Restaurant Page

(JS)

Typical single-page restaurant website.

Features: Dynamically generated content on a single webpage, using DOM manipulation, first time using Webpack, each page has its own JS module with the code to generate it.

Tic Tac Toe

(JS)

Tic-Tac-Toe game with a simple UI.

Features: Uses factory functions and the module pattern, separating functions for gameboard logic from functions for UI modification. A 2D array was built to hold the gameboard state.

Library

(JS)

App that displays a list of books and their details, and keeps track of read status.

Features: Uses factory functions, later refactored to use classes instead, Book objects are created and stored in a library, the books have unique IDs generated at creation time. Users can add, remove, toggle read status on books.

Admin Dashboard

(Intermediate HTML/CSS)

A webpage that precisely matches a provided screenshot in terms of layout and colors.

Features: Extensive Grid and Flexbox usage, with very precise element positioning.

Sign-up Form

(Intermediate HTML/CSS)

Input form with a nice layout, which matches a provided image file.

Features: Uses only Flexbox. Currently (27-Jun-2025) needs work to make it more responsive and zoom correctly.

Calculator

(Foundations - JS Basics)

Works like a regular calculator, with keyboard input!

Features: Event listeners for all the buttons, breaking down calculator application logic. I chose to input as string, then parse to numbers for math operations, which seems to work well. It even includes a favicon!

Etch-a-Sketch

(Foundations - JS Basics)

A fun little game.

Features: Event listeners for mouse hover actions, grid size can be modified for higher or lower resolution.

Rock-Paper-Scissors

(Foundations - JS Basics)

A game of rock-paper-scissors with minimal UI.

Features: Computer picks rock, paper or scissors at random, the victor is announced and the score is updated.

Landing Page

(Foundations - CSS Flexbox)

Welcome to my farm.

Features: Flexbox usage for layout. Matches a provided image file.

Recipes

(Foundations - HTML)

Very minimal HTML page with big clickable images linking to their recipe.

Features: Navigation between webpages for each recipe and the home page.