Week 10 Project, Part 1: More JavaScript…

No New News Here – I’m Behind!

I’m way behind on my “52 Weekly Websites.” Sigh. I hope to do better going into the new year (2019). I started this venture in October… of 2016! I’ve actually been working on this project – on and off – for a couple of months now. A non-trivial project mixed with a lot of learning apparently takes time.

An Actual Project This “Week”

So, last “week,” I was tinkering with creating content (and menus) using only JavaScript. I learned a lot and I’m happy with the results, so I thought I’d continue with JavaScript for the next project, which is an actual app that I want to be able to use to track business miles in my vehicle(s).

This week’s project will also use the localStorage (or Web Storage) or maybe the IndexedDB features of HTML5 (or maybe both – but I’ll probably start with localStorage). For this project, I want to be able to input data about trips, both local and long distance – date, time, mileage, vehicle, and a short description. I don’t want to have to use a back-end database on a website somewhere for the data storage, so I plan to store it locally in the browser, and then export it to a file that I can use to track business miles.

A Couple of Realizations (Finally)

Woo-hoo! The DOM is a collection of objects! Well, yeah, everyone except for me realized that already. After all, DOM stands for Document Object Model. I guess I just never quite put together that the elements in the DOM for an HTML page were also child elements, which in turn could have child elements. This became important when both sorting the divs for the trip records (but it didn’t dawn on me then) and when creating, harvesting, and destroying the divs for the data entry/edit form (finally, the reality began to seep into my consciousness).

Also, the CSS3 “important!” tag is sometimes, well, important. I spent more time that I should have trying to figure out why some of my styling wasn’t being applied to a specific element. I pored over the styles for the element using the browser’s developer tools, and making changes on the fly to get the result I wanted, but nothing worked. I finally broke down and just used the important! tag and, voila – success.

Details Begin Next Week

Well, that’s the plan. I sure hope I make it. This project will be split up over at least 3 weeks of posts, but not more than 5. Stand by…