These are chat archives for FreeCodeCamp/HelpFrontEnd

11th
Mar 2018
eliza khachatryan
@Elijbet
Mar 11 2018 00:06
I have a sticky div that has a transparent background. Can I have it change color when user begins to scroll?
Or after it sticks
Gulsvi
@gulsvi
Mar 11 2018 00:22
@Elijbet Yes, you can use the onscroll event to do this. To identify if the element is stuck, subtract page position from the element position. window.scrollY and yourStickyDiv.offsetTop
eliza khachatryan
@Elijbet
Mar 11 2018 00:32
No css solution to this?
Gulsvi
@gulsvi
Mar 11 2018 00:34
@Elijbet There is no CSS solution to identify when a position: sticky element is stuck.
eliza khachatryan
@Elijbet
Mar 11 2018 00:35
okay, thank you so much @gulsvi
CamperBot
@camperbot
Mar 11 2018 00:35
elijbet sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2663 | @gulsvi |http://www.freecodecamp.org/gulsvi
Jacob
@Ajacmac
Mar 11 2018 05:14
https://codepen.io/Ajacmac/full/wGpavB/ I'm having a hard time getting the 3 attributes at the top to sit side by side. I've got each of them in bootstrap columns 4 units wide, they're in a row. I'm missing something.
Raghav Mundra
@Raghav17
Mar 11 2018 05:39
How can I center align the buttons "+" and "-". I want them under "Break" and "Work" option respectively. I have tried using text-center in a div but it is not working. Please help!
https://codepen.io/raghav96/pen/dmPqVB
Daniel
@DanJP2016
Mar 11 2018 05:41
@Ajacmac try col-sm-4 instead of col-small-4
Jacob
@Ajacmac
Mar 11 2018 05:43
oh for...
@DanJP2016 thank you. xD
CamperBot
@camperbot
Mar 11 2018 05:43
ajacmac sends brownie points to @danjp2016 :sparkles: :thumbsup: :sparkles:
:cookie: 314 | @danjp2016 |http://www.freecodecamp.org/danjp2016
Daniel
@DanJP2016
Mar 11 2018 05:44
your welcome
Daniel
@DanJP2016
Mar 11 2018 05:52
@Raghav17 i see you are using both bootstrap and materialize, which may be conflicting with each other. might want to pick one or the other. to center a element with materalize add a class of center-align to the element, or try putting the buttons in a wrapper and giving the wrapper the class valign-wrapper
JoEezy
@JoEeeezy_twitter
Mar 11 2018 08:01
did json.forEach substitue json.map?
in this excercise https://www.freecodecamp.org/challenges/convert-json-data-to-html it's telling me that the code to iterate through the json date is json.forEach , but when I click the hint's to learn more about what's going on it's saying that the code is json.map
Markus Kiili
@Masd925
Mar 11 2018 08:03
@JoEeeezy_twitter Those methods do different things. There are usually many ways to solve a problem.
JoEezy
@JoEeeezy_twitter
Mar 11 2018 08:03
it seems like the jump to json API's and ajax from just messing around with array methods in the previous exercises is confusing
since those methods do different things which one is the correct way ? the one in the excercise or the one in the hints forum
Markus Kiili
@Masd925
Mar 11 2018 08:06
@JoEeeezy_twitter Using map like that to cause side effects is wrong. So use forEach.
Map is for creating a new array by mapping each element to something new.
Map code works but is misleading.
JoEezy
@JoEeeezy_twitter
Mar 11 2018 08:07
ah ok i kind of figured it looked weird since most of what i've read on the map method was related to arrays only
TJ Hardin
@AndroidNinjaX
Mar 11 2018 08:17

Hi Everyone. When using Flexbox is there a way to put something on top of another item. I have a circle and I want to put another circle on top of it.

https://codepen.io/AndroidNinjaX/pen/zWxjvj?editors=1100

