# Tinker Week 4 - Javascript Part I
Rainy Duan, Alex Jagiello and Maria Hurley
## Part 0
- What do you think is the value of definitely?
- Is Jimmy going to the prom with Sally?
>The value of definitely is 'yes' and Jimmy is (duh) going to the prom with Sally! Good job Jimmy!
- How does this work? (Code, not relationships.)
>`function yes(x){return x();}function no(x){return 'yes';}function maybe(no){return no;}var definitely = maybe(yes(no));`
>Looking at the code in line 1, we get yes(no) and for return we get no(). And then no() starts and returns 'yes'. After which, maybe('yes') is run and we get "yes" as an answer.
- When is the no function called?
>the 'no' function is called after function yes on line 2.
- On the line var definitely = maybe(yes(no)); there aren’t ()s immediately after no. What is the significance of this?
>The significance of this is differentiating between an argument and function. Here the no serves as an argument and not a function being called.
- Explain how this code snippet works, line by line, part by part.
- Be very specific
- Use important keywords
- Provide explanation of what each syntax detail represents as well
>First, we have a function that calls on yes(x). The return statement halts the functiona nd returns to us a value which is x(). Then the process is repeated for function no (x), which returns 'yes'. In the end, we have a var statement that declares 'definitely' as a variable.
- What does the ${} syntax represent?
>${} syntax represents how you would introduce a variable without concatenating. For example, ${x} is the same as " + x + ".
- Why are template literals super useful for us?
> Template literals are useful when we want to present complex statements that attempt to compare multiple variables.
---
## Part 1
- Click on the link at the top to view the index-simple.html version. Compare the HTML between this version and the Bootstrap version. Compare the JS between this version and the Bootstrap version.
- How do these two versions compare with regard to helping you understand Javascript?
>HTML: the HTML in the version with the Bootstrap has a lot more classes with the word default in them. For example:` <button class="btn btn-default" onclick="setName()">Set Name</button>` The same code in the version without the Bootstrap doesn't have the extra button class: `<button onclick="setName()">Set Name</button>`
>JS: For the Javascript, I couldn't detect a difference. Both lines of code looked exactly the same to me for part 1.
- Play with the interface (each of the buttons) and observe how the program reacts. When tinkering, try changing the order in which you play with the interface. Take note of the printed history.
- Explain how this program works with regard to STATE, SEQUENCE, and CAUSALITY of each line, and/or specific parts of a line as appropriate. Use specific vocabulary, as demonstrated in the notes section.
- Be sure to articulate both aspects of the HTML and JS.
- What does the prompt function return?
> The prompt function returns the information that the user inputed. For example,
> `function setName() {printLog('#prePartOne', "setName called():");firstName = prompt('What is your first name?');` This allows for the state of one's first name to be presented and for following sequences of questions to occur.
- Explain what you think the document.querySelector() does. Talk about this in terms of the functions vocabulary presented in the Notes.
>document.querySelector() is a function that searches the inputs for the appropriate charactersitic demanded and attempts to present you with that output.
- If I told you that document.querySelector RETURNS something, what do you think that something is?
>document.querySelector() returns the first Element within the document that fits the specified selector/ group of selectors.
- How could you alter the printName function in order to print the users first and last name in the browser window tab?
>This is the original: `function printName() {var fullName = firstName + " " + lastName;}`
>We think adding the prompt function would make print the first and last name in the browser window tab:` fullName = prompt('fullname');`

- How would you use the makeFullName function to shorten the greetUser and printName code?
>`function greetUser() {var displayName = firstName + " " + lastName;alert("Hello " + displayName + "!"); printLog('#prePartOne', `greetUser called(): ${displayName}`);}`
>`function printName() {var fullName = firstName + " " + lastName;}`
>`function makeFullName(first, last) {return first + " " + last;}`
>Initially, I tried matching the output of var displayname to makeFullName, but I couldn't get the code to output the fullname. THen I tried shortening firstName to just first, but that also didn't work. I am not really sure how to shorten the greetUser and printName code because once I start taking things out, the code stops working.
---
## Part 2

* Play with the interface (each of the buttons) and observe how the program reacts. When tinkering, try changing the order in which you play with the interface. Take note of the printed history.
>Upon initial discussion, we were working together to figure out how to print through manipulation of the DOM in the JS Bootstrap interface.By inspecting the console through the debugger mode, the interface of the buttons is visible. Through manipulation of the interface in the debug mode, we are able to see how Bootstrap interface incorporates the levels of parent and children elements into play.

