These are chat archives for FreeCodeCamp/HelpFrontEnd

28th
Nov 2017
AbrisM
@AbrisM
Nov 28 2017 00:26
Hi does anyone know how to convert jquery into Javascript? This is the jquery i'm trying to convert $(".heading").each(function() {
var $this, colors;
$this = $(this);
colors = getColors();
$this.css({"backgroundColor": colors[0], "color": colors[1], "fontFamily": getFont()});
}); It's for line 55 to line 66 in the code here https://jsfiddle.net/tf7nb6yz/
juni
@junipberry
Nov 28 2017 01:07
hello~
guys, I have a general question
I want to change the background color for the footer section of my site
is there anything else I need to do other than make a separte class for it in a container then style it with background color in css?
Maverink
@Maverink
Nov 28 2017 01:10
u dont even need a class, u can refer to footer just as footer
in ur css , footer{background-color:red}
Maverink
@Maverink
Nov 28 2017 01:18
@AbrisM not sure mate, dont really get "$this = $(this);"
DerMann97
@DerMann97
Nov 28 2017 01:23
Hello everyone !
AbrisM
@AbrisM
Nov 28 2017 01:55
@Maverink Hi Mav, the $this is the jquery part
as I also believe .each as well too
scwilbanks
@scwilbanks
Nov 28 2017 02:04
Anyone have any issue with a javascript for loop terminating early during one of the scripting challenges? I suspect my script is being timed out in my browser.
AbrisM
@AbrisM
Nov 28 2017 02:04
@scwilbanks Have you tried firefox or chrome to see the results?
scwilbanks
@scwilbanks
Nov 28 2017 02:05
Both. They terminate at different times. Often at different times in the same browser as well.
Ken Haduch
@khaduch
Nov 28 2017 02:10
@junipberry - one thing that you might have to watch out for is if you are using Bootstrap or some other CSS package that is styling the footer. Sometimes there are conflicts between what they want to do and what you want to do. But otherwise either defining your own class and putting it in a class attribute on the footer, or styling all footer elements as was mentioned above by @Maverink
juni
@junipberry
Nov 28 2017 02:11
I see, well I’m not going to be using bootstrap for this one :)
@khaduch my footer is doing something funny. The footer text on h1 h2 h3 decreases in size as it goes down. Do you know why it does that?
I also want to make h1 and h2 of the footer into 2 columns, would you know if I can do that simply without bootstrap?
AbrisM
@AbrisM
Nov 28 2017 02:24
@juni you could use a <div> element to turn it into a table with rows and collumns
Daniel
@DanJP2016
Nov 28 2017 02:40
Tom
@moT01
Nov 28 2017 02:41
@DanJP2016 watch the language
juni
@junipberry
Nov 28 2017 02:41
ty @AbrisM , ty @DanJP2016
CamperBot
@camperbot
Nov 28 2017 02:41
junipberry sends brownie points to @abrism and @danjp2016 :sparkles: :thumbsup: :sparkles:
api offline
:cookie: 303 | @danjp2016 |http://www.freecodecamp.org/danjp2016
Daniel
@DanJP2016
Nov 28 2017 02:43
@junipberry your welcome
@moT01 lol
Simon Cordova
@gbsimon87
Nov 28 2017 02:47

Hey all :)

Anybody online familiar with jQuery UI?

