V School - Module 0

    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <h1>index</h1>
            <script src="index.js"></script>
        </body>
    </html>
    A few times throughout Module 0 we'll need to link to a video created outside of
    
    In order to do this, we've inserted this Scrimba "playground" as a means of keep
    
    The link will be provided at the bottom of this file, so you'll need to copy tha
    
    Once you've watched the external video, in order to continue on with the playlis
    
    
    ## Why the workaround?
    We really want to keep this Module 0 course entirely inside of Scrimba, so the w
    
    Without further ado, let's learn how to best set up a Mac for taking this course
    
    Scrimba is great for learning, but you won't be using it when you're building re
    
    Our personal editor of choice for students to use is Visual Studio Code, due to 
    
    Use the link below to open the lesson on setting up and using Visual Studio Code
    
    Again, once you're done watching the video, come back here to Scrimba, click the
    
    URL: 
    https://youtu.be/xn7-Wx1tD_4
    HTML
        - Hypertext Markup Language
        
        - Tags - The syntax used to create HTML elements
        <h1></h1>
        
        - Elements - These define the parts of our website (text, images, etc.)
        
        - Attributes - These allow us to configure our elements 
    
    
    
    
    
    
    
     <!--
          Above this comment, create an HTML webpage from scratch that i
          following elements:
           - DOCTYPE, html, head, body (required for page to work - boilerplate)
           - h1, h2, h3, h4, h5, h6
           - p
           - span
V School8:3412 days ago
    <html>
        <head>
            <title>HTML Attributes</title>
            <link href="style.css"/>
        </head>
        <body>
            <h1>HTML Attributes</h1>
            <a href="www.google.com">Go to Google</a>
            <img src="https://images.unsplash.com/photo-1562259863-9d5597314053?i
            
            <ul>
                <li>item 1</li>
                <li>item 2</li>
            </ul>
    # Assignment - Silly CIA part 1
    
    Your assignment is to now create an HTML webpage that matches the image given in
    You will be given all of the text and information needed to make the website, bu
    to create the index.html file and put all of the information in the appropriate 
    information shows on the page correctly.
    
    The assignment can be found at the following link:
    
    
    Create a directory on your computer called silly-cia
    <html>
        <head>
            <title>HTML5 Semantic Tags</title>
        </head>
        <body>
            
            <nav>
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
            </nav>
            
            <header>
                The heading on the page - Semantic Tags
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <div style="color:red;font-size:55px; ">Welcome to CSS!</div>
        </body>
    </html>
    
    
    
    <!-- 
    CHALLENGE
    Give this a try!
    <html>
    
    <head>
    	<link rel="stylesheet" href="index.css">
    </head>
    
    <body>
    	<h1>The Coffee Connection</h1>
    	<h2>Connecting Coffee Connoisseurs</h2>
    	<div class="parent">
    		<p>Dark Coffee</p>
    		<p>Medium Coffee</p>
    		<div>
    			<p> Medium-Light Coffee </p>
V School10:349 days ago
    # Assignment - Silly CIA part 1
    
    * Your assignment is to now create an HTML webpage that matches the image given in the directions.
    You will be given all of the text and information needed to make the website, bu
    to create the index.html file and put all of the information in the appropriate 
    information shows on the page correctly.
    
    * The assignment can be found at the following link:
    https://coursework.vschool.io/silly-cia-part-2/
    
    * Create a directory on your computer called silly-cia, create an index.html file inside that directoy, and then open it in your code editor (Visual Studio Code) to complete the tasks.
    # Assignment - CSS Wars: The Selector Awakens
    
    * The assignment can be found at the following link:
    https://coursework.vschool.io/css-wars-the-selector-awakens/
    body {
        background-color:#A4F6B9
    }
    .header {
        background-color:#A4B
    }
    .ski-gear {
        background-color: rgba(55,155,255,1);
        font-family: Arial, Helvetica, sans-serif;
    }
    <html>
    
    <head>
    	<link rel="stylesheet" href="index.css">
    </head>
    
    <body>
    	<div>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    			</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    	</div>
    	<div>
    		<a>Display</a>
    # Assignment - Newsies
    
    * The assignment can be found at the following link:
    https://coursework.vschool.io/block-vs-inline-newsies/
    body, html {
        margin: 10px;
    }
    .space-one {
        display: inline-block;
        border-bottom: 3px solid black;
        padding: 15px;
        margin: 15px;
        
        
    }
    .space-two{
        display: inline-block;
    }
