jmk2142

Tinker Problem: Meow Mix

---

See demonstration: https://jsfiddle.net/jmk2142/dLb07fr2

TINKER - attempt to repair or improve something in a casual or desultory way, often to no useful effect.

It's funny that the problem is called a "tinker" problem in that tinkering is usually messing around with stuff without a very planned way. I think, when we use the word tinker, it's really to emphasize the spirit of the activity; that is to not feel too pressured into treating it like a test of your ability. It's really meant to be an opportunity for you to explore and have fun messing with stuff while using the guided questions to challenge your understanding.

jmk2142

Mini-Problem: Homepage

You might have noticed that I changed the theme of the first Project (next week) to a learning related context.

As such, the gist is: for this week's mini-problem, what I want you to do is build a at minimum, single-page personal homepage based on the kinds of things you learned via the FCC Exercises and your Collaborative Discussions.

It might be very helpful to think about the DESIGN of your homepage first, so you can have some sort of a rough idea of how you might IMPLEMENT your design and DEVELOP it via HTML and CSS. So to start planning think of the following different levels of abstraction:

1. OBJECTIVES
2. CONTENT REQUIREMENTS

jmk2142

Project: Simple Lesson

For this week, we're going to do three things.

1. Apply what we learned to build something a little big larger in scope.
2. Extend what we learned to a new HTML/CSS tool that should make life a lot easier.
3. Think about the DESIGN of our pages and how interaction might be used for learning.

"Gist" of the Project

jmk2142

TINKER: Simple Lesson

---

See demonstration: https://jsfiddle.net/jmk2142/szLbonkv

JSFiddle External Bootstrap CSS URL

After our run with basic HTML/CSS and trying to produce our websites, many of you have probably noticed that it's actually quite a chore to get your pages and parts of to align correctly using margins and padding, different width and height units like px and %. Actually, there are even more: em rem vh vw etc. To make matters even more difficult, I think you all have probably experienced how the representations of your visual layouts and definitions of dimensions is highly impacted by the hierarchy of your elements and what rules are set on the parents and grandparents of a particular thing.

jmk2142

TINKER: Javascript Part I

See demonstration: https://plnkr.co/edit/yQkssoXqxMpWoSQ5GNJD?p=preview

Tinker Tasks

This tinker takes the basics of what you learned about variables, functions, arrays, and puts it in a real context of web-pages. This is our first foray into actual user-computer interaction. As a general rule of thumb, at the very least, for every section/part you should be thinking:

What is the STATE? What is the SEQUENCE?

jmk2142

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.

jmk2142

{
  "parserOptions": {
    "ecmaVersion": 6
  },
  "plugins": ["html"],
  "settings": {
    "html/html-extensions": [".html", ".tag"]
  }
}