These are chat archives for FreeCodeCamp/HelpFrontEnd

12th
Mar 2018
Samuel
@emmasamuel
Mar 12 2018 00:41
hi everyone
hi everyone
please is anyone here who know more about math.floor objectives in javascrip. i need help understanding it
please is anyone here who know more about math.floor objectives in javascrip. i need help understanding it
Abdullah
@AbdullahChaudhry
Mar 12 2018 01:03

Math.floor

Let's find out what it does

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor

The Math.floor() function returns the largest integer less than or equal to a given number.

I just made a repl to illustrate what this does, see here:

https://repl.it/repls/TrustingSunnyStrings

Here is the code:

const num = 5

for (let i = 0; i <= 99; i++) {
  let tmpNum = "" + num + '.' + i
  console.log('Math.floor(' + tmpNum + ') === ' + Math.floor(Number(tmpNum)))
}

Output:

Math.floor(5.0) === 5
Math.floor(5.1) === 5
Math.floor(5.2) === 5
Math.floor(5.3) === 5
Math.floor(5.4) === 5
Math.floor(5.5) === 5
Math.floor(5.6) === 5
Math.floor(5.7) === 5
Math.floor(5.8) === 5
Math.floor(5.9) === 5
Math.floor(5.10) === 5
Math.floor(5.11) === 5
Math.floor(5.12) === 5
Math.floor(5.13) === 5
Math.floor(5.14) === 5
Math.floor(5.15) === 5
Math.floor(5.16) === 5
Math.floor(5.17) === 5
Math.floor(5.18) === 5
Math.floor(5.19) === 5
Math.floor(5.20) === 5
Math.floor(5.21) === 5
Math.floor(5.22) === 5
Math.floor(5.23) === 5
Math.floor(5.24) === 5
Math.floor(5.25) === 5
Math.floor(5.26) === 5
Math.floor(5.27) === 5
Math.floor(5.28) === 5
Math.floor(5.29) === 5
Math.floor(5.30) === 5
Math.floor(5.31) === 5
Math.floor(5.32) === 5
Math.floor(5.33) === 5
Math.floor(5.34) === 5
Math.floor(5.35) === 5
Math.floor(5.36) === 5
Math.floor(5.37) === 5
Math.floor(5.38) === 5
Math.floor(5.39) === 5
Math.floor(5.40) === 5
Math.floor(5.41) === 5
Math.floor(5.42) === 5
Math.floor(5.43) === 5
Math.floor(5.44) === 5
Math.floor(5.45) === 5
Math.floor(5.46) === 5
Math.floor(5.47) === 5
Math.floor(5.48) === 5
Math.floor(5.49) === 5
Math.floor(5.50) === 5
Math.floor(5.51) === 5
Math.floor(5.52) === 5
Math.floor(5.53) === 5
Math.floor(5.54) === 5
Math.floor(5.55) === 5
Math.floor(5.56) === 5
Math.floor(5.57) === 5
Math.floor(5.58) === 5
Math.floor(5.59) === 5
Math.floor(5.60) === 5
Math.floor(5.61) === 5
Math.floor(5.62) === 5
Math.floor(5.63) === 5
Math.floor(5.64) === 5
Math.floor(5.65) === 5
Math.floor(5.66) === 5
Math.floor(5.67) === 5
Math.floor(5.68) === 5
Math.floor(5.69) === 5
Math.floor(5.70) === 5
Math.floor(5.71) === 5
Math.floor(5.72) === 5
Math.floor(5.73) === 5
Math.floor(5.74) === 5
Math.floor(5.75) === 5
Math.floor(5.76) === 5
Math.floor(5.77) === 5
Math.floor(5.78) === 5
Math.floor(5.79) === 5
Math.floor(5.80) === 5
Math.floor(5.81) === 5
Math.floor(5.82) === 5
Math.floor(5.83) === 5
Math.floor(5.84) === 5
Math.floor(5.85) === 5
Math.floor(5.86) === 5
Math.floor(5.87) === 5
Math.floor(5.88) === 5
Math.floor(5.89) === 5
Math.floor(5.90) === 5
Math.floor(5.91) === 5
Math.floor(5.92) === 5
Math.floor(5.93) === 5
Math.floor(5.94) === 5
Math.floor(5.95) === 5
Math.floor(5.96) === 5
Math.floor(5.97) === 5
Math.floor(5.98) === 5
Math.floor(5.99) === 5

Basically it just shaves off the fractional part of the number to give you a whole number (integer)

