These are chat archives for FreeCodeCamp/HelpFrontEnd

16th
Oct 2017
Alexx Martínez
@AlexxMart
Oct 16 2017 00:00
I'm in the challenge "Arguments Optional" and I have no clue how to retrieve the values of this function since it doesn't contain any argument
function addTogether() {
 return false;
}

addTogether(2, 3);
that is the default function
I've been at this for a little over an hour, and can't figure it out. I've read the MDN pages for "closures", "arguments object", "typeof" and nothing yet
Tom
@moT01
Oct 16 2017 00:05
@AlexxMart isn't the arguments object what the hint recommends
or maybe it links to all those, but i think that's the one you want
Alexx Martínez
@AlexxMart
Oct 16 2017 00:07
@moT01 Yes, arguments object is the one recommended, but since this is an anonymous function there is not argument to call with "return"
and when I add an argument to the function it returns the values, but not when the arguments show as "addTogether(2)(3)". That returns nothing and it should return 5
Tom
@moT01
Oct 16 2017 00:10
what does your code look like, -- you can get the value of the arguments in this way https://s.codepen.io/anon/pen/WZazve?editors=1111
is that in the tests? the (2)(3)
Alexx Martínez
@AlexxMart
Oct 16 2017 00:15
@moT01 yes, that example is in the test and it should return 5
Tom
@moT01
Oct 16 2017 00:16
yea, i see that
im not too familiar with closures, but it looks like you need to use that probly to get the second argument in that case
Alexx Martínez
@AlexxMart
Oct 16 2017 00:19
@moT01 Yes, I'll have to read more on that
@AlexxMart here's an example
Alexx Martínez
@AlexxMart
Oct 16 2017 00:28
@moT01 That's nice! I just have a question. In line 3, what does that function does exactly? Because I can see that it works, but the argument "newNumber" is not declared again later in the outer function
so far I went as far as checking if both of the arguments are numbers
function addTogether() {
 var a = arguments[0];
 var b = arguments[1];
  var number = "number";
  if(typeof a == number && typeof b == number){
  return a + b;
  }
}

addTogether(2, 3);
Tom
@moT01
Oct 16 2017 00:36
i tried making more clear in the example what happens
but think of what a return statement does
we return that function to where it came from
so i assume it first takes the myFunction(5)
the 9 is there, but not used
yet
and the result of that myFunction(5) is, myFunction2
where it meets back up with the 9
that 'newNumber' wasn't needed
Alexx Martínez
@AlexxMart
Oct 16 2017 00:40
Oh! I understand now
Tom
@moT01
Oct 16 2017 00:40
good
that's what has to be happening i think
heroiczero
@heroiczero
Oct 16 2017 00:47
@AlexxMart newNumber? You don't have a newNumber in your function. you are just returning a+b if a and b are number. There are arguments though.
Alexx Martínez
@AlexxMart
Oct 16 2017 00:48
@heroiczero No, what happens is that newNumber was the name of the function in the example by @moT01
Long Nguyen
@longnt80
Oct 16 2017 01:39
question about Webpack:
is there any major difference between webpack v2 and v3?
Can/Should I use the lastest webpack version (3.7.1) with React?
Ken Haduch
@khaduch
Oct 16 2017 01:55
@longnt80 - this page has the major differences listed. Apparently there are upgrade scripts to run...
Long Nguyen
@longnt80
Oct 16 2017 01:56
@khaduch thanks
CamperBot
@camperbot
Oct 16 2017 01:56
longnt80 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3369 | @khaduch |http://www.freecodecamp.com/khaduch
Long Nguyen
@longnt80
Oct 16 2017 01:56
looks like I can use it with REact with no problem
Ken Haduch
@khaduch
Oct 16 2017 02:37
@longnt80 - you're welcome... hope that it works out great!
Ashwin
@ashwins93
Oct 16 2017 09:34

https://codepen.io/ashwins93/full/NaOBXG/

The input fields sometimes don't trigger the onChange but sometimes they do, I have no idea why! Any help is appreciated.

Markus Kiili
@Masd925
Oct 16 2017 12:02
@ashwins93 Haven't looked at the code, but notice that onChange fires when input value has changed and the element loses focus.
input event fires when input value changes.
rscales02
@rscales02
Oct 16 2017 12:07
If I console.log something right before I return it, why would the log print an answer and the return be undefined?
Pascal Clanget
@Gh05d
Oct 16 2017 12:25
Hi guys, I am using flexbox to make the layout for my simon game. I have problems fixing the middle container in the middle. Anybody any advice?
https://codepen.io/Gh05d/pen/jGeRBG?editors=1100
rscales02
@rscales02
Oct 16 2017 12:33
This more what you were trying to do?
Just mess with the top and left percentages a little
Pascal Clanget
@Gh05d
Oct 16 2017 12:35
the problem is when you adjust the size of the screen, then it is no more centered
it should be centered all the time
rscales02
@rscales02
Oct 16 2017 12:39
got ya...
let me look more
Ashwin
@ashwins93
Oct 16 2017 12:40
@Masd925 Yes. It fires even if i enter a space after a valid value.
@Gh05d Try adding vendor prefixes. IIRC flex needs -webkit- prefix
rscales02
@rscales02
Oct 16 2017 12:48
@Gh05d add display: relative to #simon that seems to work
Pascal Clanget
@Gh05d
Oct 16 2017 12:53
I added it, but as #simon already has display: flex, nothing happened.
rscales02
@rscales02
Oct 16 2017 12:59
not display, sorry
I meant position: relative
Pascal Clanget
@Gh05d
Oct 16 2017 13:03
@rscales02 It worked :D Thx man, really appreciate the help :thumbsup:
CamperBot
@camperbot
Oct 16 2017 13:03
gh05d sends brownie points to @rscales02 :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @rscales02 |http://www.freecodecamp.com/rscales02
rscales02
@rscales02
Oct 16 2017 13:04
No problem!
Pascal Clanget
@Gh05d
Oct 16 2017 13:33
And another small problem :/
there is some strange "leftover" on the bottom
Ashwin
@ashwins93
Oct 16 2017 14:36
@Gh05d A what?
nils govaerts
@zyrt3c
Oct 16 2017 14:50
aaah this is hurting my brain O.O

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

