sailor moon calculator

Currently, I’m on the hunt for a job in tech. Meanwhile, I’m still working on improving my programming and design skills. I’ve been using The Odin’s Project as a resource by following their curriculum which is awesome btw!

The Odin Project (also known as TOP) is an open-source community for learning full-stack web development. Their mission is to provide a comprehensive curriculum to learn web development for free. TOP helps web dev students learn the skills and build the impressive portfolio of projects they need to get hired as a web developer.

The curriculum is divided into distinct courses, each covering the subject language in depth. Each course contains a listing of lessons interspersed with multiple projects. These projects give students the opportunity to practice what they are learning, thereby reinforcing and solidifying the theoretical knowledge learned in the lessons.

Topics covered:

• Ruby programming

• Ruby on Rails

• SQL

• HTML and CSS

• Javascript

• Node

• React

Anyone who wants to start learning how to code from scratch or anyone who’s even experienced and wants to spice it up a bit, do try it out! (Plus who doesn’t love free education!?). I recently completed their Foundations course which covered HTML/CSS and JavaScript. Currently learning Ruby and Ruby on Rails from their Full-stack path. Between all the learning, there was a lot of cool projects involved like building an on-screen calculator. And I never built one so this was a fun experience. I wanted to make a nice one though… 🤔

I’ve been rewatching one my favorite childhood anime, Sailor Moon and that’s where I got the idea ✨ — The Sailor Scout communicator. The Communicator resembled a calculator, with bright pink buttons and had a small circular display for video feed.

The outcome:

Built using HTML, CSS and JavaScript 🌙

• It contains functions for all of the basic math operators you typically find on simple calculators.

• Calculator does not evaluate more than a single pair of numbers at a time but strings together several operations and still can get the right answer, with each pair of numbers being evaluated at a time. If you enter a number then an operator and another number that calculation should be displayed if your next input is an operator.

You can interact with it here!