This message was deleted
Ryan Williams
@Ryanwfile
Mar 12 2018 01:28
Can someone please help me with this div background image moving, the image moves as text appears and I just want the image to stay still, any help is greatly appreciated https://codereese.com/
Kelly Young
@krydrita
Mar 12 2018 01:37
Could someone help me change the active color on Bootstrap 4 scrollspy nav-pills? It's got to be the JavaScript controlling it, because nothing in CSS will change it.
Ken Haduch
@khaduch
Mar 12 2018 01:45
@krydrita - do you have a link to your project that you are trying to change? There is some rather involved way to change those colors, the selector can get a little crazy, but I haven't tried it with scrollspy, either... If you have a link I'd be happy to take a look.
Kelly Young
@krydrita
Mar 12 2018 01:50
@khaduch Thanks for offering to take a look! I'm working on CodePen: https://codepen.io/krydrita/pen/yKNpeg?editors=1000
CamperBot
@camperbot
Mar 12 2018 01:50
krydrita sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3788 | @khaduch |http://www.freecodecamp.org/khaduch
Ken Haduch
@khaduch
Mar 12 2018 01:54
@krydrita - that doesn't look like a well-formed page? I'm seeing stuff like <meta name="author" in the navbar, and nothing that looks like scrollspy - maybe some commented out JS code? Or maybe that's that you want to show there? Anyway, no scroll-spying seems to be going on? Sorry if I'm just missing something...
Kelly Young
@krydrita
Mar 12 2018 01:56
@khaduch Oh haha, the "<meta name='author'" is just some text I threw in there as part of the "web development portfolio" theme. Same with the "id='portfolio'" titles of the sections.
Hmm, the top-right nav links are supposed to be scrollspy, that's the code I copied, but I guess while modifying the code I must have broken the scrollspy.
Ken Haduch
@khaduch
Mar 12 2018 01:57
I see some commented-out code. Check and see if what you are seeing in the CodePen is what you want to be there?
Kelly Young
@krydrita
Mar 12 2018 01:58
What's really bothersome is that when I click on the "portfolio" dropdown menu, the background of the "portfolio" nav link changes to Bootstrap's primary blue. I've tried everything I can with CSS to fix it to no avail.
The commented-out stuff was part of my efforts to change it.
/* #port-drop:active{ background-color: red !important; } successfully changes the "portfolio" button's background to red -- for only a split second -- until it changes to, and remains, primary blue.
Ken Haduch
@khaduch
Mar 12 2018 02:00
@krydrita - here is something that will change it to red:
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #c00000;
}
add that to your CSS panel, it is the same selector that makes it blue in the Bootstrap code... I just changed the color.
Kelly Young
@krydrita
Mar 12 2018 02:02
You did it!!! I'm amazed!!! I've been struggling for an hour with this stupid thing, I thought I tried all the selectors I could think of. Thank you so much!!!!
Really, I'm so grateful, thank you so much for your time!!!
Ken Haduch
@khaduch
Mar 12 2018 02:07
@krydrita - you're welcome. I did it using the devtools. Are you familiar with them? I just selected that dropdown, and then used the inspector to find the CSS selector and rules that were making the background blue, then copied it. If you aren't familiar with doing that type of thing, it's something worth learning...
Kelly Young
@krydrita
Mar 12 2018 02:09
@khaduch Hmm, I tried using that in Chrome, but I didn't find what you found. I'll go back and keep searching so I can do it next time. Thank you so much!
CamperBot
@camperbot
Mar 12 2018 02:09
krydrita sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
api offline
Ken Haduch
@khaduch
Mar 12 2018 02:12
@krydrita - I selected it so that I saw the blue color (I'm using Opera on windows, BTW, not sure if there is a difference in the way the devtools work in Chrome.) then hovered over the blue-highlighted pill, selected the "Inspect element" option, and then look through the applicable styles. Now in my pen I can see the rule that I added for red, and further down the rule from nav.scss that has all of the properties crossed out because they are overridden by my custom selector.
Ken Haduch
@khaduch
Mar 12 2018 02:19
@krydrita - here is a screen grab of the browser devtools for that case - the overriding rule highlighted with the yellow oval-looking thing, the overridden rule (the bootstrap definition) circled in red.
image.png
Kelly Young
@krydrita
Mar 12 2018 02:24
@khaduch Oh, I see it now! I went on Chrome and I was able to find those CSS styles! Thank you for your help, Ken, I was getting ready to throw in the towel, haha. Do you think that only pops up when the dropdown link is activated? Maybe I couldn't find it because I didn't activate the link while inspecting it.
CamperBot
@camperbot
Mar 12 2018 02:24
krydrita sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
api offline
Ken Haduch
@khaduch
Mar 12 2018 02:24
oh, and you can see that your .nav-link:hover selector with the !important the line below the red-circled selector is overriding the color of that pill (the font color) because of the !important
Kelly Young
@krydrita
Mar 12 2018 02:26
Ah, I see! Neat! This will help make heads and tails of things.
Next I'll have to try and get scrollspy to work again--but not tonight! I've done enough head-scratching for today, haha. Thank you again for your help!
Ken Haduch
@khaduch
Mar 12 2018 02:27
@krydrita - yeah, you have to have the link activated to find it when looking at the applied styles. If you looked at the overall CSS rules, you would find it, but you'd have to know exactly what you were looking for. There are also ways within the devtools to force states on elements like hover, but in this case since it was probably being activated by the addition of the show class for that element, just clicking on it to expose the dropdown was what you needed to do.
@krydrita - you're welcome. Hope you get your scroll-spy working, but ask if you have any questions... I'm keen to learn how to make that work, too.. :)
Kelly Young
@krydrita
Mar 12 2018 02:32
Haha, then you might here from me again tomorrow. :smile:
Ken Haduch
@khaduch
Mar 12 2018 02:33
good - enjoy your time away from this, it's always good to get away and sometimes other inspiration comes to you while playing it through your mind in the background. Just don't dream about navbars and scrollspy... :zzz:
Kelly Young
@krydrita
Mar 12 2018 02:36
Hahaha! I probably will -- now let's hope it's a good dream about CSS instead of a nightmare! :worried:
Ken Haduch
@khaduch
Mar 12 2018 02:39
CSS is better for nightmares... :neutral_face:
Sweet Coding :)
@SweetCodingInc
Mar 12 2018 04:14
@khaduch Ser Ken :wave:
Ryan Williams
@Ryanwfile
Mar 12 2018 05:08
can anyone help me keep the top background image in place while the text is inserted on this webpage please https://codereese.com/ currently the image moves as text is inserted via javascript
dnviper76
@dnviper76
Mar 12 2018 05:48
Hi guys, im working of freecodecamp. Is there somewhere I can upload images to so that I can use them in my code on codepen?
coderNewby
@coderNewby
Mar 12 2018 06:03
@darrenfj another Q in PM, thanks in advance
CamperBot
@camperbot
Mar 12 2018 06:03
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2421 | @darrenfj |http://www.freecodecamp.org/darrenfj
dnviper76
@dnviper76
Mar 12 2018 07:18
@ndburrus thank you. sorry didnt see your message till now.
CamperBot
@camperbot
Mar 12 2018 07:18
dnviper76 sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:star2: 2183 | @ndburrus |http://www.freecodecamp.org/ndburrus
Frosty427
@Frosty427
Mar 12 2018 07:29
image.png
what do i do to get my bs4 navbar to look like that?
i tried mx-auto
didnt apply
im trying only to move my stuff to the right and the heart to the left
image.png
mine ^
Sorin Ruse
@sorinr
Mar 12 2018 07:55
@Frosty427 have you tried justify-content-end class for menu options except navbar-brand ?
dnviper76
@dnviper76
Mar 12 2018 08:01
@Frosty427 I used navbar-right class under my ul element ... <ul class="nav navbar-nav navbar-right"> ... worked for me.
Frosty427
@Frosty427
Mar 12 2018 08:01
@dnviper76 why doesnt mx-auto or ml-auto work/
you put it on the div right?
dnviper76
@dnviper76
Mar 12 2018 08:02
@Frosty427 not on the main div ... just put it on the unordered list element for the list of all the info there
Frosty427
@Frosty427
Mar 12 2018 08:03
i dont have a ul
image.png
Sorin Ruse
@sorinr
Mar 12 2018 08:04
@Frosty427 you may apply it to the div class navbar-nav
dnviper76
@dnviper76
Mar 12 2018 08:04
image.png
Frosty427
@Frosty427
Mar 12 2018 08:05
@sorinr lol like 2 seconds befor you said that i tried it and it worked
Sorin Ruse
@sorinr
Mar 12 2018 08:05
@Frosty427 :+1:
dnviper76
@dnviper76
Mar 12 2018 08:06
@Frosty427 glad you fixed it
Frosty427
@Frosty427
Mar 12 2018 08:06
@sorinr @dnviper76 thanks
CamperBot
@camperbot
Mar 12 2018 08:06
frosty427 sends brownie points to @sorinr and @dnviper76 :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @dnviper76 |http://www.freecodecamp.org/dnviper76
:star2: 1402 | @sorinr |http://www.freecodecamp.org/sorinr
dnviper76
@dnviper76
Mar 12 2018 08:07
@Frosty427 you welcome ... I am also just starting out so helping others helps me too ^_^
working on the portfolio page
Sorin Ruse
@sorinr
Mar 12 2018 08:16
@Frosty427 regarding your question above about mx-auto = margin: 0 auto; and have effect only on html elements with display: block;. as navbar-nav class has an implicitly display: flex that mx-auto do nothing in this case
Frosty427
@Frosty427
Mar 12 2018 08:18
@sorinr oh ok that makes sense
Frosty427
@Frosty427
Mar 12 2018 08:27
image.png
image.png
how do i make the heart and the "Color flat move?"
jolio007
@jolio007
Mar 12 2018 09:21
https://codepen.io/jolio007/pen/PRqxBX - Hey I'm having trouble removing the white space between the top of my <body> and the navigation bar I have. Everywhere only it says to set the body's margin to 0, I've done that without success
When I set * to margin 0 then it removes the white space but I don't want to set everything to margin 0. I'd rather identify what needs to be modified specifically
Anas Abdennaim
@Aka-Dev
Mar 12 2018 09:23
@jolio007 test nav {top: 0;}
jolio007
@jolio007
Mar 12 2018 09:24
work thanks @Aka-Dev
CamperBot
@camperbot
Mar 12 2018 09:24
jolio007 sends brownie points to @aka-dev :sparkles: :thumbsup: :sparkles:
:cookie: 317 | @aka-dev |http://www.freecodecamp.org/aka-dev
Anas Abdennaim
@Aka-Dev
Mar 12 2018 09:25
@jolio007 you're welcome
dnviper76
@dnviper76
Mar 12 2018 09:26
@jolio007 you could also add in the bootstrap under your css settings which also fixes that
jolio007
@jolio007
Mar 12 2018 09:27
@dnviper76 how do you mean
dnviper76
@dnviper76
Mar 12 2018 09:29
@jolio007 on codepen under settings > css, scroll down and add in bootstrap3 for external sources ... "save and close"
jolio007
@jolio007
Mar 12 2018 09:31
@dnviper76 alright but I usually test it on codepen then copy paste it into a text file to run properly. Would I need to import bootstrap3 there or something along those lines?
dnviper76
@dnviper76
Mar 12 2018 09:33
@jolio007 Oh I see. Will be honest ... Not too sure on that one myself, I am new here.
jolio007
@jolio007
Mar 12 2018 09:36
@dnviper76 thanks anyway, I looked into bootstap nav bar and they seems to have what I want so I'll be switching to that
CamperBot
@camperbot
Mar 12 2018 09:36
jolio007 sends brownie points to @dnviper76 :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @dnviper76 |http://www.freecodecamp.org/dnviper76
dnviper76
@dnviper76
Mar 12 2018 09:37
@jolio007 cool man, you welcome
Max
@maxiwer
Mar 12 2018 09:52

Why in the world I can't shift first letters?

function titleCase(str) {
  return str.split(" ").map(function(aVal) {
    return aVal.split("")[0].toUpperCase().concat(aVal.split(" ").shift());
  }).join(" ");
}

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

The result is like: II'm Aa, etc.

Markus Kiili
@Masd925
Mar 12 2018 09:54
@maxiwer aVal will be each word in its turn, so splitting it by " " makes no sense.
You could also use string methods instead of fiddling with character arrays. Inventor of strings would turn in his/hers grave seeing this.
Max
@maxiwer
Mar 12 2018 10:27
@Masd925 Your last sentence was useless
Markus Kiili
@Masd925
Mar 12 2018 10:28
@maxiwer Yeah. It just is easier to do and read with string methods.
You could use .charAt() and .slice() for example.
Markus Kiili
@Masd925
Mar 12 2018 10:34
@maxiwer Character array solution is much simpler if you first lowercase the string:
function titleCase(str) {
  return str.toLowerCase().split(" ").map(function(aVal) {
    var chars = aVal.split("");
    chars[0]=chars[0].toUpperCase();
    return chars.join("");
  }).join(" ");
}
Max
@maxiwer
Mar 12 2018 10:34
@Masd925 FUCK YOU I DON'T NEED YOUR ADVICE
I don't wanna your advice
Markus Kiili
@Masd925
Mar 12 2018 10:35
@maxiwer ok. No problem.
Abdullah
@AbdullahChaudhry
Mar 12 2018 10:38
for (var i = 0; i < 100; i++) {
  console.log('All work and no play makes Jack a dull boy')
}
Sweet Coding :)
@SweetCodingInc
Mar 12 2018 11:28
What the hell? @Masd925 :laughing:
Markus Kiili
@Masd925
Mar 12 2018 11:37
@SweetCodingInc Anyone can have a bad day.
Sweet Coding :)
@SweetCodingInc
Mar 12 2018 11:37
@Masd925 fair enough.. You're cool :+1:
aadtyaraj01
@aadtyaraj01
Mar 12 2018 11:50
Plz check this out Tic Tac Toe
https://codepen.io/aadtyaraj/pen/zWGQjV
mbsyaswanth
@mbsyaswanth
Mar 12 2018 11:50
https://codepen.io/mbs-yaswanth/pen/NyVezZ
  • please help me with anchor tag inside the dropdown class near catlog. I am having trouble clicking it for page redirection. i have to click the text inside anchor. clicking padding doesnt work.
dinesh
@1532j0004kg
Mar 12 2018 11:57
@mbsyaswanth set the ancor for <li> like <a> <li></li> </a>
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 11:58
hey guys
can anyone help me with some html/css
pm me ploz
dinesh
@1532j0004kg
Mar 12 2018 12:03
what help u need ?
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 12:05
an image is escaping my div dimentions
i dont know what rule to give
Raghav Mundra
@Raghav17
Mar 12 2018 12:13
@Raghav17
Hey, Can anyone please help me?
In my Pomodoro clock, the "Work" section clock is running and after it runs completely the "Break" section countdown starts, but after one complete iteration the clock isn't running again, can anyone please help me?
Here is my codepen: https://codepen.io/raghav96/pen/dmPqVB?editors=1010
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 12:18
guys?
any one knows a css rule to make my image stay within the <dev> ?
Markus Kiili
@Masd925
Mar 12 2018 12:21
@DraGoNKiSs You can try width:100%;height:100% or the same with max-width and max-height depending on what you like to happen.
krckyboy
@krckyboy
Mar 12 2018 12:37
What is a good way to spot duplicated / unnecessary HTML / CSS (but mainly CSS) using some kind of tool or something like that? I'm given a task to clean duplicated CSS in an existing project, so I'm wondering what is the best way to approach that problem.
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 12:37
i use firefox
;d
dev tools
but have in mind
some of them are actually nessecary
as different browsers work differently
krckyboy
@krckyboy
Mar 12 2018 12:38
@DraGoNKiSs So what is the best way to spot what's duplicated and not used?
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 12:38
i would just leave them there to stick around if u haven't created the css urself
krckyboy
@krckyboy
Mar 12 2018 12:39
@DraGoNKiSs Yeah but the thing is, my boss wants me to clean the CSS and get rid of unnecessary / unused code.
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 12:39
ok give me a sec
ill send u screenshot
Untitled.jpg
those which are crossed with a line are not being used by the browser
krckyboy
@krckyboy
Mar 12 2018 12:45
@DraGoNKiSs Yup, that's what I had in mind.
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 12:45
u find them in the css and remove them
but as i said
different browsers work differently
some functions are used for specific browsers
krckyboy
@krckyboy
Mar 12 2018 12:47
@DraGoNKiSs Like webkits, right?
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 12:47
ye for example
how complicated is the page?
krckyboy
@krckyboy
Mar 12 2018 12:49
Real complicated.
Multipage website.
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 12:49
;d
that doesnt make complicated
;d
krckyboy
@krckyboy
Mar 12 2018 12:50
Well, there's quite a bit of stuff in there, so I guess you can say it's complex, I don't know.
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 12:50
cool
u need to debug the entire site?
krckyboy
@krckyboy
Mar 12 2018 12:50
Yup.
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 12:50
ive had very good previous experiance with firefox
krckyboy
@krckyboy
Mar 12 2018 12:50
I think they used a different template and edited it out.
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 12:50
most likely
people use avaliable sources on the internet
saving time
krckyboy
@krckyboy
Mar 12 2018 12:51
Yup. Time is money.
But I think in the long run, it's better to build your own framework and know what you're dealing with.
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 12:51
even tho sometimes would be easier to start from scratch
ye
thats what i ment
krckyboy
@krckyboy
Mar 12 2018 12:51
Helps with optimization, saves time in the long run and you have the complete control.
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 12:52
agreed
yo dude
i have one small issue u might be able to help me
krckyboy
@krckyboy
Mar 12 2018 12:52
Yes?
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 12:52
i have image escaping my <div> parameters
what rule should i give it?
;d
krckyboy
@krckyboy
Mar 12 2018 12:53
max-width: 100%; maybe?
object-fit: cover; might fix something
max-width: 100%;
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 12:54
ye
ill try with height
cuz the height is escaping
and auto width
?
krckyboy
@krckyboy
Mar 12 2018 12:54
I'd try with max-width first, since that's what I see usually.
If that doesn't work, I'd try something else.
Make a codepen if it still doesn't work.
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 12:55
thanks for the idea
ill give it a try when i have some time free
:)
krckyboy
@krckyboy
Mar 12 2018 12:57
Sure thing. :)
Norvin Burrus
@ndburrus
Mar 12 2018 13:01
@dnviper76 you're welcome! enjoy :smile:
Norvin Burrus
@ndburrus
Mar 12 2018 13:34
@krckyboy These may be helpful: :sparkles:
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 13:36
:+1:
ahmed-issa-mohd
@ahmed-issa-mohd
Mar 12 2018 14:01
how can I make like this stepper please ?
image.png
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 14:03
i have an idea of how you could do it
but it is complicated
this one specific probably uses js
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 12 2018 14:16
@DraGoNKiSs Can't it be done with CSS? @ahmed-issa-mohd Do you mean just the design or the functioning too?
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 14:26
you could possibly make it even with html
;d
multiple pages
use page for each step
say uve completed step 1 and click next
it should open new page indicating the 1st step has been complete and you are on the 2nd step
and so on and so on
Spyrantis Theodoros
@thodorisanta
Mar 12 2018 14:39
@thodorisanta
https://codepen.io/oshikurou/project/editor/XJPWez
how can I fix the gap of the navbar?
and why is it happening?
Adel
@AdelMahjoub
Mar 12 2018 14:40
@ahmed-issa-mohd build a nav menu then replace the nav tabs with 'stepper', on each nav content add a next and previous button
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 14:46
/help
Adel
@AdelMahjoub
Mar 12 2018 14:48
@ahmed-issa-mohd last updated on 2015 http://www.jquery-steps.com/Examples, check the source code to get a better idea
Ken Haduch
@khaduch
Mar 12 2018 15:09
@thodorisanta - hello. The <body> element has an 8px margin from the browser stylesheet. Since you are fixing it to the top, you could just add left: 0; to your navbar style and it will attach it to the left side, no more margin showing.
Spyrantis Theodoros
@thodorisanta
Mar 12 2018 15:14
@khaduch woah, why does the body element has an 8px margin by default? And i added left: 0; to the navbar stylesheet but i didnt see a difference :/
Ken Haduch
@khaduch
Mar 12 2018 15:17
@thodorisanta - if you examine the styles that are applied to the body using the browser devtools, you will see settings in the "user agent stylesheet", which is a set of default settings for all elements that the browser developer decides to use as standard defaults. You can try putting a setting in your styles body { margin: 0; } which should also remove that. But the left: 0; setting on the .navbar class worked for me, at least when I applied it through the browser devtools.
it looks like you already have a selector for the "body", so just add margin: 0; to it.
Spyrantis Theodoros
@thodorisanta
Mar 12 2018 15:26
@khaduch Oh, now it works. thank you!
CamperBot
@camperbot
Mar 12 2018 15:26
thodorisanta sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3789 | @khaduch |http://www.freecodecamp.org/khaduch
Ken Haduch
@khaduch
Mar 12 2018 15:27
@thodorisanta you're welcome!
Nate Mallison
@NJM8
Mar 12 2018 15:40
Can someone help me with my wikipedia api call and ELI5 all this cors nonsense
I think I generally understand the same-origin policy but in practice it makes no sense. Why do I get data back from some api's but others I have to set access-control-allow-origin headers to get a response when making the api query from my computer
h1tag
@h1tag
Mar 12 2018 15:42
@NJM8 it's probably this
Ken Haduch
@khaduch
Mar 12 2018 15:42
@NJM8 - try adding &origin=* into your URL -
Nate Mallison
@NJM8
Mar 12 2018 15:42
And there seems to be 15 ways to set the headers and nothing for wikipedia works so far
h1tag
@h1tag
Mar 12 2018 15:43

I think I generally understand the same-origin policy but in practice it makes no sense. Why do I get data back from some api's but others I have to set access-control-allow-origin headers to get a response when making the api query from my computer

This is specified by the API provider/creator

Ken Haduch
@khaduch
Mar 12 2018 15:43
@NJM8 - what are you using - do you have a URL for your project that you'd like to share?
Nate Mallison
@NJM8
Mar 12 2018 15:44
const request = new Request(`https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json&formatversion=2`, {headers: new Headers({
        "Access-Control-Allow-Origin": "*"
      })
    });
I tried this as well as url, {mode: 'no-cors'}
@h1tag But how does that tie in with firefox preventing the call? A lot of what I'm reading says it's the browser preventing the outside call
Ken Haduch
@khaduch
Mar 12 2018 15:47
@NJM8 - I have a sandbox project and my request, using $.ajax (jquery method) -
url: `https://en.wikipedia.org/w/api.php?action=opensearch&search=${searchStr}&prop=images&prop=text&limit=20&format=json&origin=*&callback=?`,
I'm using template strings to make the URL, but just adding the search string into that URL. I guess using jsonp, too
and Opera on windows.
Abdullah
@AbdullahChaudhry
Mar 12 2018 15:49
@NJM8 That access control allow origin needs to be done server side I believe
You could use a proxy to bypass it or jsonp if server supports it
h1tag
@h1tag
Mar 12 2018 15:50
@NJM8 I think some browsers apply the rules more strictly. But it's the API provider that specifies that the resource should/shouldn't be used on other domains
Nate Mallison
@NJM8
Mar 12 2018 15:50
adding &origin=* works, I get a response with the data. I guess I'm still trying to understand the overall functioning of all this. It doesn't make any sense that it's the browser preventing the call depending on how the api is designed? and if you can add &origin=* to bypass it, can't an attacker just do the same?
h1tag
@h1tag
Mar 12 2018 15:51
@NJM8 &origin=* is a parameter provided by the WIKI API themselves
Abdullah
@AbdullahChaudhry
Mar 12 2018 15:51
@NJM8 The server would need to support it for that to work. You can't force origin=* on the server from client side
@h1tag yes
Nate Mallison
@NJM8
Mar 12 2018 15:54
Ok, that makes more sense. Is that code going to be needed in production or just on my local environment?
h1tag
@h1tag
Mar 12 2018 15:54
Sometimes you can still bypass it by some other way like jsonp.
I still don't quite understand the part of being able to bypass that too
@NJM8
maybe I need to do more research on that, I only know some ways on how to bypass it
Nate Mallison
@NJM8
Mar 12 2018 15:56
I'm guessing that wikipedia allows the origin=* because all their content is free anyways right? not much to steal there
Abdullah
@AbdullahChaudhry
Mar 12 2018 15:56
@NJM8 If you setup a server on local machine and your making an api call to it, you can set the cors header on your server
Nate Mallison
@NJM8
Mar 12 2018 15:57
but an api to your bank or whatever won't allow that and will be looking for authentication in cookies and stuff
Thanks for the help @h1tag @khaduch @AbdullahChaudhry
CamperBot
@camperbot
Mar 12 2018 16:00
njm8 sends brownie points to @h1tag and @khaduch and @abdullahchaudhry :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @abdullahchaudhry |http://www.freecodecamp.org/abdullahchaudhry
:cookie: 934 | @h1tag |http://www.freecodecamp.org/h1tag
:star2: 3790 | @khaduch |http://www.freecodecamp.org/khaduch
Abdullah
@AbdullahChaudhry
Mar 12 2018 16:00
@NJM8 Not sure what you mean. I don't think it has anything to do with wikipedia being free or not. You could have a site where you would traditionally have to pay for content but they could expose an endpoint to send insensitive data back to the users and have cors enabled on it, while other endpoints would be a lot more restricted ? Not 100% sure
Adel
@AdelMahjoub
Mar 12 2018 16:00
the server must explicitly support jsonp in order to use it
it is not a workaround or a trick
Nate Mallison
@NJM8
Mar 12 2018 16:01
@AbdullahChaudhry That exactly what I mean. Just that wikipedia has no need to protect their information
Adel
@AdelMahjoub
Mar 12 2018 16:02
for example in express the default jsonp callback name is named callback http://expressjs.com/fr/4x/api.html#app.set
h1tag
@h1tag
Mar 12 2018 16:09
@AdelMahjoub Oh, I see now. Thanks for the info!
CamperBot
@camperbot
Mar 12 2018 16:09
h1tag sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 672 | @adelmahjoub |http://www.freecodecamp.org/adelmahjoub
krckyboy
@krckyboy
Mar 12 2018 16:52
@ndburrus Thank you! Will check those links out! :)
CamperBot
@camperbot
Mar 12 2018 16:52
krckyboy sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:star2: 2184 | @ndburrus |http://www.freecodecamp.org/ndburrus
Norvin Burrus
@ndburrus
Mar 12 2018 16:52
@krckyboy you're welcome! enjoy :+1:
Gulsvi
@gulsvi
Mar 12 2018 16:53
@AdelMahjoub Just to nitpick, JSONP is not the same as CORS (but I think I get what you are explaining). As we can see, JSONP is not required to use Wikipedia, we can do a standard JSON request if we use the crossorigin=* parameter.
Optionally, you can use JSONP if desired of course, by using the callback method you explain
Nick
@rhozeta
Mar 12 2018 16:56
Hey, can anyone tell me what is wrong with this mongoose query? likedBy always returns something, I want it to be null if there is no matching post with the array [likes] containing the userId
const likedBy = Post.findOne({_id: id, likes: userId})
      console.log(likedBy)
      if (likedBy) {
        Post.find({_id: id}, { $pull: {likes: userId}}, function (err){
          if (err) {
            res.status(500).send({
              message: 'an error occured'
            })
          } else {
            console.log('post removed')
          }
        })
      } else {
        Post.findOneAndUpdate({_id: id}, { $addToSet: {likes: userId } }, function (err) {
          if (err) {
            return res.status(500).send({
              message: 'could not add post to saved',
              error: err
            })
          } else {
            return res.status(200).send({
              message: 'Liked post'
            })
          }
Adel
@AdelMahjoub
Mar 12 2018 16:56
damn Batman is no longer maintained
Stephen James
@sjames1958gm
Mar 12 2018 16:58
@rhozeta is findOne asynchronous?
Ahmed Al-Gallad
@A-Gallad
Mar 12 2018 17:10
Hello guys
I am a little bit stuck the algorithm of Title case a sentence

--
function titleCase(str) {
var words = str.split(" ");
var capsOn = "";

for (var i = 0; i < words.length; i++) {

capsOn = words[i].substring(0,1).toUpperCase() + words[i].substring(1).toLowerCase();

}

return;

}

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

The function is working if I return capsOn ....What I am stuck in is how to return the whole sentence again joined
after the iterations inside the for loop
Nate Mallison
@NJM8
Mar 12 2018 17:13
@Gallad23 you don't have to search to far.....
You could also do capsOn += ....
or this
Ahmed Al-Gallad
@A-Gallad
Mar 12 2018 17:16
that's great thank you so much appreciate it :smile:
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 12 2018 17:17
@DraGoNKiSs That's what i was thinking. But to actually open the new page you'd need a bit of JS right?
Abdullah
@AbdullahChaudhry
Mar 12 2018 17:17
@Gallad23 You could turn capsOn into an array and then push the manipulated words into it. Then you can return the array, and join it back up again by using .join(" ")
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 17:20
@MuhammedKarim pm me
Frosty427
@Frosty427
Mar 12 2018 18:10
image.png
doesnt even mean anything
DraGoNKiSs
@DraGoNKiSs
Mar 12 2018 18:11
are u asking us to decrypt it?
ive seem some very handy decrypter out there
Gulsvi
@gulsvi
Mar 12 2018 18:24
@Frosty427 Lorem ipsum text is not really latin
It has a bunch of latin in it though
DarkxPunk
@DarkxPunk
Mar 12 2018 22:18
Aloha everyone
Eric Weiss
@eweiss17
Mar 12 2018 22:19
guten tag
DarkxPunk
@DarkxPunk
Mar 12 2018 22:19
How you doing this evening?
Eric Weiss
@eweiss17
Mar 12 2018 22:26
learning react
Lee
@LeeConnelly12
Mar 12 2018 23:27
What should i be aware of security-wise when setting up a site with a database without a PHP framework?
Brad
@bradtaniguchi
Mar 12 2018 23:36
@LeeConnelly12 Uh all of them? (sorry for being generic I just idk haha)