Card image cap
June 6th, 2018
CSS & JavaScript tabs

Today I was doing some more messing around with HTML, CSS, and JavaScript. The more I get the hang of how these work together, the more I understand how complex web apps can be made. I'm working on an app for work that will simplify some data entry tasks. There's a lot of info so I thought I'd try to divide the app into tabs.

As you can see above, they sure aren't pretty but they're functional! The basic layout of the app is as such. All the information is pre-written in HTML and wrapped in individual divs with differentiated IDs and classes. Using CSS and JavaScript, everything starts out as "display:none" and then certain buttons, combinations of radio buttons, and tabs switch the relevant information on and off ("display:block").

I'm sure most of the logic is overcomplicated and that there are way simpler ways to do things, but I'm pretty proud of how I hacked everything together. I'm really getting the hang of manipulating DOM elements using vanilla JavaScript and I'm excited to see how jQuery, etc. streamline things and add opportunities for more complexity.

I can't post the code for what I have so far because it's got a lot of important business stuff but I will put together a mockup so y'all can see the code. Anyways! Until next time.