Hey all! Me again!
You know that guy that doesn't really understand the words "dude chill"
So yeah another video over 5 minutes buuut if you cut the...two weeks worth of work.... that I did into the one video...in half....
THEN HEY 3 minutes a piece! Success, I'm the best!
Anyways, this week(s) we were tasked with a simple HTML & CSS page that has links, images, a table, a form, and a list included!
This is my dragonball z tribute site.
I decided to challenge myself by not only jumping straight into the CSS like mad man, but by also making some fancy stuff happen with the links, constructing my own SVG image, aaaaaand using javascript to convert the form data into JSON when the form is submitted....
Here's the cool css that I used to accomplish that:
Basically what it does is it takes advantage of the pseduo after element on every nav item, positions it just below each link, and then adds a background image that gets translated from the left most location under the link to about 70% of the link in a linear timing! Super fun stuff 😎
And how did I get the form to not just submit on...well submit?
Well here's the js that did that for me:
This stuff is also pretty simple, I get the form element by it's ID, and on the submission I cancel the event default behavior, pass the form to a function I created to convert form data into a Javascript object, print that return to the screen, and then reset the form!
So yeah this stuff is fun, and I can't wait to get towards building web apps...so I might already have started one...
Anyways here's the code and live site:
Repo: https://github.com/barnettet31/promineo-week-7
Live Site: https://barnettet31.github.io/promineo-week-7/
Until next time, Onwards and upwards!