AbrisM
@AbrisM
Nov 28 2017 02:48
I'm trying to convert jquery into javascript @gbsimon87
Tom
@moT01
Nov 28 2017 02:49
@gbsimon87 whats up
no
AbrisM
@AbrisM
Nov 28 2017 02:49
https://jsfiddle.net/tf7nb6yz/1/ if you look at my code here you'll see the $, .e, and each...what are you trying to do Simon
Simon Cordova
@gbsimon87
Nov 28 2017 02:50
Hey @moT01 @AbrisM
I'm working on a website, and its got a check in date input which brings back a datepicker
I am trying to create a check out date input which also brings out a datepicker
The problem is, although two different inputs, when clicked, they bring up the same datepicker
I need each input to create a separate datepicker so I can set minimum and maximum dates on them separately
Tom
@moT01
Nov 28 2017 02:52
well, knowing nothing about this...
maybe there's a way to get a range
Simon Cordova
@gbsimon87
Nov 28 2017 02:52
shoot lol
Tom
@moT01
Nov 28 2017 02:52
like a different 'widget' or something
or maybe another library
Simon Cordova
@gbsimon87
Nov 28 2017 02:53
There is a way, I've been all over the docs, the things is once I set it on one it sets another
Tom
@moT01
Nov 28 2017 02:53
but it sounds like maybe just a variable name
Simon Cordova
@gbsimon87
Nov 28 2017 02:53
I wish it were that simple atm
Tom
@moT01
Nov 28 2017 02:53
do you have a repo?
isnt there something that says like ... var checkInDate = new datePicker()
Ryan Williams
@Ryanwfile
Nov 28 2017 03:30
In this pen, can someone help me adjust the css of the carousel img so that that bottom isn't cut off, thank you very much for any help https://codepen.io/Ryanwfile/pen/MOOMpO
AbrisM
@AbrisM
Nov 28 2017 03:46
@Simon You could create seperate id= tags to the datepicker in your onclick element, as well as having a possible else if statement
@gbsimon87 you might want to host your code on JSFiddle or Codepen so that others may look at it as well
Andy
@akjellis
Nov 28 2017 03:48
Hello everyone. I have 2 questions. 1st, I have been using fireftp in Firefox, and this new version does not support fire ftp. Any suggestions? 2nd, on my website that I am still working on akjeweb.com, in Firefox, it looks OK but in Chrome, completely whacked. Any thoughts?
Daniel
@DanJP2016
Nov 28 2017 03:50
@Ryanwfile I forked your project and made some changes tot he css and html. instead of putting a head section inside the html, you add all those files in the settings tab under the html, css, and js tabs. fixing that solved a couple of problems. you can look over the code and see the changes i made here, it still needs some work but should get you started
https://codepen.io/bones211/pen/WXgyQr
Daniel
@DanJP2016
Nov 28 2017 03:57
@akjellis you can use waterfox browser or maybe try the filezilla ftp client. and the site looks ok to me in firefox, what was the issue you were referring to?
Andy
@akjellis
Nov 28 2017 03:58
@DanJP2016 look at the site in chrome
I will try waterfox
the image of me is blown up, taking over my page 2
Daniel
@DanJP2016
Nov 28 2017 04:09
@akjellis try using percents instead of px for the image width and height. messing around with it in the browser console gets rid of the stretch effect at height 15%, and width 20%. but you might need to edit the image in photoshop or gimp, or use media queries to fix it completely
or just drop the height and set the width to 150px. that works to.
Reinier Blanco-Diaz
@reycuban
Nov 28 2017 04:55
Hello everyone, so here we can share our projects?? i am going to build tribute Page right now!
dinesh
@1532j0004kg
Nov 28 2017 04:56
yes damn sure
Reinier Blanco-Diaz
@reycuban
Nov 28 2017 04:56
Happy to be here! ill be sharing
dinesh
@1532j0004kg
Nov 28 2017 04:57
nice
Ryan Williams
@Ryanwfile
Nov 28 2017 05:03
@DanJP2016 Thank you for the help
CamperBot
@camperbot
Nov 28 2017 05:03
ryanwfile sends brownie points to @danjp2016 :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @danjp2016 |http://www.freecodecamp.org/danjp2016
Ryan Williams
@Ryanwfile
Nov 28 2017 05:21
Can someone help get the carousel images in this pen to not abruptly adjust when they first show, thank you for any help. https://codepen.io/Ryanwfile/pen/MOOMpO
why its not working properly
dinesh
@1532j0004kg
Nov 28 2017 06:33
i have doubt
Tessa
@TheTessaMurphy
Nov 28 2017 06:40
Moving some of my projects to github and in doing so found that the audio plays in firefox but not Chrome. Has anyone else run up against this issue?
Tessa
@TheTessaMurphy
Nov 28 2017 07:17
Okay never mind. User error. Doh!
creator0323
@Amasian
Nov 28 2017 08:17
Can I get some advice on the site where I can find high resolution images or icons? I will use it only for practice ,not commercial purpose, so If it is free that would be nice. Thank you!
Markus Kiili
@Masd925
Nov 28 2017 08:19
unsplash seems very good.
creator0323
@Amasian
Nov 28 2017 08:50
@Masd925 Thank you so much :)
CamperBot
@camperbot
Nov 28 2017 08:50
amasian sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4583 | @masd925 |http://www.freecodecamp.org/masd925
Deepak Manjunath
@Deepak2322
Nov 28 2017 08:50
i have an object which i am looping through a list of li , it's a list of code's. One of the property is very long like "International Rewards" i would like to abbreviate it and make "IRW" if it is "International Rewards". How can i do this ?
Joshua Frias
@Juke-Magic
Nov 28 2017 08:53
can someone pleased help me
Long Nguyen
@longnt80
Nov 28 2017 08:55
@Deepak2322 the key is International Rewards?
you want to rename the key?
Deepak Manjunath
@Deepak2322
Nov 28 2017 09:02
{ label: 'International Rewards" }
key is label and value is "International Rewards"
Long Nguyen
@longnt80
Nov 28 2017 09:06
can you give the example of your object/array?
basically, to change the value, you just need to loop through each property of the object and check if the value is International Rewards then change that value
for (var key in obj) {
  if ( obj[key] === 'International Rewards' ) {
    obj[key] = 'IRW'
  }
}
something like that
Deepak Manjunath
@Deepak2322
Nov 28 2017 09:09
thank you :-)
Long Nguyen
@longnt80
Nov 28 2017 09:10
np
Rajat
@rajataudichya
Nov 28 2017 09:19
anyone here knows about the latest technologies used for form validations?
hi Everyone,
I have a slight problem
somehow when I try to Bold the header "Lorem Ipsum" it doenst bold perfectly
only several random letter got Bolded
anybody know whats going on here? I'm usong
I'm using Belle Fair font from google fonts
I tried to use sans-serif, bootstraps default font and it works. but not when using Belle Fair from google fonts
primuscovenant
@primuscovenant
Nov 28 2017 10:10
@heroiczero tx
CamperBot
@camperbot
Nov 28 2017 10:10
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2076 | @heroiczero |http://www.freecodecamp.org/heroiczero
dinesh
@1532j0004kg
Nov 28 2017 10:21
@chanski use the <b>
Deepak Manjunath
@Deepak2322
Nov 28 2017 10:28
how do i format "Nov 2017" to "Nov '17"
Chanski
@chanski
Nov 28 2017 10:55
@1532j0004kg Hi Dinesh, The <b> doesnt work on my Computer. I'm guessing it has something to do with using google fonts. I'll try other fonts. but Thanks anyway ;)
CamperBot
@camperbot
Nov 28 2017 10:55
chanski sends brownie points to @1532j0004kg :sparkles: :thumbsup: :sparkles:
:cookie: 260 | @1532j0004kg |http://www.freecodecamp.org/1532j0004kg
dinesh
@1532j0004kg
Nov 28 2017 10:56
@Deepak2322 probably with map()
@Deepak2322 if u can please share ur code!
@chanski <b> is not working,r u serious?
Deepak Manjunath
@Deepak2322
Nov 28 2017 11:01
i format the date using globalizejs and get the result in this format 'Nov 2017'
i want to replace 20 with " ' " a quote
Stephen James
@sjames1958gm
Nov 28 2017 11:04
@Deepak2322 can't you just use str.replace(" 20", " '");
Deepak Manjunath
@Deepak2322
Nov 28 2017 11:13
but if the year changes to 90's
Chanski
@chanski
Nov 28 2017 11:42
@1532j0004kg yeah it doesn't work properly, just like <strong>, <b> bolds random part of a letter. I changed the fonts with web safe fonts instead of Bellefair font from Google font
DeviseSoft
@DeviseSoft
Nov 28 2017 11:46
Hi
can someone help me with javascript doubts
i am just learner of javascript
Does it matter to use == or === when checking if typeof variable is equal to 'string' ?
Markus Kiili
@Masd925
Nov 28 2017 11:50
@DeviseSoft typeof returns a string, so it doesn't matter which you use.
A good general rule is to always use strict equality operators === and !== instead of abstract ones == and !=.
DeviseSoft
@DeviseSoft
Nov 28 2017 11:53
thank you @Masd925
CamperBot
@camperbot
Nov 28 2017 11:53
devisesoft sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4584 | @masd925 |http://www.freecodecamp.org/masd925
DeviseSoft
@DeviseSoft
Nov 28 2017 11:56
can someone share the email Id.I have small code snippet and i have some doubts in it.i will email.need help urgent
DeviseSoft
@DeviseSoft
Nov 28 2017 12:11
can someone help me with this
DeviseSoft
@DeviseSoft
Nov 28 2017 12:28
atleast few of them?
A-J Roos
@Asjas
Nov 28 2017 12:35