0 index based, so 1 is orange and 3 should give Apple … how the hell do you get orange, lemon as result? O.o

korzo
@korzo
Oct 16 2017 14:58
@zyrt3c because end position is not included

@zyrt3c

The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). The original array will not be modified.

nils govaerts
@zyrt3c
Oct 16 2017 15:01
so if I would do slice(1,4) the output would become Orange, Lemon, Apple? O.o it slices from 1 to 4 but 4 isn’t included ? If I understand correctly @korzo
korzo
@korzo
Oct 16 2017 15:03
@zyrt3c yes
@zyrt3c for example if you want only Orange, then fruits.slice(1, 2);
nils govaerts
@zyrt3c
Oct 16 2017 15:07
@korzo thanks! this realy took me a while to figure it out :) I was assuming JS would slice just the 1st and 3th item in the aray, not 1st till …. :)
CamperBot
@camperbot
Oct 16 2017 15:07
zyrt3c sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 631 | @korzo |http://www.freecodecamp.com/korzo
Ken Haduch
@khaduch
Oct 16 2017 16:02
@Gh05d - it looks like your Simon app is in a little bit of turmoil... :) What's happening, are you making changes?
Filip Kajetaniak
@FilipKajetaniak
Oct 16 2017 16:26
Hello!
Yo I have this problem I've been trying to figure out since I was swimming in the local plumbers ballsack
Ashwin
@ashwins93
Oct 16 2017 16:27
hello
Filip Kajetaniak
@FilipKajetaniak
Oct 16 2017 16:27
Hello Ashwin!
There is this great website http://loflorecords.com/
and there is this effect
when you scroll the page, the elements are scrolling so lazy, with this delayed momentum
How would you describe this effect? Im trying to find a tutorial for this effect
Ashwin
@ashwins93
Oct 16 2017 16:28
Scrollfire
basically the window object has a listener for scroll
and even object has a scroll position
Filip Kajetaniak
@FilipKajetaniak
Oct 16 2017 16:28
oooh yeah, you're right
Ashwin
@ashwins93
Oct 16 2017 16:29
jQuery has many methods to deal with those
also jQuery UI
Filip Kajetaniak
@FilipKajetaniak
Oct 16 2017 16:29
the difficult part is making that delayed move though
and this easing
Ashwin
@ashwins93
Oct 16 2017 16:29
Use CSS animations
Pascal Clanget
@Gh05d
Oct 16 2017 16:29
@ashwins93 @khaduch I fixed it. It was a problem with the borders.
Filip Kajetaniak
@FilipKajetaniak
Oct 16 2017 16:29
I was trying so many different methods to recreate this but i just give up
Yeah propably, something that activates on scrolling and moves the element with css translate?
with the settimeout delay
but that easing tho
it could be achieved by bezier curve in css
Ashwin
@ashwins93
Oct 16 2017 16:29
and when the event triggers just do `$("element").addClass("bounce")
use animate.css for cool animations
Filip Kajetaniak
@FilipKajetaniak
Oct 16 2017 16:30
You're right Ashwin! But the effect relies on the speed and direction of scrolling
I'm not sure if you can achieve that with just a CSS
That's some hella complicated shit dawg
Ashwin
@ashwins93
Oct 16 2017 16:31
@FilipKajetaniak Did you notice in that website that the elements in the same baseline move the same way?
Elements with same scrollTop are triggered together
Filip Kajetaniak
@FilipKajetaniak
Oct 16 2017 16:32
DAAAMN Ashwin yout're right!
That's my man! I haven't notice that
Ashwin
@ashwins93
Oct 16 2017 16:33
as for the animation itself - just focus on a single item - the animation is probably like top += 5px
Filip Kajetaniak
@FilipKajetaniak
Oct 16 2017 16:33
@ashwins93 thank you for help! You're the coolest bloke here
CamperBot
@camperbot
Oct 16 2017 16:33
filipkajetaniak sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 367 | @ashwins93 |http://www.freecodecamp.com/ashwins93
Ashwin
@ashwins93
Oct 16 2017 16:33
and with css you can add animation delay and easing
put all them together and you got it
Haha thanks dude
Filip Kajetaniak
@FilipKajetaniak
Oct 16 2017 16:34
Yeah I get this now! Thanks, you have changed my world and i aint even joking mate
Ashwin
@ashwins93
Oct 16 2017 16:36
Lol i had the same kind of revelation a few days back
Filip Kajetaniak
@FilipKajetaniak
Oct 16 2017 16:37
Oh i wonder what was that
Did you discover incognito mode in chrome? :D
That was a big one for me
Gary
@bluefishmarine
Oct 16 2017 16:44
Hello, I was wondering if anyone could help with a bug I have been trying to fix for a while in my tic tac toe game
Ashwin
@ashwins93
Oct 16 2017 16:45
@FilipKajetaniak lol no i read through the source of Animate.css
Filip Kajetaniak
@FilipKajetaniak
Oct 16 2017 16:45
@bluefishmarine I'm not an expert but i will give it a try
Ashwin
@ashwins93
Oct 16 2017 16:45
@bluefishmarine What is it?
Gary
@bluefishmarine
Oct 16 2017 16:46
it seems simple but I can't figure it out. Basically, as it is now when you make the first move the move will not display until the computer finishes computing it's move. it will make sense when you play it
when I have someone else play it they get confused because the x doesn't show up right away
Alexx Martínez
@AlexxMart
Oct 16 2017 16:50
I have a situation with the challenge "Validate US Challenge". I think there is a problem with my RegEx
function telephoneCheck(str) {
  var n = /1*[ ]\(?\d{3}[-. )]?(\d{3})[-. ]\d{4}/g;
  var v = str.match(n);
  return str == v;
}



telephoneCheck("1 (555)-555-5555");
that should return true as it is a valid format, but it returns false
Ashwin
@ashwins93
Oct 16 2017 16:51

it seems simple but I can't figure it out. Basically, as it is now when you make the first move the move will not display until the computer finishes computing it's move. it will make sense when you play it

it has something to do with callbacks, i'll see exactly where it goes

Gary
@bluefishmarine
Oct 16 2017 16:52
I think the issue might be that it goes through all the code before it changes the DOM
or maybe JQuery slows it down
Filip Kajetaniak
@FilipKajetaniak
Oct 16 2017 16:52
@bluefishmarine oh God my friend, I look through it and I've realized I'm way too stupid to figure this out :( Sorry
Gary
@bluefishmarine
Oct 16 2017 16:53
@FilipKajetaniak Nah, you aren't stupid. I still feel like i barely know anything at this point
Filip Kajetaniak
@FilipKajetaniak
Oct 16 2017 16:53
That's impressive how you programmed the computer to find the best move
Ashwin
@ashwins93
Oct 16 2017 16:53
Minimax alogl
algo*
Filip Kajetaniak
@FilipKajetaniak
Oct 16 2017 16:54
That's a bit like creating AI
Gary
@bluefishmarine
Oct 16 2017 16:54
yeah. can't say i figured it out myself
Ashwin
@ashwins93
Oct 16 2017 16:54
Lol everyone uses the algorithm for their tic tac toe project
Gary
@bluefishmarine
Oct 16 2017 16:54
although implementing it correctly did take me a while
Filip Kajetaniak
@FilipKajetaniak
Oct 16 2017 16:55
Yeah i bet that wasn't easy
Ashwin
@ashwins93
Oct 16 2017 16:55
@bluefishmarine Oh! but i found a javascript function that i was able to readily port

it seems simple but I can't figure it out. Basically, as it is now when you make the first move the move will not display until the computer finishes computing it's move. it will make sense when you play it

Correction. If you look carefully, it happens for every move not just first move. The reason it seems apparent for first move is that the first step always takes the longest in the minimax

Gary
@bluefishmarine
Oct 16 2017 16:57
@ashwins93 Yeah, you are right. On subsequent moves its not an issue because the algorithm works much faster
Ashwin
@ashwins93
Oct 16 2017 16:57
Yes. First step requires a lot of calculation
Gary
@bluefishmarine
Oct 16 2017 16:58
I just can't figure out why it doesn't display the x before running the rest of the code
Ashwin
@ashwins93
Oct 16 2017 16:58
you need to return from the callback function addpiecetoboard before you can call it again
btw Piece is spelled wrongly as Peice
Gary
@bluefishmarine
Oct 16 2017 17:00
oh dear
well i def gotta fix that :P
I can never get that one right
for the callback are you referring where i have
$(".box").on("click",addPeicetoBoard);
Ashwin
@ashwins93
Oct 16 2017 17:03
@bluefishmarine You are updating the DOM several times within the same function. jQuery, will, in that case do the updates together
to optimize performance
Gary
@bluefishmarine
Oct 16 2017 17:05
Oh, ok. so you are saying that it will only update after all the code runs
In that case, would it be simpler to use vanilla JS for the DOM changes?
Ashwin
@ashwins93
Oct 16 2017 17:06
@bluefishmarine I'm not sure lemme check
Alexx Martínez
@AlexxMart
Oct 16 2017 17:10
@moigithub Yes, I check those and the RegEx I wrote works for almost all of the examples, except for 5
Moisés Man
@moigithub
Oct 16 2017 17:13
if u check ur regex against 1 (555)-555-5555
1*[ ](?\d{3}[-. )]? <--when u write this part it doesnt work
@AlexxMart
Ashwin
@ashwins93
Oct 16 2017 17:13

```
function telephoneCheck(str) {
var n = /1*[ ](?\d{3}[-. )]?(\d{3})[-. ]\d{4}/g;
var v = str.match(n);
return str == v;
}

