DENNIS OGOL

My Portfolio

This is a showcase of some of my Projects

Tonnage Calculator

Product Tonnage calculator

This Web Application calculates the tonnage (MT) of a company product based on user-submitted volume, density, and temperature, using a Volume Correction Factor (VCF) retrieved from a database table

Frontend:
  • JavaScript
  • HTML5
  • CSS3
  • Backend:
  • Python
  • Flask
  • Tools:
  • ORM - SQLAlchemy
  • Templating tool - Jinja
  • Database - SQLite
  • DevTool - Vite
  • Usage: Click GET FORM to get a form to provide necessary data, By providing the required data and pressing calculate, the app will retrieve other nesessary data from the company database(Volume Correction Factor), calculate and output required weight measurement

    Users can also request historical calculations from the database by using the search and sort interface provided

    To open the application click the tile. To see the source code click CODE at the bottom of the tile

    Library Application

    Are you a serial reader or a book hunter

    This app provides a simple interface for you to save books or any written material you intend to read or purchase by listing them on your UI and saving them in a database.

    Frontend:
  • JavaScript
  • HTML5
  • CSS3
  • Backend:
  • Python
  • Flask
  • Tools:
  • ORM - SQLAlchemy
  • Templating tool - Jinja
  • Database - SQLite
  • DevTool - Vite
  • Usage: Click ADD BOOK, provide Book data by filling the form presented, then press SUBMIT

    To open the application click the tile and to see the source code click CODE at the bottom of the tile

    Musical Keys

    Take a break: turn your laptop keyboard into a musical instrument

    By turning your laptop into a piano, this fun application allows you to take a break to play your favourite piano tunes by pressing the keys on your keyboard and also listen to some popular classical tunes.

    Frontend:
  • JavaScript
  • HTML5
  • CSS3
  • Usage: To play the piano, press your keyboard keys as indicated on your screen. To listen to clasical piece, press play on any of the listed music

    To open the application click the tile and to see the source code click CODE at the bottom of the tile

    Timer Clock

    Set the timer

    This app is a Pomodoro clock that adds a 5 minute break after every 25 minutes run. an alarm sound is heard indicating shifts to break and back to session.

    Frontend:
  • ReactJS
  • HTML5
  • CSS3
  • Tools:
  • Build tool - Vite
  • Usage: Enter the session length and break length then press the start icon to run the timer

    To open the application click the tile and to see the source code click CODE at the bottom of the tile

    Drum Machine

    Beats, drums, cymbals and claps

    Make beats with this easy to use app.

    Frontend:
  • ReactJS
  • HTML5
  • CSS3
  • Tools:
  • Build tool - Vite
  • Usage: Click the buttons indicated on your screen on your keyboard to make beats or click the buttons directly on your screen. Increase or decrease the volume using the volume icon. turn the equipment on or off using the on/off switch on the screen

    To open the application click the tile and to see the source code click CODE at the bottom of the tile

    Random quotes generator

    Get Wisdom

    This random quotes generator allows you to generate random proverbs from the bible book of Proverbs

    Frontend:
  • JavaScript
  • HTML5
  • CSS3
  • Usage: Click NEW PROVERB to generate a new proverb on your screen

    To open the application click the tile and to see the source code click CODE at the bottom of the tile

    Calculator

    Solve it!

    Calculator

    Frontend:
  • ReactJS
  • HTML5
  • CSS3
  • Tools:
  • Build tool - Vite
  • To open the application click the tile and to see the source code click CODE at the bottom of the tile

    Calculator

    Math ON!

    Frontend:
  • JavaScript
  • HTML5
  • CSS3
  • To open the application click the tile and to see the source code click CODE at the bottom of the tile

    Sketch pad

    Etch a Sketch

    This app provides a simple interface that is your sketch pad. Drag your mose over the sketch pad to draw

    Frontend:
  • JavaScript
  • HTML5
  • CSS3
  • Usage: Enter size of sketch area desired by length and width values less than or equal to 100. Set desired background color of the sketch area.

    To open the application click the tile and to see the source code click CODE at the bottom of the tile

    Dashboard

    Super's Dashboard

    A dashboard for super heroes to connect. this is a simple static dashboard

    Frontend:
  • HTML5
  • CSS3
  • To open the application click the tile and to see the source code click CODE at the bottom of the tile

    Booking page

    Sign Up

    Book your space for this holiday destination

    Frontend:
  • JavaScript
  • HTML5
  • CSS3
  • Less
  • To open the application click the tile and to see the source code click CODE at the bottom of the tile

    Rock-Paper-Scissors

    Break the tie

    Do you like games? this is the classic Rock-Paper-Scissors game, only that you get to compete with a non-human. get started and let's see who wins

    Frontend:
  • JavaScript
  • HTML5
  • CSS3
  • Usage: In this game, your oponent is your computer/device. Choose your weapon of choice i.e Rock , Paper or Scissor to try and win against your opponent. the game is played and won after a player wins 5 rounds. The game is reset by pressing the 'PLAY AGAIN' button. LET THE GAMES BEGIN!.

    To open the application click the tile and to see the source code click CODE at the bottom of the tile