The goal for this project is to be able to click anywhere on screen and create a bubble.
- HTML: remembered something about using a container div in addition to the wrapper. yeahh. added that and it definitely made things a bit easier. had some issue with whether to keep some elements (specifically the button) in the wrapper or not because it was kinda ruining my layering z-index whatever. eventually did something else.
- CSS: getting better at preemptively creating classes to make things more dry. like as opposed to creating a bunch of elements and then cleaning it up later. etc. getting back into the habit of using background colors to quickly remember where elements are and what size they are.
- JS: yo, bro, this project was definitely js heavy. i'm actively working with just vanilla js because i want to make sure i understand more about manipulating the DOM and stuff. when i was trying to figure out how to remove the bubbles, i searched the internet and the first hit was to use ".remove()", but i quickly realized that was a jquery thing. once i researched deeper to find vanilla js info, i learned about how you have get to the parentnode to be able to remove an element. someone said something about js not letting elements "commit suicide, but it does permit infanticide." and i mean...i'm all about dark humor so...yeah reading that made research and dev more enjoyable. anyway, the other thing was a bit tricky was getting the mouse position. initially, i wanted to have the entire screen able to have bubbles, but i decided to settle on only most of the screen because i didn't want to spend more time on that whole button in the wrapper thing. (if i clicked the clear button, it still counted as clicking in the wrapper so there would always be at least one bubble on the screen). anyway, i did find a very thorough tutorial on how to find the location of the mouse. it went more in depth with finding the absolute position, but some of it was a bit more than i wanted for this project. so i just took what i could from it. the trickiest part of this whole thing was trying to figure out how to put a function in another one. i tested the mouse coordinate function with console log and then wanted to add it to the appending function. it got messy. eventually, i moved the appending function stuff into the mouse position function and that seemed to work. aw yiss.
When I came up with this project idea, I knew that it'd be heavy on the JS side of things so I leaned into that. Yesterday, I focused a lot on manipulating CSS, so I figured it'd be nice to do more JS stuff. I can't really come up with anything else to say about this since I just elaborated a bunch on the JS section above. Okay. 11/26/18
Creating new element and appending: https://stackoverflow.com/questions/8886248/add-image-to-page-onclick
Removing elements by class: https://stackoverflow.com/questions/4777077/removing-elements-by-class-name
Citation for element infanticide quote: https://stackoverflow.com/questions/3387427/remove-element-by-id
Get mouse click position: https://www.kirupa.com/html5/getting_mouse_click_position.htm
Move thorough page for click position: https://www.kirupa.com/snippets/move_element_to_click_position.htm
(just to clarify, i only thought the usage of infanticide was humorous because it was regarding an element. in html. in code. on a computer. text really. starts sweating.)