telephoneCheck("1 (555)-555-5555");
```

Use anchor tags ^ $ to match entire strings
There is no need for the global g flag
Alexx Martínez
@AlexxMart
Oct 16 2017 17:15
@ashwins93 I'll try that too
Ashwin
@ashwins93
Oct 16 2017 17:15
@AlexxMart And there is a lot more you should do with that regex
pattern = /\(?\d{3}[-. )]?/

pattern.test("(555)") // prints true
pattern.test("(555 ") // prints true !
pattern.test("(555-") // prints true
pattern.test("(555.") // prints true
// and a few more cases pass the test, you have to be careful with optional characters
Ashwin
@ashwins93
Oct 16 2017 17:23
@bluefishmarine i fixed your game
/* remove */ computerMakeMove(nodeList); 
/*    add*/   setTimeout(() => {computerMakeMove(nodeList)}, 100);
you can replace the number 100 with any number really
Gary
@bluefishmarine
Oct 16 2017 17:25
@ashwins93 You did it! Thanks! It's weird though I had a setTimeout function but for some reason the way I had it didn't change anything
CamperBot
@camperbot
Oct 16 2017 17:25
bluefishmarine sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 368 | @ashwins93 |http://www.freecodecamp.com/ashwins93
Alexx Martínez
@AlexxMart
Oct 16 2017 17:26
@ashwins93 Nice, thanks, I'll try that
Ashwin
@ashwins93
Oct 16 2017 17:28

@ashwins93 You did it! Thanks! It's weird though I had a setTimeout function but for some reason the way I had it didn't change anything

There is still another bug. While the computer is thinking, the game allows the user to click on squares and add X thereby cheating the minimax into losing. I m sure you can fix that

CamperBot
@camperbot
Oct 16 2017 17:28
sorry ashwins93, you can't send brownie points to yourself! :sparkles: :sparkles:
Ashwin
@ashwins93
Oct 16 2017 17:28

sorry ashwins93, you can't send brownie points to yourself! :sparkles: :sparkles:

I wasn't trying to, you idiot!

I know its a bot, its just funny sometims
Gary
@bluefishmarine
Oct 16 2017 17:29
@ashwins93 hmm...yeah, I considered that, shouldn't be hard to fix. Really only an issue on the first move since its not possible to cheat afterwards
Ashwin
@ashwins93
Oct 16 2017 17:29
yes
Gary
@bluefishmarine
Oct 16 2017 17:30
Is that a special way of doing setTimeout? You are using the es6 syntax, right? but also without using window.setTimeout
Ashwin
@ashwins93
Oct 16 2017 17:31
@bluefishmarine window is implied, it doesn't make any difference between window.setTimeout() and setTimeout()
as for the callback function itself i'm using the lambda expression () => { //do something }
which is equivalent to function() { //do something }
just a shortcut
I'm sorry they are called as Arrow functions in JS
and yes they are a part of ES6
Gary
@bluefishmarine
Oct 16 2017 17:34
ah, yeah i see. so you are calling the make move function within that anonymous function call?
quickspeedy
@quickspeedy
Oct 16 2017 17:35
How do I get the search bar and the button together to stretch to match the box above?
Here is the codepen: https://codepen.io/quickspeedy/pen/wrQMgo
Gary
@bluefishmarine
Oct 16 2017 17:35
}else{
    // setTimeout(() => {computerMakeMove(nodeList)}, 100);
    window.setTimeout(function(){
      computerMakeMove(nodeList); 
    },100);
  }
Ashwin
@ashwins93
Oct 16 2017 17:36

ah, yeah i see. so you are calling the make move function within that anonymous function call?

Yes. I am using the setTimeout function to create a separate "thread" to execute the cpumove so that the original function can return immediately thereby updating the DOM

Pascal Clanget
@Gh05d
Oct 16 2017 17:36
Can somebody tell me how I can reduce the space between simon and the buttons below. I tried using margin, but that didn't work:
https://codepen.io/Gh05d/pen/jGeRBG?editors=1100
Ashwin
@ashwins93
Oct 16 2017 17:36
@Gh05d Did you try reducing line-height of "Simon"
quickspeedy
@quickspeedy
Oct 16 2017 17:36
I tried to set the div with width to 450px and inside another div I set the width to 100%.
Eric Weiss
@eweiss17
Oct 16 2017 17:39
@quickspeedy did u set up a flexbox
Ken Haduch
@khaduch
Oct 16 2017 17:39
@AlexxMart - have you tried taking your regular expression to one of the regular expression sites like http://regexr.com to see if you can see a problem?
Eric Weiss
@eweiss17
Oct 16 2017 17:39
since you already are using bootstrap, we can just use rows and columns then
quickspeedy
@quickspeedy
Oct 16 2017 17:40
@eweiss17 No, I am using bootstrap 4 to take care of it.
Alexx Martínez
@AlexxMart
Oct 16 2017 17:40
@khaduch Yes, I checked that. Actually, I went as far as writing this:
function telephoneCheck(str) {
  var n = /1?[- ]?\(?\d{3}[-. )]?[- ]?\(?\d{3}[- ]?\(?\d{4}/g;
  var v = str.match(n);
  return str == v;
}



telephoneCheck("1 555)555-5555");
quickspeedy
@quickspeedy
Oct 16 2017 17:40
technically, bootstrap 4 uses flexbox.
Alexx Martínez
@AlexxMart
Oct 16 2017 17:40
this should return false and it returns true
Eric Weiss
@eweiss17
Oct 16 2017 17:41
then on your search bar
make it a col spanning how much you want it to
<div class="search row">
            <input class="col s-5
lil bit off but yo uget the idea
Ken Haduch
@khaduch
Oct 16 2017 17:43
@AlexxMart - a problem with that your \(? matches 0 or 1 of the parentheses, so not having a parenthesis does match the expression.
Ashwin
@ashwins93
Oct 16 2017 17:43
@quickspeedy make sure the "col s*" inside your "row" adds up to 12
Niloy513
@Niloy513
Oct 16 2017 17:44
I need some help with html and css if anyone is willing o
Alexx Martínez
@AlexxMart
Oct 16 2017 17:44
@khaduch Yes, I decided to to that. The problem is that some of the expressions either have both of the parenthesis in the correct places, and some of them have no parenthesis at all
Ashwin
@ashwins93
Oct 16 2017 17:45
@Gh05d This should take care of it
#middle h1 {
  line-height: 1;
}
Eric Weiss
@eweiss17
Oct 16 2017 17:45
@quickspeedy yeah your html code is hard to read
Niloy513
@Niloy513
Oct 16 2017 17:46

https://codepen.io/Niloy513/pen/yzRPYO

my picture links on my portfolio tab it's clickable in all the tabs, is someone able to figure out why?

Ken Haduch
@khaduch
Oct 16 2017 17:46
@AlexxMart - what i did with my expression was to make it so that it either matched "(555)", so I made that a group, and then used the | operator to make a group of three digits that did not have parentheses. And those were included in parentheses so it would be a group, and that was how the area code matching was handled. Trying to make optional parentheses in either the ( or the ) is not easy, or maybe impossible to do? I don't know if you can condition the match for the right hand parenthesis based on the existence of the left-hand parentheses, which is essentially what you need to do. so writing an expression that either has both parens or none was simpler.
Alexx Martínez
@AlexxMart
Oct 16 2017 17:48
@khaduch Great idea, I didn't think of use that operator. I'll try right now
quickspeedy
@quickspeedy
Oct 16 2017 17:51
@eweiss17 Apology for the hard to read code, I followed what you mentioned and now I just need to fix the padding and it should be fixed.
Thanks @eweiss17
CamperBot
@camperbot
Oct 16 2017 17:51
quickspeedy sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 598 | @eweiss17 |http://www.freecodecamp.com/eweiss17
Ivan Ngundela
@ingundela
Oct 16 2017 17:52
Hello everyone... I'm almost done completing my portfolio website, when I click services from the nav menu it scroll down and an anoing blue color coming and the end of the service container and I can find a way to remove it.. Please help, the link for the website is https://ingundela.github.io/myportfolio/
also please give me some input to improve my Portfolio Website before I move forward... for now I have only added 2 project.....
Thank you in advance
Ashwin
@ashwins93
Oct 16 2017 17:56
@ingundela Looks awesome. Why don't you add a scrollspy
and the picture of yours, it would be nice if it was a high resolution image. On bigger screen it kinda pixelizes
and "Design" is misspelled as "Disign" please do correct that
Niloy513
@Niloy513
Oct 16 2017 18:03
@ashwins93 by any chance do you know what's wrong with mine if you don't mind me asking
Ivan Ngundela
@ingundela
Oct 16 2017 18:03
@ashwins93 Thanks you for your reply, I'll make the changes...
CamperBot
@camperbot
Oct 16 2017 18:03
ingundela sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 369 | @ashwins93 |http://www.freecodecamp.com/ashwins93
Ashwin
@ashwins93
Oct 16 2017 18:04

@ashwins93 by any chance do you know what's wrong with mine if you don't mind me asking

Yeah i'm looking at it. Its kinda bizarre

Ivan Ngundela
@ingundela
Oct 16 2017 18:04
@ashwins93 scrollspy? I've never heard of it... let me google it... many thanks once again.
CamperBot
@camperbot
Oct 16 2017 18:04
ingundela sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
api offline
Eric Weiss
@eweiss17
Oct 16 2017 18:04
i'm going to do a wild guess and say that you visibly removed the images but they still exist on the page
Ashwin
@ashwins93
Oct 16 2017 18:05
@ingundela Its available as a part of bootstrap. You seem to be using bootstrap already

i'm going to do a wild guess and say that you visibly removed the images but they still exist on the page

Thats what i thought too, visibility: hidden kind of stuff but i couldn't exactly find it

@eweiss17
Kaz Baig
@kbaig
Oct 16 2017 18:05
@ingundela
section#services:focus {
    outline: none
}
Niloy513
@Niloy513
Oct 16 2017 18:06
actually no I didn't use a visibility hidden, in fact it should be out of its scope to even be there
it's a tough one lol atleast for me.
Ashwin
@ashwins93
Oct 16 2017 18:07
@Niloy513 In the home tab all the images are shifted to the right
as though they were offset by the content of the main tab
Eric Weiss
@eweiss17
Oct 16 2017 18:09
are you against using JS on this page? I feel like js could help with this
Ivan Ngundela
@ingundela
Oct 16 2017 18:10
@ashwins93 hum... OK Thanks..I'm googling it to see how it works... just to let you know that I'm new to Web Development and learning every day.. THIS IS AMAZING. Thanks
CamperBot
@camperbot
Oct 16 2017 18:10
ingundela sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
api offline
Niloy513
@Niloy513
Oct 16 2017 18:10
yah and in the contact they are all shifted to the left, I prefer not using js for this, but if it's an easy solution I'll accept it. beggars can't be choosers after all
Ivan Ngundela
@ingundela
Oct 16 2017 18:11
@kbaig Thanks you ... I'm adding it.....
CamperBot
@camperbot
Oct 16 2017 18:11
ingundela sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 355 | @kbaig |http://www.freecodecamp.com/kbaig
Kaz Baig
@kbaig
Oct 16 2017 18:11
@ingundela yw
Ashwin
@ashwins93
Oct 16 2017 18:11
@Niloy513 I saw the tab demo in jqueryui.com
Niloy513
@Niloy513
Oct 16 2017 18:12
oh I think I know what I did, perhaps moving all my texts and box to the left on my home tab shifted everything.
Ashwin
@ashwins93
Oct 16 2017 18:12
in their demo when we switch tabs the inactive tabs' display property is changing to none
but with your divs the display remains as inline
And i noticed with your code that #a shows that behavior but #b doesn't
Niloy513
@Niloy513
Oct 16 2017 18:15
@ashwins93 I see, I don't understand why b wouldn't display hat behavior though.
Ashwin
@ashwins93
Oct 16 2017 18:15

@ashwins93 I see, I don't understand why b wouldn't display hat behavior though.

You've set #B 's display to flex explicitly

try moving the flex container inside of #B
Niloy513
@Niloy513
Oct 16 2017 18:17
@ashwins93 Thank you very much ashwin, you probably saved several hours of my life there.
CamperBot
@camperbot
Oct 16 2017 18:17
niloy513 sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 370 | @ashwins93 |http://www.freecodecamp.com/ashwins93
Niloy513
@Niloy513
Oct 16 2017 18:17
such a simple fix, I was completely over complicating it.
Ashwin
@ashwins93
Oct 16 2017 18:19
It worked?
Niloy513
@Niloy513
Oct 16 2017 18:20
ya! works perfectly just had to remove the flex property for b
Ashwin
@ashwins93
Oct 16 2017 18:20
Lol that was lucky find
First time i'm coming across such issue, i just took a guess
Niloy513
@Niloy513
Oct 16 2017 18:24
lol yah the same for me as well, once again thank you.
Ivan Ngundela
@ingundela
Oct 16 2017 18:37
@kbaig Thanks a lot... it worked...... it's so amazing how litle things make a big change....
CamperBot
@camperbot
Oct 16 2017 18:37
ingundela sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
api offline
Kaz Baig
@kbaig
Oct 16 2017 18:37
@ingundela no worries bud
Ivan Ngundela
@ingundela
Oct 16 2017 18:40
@kbaig its really cool and learning to code becomes much easy when we count on a great comunity like this... I cannot Thank you guys enough....I've been learning web development for 8 months and I'm already building real project from small business.. this is becoming a life change for me....
CamperBot
@camperbot
Oct 16 2017 18:40
ingundela sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
api offline
Kaz Baig
@kbaig
Oct 16 2017 18:41
@ingundela Yeah it's pretty great. Started web dev/programming for real this past Jan myself. Already managed to get a job where programming is a big piece, albeit in a business role
shilpi verma
@shilpiverma509
Oct 16 2017 18:50
Hi guys, I need help in figuring out why I am unbale to display my wather icon
Here's a link to my pen
Kaz Baig
@kbaig
Oct 16 2017 18:53
@shilpiverma509 First thing I noticed is that your weather icon css file is being imported as a JS file. You need to put it in a <link> tag in the head of the HTML via the HTML tab in the Pen Settings
shilpi verma
@shilpiverma509
Oct 16 2017 18:56
@kbaig Thanks, for that detail,I changed and placed it in html tab
CamperBot
@camperbot
Oct 16 2017 18:56
shilpiverma509 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 356 | @kbaig |http://www.freecodecamp.com/kbaig
Jessie Cryer
@j-cryer
Oct 16 2017 18:56
hola, i have a question if anyone can help. I'm using an onclick event for an image that I have and i was wondering if there was a class or property i could apply to the image that, when hovered, transformed the cursor into the click icon rather than the default cursor
shilpi verma
@shilpiverma509
Oct 16 2017 18:57
@kbaig howeverI don't get the icon
Moisés Man
@moigithub
Oct 16 2017 18:59

apply css

urImageSelector: hover {
cursor:pointer;
}

@j-cryer

Jessie Cryer
@j-cryer
Oct 16 2017 19:00
@moigithub I just found the answer in a google search you beat me to it i was going to come back and explain. Thank you though!
CamperBot
@camperbot
Oct 16 2017 19:00
j-cryer sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3676 | @moigithub |http://www.freecodecamp.com/moigithub
Ivan Ngundela
@ingundela
Oct 16 2017 19:03
@kbaig great my friend and wish you all the best....
Jessie Cryer
@j-cryer
Oct 16 2017 19:04
I do have one other quick question I haven't had luck finding an answer to. This image is a .png (canvas is transparent). Image editors seem to distinguish the canvas from the image but I can't make the css distinguish the two. I want to apply an effect (border or something) to the image inside the canvas only, is this possible?
Kaz Baig
@kbaig
Oct 16 2017 19:05
@shilpiverma509 I think you're using http://erikflowers.github.io/weather-icons/, is that right? If so, I don't see "wi wi-forecast-io-clear-day " as an option
(I have clear weather as my weather forecast)
Jessie Cryer
@j-cryer
Oct 16 2017 19:05
similar to the image hover effect of this webpage https://shadowverse-portal.com/?lang=en
the alternative to this approach is editing the image and replacing it on hover
Ashwin
@ashwins93
Oct 16 2017 19:10
@j-cryer in that website they are just setting the opacity value down on hover
that is the effect you want?
shilpi verma
@shilpiverma509
Oct 16 2017 19:11
@kbaig yes I'm using this . but this has a built in API compatibility with forecast.io , the one I'm using to fetch the weather. if you go in Popular Weather API Classes on- http://erikflowers.github.io/weather-icons/api-list.html you'll see "wi wi-forecast-io-clear-day " option
Jessie Cryer
@j-cryer
Oct 16 2017 19:11
@ashwins93 hover over the cards, not the faction leader images
Ashwin
@ashwins93
Oct 16 2017 19:12
@j-cryer those are just box-shadows
with a bit of JS
Kshitiz
@kshtzsharma48
Oct 16 2017 19:13
my laravel is not running 2 migrations out pf 3 why so ?
laravel 5.3
Ivan Ngundela
@ingundela
Oct 16 2017 19:13
@kbaig also I wanted to make the menu drop down list smaller when viewing the website on mobile....are you able to help please... when I click on it from a mobile device the menu looks to long and I want it shorter....
Jessie Cryer
@j-cryer
Oct 16 2017 19:13
@ashwins93 will box shadows only pick up the image itself and not the canvas? because each of those images have a square border around them
Ashwin
@ashwins93
Oct 16 2017 19:13
take a look at this Materilize: Pulse @j-cryer
Jessie Cryer
@j-cryer
Oct 16 2017 19:13
@ashwins93 cool resource, thank you
CamperBot
@camperbot
Oct 16 2017 19:13
j-cryer sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 371 | @ashwins93 |http://www.freecodecamp.com/ashwins93
Ashwin
@ashwins93
Oct 16 2017 19:14
@j-cryer if the background is transparent then the box-shadows only take the shape of the visible content
Jessie Cryer
@j-cryer
Oct 16 2017 19:14
@ashwins93 okay thats awesome.
Ashwin
@ashwins93
Oct 16 2017 19:15
@j-cryer you need a JS command to make that animation i believe
Ashwin
@ashwins93
Oct 16 2017 19:31
@j-cryer found the css anim code from that website source
@keyframes anim - card - frame {
    0 % {-webkit - transform: scale(1);transform: scale(1);opacity: .9
    }
    100 % {-webkit - transform: scale(1.25);transform: scale(1.25);opacity: 0
    }
}
.anim-card-frame-blue, .el-card-frame-wrapper.is-image-loaded:hover .el-card-frame.is-blue {
    -webkit-animation: anim-card-frame .95s ease-out infinite 0s normal both;
    animation: anim-card-frame .95s ease-out infinite 0s normal both
}
and the animation props
Kaz Baig
@kbaig
Oct 16 2017 19:50
@shilpiverma509 Did you get the CDN off of https://cdnjs.com/libraries/weather-icons?
I noticed that the first link (non-minified css) doesn't have the forecast-io icons but the third link does
@shilpiverma509 nvm looks like you have the right one
shilpi verma
@shilpiverma509
Oct 16 2017 19:57
@kbaig right .
shilpi verma
@shilpiverma509
Oct 16 2017 20:02
Great . What was wrong here??
Was it my link??
Kaz Baig
@kbaig
Oct 16 2017 20:03
@shilpiverma509 uhh to be honest, I'm not sure. I did a few things. Let me check.
@shilpiverma509 Well it's working on your pen now too
shilpi verma
@shilpiverma509
Oct 16 2017 20:04
Yea, I just edited it. Copied from here :D
Kaz Baig
@kbaig
Oct 16 2017 20:05
ah ok
shilpi verma
@shilpiverma509
Oct 16 2017 20:05
@kbaig I spent a couple of hours on this. Thanks a lot
CamperBot
@camperbot
Oct 16 2017 20:05
shilpiverma509 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 357 | @kbaig |http://www.freecodecamp.com/kbaig
Kaz Baig
@kbaig
Oct 16 2017 20:06
@shilpiverma509 Honestly I have no clue what the difference was
@shilpiverma509 Did you copy my html head too or no
shilpi verma
@shilpiverma509
Oct 16 2017 20:07
Yea I did , I didn't write the rel='stylesheet' type='text/css' previously
Kaz Baig
@kbaig
Oct 16 2017 20:07
Oh yeah you need at least the rel
shilpi verma
@shilpiverma509
Oct 16 2017 20:08
wow that's a silly mistake I made.. Thankyou :clap:
Kaz Baig
@kbaig
Oct 16 2017 20:08
@shilpiverma509 np buddy
quickspeedy
@quickspeedy
Oct 16 2017 20:12
Does anybody have a link of a clear example of an autocomplete using AJAX (javascript only)?
I have been googling and could not find one. Only shows jquery
quickspeedy
@quickspeedy
Oct 16 2017 20:20
@kbaig Thanks!
CamperBot
@camperbot
Oct 16 2017 20:20
quickspeedy sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 358 | @kbaig |http://www.freecodecamp.com/kbaig
Ashwin
@ashwins93
Oct 16 2017 20:29
function autocomplete(val) {
  var people_return = [];

  for (i = 0; i < people.length; i++) {
    if (val === people[i].slice(0, val.length)) {
      people_return.push(people[i]);
    }
  }

  return people_return;
}
wouldn't it be enough to just

var autocomplete = val => people.filter( name => name.startsWith(val))
Kaz Baig
@kbaig
Oct 16 2017 20:30
@ashwins93 yep
Eric Windmill
@ericwindmill
Oct 16 2017 20:30
startsWith isn't really fuzzy though
Ashwin
@ashwins93
Oct 16 2017 20:31
or regex testing new RegExp("^" + val).test(name)
Eric Windmill
@ericwindmill
Oct 16 2017 20:31
What if you have a db with first and last names... you'd want to auto complete / search by any string of characters (i.e. last name). I know the question isn't specifically about searches, but something to keep in mind
Ashwin
@ashwins93
Oct 16 2017 20:32
@ericwindmill in that case we can use String.prototype.includes()
Eric Windmill
@ericwindmill
Oct 16 2017 20:46
Okay, now what if I have a db of users in the millions? I don't know the context of this autocomplete, so just playing devils advocate. Looping over the entire db each time a character is typed wouldn't work.
Kaz Baig
@kbaig
Oct 16 2017 20:48
In that context, won't we likely not be doing queries in JS
I could be totally off base but just wondering if that would actually happen in practice
Dima Kushnir
@rinhsuk
Oct 16 2017 20:49
hi. any ideas why animation doesn't work? https://codepen.io/dimasimply-1472290786/pen/QqJyxO
Ashwin
@ashwins93
Oct 16 2017 20:50
@ericwindmill Db in millions? Thats not the responsibility of the 'View' anymore. The model and API should take care of those queries
@rinhsuk you haven't added any animations
transition is different from animation
Eric Windmill
@ericwindmill
Oct 16 2017 20:51
@ashwins93 You're right, but why couldn't the model be done in JS?
Ashwin
@ashwins93
Oct 16 2017 20:52
@ericwindmill how about node and mongodb?
Kaz Baig
@kbaig
Oct 16 2017 20:52
@rinhsuk Also, you don't have jquery added
I guess I meant why would the front end be doing that
Eric Windmill
@ericwindmill
Oct 16 2017 20:53
@ashwins93 I don't understand the question. A fuzzy search would be handled outside the view. I was playing devil advocate because optimization is something that people should at least be aware of
Ashwin
@ashwins93
Oct 16 2017 20:53

@rinhsuk Also, you don't have jquery added

i'm surprised the page didn't throw any error, is there something else which defined the $ in the global scope

Kaz Baig
@kbaig
Oct 16 2017 20:54
@ashwins93 It did throw an error for me
Ashwin
@ashwins93
Oct 16 2017 20:54
@ericwindmill Oh okay i get your point
Eric Windmill
@ericwindmill
Oct 16 2017 20:54
I think codepen fails quietly when you forget to include jQuery
Ashwin
@ashwins93
Oct 16 2017 20:54
@kbaig my browser is so tolerant idk why
Kaz Baig
@kbaig
Oct 16 2017 20:55
@ashwins93 Or maybe it was added in between when you and I saw it ;)
Dima Kushnir
@rinhsuk
Oct 16 2017 20:55
@ashwins93 but transitions can be used in animations? just copied to codepen, forgot to add jquery
Kaz Baig
@kbaig
Oct 16 2017 20:56
@rinhsuk Can you link the original?
@rinhsuk And yes, it can be used for animations. If you change a property of an element, transition will dictate how it transitions to that property
Ashwin
@ashwins93
Oct 16 2017 20:56
@rinhsuk transitions between different states are animated :hover :active :focus et
Dima Kushnir
@rinhsuk
Oct 16 2017 20:57
localhost :/ the script works tho.
Ashwin
@ashwins93
Oct 16 2017 20:58

@ashwins93 I don't understand the question. A fuzzy search would be handled outside the view. I was playing devil advocate because optimization is something that people should at least be aware of

In that case the optimal way to search would be to implement something like a binary search (O(log n)) on an sorted database

on a*
Kaz Baig
@kbaig
Oct 16 2017 20:59

@rinhsuk Found your problem. Remove "." from the classes you're adding.

 $('.outside--1').addClass('animation--1');

as opposed to

 $('.outside--1').addClass('.animation--1');
Dima Kushnir
@rinhsuk
Oct 16 2017 21:00
ohh that's it. thx
Kaz Baig
@kbaig
Oct 16 2017 21:07
@ingundela depends on how you made it. Is the nav a block? Flex? I don't think I know enough about the implementation to give a catchall answer
Barbara Pentoney
@flyfishingbarbara
Oct 16 2017 22:19
help plz....just doing a little project to play with bootstrap 4 carousel....well first off my 1st image doesn't fill display (full image)...how do I correct...??
Ashwin
@ashwins93
Oct 16 2017 22:22
@flyfishingbarbara set style="width:100%"
But be aware that if your image is lowres, it will pixelate on bigger screens
Barbara Pentoney
@flyfishingbarbara
Oct 16 2017 22:23
@ashwins93 thnx
CamperBot
@camperbot
Oct 16 2017 22:23
flyfishingbarbara sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 372 | @ashwins93 |http://www.freecodecamp.com/ashwins93
Barbara Pentoney
@flyfishingbarbara
Oct 16 2017 22:25
@ashwins93 yahoo it worked....okay, now do I add some js to make it slide thru the other 3 images..??
@ashwins93 ie...$('.carousel').carousel()
Barbara Pentoney
@flyfishingbarbara
Oct 16 2017 22:33
anyone else help....??hmmm I added in settings jquery and the code above to js and it still isn't cycling thru the 4 images....https://codepen.io/flyfishingbarbara/pen/yzQbeQ
i got it to work....thanks again...@ashwins93
YAHOO
Marouane R
@mrassili
Oct 16 2017 22:54
Hi
I need help with my portfolio project here : https://codepen.io/mrassili/pen/LzzRxw
Barbara Pentoney
@flyfishingbarbara
Oct 16 2017 22:55
@mrassili hello..
Marouane R
@mrassili
Oct 16 2017 22:56
I'm trying to use the Bootstrap's scrollspy but it doesn't work for me
any help with that?
Johnny
@jtan3
Oct 16 2017 23:12
@mrassili can you explain what is not working?
3gimpfingers
@3gimpfingers
Oct 16 2017 23:18

Instructions: Return the remaining elements of an array after chopping off n elements from the head.

Why doesn't this work:

function slasher(arr, howMany) {
  if (howMany == 0) {
    return arr;
  }

  else {
  arr = arr.splice(0, howMany +1);
  return arr;
  }
}

But this does:

function slasher(arr, howMany) {
  if (howMany == 0) {
    return arr;
  }

  else {
  arr = arr.splice(howMany, howMany+1);
  return arr;
  }
}
Sorry, I had the second one wrong. Now answer the question.
Johnny
@jtan3
Oct 16 2017 23:32
@3gimpfingers can you look up splice again ? The first parameter is the start position. The 2nd parameter is the deleteCount.
@3gimpfingers first one is wrong because you're going to always start at the 0 index and splice howMany + 1 after the starting position.