* Explain how this program works with regard to STATE, SEQUENCE, and CAUSALITY of each line, and/or specific parts of a line as appropriate. Use specific vocabulary, as demonstrated in the notes section.
* Be sure to articulate both aspects of the HTML and JS.
>While using the Bootstrap JS version we noticed that the layout of the interface is designed to start with the broad elements, and working from left to right simplifing and making the code more specific. For example, each of the buttons is nested within the same class but separate onclick properties that describe separate functions. Ex:
` <button class="btn btn-default" onclick="greetUser()">Greet User</button>`
* Depending on the sequence in which the button is coded, is how the computer will interact with it.

* What kind of events are happening in Part 2 and explain how this relates to when the handlers will run.
>Based upon document.querySelector() and altering the printName fuction, we are experimenting with how various event handlers can be manipulated.

* What is event.target?
>event.target and eventTarget are native code within the programming HTML database.
>The eventTarget listener is what responds when something happens within the code to cause an alert to show.

* What does the dot .value, .textContent, .innerHTML represent in this context?
> For exampel, .value represent the information entered by the user. The .value property tells the computer to capture and deem the information entered by the user as the value of the object, the defining features. .textContent is a property/function(?) added to the end of element properties. It tells the computer to save the information that the user inputs as its own class. In this example the algorithm is telling the computer to save the variable fullName= as the user's input of firstName + "" + lastName. The next line of the algorithm states that the (#'fullName').textContent = fullName. It serves as a bond from one variable to the next. .innerHTML represents the set code designed through HTML to serve as the structure for the element.
`function printName() {
var fullName = firstName + " " + lastName;
document.querySelector('#fullName').textContent = fullName;
printLog('#prePartOne', `printName called(): ${fullName}`);
}
function resetPartOne() `.

