January 27th 2018
Hello! At JavaScript_30days we did a cool click and drag project, where as we click down and drag the mouse the items on the page move accordingly. All the events are contained within the const = slider, which is all the items that will move. First we need to know where the anchor point is when we initially clicked down
slider.classList.add('active');
we add the css to the items
startX = e.pageX - slider.offsetLeft
then we have to offset the mouse to know where was it clicked inside of the page not on the window. pageX is where the mouse was clicked. There is some more math here, not by strongest part but I think I understand how this works. I will have to review more, because it looks really awesome.
In the CSS grid course covered the auto-fill and auto-fit as well as minmax lesson. Auto-fill can figure how many items can you fit in the columns and it will chop up the grid as many space as it can, while auto-fit - it ends the grid Minmax can help the items wrap around each other by adding them a min or max size range.
At the WebDevelopment Bootcamp we talked about the DOM and how to manipulate the page with JS through the DOM. What is this DOM anyway? DOM-Document Object Model. It is the Interface between HTML, CSS and JavaScript. This is how we make the webpage interactive. The browser loads up the html, but behind the scenes it creates a model of all elements of the JavaScript Objects. Different properties in different objects. All the elements are turned into objects.
The Document is the entire model of the HTML and CSS. All the elements live in this object, it is the root node.
console.dir(document) - get the document of a page.
We can select the elements in the HTML in multiple ways
var h1 = document.querySelector("h1");
h1.style.color = "pink";
Style is an object with a lot of properties. When we write in the name of the selected elements in the console we get a node list with different properties which are objects.
querySelector is a CSS style selector that we can use instead the older getElementBy... selectors.
Separation of Concerns = HTML, CSS and JS are each responsible for their own part
tag.classList.add –we can add a new class
tag.classList.remove – we can remove a class
tag.classList.toggle - takes class name, and if the element has it already, toggle will remove it, or turn it on
textContent - look at and change text
innerHTML - it returns a string of all HTML contained in a given element
Cheers!