These are chat archives for FreeCodeCamp/HelpFrontEnd

27th
Nov 2017
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 00:05
first thing I see @Benjmhart is that your player variable is mispelled
instead of var player you have var plsyer
var plsyerTurn im guessing is incorrect
Jim Tryon
@jimtryon
Nov 27 2017 00:06
good catch @Rogue00
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 00:08
thanks @jimtryon my jquery isnt that strong..
CamperBot
@camperbot
Nov 27 2017 00:08
rogue00 sends brownie points to @jimtryon :sparkles: :thumbsup: :sparkles:
:cookie: 469 | @jimtryon |http://www.freecodecamp.org/jimtryon
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 00:08
I'm building my simon game with pure javascript...though I've just begun myself.
bleh
that's better...container fluid fixed that for me. :)
I've honestlly only built the very basic functionality so it doesnt differentiate between player and computer turns..nor does it run any check or match play system..just makes noise at this point....it did give me a nifty idea for building a sort of virtual keyboard though....maybe a browser based music machine that can mix kynotes with other beats and adjust speedd melody etc....yes..I know its been done...
Benjmhart
@Benjmhart
Nov 27 2017 00:25
@Rogue00 thanks for pointing that out but I haven't even started on that functionality yet.
CamperBot
@camperbot
Nov 27 2017 00:25
benjmhart sends brownie points to @rogue00 :sparkles: :thumbsup: :sparkles:
:cookie: 438 | @rogue00 |http://www.freecodecamp.org/rogue00
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 00:32
aye..i kind of noticed that when the sounds didnt play
i only added very basic functionality to my own simon project so far..honestly i've barely bgun working on it....
Benjmhart
@Benjmhart
Nov 27 2017 01:45
having trouble getting my simon buttons to change colors on the computer turn - the function is on line 105 and the start button will trigger it, any ideas?
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 02:00
seems to be working.
not letting me make a player turn though after the computer has its turn.
Benjmhart
@Benjmhart
Nov 27 2017 02:01
well I haven't written the playerturn
yeah i found the problem right before you tested I think
...i didn't actually give my buttons individual ID's yet...
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 02:20
I see...well as I said before my jquery isnt that strong...I've been coding in plain javascript...I'm agttempting to narrow my focus so I can get really gfod at using it before implementing much jquery or using any libraries etc..
Benjmhart
@Benjmhart
Nov 27 2017 02:27
how much do you know about setInterval? now that I've written the playerturn portion It seems like it's doing this thing where it's doing two cputurns at a time...
Daniel
@DanJP2016
Nov 27 2017 02:29
you may want to look into using requestAnimationFrame, setinvterval can do weird stuff across different browsers. https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
Benjmhart
@Benjmhart
Nov 27 2017 02:33
@DanJP2016 what kind of weird stuff?
oh, I see my problem, I was passing back to the cputurn too early. I think now I just need to create the two failure paths and the victory path and the tempo adjustments
Daniel
@DanJP2016
Nov 27 2017 02:34
it can be inconsistent and not always execute at the same time. for timing in a game you should probably use requestanimationframe, its up to you though
Benjmhart
@Benjmhart
Nov 27 2017 02:38
I'll read into it. thank you
BehindTheMath
@BehindTheMath
Nov 27 2017 02:41
Does Firefox have any plans to enable ES6 modules by default?
I can't find any roadmap information about it.
Benjmhart
@Benjmhart
Nov 27 2017 02:50
mozilla just released some improvements to spidermonkey - the compiler running on FF
Daniel
@DanJP2016
Nov 27 2017 02:50
here is an article on getting the same kind of performance with setInterval, might be useful to you https://css-tricks.com/snippets/javascript/replacements-setinterval-using-requestanimationframe/
(for @BehindTheMath )
juni
@junipberry
Nov 27 2017 02:53
hey guys, I’m pretty new to Javascript but trying to practice creating my first kata. Can you take a look at this solution and see if it makes sense?
function redoFiles(){
let files=[];
return files.split("").replace([0],"M").replace([-1],"_”);
and the end is .join()
BehindTheMath
@BehindTheMath
Nov 27 2017 03:23
@Benjmhart I don't see anything about ES6 modules there
xsf
@allan2coder
Nov 27 2017 04:14
HI
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 04:21
I was planning to implement the setInterval function in my simon to regulate the turns/plays
hello @allan2coder
I couldnt say @junipberry because I dont know what context...what youre trying to do..is it working in your overall code structure?
the code for my simon game is very basic..its has very little functionality but when you click the buttons they pulse and play a sound..
currently I'm just using single functions for each button with a short timer that sets a delay for the sound and the button pulse
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 04:27
function red() {
  x.play();
  document.getElementById("red").style.visibility = "hidden";  

   setTimeout(redOn, 500);

}
so I'm just using an onclick function in my html...when the user clicks the red button it triggers the onclick= "red()" and that runs this function
this function then plays the sound...and then it changes the visibility of the button id red to hidden so the red button pulses out...then setTimout(redOn, 500)...the timer runs for 500 millisecs...then calls redOn
function redOn() {
  document.getElementById("red").style.visibility = "visible"; 

}
red on sets the button back to its original state...visible.
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 04:32
it's pretty simplistic at this point..
instead of making them invisible i suppose I could change the opacity so that they darken when clicked rather than going dark but I havent gotten that far..
chetanmahore
@chetanmahore
Nov 27 2017 07:12
hello world
where is my bot bender
Rajat
@rajataudichya
Nov 27 2017 09:24
Hello
I believe there is bug in one of the challenge
it is showing similar results for the both the output
++myVar = 88 as well myVar++ = 88 as well?
Ideally it the first condition should show 88 and the second one should show 87
??
Markus Kiili
@Masd925
Nov 27 2017 09:38
@rajataudichya Expression ++myVar evaluates to 88 and myVar++ evaluates to 87. After either expression the variable myVar has value 88.
Rajat
@rajataudichya
Nov 27 2017 09:41
@Masd925 but what value should it display?
David Young
@dayvidwhy
Nov 27 2017 09:41
What do you mean display?
In the console?
Rajat
@rajataudichya
Nov 27 2017 09:42
yes
David Young
@dayvidwhy
Nov 27 2017 09:42
if you say var x = 1
x++ ‘resolves’ to 1, and then increments
that’s why we also have ++x, to ‘resolve’ to 2
Markus Kiili
@Masd925
Nov 27 2017 09:42
@rajataudichya What is displayed can depend on the console. Some consoles display the last value evaluatated and some only what you console.log.
Rajat
@rajataudichya
Nov 27 2017 09:44
@Masd925 isn't that an issue? I mean I am new to learning JS but understanding incrementation is become very difficult
how will I know which one should I consider
David Young
@dayvidwhy
Nov 27 2017 09:44
its pretty normal for most languages
Rajat
@rajataudichya
Nov 27 2017 09:44
I don't wish to move ahead without clearing this doubt? I have been stuck on this incrementing logic from a long time now can I know a source where complete detailed info about incrementation is given?
Markus Kiili
@Masd925
Nov 27 2017 09:44
@rajataudichya If you wan't to increment a variable before using it you use ++x and for incrementing after using, use x++.
David Young
@dayvidwhy
Nov 27 2017 09:44
unless your inlining things, like calling some function with the counter your almost always going to just use x++
Maybe I want to print out some numbers starting from the next one so I might go
var x = 1;
while (x < 10) {
    console.log(++x);
}
Rajat
@rajataudichya
Nov 27 2017 09:46
@Masd925 If you wan't to increment a variable before using it you use ++x ( by this you mean adding 1 before and for incrementing after using, use x++ ( and this means by adding 1 afterwards) I might sound really dumb but isn't that the same?.
David Young
@dayvidwhy
Nov 27 2017 09:46
That would print 2 first
Rajat
@rajataudichya
Nov 27 2017 09:46
okay @dayvidwhy
Markus Kiili
@Masd925
Nov 27 2017 09:46
@rajataudichya For example func(++x) will first increment x and then pass it into a function and func(x++) will first pass x into a function and then increment it. This is the difference. Second function call will be executed with original non-incremented value. After the function is executed, x is incremented.
David Young
@dayvidwhy
Nov 27 2017 09:47

whereas if I went

var x = 1;
while (x < 10) {
    console.log(x++);
}

it would print out 1 first

it just depends on what you want the piece of code to do
It really rarely comes up, you’d most likely see something like
var x = 1;
while (x < 10) {
    console.log(x);
    x++;
}
because that’s a bit clearer in terms of what it does and I don’t have to remember that ++x makes it increment first
Rajat
@rajataudichya
Nov 27 2017 09:48
I think once I use this function it would become much more clearer till then let's just go with what you guys have explained me thanks a lot @Masd925 and @dayvidwhy
CamperBot
@camperbot
Nov 27 2017 09:48
rajataudichya sends brownie points to @masd925 and @dayvidwhy :sparkles: :thumbsup: :sparkles:
:cookie: 502 | @dayvidwhy |http://www.freecodecamp.org/dayvidwhy
:star2: 4581 | @masd925 |http://www.freecodecamp.org/masd925
primuscovenant
@primuscovenant
Nov 27 2017 12:02
@heroiczero tx
CamperBot
@camperbot
Nov 27 2017 12:02
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2075 | @heroiczero |http://www.freecodecamp.org/heroiczero
Ghost
@ghost~59cdefc7d73408ce4f77dab0
Nov 27 2017 15:20
What should I use for if suppose I want to animate my button such that on hover my glyphicon slides left to right
Kaz Baig
@kbaig
Nov 27 2017 15:23
@parthprakash1 Depending on your needs, you can have a transition or animation on a class that is toggled on hover
Ghost
@ghost~59cdefc7d73408ce4f77dab0
Nov 27 2017 15:23
Where can I see more nifo on that @kbaig
info*
Ghost
@ghost~59cdefc7d73408ce4f77dab0
Nov 27 2017 15:29
Gr8 thx @kbaig
CamperBot
@camperbot
Nov 27 2017 15:29
parthprakash1 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 460 | @kbaig |http://www.freecodecamp.org/kbaig
hey guys how do i fix my overlapping nav
any help would be aprreciated
this layout is suppose to be for mobile only!
Kaz Baig
@kbaig
Nov 27 2017 17:05
@Botenga You mean that the dropdown is under the My Refund button?
Botenga
@Botenga
Nov 27 2017 17:06
@kbaig what I mean is when I hover xbox, playstation or nintendo the other nav links overlap them.
What I want to do is not display video but video is a parent element to xbox, playstation, and nintendo. I want to display those 3 link but when I do it has issues!
Maverink
@Maverink
Nov 27 2017 17:43
hi guys how can i share a var from inside a http request? im using jquery $.get() , and i declared the var outside but the var doesnt get updated with the json data coming from the api...
Kris Baillargeon
@krisb1220
Nov 27 2017 17:47
snip_20171127124341.png
snip_20171127124529.png
First UI project .... Thoughts ?
Maverink
@Maverink
Nov 27 2017 17:48
@krisb1220 nice one
Kris Baillargeon
@krisb1220
Nov 27 2017 17:49
You can't share a var via $.get as far as I know but I've only ever used it for JSON
You can make your variable a JSON key/value variable
and thank ya @Maverink
CamperBot
@camperbot
Nov 27 2017 17:49
krisb1220 sends brownie points to @maverink :sparkles: :thumbsup: :sparkles:
:cookie: 254 | @maverink |http://www.freecodecamp.org/maverink
Maverink
@Maverink
Nov 27 2017 17:50
tks dude @krisb1220
Kaz Baig
@kbaig
Nov 27 2017 17:50
@Maverink you want to use the data coming from the API within the callback you passed to $.get
Maverink
@Maverink
Nov 27 2017 17:52
i want to use it outside so other apis can access it
Kaz Baig
@kbaig
Nov 27 2017 17:53
@Maverink You have to call the other APIs within the callback
5millerk
@5millerk
Nov 27 2017 18:30
I'm working on my weather app and having an issue with the temp conversion. My On("click") only works once (I can change from C to F, but not back again?). Any ideas what I might be doing wrong? https://codepen.io/5millerk/pen/LjdWLN
ignore that it's ugly, just trying to make it work first haha
Stephen James
@sjames1958gm
Nov 27 2017 18:58
@5millerk When you update your temperature you are destroying "#units" (replacing it) and thus your event handler and thus your clicks are not registered for
Kaz Baig
@kbaig
Nov 27 2017 18:59
@5millerk so use the text method instead of the html method
5millerk
@5millerk
Nov 27 2017 19:00
@sjames1958gm @kbaig ok, I'll see if I can fix it that way
5millerk
@5millerk
Nov 27 2017 19:06
@kbaig if I use the .text method, I would need to update them separately, right? Update #temp, and then update #units? Seems like I'm misunderstanding and/or there would be an easier way to do it
Stephen James
@sjames1958gm
Nov 27 2017 19:08
@5millerk You will have to do both.
@5millerk It appears that if you set .text on #temp it loses the anchor tag, so you may need another element for just the temp so you can set it
<h3 id = "temp"><span id="num"></span>&deg<a id = 'units'>C</a></h3> Something like this in structure
5millerk
@5millerk
Nov 27 2017 19:16
@sjames1958gm ok cool, I was trying to avoid dividing the line into a bunch of groups like that (just seemed like there should be a cleaner way to do it), but I suppose if it works and it's ugly is better than it doesn't work and it's pretty haha
@sjames1958gm @kbaig thanks
CamperBot
@camperbot
Nov 27 2017 19:16
5millerk sends brownie points to @sjames1958gm and @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 462 | @kbaig |http://www.freecodecamp.org/kbaig
:star2: 8716 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Nov 27 2017 19:17
If you allowed clicking on #temp rather than #units your previous code would probably have worked.
5millerk
@5millerk
Nov 27 2017 19:20
@sjames1958gm oh if I made the whole thing the anchor instead of just the C/F?
Stephen James
@sjames1958gm
Nov 27 2017 19:20
Yes
Then you would be replacing the contents of #temp (which you assigned the click handler to) and it would not destroy your click registration
5millerk
@5millerk
Nov 27 2017 19:22
gotcha
that makes sense
it works now :-)
only weird thing now is when I hover over the C/F anchor my mouse icon changes to the text cursor?
is that just on my end or is that happening when you look at it too
Ashley
@Ashtheyogi
Nov 27 2017 19:24
on the puzzle manipulating Complex Objects and I dont know what to do:
var myMusic = [

  {
    "artist": "Billy Joel",
    "title": "Piano Man",
    "release_year": 1973,
    "formats": [ 
      "CS", 
      "8T", 
      "LP" ],
    "gold": true
  }
  // Add record here 
  {

    "artist": "Missy Elliot",
    "title": "Supa Dupa Fly",
    "release_year": 1997,
    "formats": [
      "cassette",
      "video",
      "CD"]
  };

  ];
can anyone please tell me what I'm doing wrong?
???
Stephen James
@sjames1958gm
Nov 27 2017 19:28
@5millerk Hmm, same for me
@Ashtheyogi Array elements have commas between them, even if objects.
Onome Sotu
@onomesotu
Nov 27 2017 19:28
@Ashtheyogi what do you want to do?
Stephen James
@sjames1958gm
Nov 27 2017 19:29
@Ashtheyogi And no ; inside the array
5millerk
@5millerk
Nov 27 2017 19:29
@Ashtheyogi it looks right to me? which one of the test cases is failing?
@sjames1958gm @Ashtheyogi oh that's probably it haha. the semicolon after your last curly bracket
Ashley
@Ashtheyogi
Nov 27 2017 19:30
Its saying that Im missing semicolons, and its saying expecting to match from line 2
Onome Sotu
@onomesotu
Nov 27 2017 19:30
@Ashtheyogi see what @sjames1958gm said
Ashley
@Ashtheyogi
Nov 27 2017 19:30
its still not letting me pass
i deleted the semicolon
Stephen James
@sjames1958gm
Nov 27 2017 19:31
@Ashtheyogi [{},{}] this is the the structure you need (see comma in the middle)
5millerk
@5millerk
Nov 27 2017 19:31
@Ashtheyogi you're missing the comma after the first object closes
beat me to the punch Stephen ;-)
Ashley
@Ashtheyogi
Nov 27 2017 19:31
omg wow thank you @5millerk
CamperBot
@camperbot
Nov 27 2017 19:31
ashtheyogi sends brownie points to @5millerk :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @5millerk |http://www.freecodecamp.org/5millerk
Ashley
@Ashtheyogi
Nov 27 2017 19:32
it was so simple . I thought there was something wrong with me
thank you everyone too!
thanks @sjames1958gm
CamperBot
@camperbot
Nov 27 2017 19:32
ashtheyogi sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8718 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Ashley
@Ashtheyogi
Nov 27 2017 19:32
jeez
Stephen James
@sjames1958gm
Nov 27 2017 19:32
@Ashtheyogi :+1:
get used to the small things holding you up while you think about the bigger picture, that is programming :)
Ashley
@Ashtheyogi
Nov 27 2017 19:33
thanks @onomesotu
CamperBot
@camperbot
Nov 27 2017 19:33
ashtheyogi sends brownie points to @onomesotu :sparkles: :thumbsup: :sparkles:
:cookie: 294 | @onomesotu |http://www.freecodecamp.org/onomesotu
5millerk
@5millerk
Nov 27 2017 19:35
@sjames1958gm any guesses why the pointer changes like that? It isn't the end of the world, but it seems odd to me...
@sjames1958gm think it's because it used .text() instead of .html()? So it is being read as text instead of as "code" (I know that's the wrong word, but it's the best I can think to use haha)
5millerk
@5millerk
Nov 27 2017 19:41
nope...changing it didn't help
Ashley
@Ashtheyogi
Nov 27 2017 19:43
im on the puzzle accessing nested objects and Im trying to figure out what is wrong
// Setup
var myStorage = {
  "car": {
    "inside": {
      "glove box": "maps",
      "passenger seat": "crumbs"
     },
    "outside": {
      "trunk": "jack"
    }
  }
};

