Designing Solutions Through Programming block 1 Lesson Notes - September 19: Difference between revisions

Latest revision as of 21:09, 17 September 2017

Our Big Idea[edit]

The function of every web application system is to accept data, process data and output information. Effective design of interdependent components results in useful function.

What are we going to learn today?[edit]

Hello Class!

By the end of class you will be able to say:

Review[edit]

I can explain every form input has a type and there are different kinds of types.
I can construct 4 different types of input types

New Learning[edit]

I can describe the two important attributes of a variables
I can describe how data is passed to a form
I can demonstrate how a form passes data
I can describe a fieldset and a legend element

<!doctype html>
<html>
<head>
    <title>My forms page</title>
    <style>
        form {
  /* Just to center the form on the page */
  margin: 0 auto;
  width: 400px;
  /* To see the outline of the form */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

form div + div {
  margin-top: 1em;
}

label {
  /* To make sure that all labels have the same size and are properly aligned */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input, textarea, select {
  /* To make sure that all text fields have the same font settings
     By default, textareas have a monospace font */
  font: 1em sans-serif;

  /* To give the same size to all text fields */
  width: 300px;
  box-sizing: border-box;

  /* To harmonize the look & feel of text field border */
  border: 1px solid #999;
}

/* The 300px width doesnt look good for radio button. This fixes */
input.radio {
width:10px;
}

input:focus, textarea:focus {
  /* To give a little highlight on active elements */
  border-color: #000;
}

textarea {
  /* To properly align multiline text fields with their labels */
  vertical-align: top;

  /* To give enough room to type some text */
  height: 5em;
}

.button {
  /* To position the buttons to the same position of the text fields */
  padding-left: 90px; /* same size as the label elements */
}

button {
  /* This extra margin represent roughly the same space as the space
     between the labels and their text fields */
  margin-left: .5em;
}
    </style>
</head>


<form action="process.php" method="GET">

<div>
    <label for="firstname">First name:</label>
    <input type="text" id="firstname" name="firstname">
</div>

<div>
    <label for="lastname">Last name:</label>
    <input type="text" id="lastname" name="lastname">
</div>

<div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
</div>


<div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
</div>

<div>
    <label for="comments">Comments:</label>
    <textarea rows="10" cols="10" name="comments"></textarea>
</div>

<div>
<label for="card">Card type:</label>
    <select id="card" name="usercard">
        <option value="visa">Visa</option>
        <option value="mc">Mastercard</option>
        <option value="amex">American Express</option>
    </select>
</div>

<div>
<fieldset>
<legend> Normal size of hot chocolate </legend>
    <input class="radio" type="radio" name="size" value="small"> Small <br>
    <input class="radio" type="radio" name="size" value="medium"> Medium <br>
    <input class="radio" type="radio" name="size" value="large">  Large
</fieldset>
</div>

<hr>

<div>
<label for="multi">Favorite ice cream:</label>
<select multiple id="multi" name="multi">
  <option>Banana</option>
  <option>Cherry</option>
  <option>Lemon</option>
</select>
</div>

<hr>

<div>
<label for="myFruit">What's your favorite fruit?</label>
<input type="text" name="myFruit" id="myFruit" list="mySuggestion">
<datalist id="mySuggestion">
  <option>Apple</option>
  <option>Banana</option>
  <option>Blackberry</option>
  <option>Blueberry</option>
  <option>Lemon</option>
  <option>Lychee</option>
  <option>Peach</option>
  <option>Pear</option>
</datalist>
</div>

<hr>

<div>
    <fieldset>
      <legend>Choose all the vegetables you like to eat:</legend>
            Carrots: <input type="checkbox" id="carrots" name="veggie[]" value="carrots">
            Peas: <input type="checkbox" id="peas" name="veggie[]" value="peas">
            Corn: <input type="checkbox" checked id="corn" name="veggie[]" value="corn">
        </fieldset>
</div>

<hr>

<div>
    <label for="bday">Birthday:</label>
    <input type="date" id="bday" name="bday">
</div>

<hr>

<div>
    <label for="favNumber">Favorite Number:</label>
    <input type="number" id="favNumber" name="favNumber">
</div>




<div class="button">
<button type="submit">Click to pass the form data to another page</button>
</div>




</form>

</html>

What is our homework?[edit]

Please enjoy your trip!

How am I being assessed today?[edit]

I will assess you formatively today, and make a professional judgement to what extent you understand our learning material. I will use observation, your written work, answers to questions, and contribution to class discussions as data to make my decisions. I normally record my observations in a "evidence of learning" spreadsheet, which I will happily share with you privately if you so wish. I usually need a day or two notice.

As a computer scientist, you have:[edit]

Confidence in dealing with complexity
Persistence in working with difficult problems
Tolerance for ambiguity
The ability to deal with open-ended problems
The ability to communicate and work with others to achieve a common goal or solution

Credits[edit]

Icons used with tremendous gratitude by Freepik from flaticon