Wow the thumbnail of that pen looked terrible lol.
Ian Lee
@asparism
Mar 11 2018 08:32
you can use the z-index property in your css
TJ Hardin
@AndroidNinjaX
Mar 11 2018 08:33
ya I am experimenting with that, but how? I'm reading up on it right now.
Ian Lee
@asparism
Mar 11 2018 08:33
the tricky part for me to remember is to also set the positioning.
i've got your pen working by using position: absolute on the controls div
it's also tough because things start to layer weirdly and divs can get pushed around inadvertently
TJ Hardin
@AndroidNinjaX
Mar 11 2018 08:35
ya I kinda have it working. I did the same.
.controls {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: white;
  border-radius: 50%;
  z-index: 2;
}
now to get it to center
Ian Lee
@asparism
Mar 11 2018 08:36
margin-left & margin-top are my go-to's personally
TJ Hardin
@AndroidNinjaX
Mar 11 2018 08:39
now trying to line it up to center is a pain. of course I cant just do margin: 0 auto;
@asparism got it. Thanks for that. I had to use some pen and paper to draw it out, but I have it in the middle and on top now.
CamperBot
@camperbot
Mar 11 2018 08:44
androidninjax sends brownie points to @asparism :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @asparism |http://www.freecodecamp.org/asparism
Ian Lee
@asparism
Mar 11 2018 08:44
for sure!
Ugur Ozcelik
@ugurozcelik
Mar 11 2018 11:19
how could i make the images fit in just the first blue section? https://codepen.io/ugurozcelik/pen/EQzxqK
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 11 2018 11:22
@ugurozcelik They seem to fit
But for smaller screens, wrap the images in a container
@ugurozcelik
Ugur Ozcelik
@ugurozcelik
Mar 11 2018 11:26
@MuhammedKarim They overflow the second blue section.
Max
@maxiwer
Mar 11 2018 11:57

Hello, coders.
I have a question.
Why in the world I can't attach rest of my words in the array to "uppercased" word?
It's returning me "undefined".
Here's the code:

function titleCase(str) {
  var aArr = str.toLowerCase().split(" ").map(function(aa) {
    return aa[0].toUpperCase().concat(aa.shift);
  }).join(" ");

  return aArr;
}
titleCase("I'm a little tea pot");

That code above, returning me like: "I unefined Aundefined", etc.
Thank you for help beforehand.

Sweet Coding :)
@SweetCodingInc
Mar 11 2018 12:05
@maxiwer aa.shift should be aa.shift()
secondly, since your aa is a string, .shift() wouldn't work on it
you could use .slice(1) instead of combination of concat and shift
Harut
@harut-g
Mar 11 2018 12:16
Who can help me, how to make async constructor in class ?
Sweet Coding :)
@SweetCodingInc
Mar 11 2018 12:21
async constructor?
what does that even mean?
linkin-park
@linkin-park
Mar 11 2018 12:44
is js by default async thats what your saying? @SweetCodingInc
Sweet Coding :)
@SweetCodingInc
Mar 11 2018 12:44
@linkin-park nope. is is not async by default
js is sync by default but supports async operations natively
Harut
@harut-g
Mar 11 2018 12:54
@SweetCodingInc I need to do async operations in constructor and then return instance
linkin-park
@linkin-park
Mar 11 2018 12:56
your right @SweetCodingInc
is it similar with other languages @SweetCodingInc
Sweet Coding :)
@SweetCodingInc
Mar 11 2018 13:02
@harut-g I'm afraid that's not possible.
@linkin-park yes.. Just like other languages
@harut-g You're better off separating async concern from object construction concern
Harut
@harut-g
Mar 11 2018 13:05
@SweetCodingInc I have class of database and it's singleton, I need create Indexes in constructor which is async operation
@SweetCodingInc and then return instance with created indexes
Sweet Coding :)
@SweetCodingInc
Mar 11 2018 13:09
@harut-g Yeah.. you could do the constructor and make another static method on the class that will perform async things and then return a new instance of class when indexes are ready
class MyClass {
    constructor () {
    }