@DeviseSoft

atleast few of them

What do you mean?

Bartek Lewandowski
@Jabarlew
Nov 28 2017 12:37
hello anyone here with js skills :D?
A-J Roos
@Asjas
Nov 28 2017 12:37
@Jabarlew You post your question and someone will help if they can
Bartek Lewandowski
@Jabarlew
Nov 28 2017 12:38
var bills = [50.23, 19.12, 34.01,
    100.11, 12.15, 9.90, 29.11, 12.99,
    10.00, 99.22, 102.20, 100.10, 6.77, 2.22
];

var totals = bills.map(function(x) {
   return (x + x*0.15).toFixed(2);
});

console.log(totals);
i want to transform it back to numbers instead of string
Markus Kiili
@Masd925
Nov 28 2017 12:40
@Jabarlew For example Number() transforms into type Number.
Or just + if you like to obscure the code a bit.
Bartek Lewandowski
@Jabarlew
Nov 28 2017 12:46
thank you so much it works :)
Sarah Nicole Hanson
@sarahnicolehanson
Nov 28 2017 14:20
Hi! Is anyone in here?
Moisés Man
@moigithub
Nov 28 2017 14:32
u
Kaz Baig
@kbaig
Nov 28 2017 14:55
@sarahnicolehanson you can just ask if you have a question
juni
@junipberry
Nov 28 2017 15:56

