The problem of having a too big ego

So today I had a discussion with a girl friend of mine.
She watched a Netflix show wherein there was a little "mood webapp".

The boyfriend would go on this website and would instantly see the mood of his girlfriend.

This is the reference-material I had:

My friend told me about it and asked with huge adorable puppy eyes "can you make something like that too?". Looking at the screenshot and miserably failing to keep my big ego in check, I, obviously, said "Of course I can!".

The Problem

As you can see in the screenshot, in the show the girlfriend programmed this app in Rust and Webassembly, but screw that!

My secret

Now, here's the deal. Just between you and me, I might be confident enough to proudly call myself a DevOps, but the Dev part of that never had anything to do with Frontends. I'm more the service-guy/automation dude.
Looking at my portfolio of languages I mastered, there is nothing really web-centric, so I would be starting at 0, regardless of what I could have chosen.

This is what I am comfortable programming in:

• Java
• Go
• C#
• A tad of Python (ansible)
• A little bit of Ruby (Chef/Puppet)

The realization

I suck at Javascript and CSS. Full-Stop. My knowledge is brutally outdated, I slacked off in the Frontend department.
The last time I had anything to do with JavaScript and CSS was in the beginning of JQuery about 2007 or so.
That's a very long time for anything IT and especially the ever faster evolving JS-World.

Onwards to (hacky) glory

I thought, "to hell with it, I'll try one of these fancy new frameworks" and settled on Vue.js. No idea why, maybe because the name is written funny and I remembered it because of that. I even learned that it's pronounced "view", not "wu", so grant me bonus points for that please. I will need them to balance my hacky stuff later.

The Stuff

So what is it I used?

• Vue.js with Vuetify
• Express
• Tons of dependencies, cause I have no idea what I'm doing and I'm going in the deep end

What is missing:

• Some persistent storage (maybe a cassandra or ignite for some real nice overkill)
• Docker
• Kubernetes
• Some kind of easy to use admin-interface for my friend Laura

And yes, I absolutely will shoehorn Docker and Kubernetes in somehow, I actually need to use something I feel comfortable with.
Including this post, this project took me 6 hours, which feels horribly slow to be honest.

Demo Time!

So how does my version look?

If they feel like it, they can also add a Banner-Message that jumps into your face, which is only rendered when set

If this doesn't get your immediate attention, I don't know what will.

What is that abomination??

To get this done as close to the reference material as possible, I needed some kind of ready to use component that included a bar and something to move along that bar. Since I had no idea how to do it myself, I thought "Hey! I could wrestle a slider into submission for this!"
So I used a vuetify v-slider and just styled the hell out of it so it looks how I wanted it.
What you can't really see, is that the picture is actually animated to move indefinitely up and down along the bar. I was told it did that in the show too, so I had to copy it.

Behold the abomination I made of the slider:

>>>.v-slider {
    height: 200px;
    background-image: linear-gradient(to right, rgb(255, 100, 100), rgb(255, 255, 89), lightgreen);
    border-style: solid;
    -webkit-box-shadow: 0 0 40px white;
    box-shadow: 0 0 40px white;
}
>>>.v-slider__thumb {
  height: 300px;
  width: 350px;
  -webkit-animation: mover 2.5s infinite  alternate;
  animation: mover 2.5s infinite  alternate;
  content: url('../assets/laui.png');
  color: transparent;

  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1px;
}

>>>.v-slider--horizontal .v-slider__track-container {
  display: none;
}

@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-190px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-190px); }
}

Since I don't really know what I am doing, this might be very very bad. But it works, so I am fine with it for the moment.
Another side-effect is, that the actual slider bubble thing is enormous with 300x350px. This somehow results in the picture going way off the bar at the min-value 0 and max-value of 100. I need to tweak that a little more. So 10-90 as values have to suffice until I find out why the bloody thing does that.

As of now, the whole "page" consists of one Vue-Component, a Lauimeter, which was named so by my friend.

The component gets all it's data, including labels and texts, from an express-service with the following endpoints:

• get("/") to just get everything stored
• post("/moodUpdate") to just update the mood value
• post("/bannerUpdate") to update the bannermessage
• post('/config') to configure the service for testing

To configure the app, a simple curl is enough:

curl localhost:3000/config \
  -H 'Content-Type: application/json' \
  -X POST \
  -d '{ "mood": 90, "minMessage": "Not today", "maxMessage":"Fantastic!", "updateText":"Update", "meterName":"Moodmeter", "bannerMessage": "" }'

Now I have to figure out how to get a "easy to use config-page" in there, so my friend can actually use the bloody thing without having to learn cURL. And a persistent storage would be nice.

Maybe this stupid little fun project will find it's way to github too one day. But that is something for another day. As the first javascript experiment in 13 years, I am absolutely okay with how hacky this turned out.

It was actually a lot of fun, I can see myself doing more of this. But hopefully better in the future.

Feel free to leave feedback. All this is very new to me, so any criticism and/or guidance is most welcome. Maybe old dogs can learn new tricks.