Unit Conversion: Automatically Updating a Field

Having spent many years in Britain but now living in the US, I spend a lot of time searching the web for unit conversions: kilograms to pounds, meters to inches, fluid ounces to milliliters, etc. So I planned to create a JavaScript site that would have all of my most-used conversions in one place.

A simple unit converter.
A simple unit converter.

I really like it when entering text in one field causes another field to automatically update, but I didn’t yet know how to do that. Eventually I learned about the JavaScript “oninput” event.

let ozToMl = function() {
let x = (document.getElementById("oz").value);
document.getElementById("ml").value=`${Math.round(x * 29.5735)}`;

The first line of this function sets whatever is typed into the field labeled “oz” as a variable x, and the next outputs the result of the conversion of x to the field labeled “ml”. And this is the html for the “oz” field:

<input id="oz" type="text" size="3" oninput="ozToMl()">oz

This makes the previous function run as soon as anything is typed into the “oz” field.

By the time I had worked all of that out, I realized just how little I currently understand. I now have a full course on JavaScript to watch, and I probably won’t try to do much more until I’ve at least started it. So I quickly styled what I had done and published it, just so that I would have something to show for my effort.

JavaScript Calculator: A Chance to Use CSS Grid

I’ve started going to a weekly meetup of programmers in Nashville. The first time I went, I was paired up with another beginner programmer. We worked on the project during the week, and by the next meeting we had finished it.

Javascript Calculator
A colorful JavaScript calculator. https://nashvillefcc.github.io/calculator/

I decided to “play to my strengths” in this one, volunteering to do the styling because it’s what I understand. My partner did all of the JavaScript, which was lucky because it would have taken me much longer.

Even though I didn’t contribute to the actual programming, this project turned out to be a really good learning experience for me for the following reasons:

  1. I planned the layout in Figma (a web-based design tool). This kept me from making it up as I went and saved time overall. Also, I was able to show the design to my partner before taking the time to write the code for it. (I’m still using Figma for my own projects, just to get the practice.)
  2. I aligned the buttons using CSS grid, something I had learned about in Free Code Camp but hadn’t had the opportunity to use.
  3. The hardest part of the whole thing turned out to be using GitHub for version control and to combine the files we had worked on separately. This tutorial helped, but I still feel a bit like I’m blindly typing commands into the terminal until things happen. Apparently it just takes some time to get used to, so I feel fortunate that I am getting the chance to familiarize myself with it early.

I still have A LOT to learn…and I have another project from the same group for this week, so I’ll get there eventually.

Stopwatch: Variations on a Tutorial Exercise

In an effort to understand JavaScript objects better, I watched a video called Object-oriented Programming in JavaScript by Programming with Mosh.

The video was pretty advanced, but I managed to follow along until the end. I really like Mosh’s teaching style and will definitely be checking out his other videos.

At the end of the video, there is an exercise to make a stopwatch object. He shows how it should work, with “start”, “stop” and “reset” as methods of the object. (If you would like a more complete explanation of the exercise, definitely watch the video.) He calls these functions in the .js file and they magically run as he types them, which I guess works because he uses Live Server with VS Code.

Even though I couldn’t get Live Server to work, I still thought the stopwatch was a neat idea. So I made one as a browser application, with buttons (styled with CSS) to call the functions.

Stopwatch App by Jessica Davey
A simple stopwatch in a browser.

Following the tutorial instructions, I set up a “Stopwatch” constructor function (which, in hindsight, probably wasn’t necessary.)

The in-built method Date.now() returns the number of milliseconds since the beginning of 1970. Starting the timer uses this to set the the watch’s start time to the current time while simultaneously setting the watch’s stop time to zero. Meanwhile, stopping the timer sets the watch’s start time to zero. The timer can then check the value of “watchStop” or “watchStart” to know whether or not the same button has been pressed twice in a row.

For example, here is the “stop” function. If “watchStop” is zero, it sets “watchStop” to the current time (Date.now()), subtracts “watchStart” from this, and updates the duration, which is then displayed on the screen. Each time the timer is started and stopped, it adds the new duration to the old (there is also a “reset” button to set the duration back to zero).

if(watchStop === 0){
watchStop = Date.now();
this.duration += (watchStop - watchStart);
document.getElementById("duration").innerHTML = this.timeFormat(this.duration);
watchStart = 0;
} else {
this.message("Timer wasn't running!!", "error");

Otherwise, it calls the “message” function, which displays text and then uses “setTimeout()” to make it disappear. It takes the text and the element where it should be displayed as arguments:

this.message=function(errorMessage, element){
document.getElementById(element).innerHTML = errorMessage;
setTimeout(function () {document.getElementById(element).innerHTML=""}, 1000);

Once I had all that working correctly, I wrote a function to convert the elapsed time from milliseconds to minutes and seconds.

this.timeFormat = function(millisec){       
if(millisec >= 60000){
let minutes = Math.floor(millisec/60000);
let seconds = (millisec % 60000)/1000;
return `${minutes}m ${seconds}s`;
} else {
return `${millisec/1000}s`;

I’m not entirely sure I needed an if/else statement but it worked so I left it alone and concentrated on the CSS styles. I never did watch the answer, which is at the very end of that video. Probably I’m way off (I usually am) but hey, it works.

Magic 8 Ball: We Have Liftoff!

It’s after 8 pm on a Friday night in March. Approximately one month after thinking, “Hey, maybe I should learn to code”, I have officially published my first thing-that-I’ve-built.

Magic 8 Ball by Jessica Davey
A Magic 8 Ball I made using html, css and JavaScript.

I have spent the past month working my way through the curriculum on Free Code Camp. I breezed through the html/css section in under 2 weeks (having spent countless evenings on my personal webpage back in the nineties, you know, when Netscape was still a thing), but got completely bogged down in JavaScript.

So this week, I left the basement and drove the hour’s journey to Nashville to attend a Free Code Camp project night. It was great to finally be around other people and out of my own head. I came away from it with a collaborative project to work on, but I also learned that the best way to learn this stuff is just to do it. I don’t like that information; perfectionist that I am, I would rather learn everything first and then do (otherwise how will I get it ‘right’?).

Anyway. I decided that a “Magic 8 Ball” shouldn’t be too difficult for a first project. A Magic 8 Ball is an old-school toy by Mattel that gives a random answer to a yes-or-no question. Here are pictures:

Magic 8 Ball.
Magic 8 Ball.

Generating a randomly-chosen answer was actually the easy part. I made an array called “answers” that contained the 20 possible answers (taken from Wikipedia) as strings and used Math.random to select a number between 0 and 19. This became the index (i) for the array. My function looks like this:

function answerQuestion(){
let i = Math.floor(Math.random() * 20);
document.getElementById("answer").innerHTML = answers[i];

Because I’ve been working my way through Free Code Camp, I know more about algorithms than I do about browser windows. I had to look up the “document.getElementById” to show the answer (in a div element with id “answer”) along with how to show prompts and hide and display elements.

if (question != null) {
document.getElementById("asked").style.display = 'block';
document.getElementById("asked").innerHTML = question;
document.getElementById("triangle").style.display = 'block';
document.getElementById("ball-inner2").style.display = 'block';
document.getElementById("response").style.display = 'block';
document.getElementById("ball-inner").style.display = 'none';
document.getElementById("button").innerHTML = "Ask again";}

…though I will not be surprised if I end up finding an easier way than what I used this time.

I made the ball image using CSS. The circles are square elements with border-radius 50%, and I “borrowed” the upside-down triangle from a very handy site called “The Shapes of CSS”.

I also spent a lot of time today on W3Schools and Google Fonts. I guess I both didn’t know what I was doing and was obsessive about font style, which probably isn’t the most productive combination.

Nevertheless, I made it, it works well enough, and it is up on my website. I didn’t know very much when I started but presumably I know slightly more now, and will know even more after the next thing.