hello all~ I’m trying to pass a kata for a password containing:
-one lowercase letter
-one uppercase letter
-one digit
-at least 6 characters

the regEx I have so far is:
function validate(password) { return /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{6,}$/.test(password); }

It passing all samples but get stuck when I attempt. Does anyone see the issue w this that I’m not seeing?

Tom
@moT01
Nov 28 2017 16:05
@junipberry not sure on regex - but here's a thought
what if you split the tests into individual regex's
is this pen is responsive @moT01 ?
i need help
anyboby can review this!
Tom
@moT01
Nov 28 2017 16:13
im not sure responsive is a yes or no question, ...more how responsive is it
shrink your window - some of the letters get cut off in the title
dinesh
@1532j0004kg
Nov 28 2017 16:13
u said this is not responsive right?
Tom
@moT01
Nov 28 2017 16:14
and the list shrinks to smaller than it needs to be
no, i didnt say that
it seems mostly responsive in my browser
dinesh
@1532j0004kg
Nov 28 2017 16:14
ok
Tom
@moT01
Nov 28 2017 16:14
try it on a some more divices
dinesh
@1532j0004kg
Nov 28 2017 16:15
any advise
i will receive
Tom
@moT01
Nov 28 2017 16:16
well, i said some of the letters get cut off in companies for me
A-J Roos
@Asjas
Nov 28 2017 16:16
@1532j0004kg Use the chrome developer tools and use the mobile device toolbar to set it to a couple of cellphones
Tom
@moT01
Nov 28 2017 16:16
and the list of all the things is too skinny
dinesh
@1532j0004kg
Nov 28 2017 16:16
ok i already usethat
@Asjas
Tom
@moT01
Nov 28 2017 16:16
also - hover effects wont work on a phone
dinesh
@1532j0004kg
Nov 28 2017 16:17
just i getting feedbacks.
@moT01 ok thanks
CamperBot
@camperbot
Nov 28 2017 16:17
1532j0004kg sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 916 | @mot01 |http://www.freecodecamp.org/mot01
dinesh
@1532j0004kg
Nov 28 2017 16:17
thanks @Asjas
CamperBot
@camperbot
Nov 28 2017 16:17
1532j0004kg sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @asjas |http://www.freecodecamp.org/asjas
Razvan Jackson
@RazvanJackson
Nov 28 2017 17:56
hey guys
how can i put text that's always in the middle of the progress bar?
<div class="progress">
                <div class="progress-bar" aria-valuenow="<%=option.votes%>"></div>
   </div>
thomasdanner
@thmsdnnr
Nov 28 2017 18:12
try styling div.progress-bar with margin: auto; in your CSS
@RazvanJackson or text-align: center;
Razvan Jackson
@RazvanJackson
Nov 28 2017 18:13
progress-bar it's in the middle
i want a text that's in the center of progress
thomasdanner
@thmsdnnr
Nov 28 2017 19:02
@RazvanJackson can you show a fiddle or an example of the code? I'm not sure I 100% understand what you're going for. If you want to center text displayed in div.progress one way is to just do text-align:center for that container element
Stephen James
@sjames1958gm
Nov 28 2017 19:20
@RazvanJackson You will have to do some calculation based on the % of the progress, when you adjust the progress you will have to adjust the x position of the text
Razvan Jackson
@RazvanJackson
Nov 28 2017 19:21
wait
<div class="progress">
                <h2>Sup</h2>
     <div class="progress-bar" aria-valuenow="<%=option.votes%>"></div>
   </div>
