Create Week 2: Difficulty Spike

Week2:DifficultySpike.md

@@ -0,0 +1,39 @@
+#Week 2: Difficulty Spike
+
+By the close of Sunday before the beginning of week 2 I was actually feeling pretty comfortable with the material we covered and had a sense of confidence. This would all be shattered by the ICBM of week 2. We started off with a framework of a new todo application and were told to get it working. No problem that's a bunch of copy pasta into the right files and making sure the references were correct in the HTML. Okay great now erase the javascript and make it work. Ummmmmmmm.....
+
+Right off the bat I had great difficulty figuring out how to make the javascript affect elements of the HTML and CSS. Even getting one piece of the code to work and just making it log a tracer bullet for clicking certain things was a big pain in the ass, and then we had plenty more to do. Eventually as we progressed, I could get the elements already on the page to work but still not be able to dynamically add things. But God comes through and eventually everything clicked when I realized that in order to get added tasks to work right the event listeners would need to be called at their adding. This was also when I realized that the initial code that added the event listeners stopped at the loading of the page and never ran again. lodash _.forEach would not cut it, so I wrapped each of my event listener adding chunks of code in functions and called them EVERY TIME I ADDED A TASK. It worked beautifully. If only I had figured this out earlier during the weekend I could have possibly accomplished a little more, but I was satisfied to have gotten it working to a fairly functional point.
+
+The code to add the eventListeners:  
+````javascript
+	newTodoInput.addEventListener('keyup', function addTodoController(event){
+		if ( event.keyCode === 13){
+			if ( newTodoInput.value !== '' ){
+				todos.addTaskToList(newTodoInput.value.trim(), todos.taskList);
+				var clone = templateContent.cloneNode(true);
+				clone.querySelector("label").appendChild(document.createTextNode(newTodoInput.value.trim())); //received from kind stranger on stack overflow
+				clone.querySelector("input.edit").value = newTodoInput.value.trim();
+				todoList.appendChild(clone);
+				newTodoInput.value = '';
+				deletingTasks();
+				editingTasks();
+				completingTasks();
+			}
+		}
+	});
+````
+One of the function wraps:  
+````javascript
+	function deletingTasks() {
+		var deleteTaskButtons = document.querySelectorAll('button.destroy');
+		_.last(deleteTaskButtons).addEventListener('click', function removeLi(){
+			//console.log(event.target.parentNode.parentNode.parentNode);
+			event.target.parentNode.parentNode.parentNode.removeChild(event.target.parentNode.parentNode);
+			todos.deleteTask(_.indexOf(deleteTaskButtons, event.target), todos.taskList);
+		});
+	}
+````
+
+How do I feel? Exhausted, this coding stuff is a major brain fryer. I find however, that as I let the material kind of simmer in my brain after being wrecked by it in class, it slowly integrates into my knowledge base, and it's a great feeling. I'm actually enjoying myself when I'm able to devote most of my time to coding and making it work, and if I didn't have a fiancee living at home with me driving me up the wall about this wedding I could be a hermit who codes for 12 hours a day. We did get our engagement photos taken on Sunday, over three hours that could have been devoted to making the todo application edit tasks, but it was nice regardless. Overall, I would say I'm happy.
+
+SOOOO on week 2 I learned how to add event listeners non stupidly and work my way through HTML and CSS. I'm still shaky with templates in my HTML which is blocking my edit tasks, but I think my foundation is a little more solid. I did a quick warm up of CSS over the weekend and can't wait to dive into it in week 3.

about/cascading-style-sheets.md

