These are chat archives for FreeCodeCamp/HelpFrontEnd

13th
Jan 2018
Danny
@danieldsutter
Jan 13 2018 02:38 UTC
Evening all. I need some help, and I'll try to offer some too.
I'm working on the calculator project and can't figure out why my top button in each column shifts to the right. Any tips? https://codepen.io/danieldsutter/pen/OzZQqK
@danieldsutter opening the dev tools shows a margin on that row that isnt on the others
Danny
@danieldsutter
Jan 13 2018 02:42 UTC
@moT01 That did it. That's weird though that since I put it on button in CSS, it only added to the button on top and not all the buttons.
yea, im not quite sure
bootstrap
Danny
@danieldsutter
Jan 13 2018 02:46 UTC
@moT01 Thanks for your help though.
CamperBot
@camperbot
Jan 13 2018 02:46 UTC
danieldsutter sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 957 | @mot01 |http://www.freecodecamp.org/mot01
Joseph A. Sangine
@HTML-joe
Jan 13 2018 04:03 UTC
Hey new people like me
This is saving my life and wanted to share with all of you http://htmlcheatsheet.com/css/
dont be tempted to constantly copy and paste use it as a refrence sheet to learn off of
Joseph Joe
@JoeTinnySpace
Jan 13 2018 04:48 UTC
@HTML-joe , thanks fren Happy cakeday
CamperBot
@camperbot
Jan 13 2018 04:48 UTC
joetinnyspace sends brownie points to @html-joe :sparkles: :thumbsup: :sparkles:
:cookie: 296 | @html-joe |http://www.freecodecamp.org/html-joe
Marc
@MWBauer
Jan 13 2018 04:53 UTC
Good evening everyone :icecream:
How are we?
Andy
@kodemaster8
Jan 13 2018 05:18 UTC
@HTML-joe @HTML-joe nice one Joe thanks
CamperBot
@camperbot
Jan 13 2018 05:18 UTC
kodemaster8 sends brownie points to @html-joe :sparkles: :thumbsup: :sparkles:
:cookie: 297 | @html-joe |http://www.freecodecamp.org/html-joe
Andy
@kodemaster8
Jan 13 2018 05:20 UTC
@MWBauer good morning!
vivekumarsinha
@vivekumarsinha
Jan 13 2018 05:29 UTC
what is while loop?
Fabien SHAN
@X140hu4
Jan 13 2018 05:55 UTC
@vivekumarsinha Search. Read. Ask.
What do you understand of it so far?
Marc
@MWBauer
Jan 13 2018 06:01 UTC
Andy, what's shakin'?
Do you know how to use/build api?
Alexander Jarman
@HeinousTugboat
Jan 13 2018 06:15 UTC
"use/build api" is sort of like saying "drive/make a car"..
Razvan Jackson
@RazvanJackson
Jan 13 2018 07:16 UTC
Good morning!
Someone here good at design, i want some suggestions for my app..
Nathan
@clarken1996
Jan 13 2018 07:55 UTC
hey peeps have a css question
.navbar-nav > li > a:hover ~ .v-bar{
color: blue !important;
background: blue !important;
}
trying to change the color of a span inside the li when the li is being hovered
Alexander Jarman
@HeinousTugboat
Jan 13 2018 07:57 UTC
So put the :hover on the li?
That's setting a .v-bar blue when it's in the same li as a hovered a.
Nathan
@clarken1996
Jan 13 2018 08:00 UTC
let me show you the code, might be easier
Alexander Jarman
@HeinousTugboat
Jan 13 2018 08:00 UTC
Kk.
image.png
Nathan
@clarken1996
Jan 13 2018 08:01 UTC
<li><a href="#"><span class= 'v-bar'>|</span> hover here</a></li> so when hover here is being hovered I want the vertical to change color
Alexander Jarman
@HeinousTugboat
Jan 13 2018 08:02 UTC
image.png
Then you don't want to use the sibling selector.
li > a:hover > .v-bar should do it.
Or li:hover .v-bar.
Depending on where you want your hit boundaries for your hovering to actually be.
Nathan
@clarken1996
Jan 13 2018 08:10 UTC
thankyou @HeinousTugboat
Alexander Jarman
@HeinousTugboat
Jan 13 2018 08:10 UTC
Welcome. :-)
Nathan
@clarken1996
Jan 13 2018 08:11 UTC
was on stack overflow for 20 mins, putting way to much thought into it
Alexander Jarman
@HeinousTugboat
Jan 13 2018 08:12 UTC
Yeah, I can imagine. CSS selectors can be a royal PITA.
Fabien SHAN
@X140hu4
Jan 13 2018 08:14 UTC
Pita sounds delicious
Razvan Jackson
@RazvanJackson
Jan 13 2018 08:15 UTC
Someone here good at design, i want some suggestions for my app..
Alexander Jarman
@HeinousTugboat
Jan 13 2018 08:15 UTC
Sorry. I wasn't trying to ignore you, I just.. there's a reason my girlfriend's a designer. ;-)
Nathan
@clarken1996
Jan 13 2018 08:16 UTC
@HeinousTugboat :+1:
Razvan Jackson
@RazvanJackson
Jan 13 2018 08:16 UTC
@HeinousTugboat np, can she DM me on gitter?
Alexander Jarman
@HeinousTugboat
Jan 13 2018 08:17 UTC
I'd have to wake her up and convince her to sign up for github first. :-P
Razvan Jackson
@RazvanJackson
Jan 13 2018 08:17 UTC
@HeinousTugboat Nvm then :)
Daniel Romero
@Ranacode
Jan 13 2018 09:20 UTC
Hey guys
I have a css explosive issue
I'm using bulma css and on tablet resolution I have a problem
Daniel Romero
@Ranacode
Jan 13 2018 09:25 UTC
The flex properties are not working on that resolution
I have the "Chatmessages" and "Chatinput" with justify-content: space-between and it works on desktop resolution but is broken when I try to resize on lower resolutions
Kelvin Hong
@superokindonesia
Jan 13 2018 09:50 UTC
can anyone help me , why this error happen
CORS header 'Access-Control-Allow-Origin' missing
Im using axios on vue app, and symfony backend.
when I try send auth from postman its work, but when I host on real server/local browser, that cors error happen
Bjorn van de Peut
@bjorno43
Jan 13 2018 09:52 UTC
@superokindonesia CORS is a Same-origin Policy issue. It means you're trying to access something on a remote server that you're not allowed to do. Sometimes this is caused because you're using HTTP instead of HTTPS.
primuscovenant
@primuscovenant
Jan 13 2018 11:37 UTC
@heroiczero thx
CamperBot
@camperbot
Jan 13 2018 11:37 UTC
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2135 | @heroiczero |http://www.freecodecamp.org/heroiczero
bg-grira53
@bg-grira53
Jan 13 2018 13:30 UTC
hey guys
:panda_face:
Roman Struna
@RomchyFCC
Jan 13 2018 13:42 UTC
is anyone learning with codecademy? ... the more i try to use it the more i find, it well don't wanna be rude so, "not helpful" would be a nice term i suppose
Aditya
@ezioda004
Jan 13 2018 13:49 UTC
Codecademy free or the pro? The free version is how I started to learn programming but as you've seen they hold your hand too much, I suppose its good to learn basics from them but other than that, it's not a good resource if you wanna get a job in this field.
Roman Struna
@RomchyFCC
Jan 13 2018 13:51 UTC
thats exactly what i am figuring out, i've done more advanced tutorials and this is just so easy, all of it, plus just copy and paste so it's kinda bad...
Aditya
@ezioda004
Jan 13 2018 13:57 UTC
Yep, thats codecademy in a nutshell. You're better off doing something else if you got the basics down.
ahmed-issa-mohd
@ahmed-issa-mohd
Jan 13 2018 13:58 UTC
How can I get the JavaScript code for a particular part of the site using the inspect element ?
Stephen James
@sjames1958gm
Jan 13 2018 13:59 UTC
@ahmed-issa-mohd The developer tools has Sources tab which shows all files downloaded for the site.
Kelvin Hong
@superokindonesia
Jan 13 2018 14:01 UTC
@ahmed-issa-mohd you could just download from official site if you want use that carousel
https://owlcarousel2.github.io/OwlCarousel2/
much cleaner and documented
ahmed-issa-mohd
@ahmed-issa-mohd
Jan 13 2018 14:01 UTC
okay I see but I want to get this part ,Not all files
Kelvin Hong
@superokindonesia
Jan 13 2018 14:05 UTC
@ahmed-issa-mohd inspect element > source > there's owl-carousel folder, its all you need.
but my recommendation just download from official site
Stephen James
@sjames1958gm
Jan 13 2018 14:07 UTC
@ahmed-issa-mohd That link is the javascript file
Marc
@MWBauer
Jan 13 2018 14:58 UTC
Morning @sjames1958gm
How is everyone?
:wave::coffee:
I'm working on the wiki viewer and it's coming.....slowly
I want to make the page look more interesting but I'm not much into design.
I have to build the api, or find an api.
I'd rather build one so that I can learn how.
Liam Docherty
@ldocherty1
Jan 13 2018 15:14 UTC
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Find Out More <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
.btn-xl {
  padding: 1rem 2rem
}