for example
that h2 i want to be all the time centered in the progress
thomasdanner
@thmsdnnr
Nov 28 2017 19:25
@RazvanJackson do you mean that you want the <h2> to be centered above the progress bar at the bottom?
so like
       SUP
----------------
Razvan Jackson
@RazvanJackson
Nov 28 2017 19:26
no
wait to sec
i'll use codepen
or wait
thomasdanner
@thmsdnnr
Nov 28 2017 19:29
Yes, please use jsFiddle or CodePen to post what you have so far.
Razvan Jackson
@RazvanJackson
Nov 28 2017 19:30
can;t use bootstrap cdn for codepen right?
thomasdanner
@thmsdnnr
Nov 28 2017 19:32
@RazvanJackson you can: just click the Gear next to CSS and JS and choose Bootstrap from the "Quick Add" dropdown.
you don't need to include it manually in your JS or HTML
that text i want in the middle
thomasdanner
@thmsdnnr
Nov 28 2017 19:36
@RazvanJackson like this? https://codepen.io/thmsdnnr/pen/vWVyRw
Razvan Jackson
@RazvanJackson
Nov 28 2017 19:36
no
in the middle of progress not progress bar
thomasdanner
@thmsdnnr
Nov 28 2017 19:38
So centered in the middle of the red, and covered up when the progress bar reaches it?
Razvan Jackson
@RazvanJackson
Nov 28 2017 19:39
yea
thomasdanner
@thmsdnnr
Nov 28 2017 19:48
@RazvanJackson like this https://codepen.io/thmsdnnr/pen/vWVyRw
Razvan Jackson
@RazvanJackson
Nov 28 2017 19:48
thanks
actually i just needed that position fixed
didn't knew how to do it
thomasdanner
@thmsdnnr
Nov 28 2017 19:49
@RazvanJackson cool! glad it works for you now. CSS is always tricky
Razvan Jackson
@RazvanJackson
Nov 28 2017 19:49
thanks @thmsdnnr
CamperBot
@camperbot
Nov 28 2017 19:49
razvanjackson sends brownie points to @thmsdnnr :sparkles: :thumbsup: :sparkles:
:cookie: 420 | @thmsdnnr |http://www.freecodecamp.org/thmsdnnr
Razvan Jackson
@RazvanJackson
Nov 28 2017 19:49
Cookies :)
Ryan Williams
@Ryanwfile
Nov 28 2017 20:06
Can someone help get the carousel images in this pen to not abruptly adjust when they first show, thank you for any help. https://codepen.io/Ryanwfile/pen/MOOMpO
Sorin Ruse
@sorinr
Nov 28 2017 20:11
@Ryanwfile i think u don't have much customization options when using bootstap build in carousel. i will look around for some other libs or build one of my own
hibaakel
@hibaakel
Nov 28 2017 20:42
i need some help i make the js calculator but the
calculator doesn't work if i want to click on the button many time its only appear once also "=" didn't work and i don't know where is the mistake or whats wrong i did this my code pen link https://codepen.io/hibaakel/pen/aVaqyj
i will be happy if anyone help me please
Sorin Ruse
@sorinr
Nov 28 2017 20:52
@hibaakel your problem is in this function onclick='toScreen(value) take a look at this one and think how it should behave
@hibaakel i mean the toScreen() function
hibaakel
@hibaakel
Nov 28 2017 20:55
i think this function should take the value of the input and than show this value in the screen of the calcultor
Sorin Ruse
@sorinr
Nov 28 2017 20:56
@hibaakel and it does that. what else do you want to do with the value for the final calculation when u press "=" ?
Sorin Ruse
@sorinr
Nov 28 2017 21:03

@hibaakel write this on paper and try to give values and evaluate its response

function toScreen(x) {
  box.value=x;
  if (x==='c') {
    box.value='' ;
  }
}

what will be the box variable value after i press different numbers?

hibaakel
@hibaakel
Nov 28 2017 21:03
yeah
Sorin Ruse
@sorinr
Nov 28 2017 21:06
@hibaakel in here box.value=x; u r missing something. you need to add the x to the box value thats already there
hibaakel
@hibaakel
Nov 28 2017 21:08
you are right i fixed my mistake
Sorin Ruse
@sorinr
Nov 28 2017 21:09
@hibaakel :+1:
@hibaakel i've seen. now its seems working ok