@@ -0,0 +1,120 @@
+# Reading CSS
+
+## Properties
+
+### Display
+
+#### Block-level elements
+
+Block-level elements stretch from left to right as far as they can
+
+1. div: standard block-level element
+2. p
+3. form
+4. header
+5. footer
+6. section
+
+width: setting the width of a block-level element prevents it from stretching to the edges of its containers
+  * max-width: using max-width instead of width improves the browser's handling of small windows, important for making sites usable on mobile, supported by all browsers
+  * percent width: sets a unit relative to containing block
+    * Examples: used with images to set image 50% the size of containing element, can be used with min-width and max-width to limit how big or small the image can get
+margin: setting the margin to auto will horizontally center the element in its container
+
+#### Inline
+
+Wraps text within a paragraph without disrupting paragraph flow
+
+1. span: standard inline-level element
+2. a: most common inline-level element, used for links
+
+#### Inline-block
+
+inline-block: is used to create a grid of boxes that fills the browser width and wraps nicely
+  * Use hasLayout to support on old browsers
+  * Can be used for layouts
+    * vertical-align property: will most likely want to set to top
+    * Need to set the width of each column
+    * There will be a gap between the columns if there is any whitespace between them in the HTML
+
+#### None
+
+Displays nothing, renders the page as though the element doesn't exist, used by javascript
+
+1. script: defaults to none
+
+### Position
+
+position has a bunch of possible values:
+
+1. static: default value, said to be not positioned, isn't positioned in any special way
+  * If you set an element to anything besides static, it's said to be positioned
+2. relative: acts the same as static unless additional properties are specified
+  * top, right, bottom, left properties will adjust an element away from its normal position, other content won't fill gap left by element
+3. fixed: element positioned relative to the viewport, in layman's terms it stays in the same place even if the viewer scrolls
+  * top, right, bottom, left also used with fixed
+  * fixed element doesn't leave a gap where it would have normally been
+  * Mobile browsers have shaky support for fixed
+4. absolute: behaves like fixed except it's fixed relative to the nearest positioned ancestor instead of the viewport
+  * If no positioned ancestors then it's the same as port and is fixed to the viewport
+
+#### Float
+
+float: is intended for wrapping text around images
+
+clear: controls the behavior of floats
+  * can move elements down past floating elements that come prior
+    * left, right, both, determines the postion of the elements to be cleared
+  * clearfix hack: used to fix elements where the image is too big and overflowing out of the element
+    * supported by most modern browsers
+````
+.clearfix {
+  overflow: auto;
+  zoom: 1;  //use for IE6
+}
+````
+
+#### Column
+
+Column is a new set of CSS properties that can be used to easily make multi-column text.
+  * CSS columns are very new, so you need to use the prefixes, and it won't work through IE9 or in Opera Mini.
+  * [Properties of Column](http://www.quirksmode.org/css/multicolumn.html)
+
+## The Box Model
+
+box-sizing: used to simplify sizing elements
+  * Setting box-sizing: border-box; on an element prevents the padding and border of that element from increasing its width
+  * box-sizing is new, should use -webkit- and -moz- to enable experimental features in specific browsers
+
+## flexbox
+
+The new flexbox layout mode is poised to redefine how we do layouts in CSS.
+
+### font
+
+The font property edits a lot of features in regards to how text looks.
+
+* font-size: edits how big the text is in an element, takes many units such as px, em, in, pt, etc...
+  * Examples: font-size: 4pt, font-size: 1in, font-size: 1 cm;
+* font-family: uses predefined template of general text appearance, can have serifs or be without serifs.
+  * Examples: font-family: "Times New Roman", font-family: "Arial"
+
+### text
+
+The text property edits more features in regards to how text looks, nothing to do with fonts.
+
+* color: edits the color of the text, doesn't actually have the word text in it
+  * Examples: color: red, color: blue
+* text-align: edits where the text is aligned in the box of its element, right aligns the text to be flush right, left edits the text to be flush left (common), center will center the text, justify makes every line of text the same width (like in magazines).
+  * Examples: text-align: right, text-align: justify, text-align: left
+* text-transform: alters the capitalization of texts
+  * Three Inputs
+    * text-transform: uppercase, makes all of the text uppercase
+    * text-transform: lowercase, makes all of the text lowercase
+    * text-transform: capitalize, capitalizes the first letter of each word
+
+### line
+
+* line-height: sets the space between lines in paragraphs
+
+

parking-lot.md

@@ -0,0 +1,9 @@
+Topics I really really want help on
+
+1. I can make an HTML template. I can clone it and add it into my HTML with javascript fairly proficiently. I am not understanding how to edit the values of it before it is activated into the HTML and the documentation is not helping.
+
+2. I understand the thought of the model in MVC, I get that it's sort of the bones behind the view that move everything. But I'm definitely not using it right. I want to see a fully fleshed out application effectively using it so I can improve my stupid looking code.
+
+3. A way to better add eventListeners dynamically was mentioned in class that sounds more efficient than mine. I would like another round of looking at event bubbling to make this work.
+
+4. Learn about HTML data attributes!!!!!