Week06 Overview

Things of interest for Week06

by Charlie Calvert

Topics

Reading: Javascript & JQuery by Duckett. Chapters 1 & 2

Women in Tech Links

For obvious reasons, this is not my subject, but I thought these links might be helpful for some students. It looks to me like there are some good things here, such as bootcamps and active twitter feeds. If any of these links are off topic, offensive, or not useful, please let me know.

Clean up this Page

Here is a page with several errors in it. Let's paste it into a blank HTML page, run it, and fix it:


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>List Button</title>
    <link href="styles.css" type="text/css" rel="stylesheet" />

    <script src="elf-code.js"></script>
    <script src="index.js"></script>


</head>

<body>
    <header>
        <h1 class="center">Button List</h1>
        <header p>Show how to style buttons and respond to button clicks. </header p>
    </header>
    <p class="by-line"> by Charlie Calvert</p>

    <h1 class="main">
        

        <input type="text" name="list-data" id="list-data">
        <button id="set-text" type="button"> Clear Input</button>
        <button id="add-to-list" type="button"> Add to list </button>

            <ul id="my-list" type="ul">

        </ul>
    </h1>
    
    <h1 class="h1new-point"> Custom h1 class</h1>
    
    <p>
        <footer>  2018: Charlie Calvert </footer>
    </p>


</body>

</html>
            

Border Shorthand

Because I originally taught you wrong, a number of people did this or something like it:

                border: 2px black thick;
            

It should be, for instance:

                border: 2px black solid;
            

Here we are doing border-width, border-color and border-style.

Method Declarations

Let's fix this code:


window.onload = () => {
    // Part I here
        const userInput = document.getElementById('list-data');
        const setTextButton = document.getElementById('set-text');
    
        }
    // Part II here
        
        setTextButton.onclick = () => {
            userInput.value = 'The first item for my list';}
    
    // Part III here
    listButton.onclick = () => {
        const myList = document.getElementById('my-list');
        elfCode.appendToList(myList, userInput.value);
    }
                       
            

Box Model

CSS Box Model Diagram
Caption: The CSS Box Model by Charlie Calvert from the wikimedia commons