    static async build () {
        var asyncResult = await someAsyncStuff();
        return new MyClass(asyncResult);
    }
}
Harut
@harut-g
Mar 11 2018 13:12
@SweetCodingInc and when I should use build static method and how
Sweet Coding :)
@SweetCodingInc
Mar 11 2018 13:16
Like const asyncConstructedObj = MyClass.build()
the same way you'd create retrieve a singleton
except you return a newly constructed object
Harut
@harut-g
Mar 11 2018 13:31
@SweetCodingInc I think it won't work, because it's async operation also
Ugur Ozcelik
@ugurozcelik
Mar 11 2018 13:32
hi guys in codepen my portfolio seems different in editor and full page views. Is that a problem? Why is it happening? How do i prevent that? Thanks in advance
Exaland Concept
@exaland
Mar 11 2018 13:58
Hi
'code'
code
Hi I need some information about this ''' document.getElementById("status").childNodes[0].nodeValue; '''
CamperBot
@camperbot
Mar 11 2018 14:01
:bulb: to format code use backticks! ``` more info
Exaland Concept
@exaland
Mar 11 2018 14:02
when i use ‘‘‘ document.getElementById("status").childNodes[0].nodeValue; ‘‘‘
document.getElementById("status").childNodes[0].nodeValue;i have an error when the array is empty , pls help me with an condition , when my array have an content all is ok
Stephen James
@sjames1958gm
Mar 11 2018 14:14
@exaland You will need to test if document.getElementById("status").childNodes.length > 0
Guilherme Mello
@Gui_R_N_R_twitter
Mar 11 2018 15:29
Hello guys!
I would like to know how to change border's size of the bootstrap thumbnail class.
Max
@maxiwer
Mar 11 2018 16:13

7ucking sh1t!
I can't solve this 7ucking challenge.
Can anybody help me?
Here's what I wrote:

function titleCase(str) {
  var bArr = str.split(" ").map(function(aVal) {
    return aVal;
  });

  var aArr = str.toLowerCase().split(" ").map(function(aa) {
    return aa[0].toUpperCase().concat(bArr.shift());
  }).join(" ");

  return aArr;
}
titleCase("I'm a little tea pot");

And that returns something like II'm Aa, etcetera

Aditya
@ezioda004
Mar 11 2018 16:34
@maxiwer bArr.shift() this returns the first removed element from the array, I dont understand why you'd use that, other than that, perhaps you'd like to use something like slice() instead. aa[0].toUpperCase() + arr.slice(1) does what you're trying to do
Max
@maxiwer
Mar 11 2018 16:38
@ezioda004 I wish I could delete first letters from words in the array
Stephen James
@sjames1958gm
Mar 11 2018 16:39
@maxiwer aa.slice(1) will do just that
Well it will return a string with the first letter removed
Aditya
@ezioda004
Mar 11 2018 16:41
@maxiwer Then simply do .shift()? aa[0].toUpperCase().concat(bArr.shift()); is basically getting the first char and concatenating with with the same removed element.
Max
@maxiwer
Mar 11 2018 16:41
@ezioda004 IDK man I'm confused
Aditya
@ezioda004
Mar 11 2018 16:43
Run that code you have see what you're getting
titleCase("I'm a little tea pot"); //"II'm Aa Llittle Ttea Ppot"
Stephen James
@sjames1958gm
Mar 11 2018 16:48
@maxiwer replace bArr.shift() with aa.slice(1) aa is the current word
Tai Jones
@taiJones00
Mar 11 2018 17:26
https://codepen.io/taiJones00/pen/NyoGdm How could I improve the design of this?
Adel
@AdelMahjoub
Mar 11 2018 17:30
@taiJones00 you can add codeMirror, this mdViewer use some of codeMirror features
hensn5250
@hensn5250
Mar 11 2018 17:41
@maxiwer You are returning a single string via , str[0].toUpperCase() , then joining it with a larger string via , concat( barr.shift() ) .
So your map function looks like this:
str[0] + bArr[0] + " "
"I" + "I'm" + " "
hensn5250
@hensn5250
Mar 11 2018 17:54
@maxiwer What @sjames1958gm is saying is that since you already have the capitalized string via , str[0].toUpperCase() , you should only get the part of bArr[0] that does not include to first letter. You can extract that part of the string out of bArr[x] by doing , bArr[0].splice( startHere, endHere )
piratecoder
@jvondarke
Mar 11 2018 18:28
So ive got an issue, im on the build a tribute page project and ive hit a road block. I need to make an ul list using bullets for a timeline im doing. Ive been using <center> to make everything on the page appear in the center. But when I try to do this with <ul> it makes the bullets appear on the left side even if I use the <center> tag any help would be great thanks :)
Stephen James
@sjames1958gm
Mar 11 2018 18:36
@jvondarke You might have to use margin left to get the bullets to move. Another option might be to remove the bullets using CSS and replace them with something like font-awesome
list-style-type: none
piratecoder
@jvondarke
Mar 11 2018 18:38
ok thanks for the idea
Stephen James
@sjames1958gm
Mar 11 2018 18:39
@jvondarke good luck - I am not an css expert - but I try
Gulsvi
@gulsvi
Mar 11 2018 18:52
@jvondarke The <center> tag is obsolete now and not supported, that's from the HTML4 days. We're up to HTML5 now. https://www.w3schools.com/tags/tag_center.asp
To center your bullet list, give it a width and apply margin: auto. Another alternative is to use bootstrap - put it in a column and offset it. https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
piratecoder
@jvondarke
Mar 11 2018 18:55
thanks for the heads up and info
Gulsvi
@gulsvi
Mar 11 2018 18:57
.centered-list-css {
  list-style-position: inside;  
  width: 200px;
  margin: auto;
}
Gulsvi
@gulsvi
Mar 11 2018 19:18
@taiJones00 It looks nice. Maybe add syntax highlighting - https://highlightjs.org/
And some instructions about what your web app does. We know what it does here because it's a FCC project, but I don't think anyone outside of FCC would understand the purpose of the app.
Badet Marian-Claudiu
@bmc95
Mar 11 2018 20:11
Can I achive this with flexbox? -> https://ibb.co/eATKyS
eliza khachatryan
@Elijbet
Mar 11 2018 20:20
Can you tell me how can I make a row in a table scroll instead of wrapping?
Ken Haduch
@khaduch
Mar 11 2018 20:24
@Elijbet - how much of this do you want to do? Some suggestion on stackoverflow involving making a child div of a fixed size inside your table cell.
eliza khachatryan
@Elijbet
Mar 11 2018 20:25
Oh that seems so simple.
Ken Haduch
@khaduch
Mar 11 2018 20:25
see if it works for you?
alishah69
@alishah69
Mar 11 2018 20:29
can i get a little help?
plz
right now im working on html and css and further on javascript
but how many languages i have to learn for a job
eliza khachatryan
@Elijbet
Mar 11 2018 20:31
@khaduch it has to be a div? Can it be a span.
Stephen James
@sjames1958gm
Mar 11 2018 20:31
@alishah69 For a front end developer that might be enough - probably need to learn some web framework
Ben Hart
@Benjmhart
Mar 11 2018 20:32
having some weird CSS issues - can anyone tell me why the targets for the hover and click events on the right seem to be smaller than the 'category-link' divs?
Ken Haduch
@khaduch
Mar 11 2018 20:34
@Elijbet - I would think that a span might work differently but you can try it, although I don't know for sure if a span will respond to height and width properties? I can try it in my example pen that I put together for a test.
eliza khachatryan
@Elijbet
Mar 11 2018 20:36
Well with div it definitely adds a scroll bar, but it still wraps...
Ken Haduch
@khaduch
Mar 11 2018 20:40
@Elijbet - so what do you want, exactly? No wrapping at all? so you would want a horizontal scrollbar if the text was too wide?
eliza khachatryan
@Elijbet
Mar 11 2018 20:43
Actually I added white-space: nowrap; and it works as I wanted. So you solved it, thank you!
I wanted the long rows to scroll without wrapping.
Ken Haduch
@khaduch
Mar 11 2018 20:46
@Elijbet - cool... I was just trying various wrapping options. I think that if you have a multiple-column table then you might need overflow-x: scroll; for that, too? If you don't have it already.
eliza khachatryan
@Elijbet
Mar 11 2018 20:48
I see. I will need that eventually. What I'm trying to understand now, is whether this fixed width means that I need to set multiple break points. I'm just starting to think of responsiveness.
Ken Haduch
@khaduch
Mar 11 2018 20:51
@Elijbet - maybe a percentage width instead of a fixed unit width would work in that case? Maybe not... Maybe something like width: 30vw; works? I guess it depends on what your particular setup is going to be.
eliza khachatryan
@Elijbet
Mar 11 2018 21:15
Right, I should try that instead of percentage.
coderNewby
@coderNewby
Mar 11 2018 23:05
thanks @DarrenfJ for the reply
CamperBot
@camperbot
Mar 11 2018 23:05
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2420 | @darrenfj |http://www.freecodecamp.org/darrenfj
Riadh
@KWFE
Mar 11 2018 23:27
hey JS devs
Abdullah
@AbdullahChaudhry
Mar 11 2018 23:32

@ezioda004 @maxiwer
ES5:

function titleCase(str) {
  return str.split(' ')
  .map(function(word) { 
    return word[0].toUpperCase() + word.substring(1).toLowerCase()})
  .join(" ")
}

ES6:

const titleCase = (str) => {
  return str.split(' ')
  .map(word => word[0].toUpperCase() + word.substring(1).toLowerCase())
  .join(" ")
}