// Only change code below this line
myStorage.car.inside["glove box"];
var gloveBoxContents = "maps"; // Change this line
I dont understand when to switch from dot notation to bracket notation?
Jim Tryon
@jimtryon
Nov 27 2017 19:44
@5millerk do you have a screenshot or codepen? that way I can see what you are referencing when you say pointer
Ashley
@Ashtheyogi
Nov 27 2017 19:45
and its saying 'expected an assignment or function call, instead saw an expression' I dont understand what they mean
Jim Tryon
@jimtryon
Nov 27 2017 19:45
@Ashtheyog Dot notation is used for objects
@Ashtheyogi Bracket notation is used for arrays
5millerk
@5millerk
Nov 27 2017 19:45
@Ashtheyogi brackets are for numbers. That's the wrong word for it, but if you are just trying to access something in "spot number 3" or "spot number 1" as opposed to a specific name
Jim Tryon
@jimtryon
Nov 27 2017 19:46
Each one of your objects in myStorage has a property
You can use the dot notation to access those properties, if that makes sense
Ashley
@Ashtheyogi
Nov 27 2017 19:46
I'm just trying to follow the example they gave us
5millerk
@5millerk
Nov 27 2017 19:46
@jimtryon I mean your actual mouse pointer. It changes from an arrow (normal mouse icon) into an uppercase I looking icon (the insert text icon like on Word or whatever)
Ashley
@Ashtheyogi
Nov 27 2017 19:46
var ourStorage = {
  "desk": {
    "drawer": "stapler"
  },
  "cabinet": {
    "top drawer": { 
      "folder1": "a file",
      "folder2": "secrets"
    },
    "bottom drawer": "soda"
  }
};
ourStorage.cabinet["top drawer"].folder2;  // "secrets"
ourStorage.desk.drawer; // "stapler"
@jimtryon right but when I tried to use different dot notations it didnt work
Jim Tryon
@jimtryon
Nov 27 2017 19:47
@5millerk That could be because it’s treating it as text instead of a link
Ashley
@Ashtheyogi
Nov 27 2017 19:47
or rather dot notation calling multiple objects
Jim Tryon
@jimtryon
Nov 27 2017 19:47
@5millerk You could force it using CSS though
@Ashtheyogi You want to call the properties in order
@Ashtheyogi So if I wanted folder1, it would be ourStorage.cabinet.folder1
Ashley
@Ashtheyogi
Nov 27 2017 19:48
when i tried to do myStorage.car.inside.glove box it ddint work
when I got to glove box it stopped highlighting box
// Setup
var myStorage = {
  "car": {
    "inside": {
      "glove box": "maps",
      "passenger seat": "crumbs"
     },
    "outside": {
      "trunk": "jack"
    }
  }
};