///
(not sure what this is / why it is here)
function resetCoffee(event) {
  var selectEl = document.querySelector('#coffee');
  selectEl.value = "";

* Why does updateEmail have a parameter for event data but the other functions do not?
>updateEmail has a parameter for event data while the other functions do not because the updateEmail function is linking the user with their specific email address, combining the unique data set. There is a parameter for event data which can be used to store the data and reset the form for new user interaction.
* resetInfo is actually a little broken. Why?
>resetInfo() represented a function containing many empty strings and "unknown person".
---
## Part 3
* Play with the interface (each of the buttons) and observe how the program reacts. Take note of the printed INFO.
* Explain how this program works with regard to STATE, SEQUENCE, and CAUSALITY of each line, and/or specific parts of a line as appropriate. Use specific vocabulary, as demonstrated in the notes section.
>The initial state of part 4 is a gif of a cat "shaking it's tail feather" with 7 different buttons that can be pressed as well as an INFO box to give you desired information about the image. Once you click one of the boxes, it changes the state of the INFO box to then be filled with information like tagName, src id, etc.(We tried to undertsand what element the `var mysteryEl = document.querySelector('body');` changed but it still remains a mystery, however, we can say that it doesn't change the state of Part 3). When we continued testing out the sequences of the buttons, we noticed a few changes. The first being:
>

>Switching around the tagName and id elements within the printLog. We left the defining characteristics like tagName and id that would show up in the INFO box however the information given in those to categories differed.
If we also changed the organization of the functions it changed the way it was organized in our tinker. The original:
And we changed it to:
It changed the information given in the INFO box.
All of this to say that the sequence we recognized was not just the way the functions were written within JS, but also the sequence in which it was given in the INFO box depending on what button was pressed. The state was able to be reset by the reset button to a blank state but as soon as a button was pressed, it changed the state of the INFO box. And the causality was the ways in which we manipulated the code to see the different effects that would occur when it was manipulated. We also noticed with the "change image" button, the difference between what information (like tagname, ID, src) in the INFO box.

* Be sure to articulate both aspects of the HTML and JS.
>When it comes to causality, you definitely can notice the effects of HTML from the JS. When a button was pressed, it would take the information from the HTML and display it in the INFO box. For example:
This was the html and when you pressed the "Show Image Data (Partial)" button you would see tagName as IMG, you would see id as animalImage and that is because the JS function links:
We're guessing that the `printElementPartialData` function creates the printed information within the INFO box and that it links the id of the HTML to work within the JS.

* Compare and contrast the `showImageData` and `showImageViaParent` functions.
* How do these two different functions achieve the same output?
>When we pressed the `showImageViaParent` we didnt notice that it did anything different than the Partial button. When we looked inside the coding we noticed this was the HTML code:
And this was the JS code for it:
Since the animalImage was inside of the div animalImageParent in the HTML code, we assumed that's what made all information within that class be a replica of information. We also noticed that within the JS, that the `showImageViaParent()` has a definition of the `parentEl` variable but doesn't have any definition further (like what is `parentEl.children[0]`? where did the "children" come from? where is the array that has 0?) so we that that may have the reason as to why the data doesn't change.

* Compare and contrast the `showParentData` and `showParentViaImage` functions.
* How do these two different functions achieve the same output?
>Similar to the `showImageData` and `showImageViaParent` functions, the `document.querySelector()` shows the same HTML that are within the same div group which makes sense why they would have the same output.

* Play with the Change Image button.
* Can you modify the related code so that each time you pressed it, it would show 1 of 5 images, cycling through to the next image per click?
* There are several ways to solve this.
>We tried to have it cycle through 5 image but it would only change to the new image `src` that we gave it. Was thinking to give the `var imgEl`
> an array? but wasn't sure how to do that with `src`.
* Play with the Show This Button button.
* What is the value of the property onclick of the button?
>The onclick button refers to the function within the JS. In the HTML it says `<button class="btn btn-default" onclick="showParentData()">Show Image Parent Data (Partial)</button>` and then when you look at the JS it has
`function showParentData(){....}` which you can see how the onclick and the function replicate the same things. SO when you click on that button the function will "do its thing" and define the data within it (which was the #animalImageParent from the HTML).
---

## Part 4 - Challenge

* Play with the interface (each of the form inputs) and observe how the program reacts. Carefully take note of what actions cause what results, in what order. ALSO, open up your Chrome Devtools and watch your inspect elements tool pane as you interact with this form.
* Explain how this program works with regard to STATE, SEQUENCE, and CAUSALITY of each line, and/or specific parts of a line as appropriate. Use specific vocabulary, as demonstrated in the notes section.
* Be sure to articulate both aspects of the HTML and JS.
>We appreciate the way that the form input is linked to the below "results" section. The labels created by the user interaction with the form is clearly marked in conjunction with the user.textInput. The state begins with coffee being automatically populated but everything else being in a blank slate. Once you press on the choices and click save it gives you the reesults of your choices, changing the state of part 4. Also when you type into the box, it will display in the results box, ultimately changing the state of the part even if the no box is populated. The initial sequence is to answer all the questions then click save to see the results, which would be the "sequence" of events for part 4. When it comes to the code, the choices need to be selected and saved in order for the results to populate in them (which is also a causality). Another causality is the words typed within the text box. When words are typed within the text box, it appears in the result box due to `function characterTyped(e)` which correlated with with the text area's `onkeyup="characterTyped(event)` HTML code.

* Explain the differences between `select`, `checkbox`, `radio`, `textarea` with regard to how we get the input values.
>'Select' is when a user can choose from a series of options. 'checkbox' is the a series of boxes in which a user can select multiple values through a square representation. 'radio' is typically a form of button that allows for one selection through a circular representation. 'textarea' is the empty string ("") for user input to be added as the value (.textValue).

* What is the importance of the name attribute, especially for radio buttons?
>It lets the person coding know what type of butons they can use to survey a group. For example, if you want to select multiple items (like the time of day you like coffee) versus if you use the select button to represent that the user has one one item to choose between the options. It also lets us know what type of coding may be involved when having these buttons (like if we need an array, string, boolean, etc.).
* Explain the significance of `e`, `banana`, `bananaEvent`, and `event`.
* How are they the same and how are they different?
> `e` is how you're able to see the words your are inputing in the textarea within the RESULTS box.`banana` is what saves the information that is clicked and shows them within the RESULTS box. We're not too sure what `bananaEvent` and `event` does. With `bananaEvent`, we think it correlates with the textarea because in HTML the code is `<textarea id="why" class="form-control" placeholder="Enter reasons here" onkeypress="saveCoffee(event)" onkeyup="characterTyped(event)" onblur="editingOff()"></textarea>` and the significant part is the `editingOff()` because in JS the bananaEvent is in the `function editingOff(bananaEvent)` With `event`, we think that it correlates with `<select id="coffee" class="form-control">` in the HTML since within the JS it has the function `var selectEl=document.querySelector('#coffee');` and previously the HTML correlated with the JS in the `document.querySelector()` section.

* Try tinkering with some of these functions to produce some diffent looking, behaving results in the results pane.
* Explain what you tinkered with and what the results were.