Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Zach Bryan
    @ZBryan
    how I you trying to use it
    scope wise "user" only exists inside this function
    Ryan
    @rraeburn
    Screen Shot 2014-09-14 at 8.13.06 PM.png
    Zach Bryan
    @ZBryan
    three back tick ```
    next line you code
    three back ticks
    that will give you semantic highlighting in gitter
    Ryan
    @rraeburn
    ah ok
    Zach Bryan
    @ZBryan
    okay so quick and dirty fix...
    change the scopr of user
    scope*
    Ryan
    @rraeburn
    so would this mean defining the "user" var outside of the userAnimal function to make it global?
    Zach Bryan
    @ZBryan
    yes
    or just remove the function
    function Animal (name, speed, focus) {
      this.name = name;
      this.speed = speed;
      this.focus = focus;
      this.position = 0;
      this.isFocused = function () {
        return Math.Floor(Math.random() * 10) < this.focus;
      }
    
      this.advance = function () {
        if (this.isFocused) {
          this.position += this.speed;
        }
      }
    
      this.progressReport = function () {
        return this.name + " is at" + this.position
      }
    
    }
    
      alert ("An unknown racer has entered!");
      var userName = prompt("What is your name?");
      var userSpeed = prompt("How fast are you? 0-9");
      var userFocus = prompt("How focused are you? 0-9");
      var user = new Animal(userName, userSpeed, userFocus);
    
    var rabbit = new Animal("Rocky", 8, 3);
    var turtle = new Animal("Mrytle", 3, 7);
    var meters = 100;
    
    while (turtle.position < meters && rabbit.position < meters && user.position < meters) {
      rabbit.advance();
      turtle.advance();
      user.advance();
        alert(rabbit.progressReport() + "|" + turtle.progressReport() + "|" + user.progressReport());
    }
    not the best solution, but get it working then work on cleaning it up
    Ryan
    @rraeburn
    OK thanks I appreciate it. Not sure why I'm having such a rough time with this thing
    Zach Bryan
    @ZBryan
    sometimes the best thing you can do is walk away for a little while
    Ryan
    @rraeburn
    haha yeah I think that's probably not a bad idea
    Zach Bryan
    @ZBryan
    go for a run, read a book do something to disengage for 30 min then look at it again
    Ryan
    @rraeburn
    gonna do that. appreciate the help so far!
    Zach Bryan
    @ZBryan
    no problem, good luck
    Ed Abrahamsen
    @esa2

    Hey Zach, In the week 4 quiz there was this problem:

    I have a <div> that has the following styles applied to it
    width: 300px;
    border: 2px solid #a7a7a;
    margin: 20px;
    padding: 20px;
    How wide (in px) is my div?

    I answered 384 which came back as wrong. given the box model I believe this is the correct calculation:

    300px (width)

    • 40px (left + right padding)
    • 4px (left + right border)
    • 40px (left + right margin)
      = 384px

    Why is this wrong?

    Zach Bryan
    @ZBryan
    @esa2 @harberg I am going to paste what nick the TA said he is way better at css than I am and I think his explanation is better than I could do.
    So, margin doesn't get factored into the total width of an element. Border and padding do. The div has a width of 300px + 2px of border left + 2px of border right + 20px of padding left + 20 px of padding right. Margin exists outside of the box and isn't added into the total width of the element.
    Understanding the Box Model is the corner stone of understanding layout and css. It becomes even more important with % based width in responsive design.
    http://css-tricks.com/the-css-box-model/
    Ed Abrahamsen
    @esa2

    I checked that link and it gives the size of the box in pixels. The question was how wide is the div not the box.

    Here are 2 sites I referenced and their answers:

    http://www.w3schools.com/css/css_boxmodel.asp
    The total width of an element should be calculated like this:
    Total element width = width + left padding + right padding + left border + right border + left margin + right margin

    http://learn.shayhowe.com/html-css/opening-the-box-model/
    According to the box model, the total width of an element can be calculated using the following formula:
    margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

    Both site explicitly say that the element width includes the padding. For now I still maintain the correct answer is 384px.

    Ryan
    @rraeburn
    Esa, not sure if you solved your problem yet but when I entered 384 I got a correct response. However, when I initially wrote 384 px I got a wrong response because of the space between the # and "px". Try re submitting your answer like "384" or "384px" with no space.
    Ed Abrahamsen
    @esa2
    That's odd. I haven't tried again but when I initially entered 384 with no px or spaces It actually told me the correct answer was 344. I will try it again. Thanks.
    Ed Abrahamsen
    @esa2
    Screen Shot 2014-09-16 at 11.57.00 AM.png
    Nicholas Harberg
    @harberg
    Question has been updated to hopefully make things more clear. The content area of the div is not effected by margin. Anything is outside of the border in the box model doesn't count when adding the width together. You can do an experiment with your dev tools in chrome. If you highlight and element it will tell you how wide the element is. If you remove the margin or add margin to the element, the width will stay they same. The amount of space that the element takes up will increase, but the content of the element will not change it's width.
    "Margin is unique in that it doesn't affect the size of the box itself per se, but it affects other content interacting with the box"
    Ed Abrahamsen
    @esa2
    Thanks Zach and Nicholas, Appreciate you taking the time to explain this.
    Zach Bryan
    @ZBryan
    :) that would be Nick
    CSS still confuses me too
    Zach Bryan
    @ZBryan
    how are you guys holding up? any points in particular you are struggling with? you will get more css in the next class so don't stress too much on the rushed info there
    muhammed safa yaşar
    @msafayasar
    I need help I think. I put my object in a function and put that function in another function. Now I have to call my objects from out of the outer function. How can I do that? It is a bit complicated but I know that there are some heroes :smile:
    muhammed safa yaşar
    @msafayasar
    I found how to do. Thanks anyway
    Zach Bryan
    @ZBryan
    just got home, glad you got it worked out
    Ryan
    @rraeburn
    anyone know how I could grab user input from a html form to fill in object properties?
    I've got the form and I think the correct jQuery setup, but I can't quite figure out how to do all this before the javascript runs the race and also input the user racer
    muhammed safa yaşar
    @msafayasar
    This message was deleted
    this is the way I did
    var rabbitName = document.getElementById("rabbitName").value;
    var rabbitSpeed = document.getElementById("rabbitSpeed").value;
    var rabbitAge = document.getElementById("rabbitAge").value;
    var rabbitFocus = document.getElementById("rabbitFocus").value;
    
    var turtleName = document.getElementById("turtleName").value;
    var turtleSpeed = document.getElementById("turtleSpeed").value;
    var turtleAge = document.getElementById("turtleAge").value;
    var turtleFocus = document.getElementById("turtleFocus").value;
    
    var meters = document.getElementById("raceMeterInput").value;
    
    var rabbit = new Animal(rabbitName, rabbitSpeed, rabbitFocus, rabbitAge);
    var turtle = new Animal(turtleName, turtleSpeed, turtleFocus, turtleAge);
    muhammed safa yaşar
    @msafayasar
    Just get the element from the form and put it in a variable. Then you can use the variable in the object
    Zach Bryan
    @ZBryan
    your guys doing okay? need help with anything?
    Patrick Landin
    @PatrickLandin
    I know it's probably something obvious, but I've gone from having my race run to having it not run at all as I've attempted to integrate an HTML button that moves the racers. I've simplified my race game and attempted to wrap a .click event around the code that advances my racers. Thanks for your help. https://github.com/PatrickLandin/F1-Webpage
    Ryan
    @rraeburn
    @PatrickLandin not sure if this makes any difference, but I got my race button to work by using the .on() event listener
    so $('button#race').on('click', function () { ....
    and then you can add the timer if you want the race to run after one click, or just keep clicking to advance racers
    Zach Bryan
    @ZBryan
    @PatrickLandin sorry it took a while to get back to you, saw this at work and didn't have a chance to look at it. your background image is infront of the buttons
    Patrick Landin
    @PatrickLandin
    Thanks guys. Was able to figure it out.