// Only change code below this line
myStorage.car.inside.glove box;
var gloveBoxContents = "maps"; // Change this line
5millerk
@5millerk
Nov 27 2017 19:49
@Ashtheyogi the goal is to assign the data inside that spot to the variable
@Ashtheyogi you aren't assigning it to anything
Ashley
@Ashtheyogi
Nov 27 2017 19:50
I dont understand what its asking me for
5millerk
@5millerk
Nov 27 2017 19:50
you had the code right the first time, but you need gloveBoxConents = (the code that you had before)
see where it is telling you to //change this line?
you didn't change it, you just added a line above it
so ...
var gloveBoxContents = ....
where ... should be your myStorage.car.etc.etc.etc
does that make any sense?
Ashley
@Ashtheyogi
Nov 27 2017 19:52
ok I see
5millerk
@5millerk
Nov 27 2017 19:53
you accessed the object correctly originally, but you didn't do anything with that information. You basically told it "hey look in this box" and it did, but you didn't tell it to do anything with whatever it found in the box
Ashley
@Ashtheyogi
Nov 27 2017 19:53
but its still not letting me pass.
5millerk
@5millerk
Nov 27 2017 19:53
so it just looked and went "oh yea, it's in there!" and then moved on
Ashley
@Ashtheyogi
Nov 27 2017 19:53
// Setup
var myStorage = {
  "car": {
    "inside": {
      "glove box": "maps",
      "passenger seat": "crumbs"
     },
    "outside": {
      "trunk": "jack"
    }
  }
};

