Mini-Problem: Javascript Part I.md

Mini-Problem: Javascript Part I

This week, we got to taste a little bit of what basic Javascript can do. But beyond working with very static data, and limited/isolated examples, the FCCs have not really shown you how Javascript can empower your web-apps to DO interesting things.

This Mini-Problem (and Tinker) is the bridge to give you a sense of what you can do with basic Javascript, and your pages. For this week's mini-problem, I would like you to take the existing page you created for your Simple Lesson Project and hook up the interactive features (to the best that you can) that Javascript allows.

1. Practice using HTML onEvent="someFunc(event)" pattern; The attribute / value pairs to connect HTML with your JS.
2. Practice using variables to store and recall the different STATES of your program.
3. Pratice designing, declaring, defining, and calling functions.
4. Think / Experiement with Javascript to do something interesting with it.

"Gist" of the Project

You will add Javascript functionality to your existing Project page. You can accomplish this through the mandatory form that was created, or through any interactive parts you designed throughout your page.

Your Javascript should get user input or listen for user initiated events (e.g. like clicks) and react to it in some sort of meaningful way. This could be for example:

• Taking user input and creating a resulting output to the page (e.g. feedback, summary, etc.)
• Taking user actions through the events initiated by a user and manipulating the page (e.g. when the user clicks on a word in a span, the program toggles a .highlight class to those words so the user can see what they clicked. e.g. when a user fills out some info, your page might show a new section or content by changing a hidden element to not hidden.)
  • There is no hard limit to how you make your page react to users here.

Let's make your page interactive.

Specifications

Basically you only need to be focusing on the Javascript part of your page, no major page content needs to be made. That said, this mini-problem will most likely force you to consider whether you need to change or add additional elements, or ids or classes or other attributes to your existing page for it to be functional via HTML (e.g. attributes to focus on: radio buttons - name, inputs - value) or selectable by Javascript for reading or manipulation. Your Javascript might have to create new content in order to accomplish what you want.

• You should use variables to have your program "remember" certain STATES of your program and "recall" them for later use.
• You should use functions to organize your Javascript logic.
  • You should try to design smaller functions than a function that does a lot of things at once.
  • You should then make more complex functions as a composition of your smaller functions.
• You should LISTEN for events like click, change, blur etc. and call functions that will do something in response to the event.
• You should WRITE some content to the page based on user data (inputs) or actions.
• You should MANIPULATE html/css elements (e.g. change attributes like classes or src) using Javascript.
• You should FORMAT your code cleanly, more on this shortly.

Example of Well Designed Functions

Good functions do a simple task singularly. Notice how getUsername() is simple enough that I can use it as part of the makeWelcomeMessage() function as a composition, and also as a standalone later.

Having functions do one task cleanly, makes your functions reusable else where. Imagine if you hard coded the functionality to get user data, make a message, and print to screen all in one function.

Later if you wanted just the user data, you can't use the bloated function because it does so much other stuff. If you isolate the get user data part into its own function - you can simply call that single function inside your make a message function or print to screen function. Etc.

function getUsername() {
  var username = document.querySelector('input').value;
  return username();
}

function printUsername(username) {
  document.getElementById('#page-title').innerHTML = username;
}

function makeWelcomeMessage() {
  var user = getUsername();
  return "Hello " + user + "!!!";
}

var username = getUsername();

printUsername(username);

Formatting JS Correctly

I'm going to be very strict on proper formatting for this assignment. You should format your JS in the following way:

• Things on the Global scope should be on the leftmost column line.
• Variable names (including function names) should be in camel-case
  • Starts with lowercase
  • Each first letter in the word in the variable name isCapitalized
• Spaces between operators something = something; not something=something;
• Semi-colons at the end of a statement statement += "words";
• Code inside of blocks, denoted by curly-braces {} should be indented 1 tab-space in or 2 spaces in.
• Opening curly-braces { should be proceeded by a new-line. Closing curly-braces } should align with the start of the line on which the opening curly-brace exists.

GOOD Examples:

var camelCase = true;    // Starts with lower, all other words start with UPPER
var favoriteBook;        // Variable name describes the data clearly

function myFunction() {  // New Line
  ...                    // Block / Function Body
}                        // Closing curly-brace

function myFunction(paramA, paramB) {  // Parameters separated by , and space
  ...                                  // Block / Function Body
}                                      // Closing curly-brace

function getFavoriteBook() {           // Descriptive function name (what it does)
  return ... ;
}

function setFavoriteBook(title) {      // Uses understandable naming pattern, descriptive
  favoriteBook = title;
}

function writeFavoriteBook(title) {    // Uses established naming pattern, descriptive
  ...
  bookTitleElement.innerHTML = title;
}

if (someEvaluation) {    // New Line
  ...                    // Block
}                        // Closing curly-brace

for (x of list) {        // New Line
  ...                    // Block
}                        // Closing curly-brace

BAD Examples:

var alllowercase = false;
var CapitalFirst = false;
var ALLUPPERCASE = false;
var snake_case = false;
var kebab-case = "VERYBAD";  // JS thinks "-" is a minus operator

function myFunction(){       // No space between () and opening curly-brace
return something;            // Block not properly indented
    }                        // Closing curly-brace not aligned

function myFunction () {     // Space between function name and ()
  ...
}

function myFunction(paramA,paramB) { // No space between params
  ...
}

if(someEvaluation) {     // No space between if keyword and ()
  ...
}

for(x of list)           // No space between for keyword and ()
{                        // Curly-brace should be at end of opening line
  ...
}

Submission

You will submit this assignment as a Github Repository and Github Page.

1. Canvas submission of necessary URLs.
2. Share the URLs to the Slack post to be created.
3. Instructions on how to follow.

NOTES

A lot of this week IS about experimenting with this new context (that you haven't seen before.) That is, how Javascript and HTML/CSS interact with each other.

It is partly about not being totally comfortable with knowing every detail. For example, the FCCs do not talk about what document is or what . means when you see it in the context of document.something().somethingElse. But there ARE hints embedded in the things you don't know, across all the examples I've given. Familiar hints that you should be noticing and trying to piece together. For example:

You might not know what this means.

document.querySelector("#myImage").src = "https://images.com/cat.png";

But you might recognize that:

• That there seems to be a hierarchy of things:
  • src of querySelector("#myImage") of document
  • document > querySelector("#myImage") > src
• querySelector() looks like a function
  • Takes one argument which looks like a string selector "#something"
  • Maybe it returns something?
• src looks like some additional data, a property of the preceding thing.

Take the PATTERNS that exist in this code, and utilize it to adjust it to do what you need to do. Each time you do, try fiddling with the individual parts in order to understand how this works.

Start creating an educated guess as to what some of the stuff you haven't seen before, does. See what you can do.