Member-only story
WAIT, LEBRON SAID WHAT!?
Manipulating the objects on a screen is a great way to begin to understand what the abilities of knowing the language can do. Using the dev tools you can temporarily make changes to html and css of a page as well as run javascript in the console.
Using the console is a fun way to learn javascript and to see the code you write change the DOM in real time. You can find an element on a page, and assign it a new value.
You can change elements directly in the Elements tab or you can use JavaScript in the console to select, view, and change elements in the window.
Some methods that are useful to do this are the document methods querySelector() and getElementById(). Knowing how to use these will allow you to change those items how you wish.
The querySelector() method takes in an argument of a selector, being a string that is a CSS selector. You can find the proper selector in the elements tab and choosing the best fit for your item. You can choose a class, or any child element of a parent class.
Above I selected the a class from the document. When selecting a class the proper way to insert that argument is with a preceding, “.”. By selecting that class and calling “.innerText” the method would simply return the innerText of that class. We can take it a step further by assigning it a new value, in this case, changing the name of the recipe.