// Only change code below this line

var gloveBoxContents = myStorage.car.inside.glove box; // Change this line
5millerk
@5millerk
Nov 27 2017 19:53
now you need to use brackets
since "glove box" has a space
like you had originally
Ashley
@Ashtheyogi
Nov 27 2017 19:54
ok so we add brackets when we have a space then?
5millerk
@5millerk
Nov 27 2017 19:54
correct
Ashley
@Ashtheyogi
Nov 27 2017 19:54
got it.
my problem is, going from the example I would never have thought to make the var = to the object im calling
I've had this problem before with other puzzles, I just dont think that way
5millerk
@5millerk
Nov 27 2017 19:55
reread the goal
Ashley
@Ashtheyogi
Nov 27 2017 19:55
thanks @5millerk thanks @jimtryon
CamperBot
@camperbot
Nov 27 2017 19:55
ashtheyogi sends brownie points to @5millerk and @jimtryon :sparkles: :thumbsup: :sparkles:
api offline
:cookie: 470 | @jimtryon |http://www.freecodecamp.org/jimtryon
5millerk
@5millerk
Nov 27 2017 19:55
the goal was "assign the contents to gloveBoxContents"
you did the first part and forgot the second part is all
Ashley
@Ashtheyogi
Nov 27 2017 19:56
im just trying to figure out how all this stuff will help code websites!
it doesnt connect for me
5millerk
@5millerk
Nov 27 2017 19:56
@Ashtheyogi well they are building blocks
@Ashtheyogi so a lot of times you have to tell the computer "hey remember this number for me" or "hey remember what this says" (aka a variable)
because later on you're going to need to say "hey, what was that number I told you to remember?"
but sometimes you don't just need to remember a number
you need to remember a car, but not just the car, but every detail about the car
so you can say "hey remember that car? What color was it, how many doors did it have, and what year was it made?"
those are Objects
in a few lessons you'll start building small webpages and you'll need to use variables and objects to do stuff. It will get tied together a bit better once you make it that far
I hope that helps a little haha
5millerk
@5millerk
Nov 27 2017 20:01
i might have just made it more complicated :-(
Stephen James
@sjames1958gm
Nov 27 2017 20:05
@Ashtheyogi In order to get the content for a website, you will often use an API which your javascript will receive as JSON data.
These challenges show how to extract data from such json data. Here is some json data from github for a simple request.
As you can see this is quite complex, so learning how to use less complex structures in the training you will start to learn how
to access the information from larger more complex structures.
[
{
"url": "https://api.github.com/gists/80797b57e61e5dfadc7be4372f8847a9",
"forks_url": "https://api.github.com/gists/80797b57e61e5dfadc7be4372f8847a9/forks",
"commits_url": "https://api.github.com/gists/80797b57e61e5dfadc7be4372f8847a9/commits",
"id": "80797b57e61e5dfadc7be4372f8847a9",
"git_pull_url": "https://gist.github.com/80797b57e61e5dfadc7be4372f8847a9.git",
"git_push_url": "https://gist.github.com/80797b57e61e5dfadc7be4372f8847a9.git",
"html_url": "https://gist.github.com/80797b57e61e5dfadc7be4372f8847a9",
"files": {
"untrusted-lvl6-solution.js": {
"filename": "untrusted-lvl6-solution.js",
"type": "application/javascript",
"language": "JavaScript",
"raw_url": "https://gist.githubusercontent.com/anonymous/80797b57e61e5dfadc7be4372f8847a9/raw/58d5a1b309b175493c81557a612da5b64ae25979/untrusted-lvl6-solution.js",
"size": 2198
}
},
"public": true,
"created_at": "2017-11-27T20:04:26Z",
"updated_at": "2017-11-27T20:04:26Z",
"description": "Solution to level 6 in Untrusted: http://alex.nisnevich.com/untrusted/",
"comments": 0,
"user": null,
"comments_url": "https://api.github.com/gists/80797b57e61e5dfadc7be4372f8847a9/comments",
"truncated": false
},
]
alpox
@alpox
Nov 27 2017 20:06
@Ashtheyogi It doesn't help as long as the website doesn't have any "logic" behind. As soon as a website gets dynamic, there is code (Javascript) involved. You have to handle datastructures, variables and different procedures/algorithms to update a website, get data from a server to show on the website, transform data to present it in different ways etc.
5millerk
@5millerk
Nov 27 2017 20:08
@jimtryon by the way, how would i "force" it to treat it as a link instead of as text in the CSS?
Jim Tryon
@jimtryon
Nov 27 2017 20:09
@5millerk I think it’s display: cursor
Stephen James
@sjames1958gm
Nov 27 2017 20:09
@5millerk You can use a { cursor: pointer }
Jim Tryon
@jimtryon
Nov 27 2017 20:09
That is the one. Thanks @sjames1958gm
CamperBot
@camperbot
Nov 27 2017 20:09
jimtryon sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8719 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Jim Tryon
@jimtryon
Nov 27 2017 20:09
I’m still kind of rusty on CSS
Stephen James
@sjames1958gm
Nov 27 2017 20:10
@5millerk You can also turn off the text decoration to get rid of the link underline
Ashley
@Ashtheyogi
Nov 27 2017 20:11
no youve been helpful @5millerk thanks
CamperBot
@camperbot
Nov 27 2017 20:11
ashtheyogi sends brownie points to @5millerk :sparkles: :thumbsup: :sparkles:
api offline
Ashley
@Ashtheyogi
Nov 27 2017 20:11
thanks @sjames1958gm thanks @alpox
CamperBot
@camperbot
Nov 27 2017 20:11
ashtheyogi sends brownie points to @sjames1958gm and @alpox :sparkles: :thumbsup: :sparkles:
api offline
:star2: 1470 | @alpox |http://www.freecodecamp.org/alpox
5millerk
@5millerk
Nov 27 2017 20:11
@sjames1958gm @jimtryon thanks
CamperBot
@camperbot
Nov 27 2017 20:11
5millerk sends brownie points to @sjames1958gm and @jimtryon :sparkles: :thumbsup: :sparkles:
api offline
:cookie: 471 | @jimtryon |http://www.freecodecamp.org/jimtryon
Simon Cordova
@gbsimon87
Nov 27 2017 22:05
Hey all!
Anybody have experience with jQuery UI? The datepicker to be more specific
Nick
@rhozeta
Nov 27 2017 22:07
@gbsimon87 I might be able to help. Send me a Pen!
Simon Cordova
@gbsimon87
Nov 27 2017 22:08
Basically the problem is that I'm working on a page that has an existing datepicker.
I am adding a new input field and attaching a datepicker to it, but it keeps regenerating to the same datepicker as oppose to creating a new one.
Every had such a problem?
Nick
@rhozeta
Nov 27 2017 22:09
So the input is being sent to the other datepicker? or it's generating the datepicker UI in the old ones spot?
Simon Cordova
@gbsimon87
Nov 27 2017 22:12
$(".reDatepickerInput").on("click", function() {

                var checkInDate = $('.checkInDateInput').datepicker({ dateFormat: 'dd-mm-yy' }).val();
                console.log(checkInDate);

                var maxNights = +$("#nights > option").last().text();
                console.log(maxNights);

                $(this).datepicker({

                    firstDay: 1,
                    showButtonPanel: true,
                    currentText: "Today",
                    closeText: "Close",
                    constrainInput: true,

                    changeMonth: true,
                    changeYear: true,

                    dateFormat: "D d M"
                    // setDate: checkInDate
                });

                $( ".reDatepickerInput" ).datepicker( "setDate", checkInDate );
This in essence should be creating a new datepicker, but it's still bring up the original datepicker in the site
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 22:16
so youre transitioning from the old date picker to a new one in this code? did you reset the original datepicker values to nothing before initializing the new date picker?
I noticed that old values can carry over if theyre not reset before you assign new values with some things like setInterval. I had a lot of trouble with that timer overlapping on my po odoro timer.
Simon Cordova
@gbsimon87
Nov 27 2017 22:19
@Rogue00 @rhozeta
Thanks for the input, it's the following website...
http://www.superbreak.com/
CamperBot
@camperbot
Nov 27 2017 22:19
gbsimon87 sends brownie points to @rogue00 and @rhozeta :sparkles: :thumbsup: :sparkles:
:cookie: 202 | @rhozeta |http://www.freecodecamp.org/rhozeta
:cookie: 439 | @rogue00 |http://www.freecodecamp.org/rogue00
Simon Cordova
@gbsimon87
Nov 27 2017 22:20
Their current datepicker can be found if you click on 'check-in'
(function () {

  console.log("I'M IN V6 FUNCTION");

    var $ = window.jQuery;

    // SPECIFIC SECTIONS
    var hotelSection = $(".hotelOnly.ng-scope");    

    var hotelNights = {
        init: function () {
            this.mainCSS();
            this.changeCheckInDateFormat();
            this.createCalendarDiv();
        },
        mainCSS: function () {

            var mainCss =   '.reDatepickerDiv { position: absolute; top: 0; z-index: 3; }' +
                            '.reCalendarInput { background: #ffffff url(/Content/Images/icons/Universal-Search/Calendar.png) no-repeat !important; background-position: left 5px center !important; padding-left: 42px !important; box-sizing: border-box !important; cursor: pointer; }' +
                            '#reDatePicker { display: none !important; position: absolute; top: 0; }' +
                            '.oneline.nights-cont { display: none; }';

            var headofdoc = document.getElementsByTagName('head')[0];
            var s = document.createElement('style');
            s.setAttribute('type', 'text/css');
            s.appendChild(document.createTextNode(mainCss));
            headofdoc.appendChild(s);
        },
        changeCheckInDateFormat: function () {
            $( ".checkInDateInput" ).datepicker( "option", "dateFormat", "D d M" ); // CHANGE TO SHORTER DATE FORMAT
        },
        createCalendarDiv: function () {

            // checkInDateInput
            $(".hotelOnly.ng-scope .checkInDateInput").closest(".oneline").after("<input class='reDatepickerInput' placeholder='Check-out'>");

            $(".reDatepickerInput").on("click", function() {

                var checkInDate = $('.checkInDateInput').datepicker({ dateFormat: 'dd-mm-yy' }).val();
                console.log(checkInDate);

                var maxNights = +$("#nights > option").last().text();
                console.log(maxNights);

                $(this).datepicker({

                    firstDay: 1,
                    showButtonPanel: true,
                    currentText: "Today",
                    closeText: "Close",
                    constrainInput: true,

                    changeMonth: true,
                    changeYear: true,

                    dateFormat: "D d M"
                });

                // $( ".reDatepickerInput" ).datepicker( "setDate", checkInDate );
                // $( ".reCheckOutDateContainer > input" ).datepicker( "option", "minDate", checkInDate );
                // $( ".reCheckOutDateContainer > input" ).datepicker( "option", "maxDate", maxNights + 1 );  
                // $( ".reDatepickerInput" ).datepicker( "option", "maxDate", "+7d" );

            });
        }
    };

    (function pollForjQuery() {
        if (window.jQuery !== undefined) {
            try {
                hotelNights.init();
            } catch (err) {
                console.log('TRY ERROR: ' + err);
            }
        } else {
            setTimeout(pollForjQuery, 25);
        }
    })();

})();
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 22:21
ok..so when I open and choose a date, it seems to be working.
Simon Cordova
@gbsimon87
Nov 27 2017 22:21

Sorry for such a long code, if you are able to put that in the console you will see I create a new input, 'Check-out'

Now if I were to uncomment the three lines of code commented out, I can't get it to work as it's resetting the original datepicker $("#ui-datepicker-div")

Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 22:21
what's the issue?
oh i see
Simon Cordova
@gbsimon87
Nov 27 2017 22:21
@Rogue00
The issue is on the check out input
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 22:21
youre trying to initialize a check out date picker sequence.
Simon Cordova
@gbsimon87
Nov 27 2017 22:21
You'd have to put that code I sent in the console to see the other input
@Rogue00 exactly
The thing is, on the second date picker, when I set the minDate, it won't allow me as the datepicker generated is the exact same as the original one, which I have no idea why it won't create a second datepicker instead
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 22:24
its because the first datepicker instance still exists and is being identified as the datepicker
I think.
so when you attempt to initialize your second version its still pulling what the program sees as the only datepicker
Nick
@rhozeta
Nov 27 2017 22:25
You have to use the "autofocus" element I believe
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 22:25
I apologize byut my jquery isnt that great. I don't see a way to fix it.
Simon Cordova
@gbsimon87
Nov 27 2017 22:26

@rhozeta What do you mean by the autofocus?

@Rogue00 not a problem I appreciate the help either way

Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 22:26
sure thing
They explain it much better than I can
Looks like this is actually an issue with jQuery UI but there are some workarounds
Simon Cordova
@gbsimon87
Nov 27 2017 22:27
Thank you both for the help much appreciated.
I don't get why it's doing this here.
I tried it on codepen and it was totally fine.
Now on production it keeps regenerating to the same datepicker which I can't have as I need the check in and check out dates.
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 22:28
did you export your file from codepen or just copy past your code into your project file? Need to be sure all your links to frameworks libraries etc are intact.
Simon Cordova
@gbsimon87
Nov 27 2017 22:29
I actually don't have access to any of the files, all I can do is inject javascript/jquery
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 22:29
what i mean is...your codepen project file contains links to jquery and css libraries.
you new that...so if you exported your codepen project file everything should be intact..however, if you just grabbed your code via copy paste to inject into your website, you may not have all required links intact.
I'm just shooting in the dark here..
Nick
@rhozeta
Nov 27 2017 22:31
Yeah unfortunately I don't have much else to contribute...
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 22:32
this project is abit ahead of me im afraid. I wish I could be more help.
I've honestly distanced myself a little from websites as I'm more interested in applications..
Simon Cordova
@gbsimon87
Nov 27 2017 22:33
No worries guys, thanks so much honestly
@Rogue00 what kind of apps?
Nick
@rhozeta
Nov 27 2017 22:33
From what I'm reading it's an issue with jQuery UI that was never properly addressed, only finding some dodgy workarounds. Goodluck @gbsimon87 let me know if you figure it ou!
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 22:33
working on tic tac toe and simon...building in plain javascript...running into some issues but I'm feeling like I have a decent undersgtanding of how everything is going.
Nick
@rhozeta
Nov 27 2017 22:34
@Rogue00 let me know if you need some help. My vanilla JS is pretty legit.
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 22:34
mainly browser based stuff, but I'm highly interested in learning about ai(i'm into chatbots) games and other real world applications. I'm also interested in building mobile apps but not that far yet
here's the tic tac toe game I'm working on..
I'm still working on basic logic..like the checkForWinner function isnt working yet..I'm having some smal issues.
it has background music that also plays during the game but ive got it disabled atm
Nick
@rhozeta
Nov 27 2017 22:36
well first off the sound clips are sweet
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 22:37
I thought that was a nice touch :)
I'm trying to make the game more fun
I'm going to make some sort of end game that either displays a chest full of coins and plays a sound like coins jingling or if user loses a skull and crossbones with an evil laugh....then an option to restart the game.
if I can figure out how to implement those features when I get to them...need to get checkForWinner and the computer making moves first.
Nick
@rhozeta
Nov 27 2017 22:44
I'm taking a look at the check for winner
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 22:46
sure thing..I appreciate it
I was working on the logic and lost my intetnety about 6 am...so havent been at it since then..
net came back up not long ago so I'm trying to get back into it now
Nick
@rhozeta
Nov 27 2017 22:48
I cant find the variable move declared anywhere
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 22:49
yea..that makes sense.
I was sort of following a tutorial but writing my own code...I'm not exactly sure how that getBox function works
Nick
@rhozeta
Nov 27 2017 22:51
the getBox is returning the inner HTML of the box, so right now it is basically returning "<img src='http://i65.tinypic.com/2rq2jgh.jpg'>"
which is the link to the crossed swords. So then you are using checkForWinner to compare the innerHTML in each cell to one another and if all are equal it returns true, which works fine. But I'm not exactly sure what the "move" variable is being used for
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 22:52
i need getBox to return the number id of the square in the table
oh wait..let me think
move is being used to represent the player (or in later cases) the ai move
so it should be something like if variables a b and c all === move (player or ai image indicator) then call the win function.
Nick
@rhozeta
Nov 27 2017 23:01
hmm, even after I fill a row or column move is coming back undefined to me
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 23:02
same here
I might need to rethink I'm i'm acknowleging the winner
and checking the rows.
I havent figured out how best to implement the computer move so those are my two main issues atm
Nick
@rhozeta
Nov 27 2017 23:20
Sorry I couldn't be more help. I think there's some issues with the move counter logic. Not sure tho
Ghost
@ghost~56bd2077e610378809c105cd
Nov 27 2017 23:21
yea its cools.
i'll figure it out..I may end up rewriting those functions...
thanks for trying @rhozeta :)
CamperBot
@camperbot
Nov 27 2017 23:22
rogue00 sends brownie points to @rhozeta :sparkles: :thumbsup: :sparkles:
:cookie: 203 | @rhozeta |http://www.freecodecamp.org/rhozeta