.btn-primary {
  background-color: #D5A021;
  border-color: #D5A021;
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
  color: #fff;
  background-color: #D5A021!important;
}
How can I make the blue outline colour be #D5A021;?
I did try using border-color: #D5A021; but had no luck
it seems comes up as blue
Sorin Ruse
@sorinr
Jan 13 2018 15:29 UTC
@ldocherty1 think its outline-color
Marc
@MWBauer
Jan 13 2018 15:29 UTC
In order to use Math.max() do I have to use numbers, or can I use arr?
Liam Docherty
@ldocherty1
Jan 13 2018 15:29 UTC
@sorinr It can't be as it's gold? I think it has something to do with btn-primary
Omar Tan
@wheelhot
Jan 13 2018 15:33 UTC
Here’s a vanilla JS question for you all, if assuming a website has 1000 links (structured in HTML using li), how do I know which of the link is clicked? Do I have to create an ID for each link? That sounds tedious with 1000 links, suggestions?
Aditya
@ezioda004
Jan 13 2018 15:33 UTC
@ldocherty1 When you do border-color: #D5A021; it is indeed setting it to #D5A021(you can check it in inspect element) but since its width is 0 you cant see.
Sorin Ruse
@sorinr
Jan 13 2018 15:33 UTC
@ldocherty1 its outline-color when in :focus
Aditya
@ezioda004
Jan 13 2018 15:35 UTC
@wheelhot Use this? basically when you create an event listener for a link clicked, this will represent the current link clicked
@MWBauer You can use an array too but you'd have to use spread operator. Example max = Math.max( ...arr );
Alexander Jarman
@HeinousTugboat
Jan 13 2018 16:41 UTC
@wheelhot Event.target gives you the actual element that was clicked.
Sorin Ruse
@sorinr
Jan 13 2018 16:45 UTC
@HeinousTugboat must be very carefull with event propagation otherwise e.target will refer also to all elements clicked previously
Alexander Jarman
@HeinousTugboat
Jan 13 2018 16:47 UTC
Does it?
Sorin Ruse
@sorinr
Jan 13 2018 16:48 UTC
don't know @wheelhot should take care about it. here a good article about it: https://www.sitepoint.com/event-bubbling-javascript/
Alexander Jarman
@HeinousTugboat
Jan 13 2018 16:49 UTC
That only matters if you've got nested handlers though, right?
Even then, I'm pretty sure that if you click an element that has a parent with a click handler, the event fires with the actual child element that was clicked.
I might go run some tests with eventPropagation, see if I can capture a click before it even reaches the element and see what it's Target is set to.
Alexander Jarman
@HeinousTugboat
Jan 13 2018 17:07 UTC
So, Event.target will always point to the actual visible Element that was clicked. Event.currentTarget is identical to this, and is the element that the attached handler is firing from. Bubbling and Capturing will decide whether or not the event gets passed to multiple handlers, but if there's only one handler nothing changes.
Roman Struna
@RomchyFCC
Jan 13 2018 17:22 UTC
is it possible to get a popup window using _blank or some other atribute on <a> with just HTML and CSS?
VaseJS
@VaseJS
Jan 13 2018 17:23 UTC
@RomchyFCC a popup window is not truly a window. its a modal created with css
Roman Struna
@RomchyFCC
Jan 13 2018 17:24 UTC
maybe i was missunderstood, i want my anchor element instead of opening a new site or open in the same browser tab, to open in a smaller window above the page as a pop-up
Alexander Jarman
@HeinousTugboat
Jan 13 2018 17:24 UTC
target=_new maybe?
Roman Struna
@RomchyFCC
Jan 13 2018 17:24 UTC
lemme try
Alexander Jarman
@HeinousTugboat
Jan 13 2018 17:25 UTC
But I don't think you can easily control if it's a pop-up or new tab.
Pretty sure after the porn-pop-under-epidemic, browsers 86ed that functionality post haste.
Roman Struna
@RomchyFCC
Jan 13 2018 17:25 UTC
nope, still opens a new tab in chrome
Roman Struna
@RomchyFCC
Jan 13 2018 17:27 UTC
oh, hmmm, well i found some javascript to do it, but given the proiject i would prefer just html, but i checked the attributes
i just found it, i think i could make it work with target framename
Alexander Jarman
@HeinousTugboat
Jan 13 2018 17:27 UTC
Yeah, I think that's your only option.
VaseJS
@VaseJS
Jan 13 2018 17:33 UTC
@HeinousTugboat you can create new tabs in a window
Scott Lieber
@lieberscott
Jan 13 2018 17:37 UTC
Hey guys. Working through the React challenges on the beta site. A few bugs, but still really good! I'm at one of the last challenges (https://beta.freecodecamp.org/en/challenges/react/give-sibling-elements-a-unique-key-attribute). I don't understand what the challenge means by giving each element a unique "key". I'm rendering a list as a sort of key-value pair, but failing the last test for the check. Here's a Codepen of what I'm doing. What does it mean by adding a "key" to each element? (Codepen: https://codepen.io/lieberscott/pen/LerMmV)
Alexander Jarman
@HeinousTugboat
Jan 13 2018 17:42 UTC
@VaseJS You can, but I didn't think you could with HTML/CSS?
So, @lieberscott, a "key" is referring to a key-value store.
VaseJS
@VaseJS
Jan 13 2018 17:43 UTC
it may be a js thing, but i know it can be done. lets explore
Scott Lieber
@lieberscott
Jan 13 2018 17:44 UTC
nevermind, i figured it out
Alexander Jarman
@HeinousTugboat
Jan 13 2018 17:44 UTC
:thumbsup: Cool. :-D
Scott Lieber
@lieberscott
Jan 13 2018 17:44 UTC
@HeinousTugboat it means to use a "key" attribute within the <li>
so, <li key="somethingHere">arrayItem</li>
anyway, thanks!
Alexander Jarman
@HeinousTugboat
Jan 13 2018 17:45 UTC
Oh! My bad. I probably shouldn't try to help people with React stuff. :laughing:
VaseJS
@VaseJS
Jan 13 2018 17:46 UTC
ok, its what i thought. it is an HTML thing but it depends on how the user has configured their browser to handle those actions
or they should mention its React if they have not done so
Alexander Jarman
@HeinousTugboat
Jan 13 2018 17:46 UTC
@VaseJS That's what I said, and he did. :-P
progrobam
@progrobam
Jan 13 2018 22:21 UTC
test
Stephan Lamoureux
@slamoureux
Jan 13 2018 22:23 UTC
when I make my navbar fixed I lose the right padding on my last link. Why does this happen?
just using plain css
Kent Saeteurn
@sansae
Jan 13 2018 22:23 UTC
hello. i'm working on "No Repeats Please" in the advanced algorithm section. It's basically a permutation problem. My issue is that I don't understand how to go about finding all the permutations of a string. I've found solutions online, but people don't talk about it, they just show a solution. would anyone like to help me find an approach to solving permutations? (the repeated consec letters is not an issue for me)
Stephan Lamoureux
@slamoureux
Jan 13 2018 22:24 UTC
tried putting <nav> in its own container and centering but nothing changed
progrobam
@progrobam
Jan 13 2018 22:25 UTC
Alexander Jarman
@HeinousTugboat
Jan 13 2018 22:27 UTC
@sansae Do you just mean literally finding every permutation?
Stephen James
@sjames1958gm
Jan 13 2018 22:43 UTC
@sansae My algorithm was to select each element from the string and the calculate all the permuations on the rest (recursively)
bg-grira53
@bg-grira53
Jan 13 2018 22:45 UTC
hey guys
bg-grira53
@bg-grira53
Jan 13 2018 23:00 UTC
can anyone help me plz ??
Alexander Jarman
@HeinousTugboat
Jan 13 2018 23:01 UTC
Sure, what's up?
bg-grira53
@bg-grira53
Jan 13 2018 23:03 UTC
hey http://lionsclubstunisie.com/actions/# resize the browser and u will notice that the divs are moving and i am wondering how u can do that ??
Alexander Jarman
@HeinousTugboat
Jan 13 2018 23:09 UTC
bg-grira53
@bg-grira53
Jan 13 2018 23:13 UTC
thank for your help , i appreciate it
Jason Landrian
@jlandrian
Jan 13 2018 23:45 UTC
Hey everyone! Looking for help with the Twitch API project if anyone is available. Thanks!
Having trouble looping through the array of users and getting it to display properly in the DOM...
Stephen James
@sjames1958gm
Jan 13 2018 23:48 UTC
@jlandrian Do you have a link to your code?
Jason Landrian
@jlandrian
Jan 13 2018 23:49 UTC
@sjames1958gm here it is https://codepen.io/jlandrian/pen/PEavLX
Stephen James
@sjames1958gm
Jan 13 2018 23:51 UTC
@jlandrian You are adding a row for each streamer, but they all have the same class, so later when you update the element by class you updated all of them
@jlandrian There are three online that are added to every row. You will need to have each row assigned a class unique to the streamer (perhaps using the streamer name?)
Jason Landrian
@jlandrian
Jan 13 2018 23:53 UTC
@sjames1958gm Thank you! I think I understand what you mean.
CamperBot
@camperbot
Jan 13 2018 23:53 UTC
jlandrian sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8853 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Jan 13 2018 23:54 UTC
@jlandrian :+1: If you have more questions just swing back by.
Jason Landrian
@jlandrian
Jan 13 2018 23:54 UTC
Thanks so much!