V School3:343 days ago
    # Assignment - Color Grid From Scratch
    
    * The assignment can be found at the following link:
    https://coursework.vschool.io/color-grid-from-scratch/
    html, body {
        margin: 0;
        padding: 0;
        
    }
    .coffee {
        width: 425px;
        border: 2px solid red;
        
    }
    .decaf {
        height: 400px;
        width: 555px;
        border: 2px solid blue;
    # Assignment - CSS Flags
    
    * The assignment can be found at the following link:
    https://coursework.vschool.io/css-flags/
    # Assignment - Design a Blog
    
    * The assignment can be found at the following link:
    https://coursework.vschool.io/design-a-blog/
    Debugging your code is essentially the programming-specific version of problem s
    
    Use the link below to open the lesson. When you're done, make sure to come back 
    
    URL: 
    https://youtu.be/WEcGpV0z-Is
    The developer tools in whatever browser you're using are one of the most importa
    
    URL: 
    
    Although most people
    
    URL: 
    https://youtu.be/IvdTXLWD-Pk
    var name = 10
    
    var age
    
    var friends
    
    var isThirsty
    
    var address
    Write a program that has a shopper object. Include at least one property with ea
    
    - String
    - Number
    - Boolean
    - Function (called a "method" when it's inside an object like this. Check out an example for help writing your own)
    - In addition, you should add a groceryCart property to your object, which should be an Array of items that can commonly be found in a grocery cart.
    
    The link to this assignment can be found here:
     - https://coursework.vschool.io/grocery-store-js/
     
    Create a diretory called grocery-store-js and then create a index.js file inside
    // Javascript Arrays
    var myNumbers = [1, 2, 3, 4, 5]
    
            // .   0 .      1 .      2 .     3 .       4
    var colors = ["blue", "green", "red", "yellow", "purple"]
    
    // console.log(colors[5])
    
    // Length
    // console.log( colors.length )
    
    // String
    var name = "joe"
    console.log( name[1] ) // "o"
    // Conditionals 
    // Boolean - true / false
    
    // if(2 === 4){
    //     console.log("TWO IS EQUAL TO FOUR")
    // } else if(2 === 5){
    //     console.log("TWO IS EQUAL TO FIVE")
    // } else if(2 === 3){
    //     console.log("TWO IS EQUAL TO THREE")
    // } else {
    //     console.log("I dont know what's going on")
    // }
    
    // Comparison Operator
    #Assignment - if statement olympics
    
    - https://coursework.vschool.io/if-statement-olympics/
    
    * This exercise will have you practice conditionals, conditional operators, and logical operators.
    
    * Some questions asked may include things we have not yet looked at, but take this as a practice on doing research as that is an essential skill as a developer.
    
    * The exercise will get progressively harder. You should at least strive to get one medal, but please try to go the extra mile!
    
    * Create the if-statement-olympics directory on your computer with an index.js file for the assignment, then work on it in Visual Studio Code.
    
    Also, feel free to practice using ternary statements for extra credit too!
    // Javascript Loops
    
    
    // for(var i = 0; i < 10; i += 2){
    //     console.log(i)
    // }
    
    // var favFoods = ["pizza", "pasta", "ice cream", "banana", "tacos",
    // favFoods.length // 4
    
    // console.log(favFoods[0])
    // console.log(favFoods[1])
    // console.log(favFoods[2])
    // console.log(favFoods[3])
V School18:1812 days ago
    #Assignment - Even/Odd looping
    
    https://coursework.vschool.io/evenodd-looping/
    #Assignment - Lo
    
    https://coursework.vschool.io/loops-and-arrays-practice/
    // Functions Part 1
    
    // DRY
        // Do not repeat yourself
        
    // Statement
    // var name = "nate"
        
    // Function Declaration  
    // function sum(){
    //     console.log(2 + 2)
    // }
    
    // // Function Expression
    // 1. Write a function that returns the sum of any two numbers you give it.
    
    
    // 2. Write a function that takes a string such has "Joe" as an argu
    
    
    // 3. Write a function that takes in a number as an argument, and re
    #Assignment - Functions exercise
    
    Use the following link for the assignment t
    // Javascript Objects Part 1
    
    // key: value
    var person = {
        name: "Rick",
        age: 70,
        friends: ["Morty", "Joe", "Sam", "Samantha"],
        address: {
            street: "123 street",
            city: "Somewhere"
        }
    }
    
    
    // Javascript Objects Part 2
    
    var car = {
        type: "Honda",
        make: "Civic",
        wheels: 4,
        honkSound: "BLLEERRP",
        honk: function(){
            console.log( this.honkSound )
        }
    }
    
    // car.hasHadAccident = true
    // console.log(car)
    #Assignment - Social JS
    
    
    # Assignment - Loop Olympics
    
    * This will give you additional practice on using and creating for loops
    
    * The exercise will get progressively harder and hard. You at least should get one medal, but feel free to go the extra mile!
    
    - https://coursework.vschool.io/loop-olympics/
    // JS Conventions
    
    // casing - camelCased
    
    var myLocationIsInUtah = true
    
    // white space
    
    for(var i = 0; i < 10; i++){
        
    }
    
    // naming
    
    #Assignment - Daily Planet Editor
    
        * This assignment will have you clone down a repository from git
        and make sure it runs correctly.
        
        * You are only looking for bad conventions, do not change the lo
        
        * Full instructions are found at this link:
    
    - https://coursework.vschool.io/daily-planet-editor/
    // Color controls
    
    var purpleBtn = document.getElementById("purple")
    var greenBtn = document.getElementById("green")
    var blueBtn = document.getElementById("blue")
    var redBtn = document.getElementById("red")
    
    purple.addEventListener("click", function() {
        document.body.style.backgroundColor = "rebeccapurple"
    })
    
    green.addEventListener("click", function() {
        document.body.style.backgroundColor = "forestgreen"
    })
    # Quiz (type your answers below):
    1. What does DOM stand for?
    Document Object Model
    
    2. In your own words, what is the DOM?
    JavaScript object that represents the document (web page).
    
    # Assignment:
    
    * Outside of Scrimba (in an editor like Visual Studio Code), build a basic HTML page from scratch (no copy/pasting!)
        * Try to do so without looking at any past work if you can.
    * Connect a JavaScript file to the page
    * Log the `document` to the console. (Shows up as <> in Scrimba)
    * Open the HTML page in a browser (can simply double click the file on your comp
    
    
    When you're done with the above, open the menu on the upper-right-hand corner of
    // Select a single element from the page - returns object
    // Select multiple elements - returns an array of objects
    
    var hello = document.getElementById("hello")
    console.log(hello)
    console.dir(hello)
    # Assignment:
    
    * Outside of Scrimba (VS Code or another editor), create another HTML page from complete scratch (no cheating!) and connect a JS file to it
    * Create an <h1> element and give it an ID, but don't put any text inside
    * In JavaScript, select your <h1> element and give it some text
        * You may likely have to look up how to do this. This is a great
    * Open your HTML page in a browser and check if your text shows up!
        * If you're using VS Code, you can use the Live Preview extensio
        
        
    Once you're ready, move on to the next lesson in the playlist! And remember, you
    # Quiz:
    
    1. What are some of the differences between getElementById and getElementsByClassName?
    * id - returns a single element/object from the document. class name (tag name) returns an array-like object.
    * id - needs an id to find, class name - needs a class to find
            document.getElementsByTagName("div")
    
    2. What will `.getElementsByClassName` return if there are no elements with the matching class in the document?
    Returns an empty array
    
    
    3. What will `.getElementById` return if there is no element with the matching id in the document?
    
    
    // querySelector
    // Select a single element from the page. (Returns the first element
    // var result = document.querySelector("ol#favorite-things > li")
    // console.log(result)
    
    
    // querySelectorAll
    // Select all elements from the page that match the query.
    var result = document.querySelectorAll("ol#favorite-things > li")
    console.log(Array.from(result))
    
    for (var i = 0; i< result.length; i++) {
        result[i].textContent = "** REDACTED **"
    }
    // innerHTML - security risk
    // innerText - "expensive"
    // textContent
    
    // var person = {name: "Joe"}
    // person.name = "Jim"
    // console.log(person)
    
    /**
     * 1. Select the h1 element
     * 2. Save the h1 element's text to a variable
     * 3. Change the paragraph element's text to be the same as the text
     */
    
    var header = document.getElementById("header")
    header.style.backgroundColor = "blue"
    
    
    document.body.style.backgroundColor = "burlywood"
    // fontSize
    // background-color
    // display
    // textAlign
    // margin, padding, border
    // className
    // document.querySelector("#header").className += " new-class"
    
    // classList
    console.log(document.querySelector("#header").className)
    document.querySelector("#header").classList.toggle("another")
    console.log(document.querySelector("#header").className)
    document.querySelector("#header").classList.toggle("another")
    console.log(document.querySelector("#header").className)
    var inputBox = document.getElementById("text-input")
    inputBox.value = "CHANGED!"
    var newLi = document.createElement("li")
    newLi.textContent = "3"
    var myList = document.getElementById("my-list")
    myList.prepend(newLi)
    
    /**
     * Challenge:
     * 
     * Add a paragraph after the existing unordered list with any text y
     * Do this completely in JavaScript!
     */
    
    var newP = document.createElement("p")
    newP.textContent = "V School rocks!"
    ## Tasks:
    
    1. Search Google to learn a little more about the difference between the `.append()` method and the `.appendChild()` method
    
    2. What do you see as pros/cons of using `.createElement()` and `append()` vs. `.innerHTML`?
    
    3. What happens if I create an element using `.createElement()` but don't use `.append()`?
    
    4. How might you use a for loop in conjunction with the DOM methods for create elements?
    
    var powerRangers = [
        {name: "Jason Lee Scott", color: "Red"}, 
        {name: "Kimberly Hart", color: "Pink"}, 
        {name: "Zack Taylor", color: "Black"}, 
        {name: "Trini Kwan", color: "Yellow"}, 
        {name: "Billy Cranston", color: "Blue"},
        {name: "Tommy Oliver", color: "Green"}
    ]
    
    var rangersList = document.getElementById("rangers")
    
    for (var i = 0; i < powerRangers.length; i++) {
        rangersList.innerHTML += "<li>" + powerRangers[i] + "</li>"
    }
    // Object.keys(window).forEach(key => {
    //     if (/^on/.test(key)) {
    //         window.addEventListener(key.slice(2), event => {
    //             console.log(event.type);
    //         });
    //     }
    // });
    
    var button = document.getElementById("button")
    
    function handleButtonClick() {
        console.log("The button was clicked!")
    }
    
V School10:0811 days ago
    MDN Docs on input element:
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
    
    MDN Docs on addEventListener:
    https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
    
    Programmer's best friend:
    https://www.google.com/
    Assignment: DJ JS (to be completed in your own editor on your machine)
    https://coursework.vschool.io/dj-js/
    
    You're starting your business as a strictly online DJ (DJ JS) and you want to st
    
    The square's color will change as follows:
    
    * Blue when the mouse hovers over the square
    * Red when the mouse button is held down over the square
    * Yellow when the mouse button is let go over the square
    * Green when the mouse is double clicked in the square
    * Orange when the mouse scroll is used somewhere in the window (not just over the square).
    
    You should also be able to press the first letter of the colors (typing "r" on t
Module 0