These are chat archives for FreeCodeCamp/HelpFrontEnd

17th
Aug 2017
VanchoDimitrov
@VanchoDimitrov
Aug 17 2017 01:59
Hello World!
just wanted to say hi to all of you!
iso
@iso1048
Aug 17 2017 02:00
@VanchoDimitrov hey bro
VanchoDimitrov
@VanchoDimitrov
Aug 17 2017 02:00
thanks for the warm welcome @gothamknight
CamperBot
@camperbot
Aug 17 2017 02:00
vanchodimitrov sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 377 | @gothamknight |http://www.freecodecamp.com/gothamknight
iso
@iso1048
Aug 17 2017 02:01
@VanchoDimitrov have you just started fCC?
VanchoDimitrov
@VanchoDimitrov
Aug 17 2017 02:01
yes and I find it superb frankly
iso
@iso1048
Aug 17 2017 02:01
yeah its good fun.
VanchoDimitrov
@VanchoDimitrov
Aug 17 2017 02:02
yep. its a great way to learn programming
Elizabeth Paul
@Kowalatam
Aug 17 2017 02:02
and frustrating at times :smile:
VanchoDimitrov
@VanchoDimitrov
Aug 17 2017 02:03
:) correct especially if one can't find a solution to the problem but a great way to learn new things
Elizabeth Paul
@Kowalatam
Aug 17 2017 02:09
yeah.. or see things u thought u knew lol
Manan Shah
@mananshah51
Aug 17 2017 02:53
<form action="/url-where-you-want-to-submit-form-data"></form>
You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your form element.
Can we have google docs as our URL ?
Gulsvi
@gulsvi
Aug 17 2017 02:59
@mananshah51 No, a google docs URL won't work there. A lot of people use a service like https://formspree.io for their portfolio contact data.
Manan Shah
@mananshah51
Aug 17 2017 03:04
@SkyC0der Can we make a php page for the data?
iso
@iso1048
Aug 17 2017 03:04
@SkyC0der what is your preferred source for getting icons? fontawesome and material dont have exactly what I am looking for...
Gulsvi
@gulsvi
Aug 17 2017 03:05
@mananshah51 Yes, but you need a server to host the PHP page
I guess you'd be using LAMP?
@gothamknight hmmm, those are the two I use the most
What kind of icon are you looking for?
Sorin Ruse
@sorinr
Aug 17 2017 03:11
@gothamknight there is also http://ionicons.com/ docs here: https://ionicframework.com/docs/ionicons/
iso
@iso1048
Aug 17 2017 03:13
@SkyC0der @sorinr thanks. need to head off
CamperBot
@camperbot
Aug 17 2017 03:13
gothamknight sends brownie points to @skyc0der and @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1324 | @sorinr |http://www.freecodecamp.com/sorinr
:star2: 2419 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 17 2017 03:13
:sparkles:
Gaurav
@gauravmagan
Aug 17 2017 03:25
Screen Shot 2017-08-16 at 11.24.12 PM.png
@SkyC0der whats the realestate of this slider
hi
home page is having a slider and its a roatating one whats appropriate width and height suits
Gulsvi
@gulsvi
Aug 17 2017 03:27
It depends on the customer - what kind of devices do they use and what other content is on the page
Gaurav
@gauravmagan
Aug 17 2017 03:29
ok
what size is to be considered like the width and height
@SkyC0der i have shared you the link kindly give an estimate so that it fits all the devices
Gulsvi
@gulsvi
Aug 17 2017 03:33
I can't really answer that for you :/ you can do what bootstrap does, and use similar breakpoints, but those are fairly generic
@gauravmagan Here are the screen widths that bootstrap uses: https://getbootstrap.com/docs/4.0/layout/grid/#grid-options
576/768/992/1200
Gaurav
@gauravmagan
Aug 17 2017 03:39
oh
thank you @SkyC0der it might help me
CamperBot
@camperbot
Aug 17 2017 03:39
gauravmagan sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2420 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gaurav
@gauravmagan
Aug 17 2017 03:39
@SkyC0der thank you again
CamperBot
@camperbot
Aug 17 2017 03:39
gauravmagan sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: gauravmagan already gave skyc0der points
Gulsvi
@gulsvi
Aug 17 2017 03:44
@gauravmagan Sorry I couldn't help much more than that. Good luck
Some other icons I found
Rabin Shrestha
@jyapujuju
Aug 17 2017 04:37
regex to match if there is no space in sentence??
Ken Haduch
@khaduch
Aug 17 2017 04:48
@jyapujuju - do you mean no spaces at all? You can just search for whitespaces and see if you don't get a match? Maybe an example of what you're trying to find?
Rabin Shrestha
@jyapujuju
Aug 17 2017 05:11
@khaduch can you suggest good online simulator
for regex
Johnny
@jtan3
Aug 17 2017 05:20
@jyapujuju http://www.regexpal.com/ you can try this one. There's a cheat sheet on the right.
Rabin Shrestha
@jyapujuju
Aug 17 2017 05:26
if (str.indexOf(/\s/ == -1 )&& str.indexOf(/_/g == -1))
    str=str.replace(/([A-Z])/g, '-$1').toLowerCase();
   else if (str.indexOf(/_/g != -1))
    str=str.toLowerCase().replace(/_/g,'-');



  return str;
}

spinalCase("The_Andy_Griffith_Show");
@khaduch its giving me error
iso
@iso1048
Aug 17 2017 05:38
@sorinr i couldn't find how to load the ionicons...
@sorinr what do you think of ionicons responsive grid?
Patryk Janik
@pumanitro
Aug 17 2017 08:11
It is possible to justify-content: space-between; and when there is only one element put it to the right ? margin-left: auto - change display of other elements when they are displayed
cowCrazy
@cowCrazy
Aug 17 2017 08:39
@pumanitro not sure if I understood what you meant, can you give an example?
Patryk Janik
@pumanitro
Aug 17 2017 08:43
@cowCrazy
<div style="display:flex; justify-content: space-between;">
  <div></div> //sometimes Displayed sometimes doesn't
  <div></div> //always displayed but always want to display on the right side
</div>

And when the 2 elements are displayed I have smth like that :

<1div/> space <2div/>
And when I show just second div I have this :

<2div/> space
And i want this :
space <2div/>

cowCrazy
@cowCrazy
Aug 17 2017 08:50
@pumanitro I used the code as you wrote it, and it is showing one element on the left side and one on the right, even when the left one has no content. is that what you want or I still get it wrong?
Patryk Janik
@pumanitro
Aug 17 2017 08:51
Normally it shows 1 element on the left side I have to show It on the right side
Mahesh
@mahis929
Aug 17 2017 08:52
hii
cowCrazy
@cowCrazy
Aug 17 2017 08:58
@pumanitro which browser are you using?
cowCrazy
@cowCrazy
Aug 17 2017 09:03
in chrome I see the same result
@mahi929 hi :)
Patryk Janik
@pumanitro
Aug 17 2017 09:18
I use chrome
But when I have something like that :
<div style="display:flex; justify-content: space-between;">
  <div></div> //always displayed but always want to display on the right side
</div>
I want to display div inside of main div on the right side
Normally it is displayed on the left
cowCrazy
@cowCrazy
Aug 17 2017 09:21
can you leave the other div as a placeholder and to fill it with content only when needed?
Patryk Janik
@pumanitro
Aug 17 2017 09:22
I can, but display:flex doesn't have any mechanizm for putting element to the right side ?
Marianissimus
@Marianissimus
Aug 17 2017 09:23
@pumanitro try smth like: justify-content: flex-end; //align to flex-end, meaning right
cowCrazy
@cowCrazy
Aug 17 2017 09:26
@pumanitro I am a but lost with it, in your jsbin if you remove the comment (or change it to an html comment) it will be displayed on the right side
Patryk Janik
@pumanitro
Aug 17 2017 09:27
I need a way to change somehow div children to always be visible on the right side.
I removed it and it works like previously
cowCrazy
@cowCrazy
Aug 17 2017 09:29
@pumanitro and if you add now the other div and leave it empty?
Patryk Janik
@pumanitro
Aug 17 2017 09:30
that should works but on this lvl I cant change content of this div I can only change his styles or remove him.
cowCrazy
@cowCrazy
Aug 17 2017 09:41
@pumanitro then add margin-left: auto; to its style, and tell me if it is working
Patryk Janik
@pumanitro
Aug 17 2017 09:42
It is working but when I show other elements they goes to the left site.
cowCrazy
@cowCrazy
Aug 17 2017 09:56
@pumanitro can you show the case? is it an exercise?
Patryk Janik
@pumanitro
Aug 17 2017 10:00
Im using react component and instead of that <div> there should be a <ComponentName> which I cant change
cowCrazy
@cowCrazy
Aug 17 2017 10:02
@pumanitro to be honest I feel a bit lost, and I don't know what you are trying to achieve. anyhow need to go, I hope some how you can manage with it
dinesh
@1532j0004kg
Aug 17 2017 10:15
return str.replace(/[A-Z]/g, L => String.fromCharCode((L.charCodeAt(0) % 26) + 65))
guys can u plz explain this line.....
prakash chandra yadav
@prakashyadav008
Aug 17 2017 10:29
hey can anyone help me out
i am having this tag on top of my page
Teo
@Teo03
Aug 17 2017 10:48
Can someone help me with the Search and Replace challenge?
Here is my code:

function myReplace(str, before, after) {
  var bindex = str.indexOf(before);
  if(str[bindex] === before[0].toUpperCase()){
    after = after.splice(after[0], 1, after[0].toUpperCase();                      
  }
  str = str.replace(before, after);
  return str;
}
myReplace("A quick brown fox jumped over the lazy dog", "jumped", "leaped");
Teo
@Teo03
Aug 17 2017 10:58
Can someone help?
iso
@iso1048
Aug 17 2017 10:58
@Teo03 the .splice method is working on after, so I dont think you have to do after[0], just try after.splice(0,1) .toUpperCase() to change the first letter to uppercase. You cannot replace the first letter like you are trying to do within the splice method with after[0].toUpperCase() since strings are immutable. Hope that helps.
Teo
@Teo03
Aug 17 2017 11:00

function myReplace(str, before, after) {
  var bindex = str.indexOf(before);
  if(str[bindex] === before[0].toUpperCase()){
    after = after.splice(0,1) .toUpperCase();                
  }
  return str.replace(before, after);
}
myReplace("A quick brown fox jumped over the lazy dog", "Jumped", "leaped");
@gothamknight I tried but still doesen't work.
iso
@iso1048
Aug 17 2017 11:04
@Teo03 to make after have its first letter capitalised, you will need two use to splice methods - the first splices the first letter and converts it to an upper case (which you have - by the way there is a space between .splice(0,1) and .toUpperCase()), then the second splices the rest of after, which is concatenated to the capitalised letter.
@Teo03 and also, you dont need the bindex variable. You can just do if(before[0] == before[0].toUpperCase())
i am going to bed now so good luck.
Teo
@Teo03
Aug 17 2017 11:06
@gothamknight ok,but how to splice the rest of the 'after'
@gothamknight ok thanks for the help
CamperBot
@camperbot
Aug 17 2017 11:07
teo03 sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 378 | @gothamknight |http://www.freecodecamp.com/gothamknight
Fernando
@lestairon
Aug 17 2017 11:09
Jesus
Regular expressions are so hard
Markus Kiili
@Masd925
Aug 17 2017 11:14
@lestairon Hanging from a cross for a few days was hard. I don't think he hears that prayer.
Fernando
@lestairon
Aug 17 2017 11:16
Hahaha
dinesh
@1532j0004kg
Aug 17 2017 11:16
$.getJSON("/json/cats.json", function(json) {
$(".message").html(JSON.stringify(json));
});
Fernando
@lestairon
Aug 17 2017 11:16
Srsly, i don't know how to work with them :(
dinesh
@1532j0004kg
Aug 17 2017 11:17
can u plz explain that line
what that line really mean?
Markus Kiili
@Masd925
Aug 17 2017 11:19
@1532j0004kg That makes an ajax request to the relative url there. That callback function is executed when the response comes and object parsed from the response json is automatically passed into it.
dinesh
@1532j0004kg
Aug 17 2017 11:20
which is call back function
Markus Kiili
@Masd925
Aug 17 2017 11:21
@1532j0004kg In this case the function function(json) {$(".message").html(JSON.stringify(json));}. It is passed into the getJSON method and executed when the response comes by the browser.
A callback function is a function passed into another function as an argument.
dinesh
@1532j0004kg
Aug 17 2017 11:31
what is $.
Markus Kiili
@Masd925
Aug 17 2017 11:32
@1532j0004kg jQuery object.
dinesh
@1532j0004kg
Aug 17 2017 11:32
okiiieee
Markus Kiili
@Masd925
Aug 17 2017 11:32
You use jQuery by using $ object.
dinesh
@1532j0004kg
Aug 17 2017 11:43
can u plz tell about json and jquery
Fernando
@lestairon
Aug 17 2017 11:44
What does [] mean on a regular expression?
Markus Kiili
@Masd925
Aug 17 2017 11:46
@1532j0004kg Json is a syntax for storing objects on a string or text transmission. jQuery is a JS library that makes accessing the DOM and doing AJAX requests easier. It also helps to avoid some cross-browser problems.
korzo
@korzo
Aug 17 2017 11:46
@lestairon Set of characters or range
dinesh
@1532j0004kg
Aug 17 2017 11:46
okieee bro tq...
Fernando
@lestairon
Aug 17 2017 12:01
@korzo ty
CamperBot
@camperbot
Aug 17 2017 12:01
lestairon sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 386 | @korzo |http://www.freecodecamp.com/korzo
Ken Haduch
@khaduch
Aug 17 2017 13:53
@jyapujuju - sorry, I ended up dropping offline and going to sleep, so I didn't see your posts around this one: :point_up: August 17, 2017 1:26 AM - were you able to solve your "spinalCase" challenge?
Ken Haduch
@khaduch
Aug 17 2017 14:00
@Teo03 - did you figure out your "search and replace" exercise? :point_up: August 17, 2017 7:00 AM - I'm just looking through the chatrooms to see what's been going on...
dinesh
@1532j0004kg
Aug 17 2017 14:04
json.forEach(function(val) {
var keys = Object.keys(val);
html += "<div class = 'cat'>";
keys.forEach(function(key) {
html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
});
cab u plz xplain this ...
can?
guys
Tom
@moT01
Aug 17 2017 14:19
@1532j0004kg any more code to go with it? forEach does just what it sounds like, i believe it only works with arrays
so the first json must be an array with objects in it
so forEach index in the array it does all that
val is the current thing in the array you are working with
dinesh
@1532j0004kg
Aug 17 2017 14:20
This is given for "json to HTML"
Tom
@moT01
Aug 17 2017 14:21
is there something you are trying to accomplish?
dinesh
@1532j0004kg
Aug 17 2017 14:21
no
I just want to know how the code works..
so if you look at the second example, im guess your data kind of looks like that
your var keys will be an array of the keys in that object
then it just makes an html div
the it does the forEach on the new keys array
and puts those values in an html variable
is that helping at all
dinesh
@1532j0004kg
Aug 17 2017 14:28
Tq I understood little bit...
How u Learn the js
Tom
@moT01
Aug 17 2017 14:28
how did i learn js?
dinesh
@1532j0004kg
Aug 17 2017 14:28
yes
How did u Learn?
Tom
@moT01
Aug 17 2017 14:29
do the front end classes at www.freecodecamp.org
dinesh
@1532j0004kg
Aug 17 2017 14:29
I am doing...
That's enough?
Tom
@moT01
Aug 17 2017 14:30
its good set of lessons and challenges
it wont teach you everything
but it's enough to learn most of the main features
dinesh
@1532j0004kg
Aug 17 2017 14:31
you Just use that Resource only?
Tom
@moT01
Aug 17 2017 14:31
no
dinesh
@1532j0004kg
Aug 17 2017 14:31
Then?
Tom
@moT01
Aug 17 2017 14:32
i did the lessons, but you need some other resources to learn how exactly to do things
the site i linked to before gives the syntax and an explanation on all stuff i think
dinesh
@1532j0004kg
Aug 17 2017 14:33
okieeee
Tom
@moT01
Aug 17 2017 14:33
the lessons usually have a link in the description on what you are supposed to learn for the lesson
dinesh
@1532j0004kg
Aug 17 2017 14:33
thanks @moT01
CamperBot
@camperbot
Aug 17 2017 14:33
1532j0004kg sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 795 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Aug 17 2017 14:33
@1532j0004kg google
Gulsvi
@gulsvi
Aug 17 2017 14:39
var html = "";
json.forEach(function(val) { // loop through each object in the array named 'json'
  var keys = Object.keys(val); // assign all the properties of each object to an array named keys: ["id", "imageLink", "altText", "codeNames"]
  html += "<div class = 'cat'>"; // add this HTML to the html variable
  keys.forEach(function(key) { // loop through the 'keys' array created two lines up
    html += "<strong>" + key + "</strong>: " + val[key] + "<br>"; // add each property and its value to the html variable
  });
});
Play around with the code here @1532j0004kg https://s.codepen.io/anon/pen/oepPYZ
dinesh
@1532j0004kg
Aug 17 2017 14:47
thamks @SkyC0der
thanks @SkyC0der
CamperBot
@camperbot
Aug 17 2017 14:47
1532j0004kg sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2423 | @skyc0der |http://www.freecodecamp.com/skyc0der
dinesh
@1532j0004kg
Aug 17 2017 14:55
give me some tips for do the random quote machine
i did n't kow the js lot
know
you can get quotes from there, i used it
click the api button at the bottom, and it shows some code on how to get it working
start with getting a random quote to log to the console
dinesh
@1532j0004kg
Aug 17 2017 15:04
Without knowing the js We can't able to do random quote generator?
Without knowing the js verywell?
Tom
@moT01
Aug 17 2017 15:05
i would recommend the lessons before you jump into the projects, you do need to know a little js to get it working. But you dont need to know a whole lot
dinesh
@1532j0004kg
Aug 17 2017 15:07
which lessons...U post the link few min ago ?
That link?
Tom
@moT01
Aug 17 2017 15:07
freecodecamp.org
dinesh
@1532j0004kg
Aug 17 2017 15:07
Yes i did that
but still i dont know how to do random quote genertor
Gulsvi
@gulsvi
Aug 17 2017 15:08
@1532j0004kg It's best to do the JS challenges first before doing the quote machine
Do them on your own, without copy/pasting code from the guides on the forum
dinesh
@1532j0004kg
Aug 17 2017 15:08
okiiieeeee
Tom
@moT01
Aug 17 2017 15:08
@1532j0004kg build on codepen.io
dinesh
@1532j0004kg
Aug 17 2017 15:08
okieeee
Tom
@moT01
Aug 17 2017 15:09
add the jquery library in the js settings and check https://quotesondesign.com/api-v4-0/ to get going
dinesh
@1532j0004kg
Aug 17 2017 15:09
@SkyC0der Where u learn the js...
Gulsvi
@gulsvi
Aug 17 2017 15:10
I learned it all here at Free Code Camp
dinesh
@1532j0004kg
Aug 17 2017 15:10
Awesome man!!!
What is ur current task number...
Tom
@moT01
Aug 17 2017 15:11
and, like i said, make your first goal to get a random quote to log to the console
dinesh
@1532j0004kg
Aug 17 2017 15:11
okieee
Tom
@moT01
Aug 17 2017 15:11
that's how i would start anyway
Utsav Kafley
@chopedada
Aug 17 2017 16:28
Why is my content on the first block of the website not centered ( the one with the name and picture)? Is it because the code centers it along the whole width of the page and not of the container?
Gulsvi
@gulsvi
Aug 17 2017 16:54
@chopedada I'm not seeing where you're trying to center it - having trouble visualizing what you are hoping it will look like
alessiochiffi
@alessiochiffi
Aug 17 2017 16:59
Hi everyone
can someone help me with a react js problem?
Sweet Coding :)
@SweetCodingInc
Aug 17 2017 17:02
@alessiochiffi post your question
BrianWilliams28
@BrianWilliams28
Aug 17 2017 18:23
hey guys, could someone give me a tip on how to fix my code for the Convert HTML Entities algorithm? Here's what I have so far.
function convertHTML(str) {
  // &colon;&rpar;
   var re = /[&<>"']/g;
  var test = re.test(str);
  var newStr = '';

 for (var i = 0; i < str.length; i++) {
   if (test) {
   switch (str[i]) {
     case '&':
       newStr = str.replace(/&/g, '&amp;');
       break;
     case '<':
      newStr = str.replace(/</g, '&lt;');
       break;
     case '>':
       newStr = str.replace(/>/g, '&gt;');
       break;
     case '"':
       newStr = str.replace(/"/g, '&quot;');
       break;
     case "'":
       newStr = str.replace(/'/g, '&apos;');
       break;
                 }
     return newStr;
   }
   else return str;
 }
}

convertHTML("Dolce & Gabbana");
Gulsvi
@gulsvi
Aug 17 2017 18:29
@BrianWilliams28 your loop only runs once because of your return statements. A loop is not needed for that challenge - the /g flag you have for your regex, combined with the .replace() method will end up doing a global replace of all matched characters.
BrianWilliams28
@BrianWilliams28
Aug 17 2017 18:31
@SkyC0der but i still need to tell it what to replace right
@BrianWilliams28 and i cant put all the different cases in one line of replace can i?
Gulsvi
@gulsvi
Aug 17 2017 18:32
@BrianWilliams28 You can chain .replace() statements together: .replace().replace().replace(), just like we do with .split().reverse() for example
BrianWilliams28
@BrianWilliams28
Aug 17 2017 18:34
i see..
so all i would need to do is str.replace(re, '&amp;').replace(re, '&lt;').replace()...etc ?
@SkyC0der or would i need to enter each character manually for the regex portion like so str.replace(/&/g, '&lt;');
Gulsvi
@gulsvi
Aug 17 2017 18:38
Try it out :)
See what happens in a code editor - and use console.log() to see
BrianWilliams28
@BrianWilliams28
Aug 17 2017 18:40
ah
interesting
it stacks every change in every spot a match occurs
@SkyC0der i solved it now, thank you
CamperBot
@camperbot
Aug 17 2017 18:44
brianwilliams28 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2427 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 17 2017 18:48
you're welcome
Josh Daniell
@joshdaniell
Aug 17 2017 19:18

Can anyone see why the following lines 120 -122 of the js code aren't working?

$("#8").click(function () {
        $("#8").html("X");
    });

https://codepen.io/joshdaniell/pen/jLGKqw?editors=1010

^ fyi those lines of code are just trying to make sure I can input text when the relevant div is clicked
korzo
@korzo
Aug 17 2017 19:21
@joshdaniell I'm not sure if 0 is valid id
Josh Daniell
@joshdaniell
Aug 17 2017 19:26
@korzo I just inserted a "t" before each of the number ids and still not working. Is it possible that lines 120-122 are not being processed because there's an earlier problem in the js code which causes the browser to stop processing? I'm not sure if that's how it works...
korzo
@korzo
Aug 17 2017 19:27
@joshdaniell Ok, it's invalid for css, but valid for javascript.
Your problem is <div class="modal-backdrop fade show"></div> covering whole body
Usama Mahmood
@usamacjs
Aug 17 2017 19:29
hey everyone, i need some help
korzo
@korzo
Aug 17 2017 19:29
@joshdaniell so id="0" is hidden under it and you can't click it
Usama Mahmood
@usamacjs
Aug 17 2017 19:29
Screen Shot 2017-08-17 at 10.28.58 PM.png
Screen Shot 2017-08-17 at 10.28.42 PM.png
Screen Shot 2017-08-17 at 10.28.42 PM.png
i can not make this white space go away
i will be very thankful if anyone could help me out
Josh Daniell
@joshdaniell
Aug 17 2017 19:31
Thanks @korzo. Any tips on best way to clear so that the user can click on elements behind? I'm using hide() to remove that modal after the user has selected from 2 options. But it seems like that doesn't allow the other elements to be clicked. Is there an option to move the modal behind the other elements, or is there a more elegant solution that you're aware of?
CamperBot
@camperbot
Aug 17 2017 19:31
joshdaniell sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 387 | @korzo |http://www.freecodecamp.com/korzo
Usama Mahmood
@usamacjs
Aug 17 2017 19:33
can anyone please have a look at the pictures above
Liam Docherty
@ldocherty1
Aug 17 2017 19:37
Hi, is there a way to show a background picture on my webpage on for specific screen sizes?
korzo
@korzo
Aug 17 2017 19:39
@ldocherty1 Sure, with media queries
Gulsvi
@gulsvi
Aug 17 2017 19:40
@usamacjs There's no way for us to know for sure without a live version of your code to debug. My guess is that you have a nested container or something out of place with your container -> row -> column structure in your HTML.
Sometimes doing this with your CSS will help you find out if any elements are causing the page to be wider than it should:
* {
  border: 1px solid black;
}
Trommelochse
@Trommelochse
Aug 17 2017 19:41
@ldocherty1 for example, if you want the image to change when the screen width is smaller than 960px you can for
@media (max-width: 960px) {
  .yourClass { background-image: url('http://images.com/newImage.jpg');
}
Liam Docherty
@ldocherty1
Aug 17 2017 19:42
@korzo Is this what I'm after? I'm using bootstrap v4? https://v4-alpha.getbootstrap.com/layout/overview/
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}
Liam Docherty
@ldocherty1
Aug 17 2017 19:42
@Trommelochse Thanks, I'm using bootstrap v4 do I follow the above since they changed it?
CamperBot
@camperbot
Aug 17 2017 19:42
ldocherty1 sends brownie points to @trommelochse :sparkles: :thumbsup: :sparkles:
:cookie: 318 | @trommelochse |http://www.freecodecamp.com/trommelochse
Trommelochse
@Trommelochse
Aug 17 2017 19:43
@ldocherty1 yes, that's why people use bootstrap grid, it has these media queries buil into classes
I don't know a lot about Bootstrap 4
Liam Docherty
@ldocherty1
Aug 17 2017 19:43
@Trommelochse Thanks for the confirmation
CamperBot
@camperbot
Aug 17 2017 19:43
ldocherty1 sends brownie points to @trommelochse :sparkles: :thumbsup: :sparkles:
:warning: ldocherty1 already gave trommelochse points
Trommelochse
@Trommelochse
Aug 17 2017 19:43
@SkyC0der might be able to help
np
Gulsvi
@gulsvi
Aug 17 2017 19:44
@ldocherty1 This may give a better idea how to use media queries - but I just hard-coded the breakpoints in that bootstrap uses: https://codepen.io/skycoder/pen/rwbpem?editors=1100
korzo
@korzo
Aug 17 2017 19:45
@ldocherty1 If you know SASS, then yes. Otherwise use media queries
Gulsvi
@gulsvi
Aug 17 2017 19:45
576/768/992/1200
Andrew
@Koalaphant
Aug 17 2017 19:45
Hi, can I have some advice about my CSS?
Liam Docherty
@ldocherty1
Aug 17 2017 19:47
@SkyC0der @korzo @Trommelochse Much appreciated
iso
@iso1048
Aug 17 2017 19:47
@SkyC0der have you ever used the ionicons responsive grid?
Gulsvi
@gulsvi
Aug 17 2017 19:47
No, I haven't used ionicons before @gothamknight
Gulsvi
@gulsvi
Aug 17 2017 19:56
@usamacjs Your jumbotron has a 30px bottom margin that is creating that space. All of your content needs to be inside a container (or container-fluid for full width screen). Inside your container, you need a <div class="row"> and inside every row, you need columns.
iso
@iso1048
Aug 17 2017 20:12
@SkyC0der I was wanting to use their icons but i dont know how to load them. Do you think you'd be able to take a look at it?
Gulsvi
@gulsvi
Aug 17 2017 20:13
@gothamknight Here's an example of using them: https://codepen.io/skycoder/pen/GvyaRP?editors=1100
Just started playing around with them when you mentioned it earlier - the icons are separate from the framework / grid
Chris
@bestintown23
Aug 17 2017 20:14
is codepen moving slow for anyone, or does any one know how to resolve? my pen is loading slow and requires me to refresh the page sometimes to show my changes.
Sue
@coding-sue-true
Aug 17 2017 20:22
good evening everyone!
does anyone knows how does the function onclick works?
narmin-h
@narmin-h
Aug 17 2017 20:22
Hi guys, Can anyone help me to figure out why there is a gap between my header and div container elements? Here is my code
Sue
@coding-sue-true
Aug 17 2017 20:22
On click I want to direct to another ID on the same page
Gulsvi
@gulsvi
Aug 17 2017 20:24
@coding-sue-true You can use .scrollIntoView() on click to scroll to a specific element, but typically people just use the <a> tag - specify the ID of the element as the HREF value.
iso
@iso1048
Aug 17 2017 20:26
@SkyC0der you are the man. thanks. Could I ask where you found the .css url?
CamperBot
@camperbot
Aug 17 2017 20:26
gothamknight sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2428 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 17 2017 20:26
@narmin-h It's the margin on your #greeting-text-area
#greeting-text-area{
  padding: 3em;
  margin: 1em;  /* This is causing a 1em gap between your navbar and header */
  padding-top: 5%;
  padding-left: 25%
}
@gothamknight It's at the bottom of the page: http://ionicons.com/
I clicked the link to "CDN" at the top of the page to get there :)
Sue
@coding-sue-true
Aug 17 2017 20:27
@SkyC0der thanks a lot!
CamperBot
@camperbot
Aug 17 2017 20:27
coding-sue-true sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2429 | @skyc0der |http://www.freecodecamp.com/skyc0der
iso
@iso1048
Aug 17 2017 20:28
@SkyC0der oh true. I was looking at the icons on a different webpage
@SkyC0der what is a cdn? how does it differ to a url?
Gulsvi
@gulsvi
Aug 17 2017 20:30
@gothamknight A "CDN" is a content delivery network - they have servers around the globe that deliver the content so it's the same speed to access no matter where you're located
Taysha
@taariya
Aug 17 2017 20:32
Hey
Do you guys know if it's necessary to use codepen for the front-end projects?
I want to use react and redux but I don't like how codepen is set up at all. I would rather work in my own development environment on my computer and just link to a github repo or something
cowCrazy
@cowCrazy
Aug 17 2017 20:34
@taariya whatever you want as long as it is viewable
And anyhow developing on your local machine is better cause you can use git and other useful things
Taysha
@taariya
Aug 17 2017 20:37
@cowCrazy yeah, that's mostly why I can't stand using codepen. Plus I'm the type who likes to separate things into modules rather than having all the code grouped together. I guess I'll use github repos and make a github page or something for each project
@cowCrazy thanks
CamperBot
@camperbot
Aug 17 2017 20:37
taariya sends brownie points to @cowcrazy :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @cowcrazy |http://www.freecodecamp.com/cowcrazy
narmin-h
@narmin-h
Aug 17 2017 20:40
@SkyC0der Thanks a lot It resolved the issue for the full screen size, but there is still a gap when resizing a window
CamperBot
@camperbot
Aug 17 2017 20:40
narmin-h sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2430 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 17 2017 20:42
@narmin-h You could try using background-size: cover; on your #home div
To investigate why these gaps are showing up, it helps to right-click the gap and select "inspect" - your browser has developer tools that will help you identify what's going on
#home{
  background-image: url("https://cdn.pixabay.com/photo/2017/07/25/03/56/desk-2536874_1280.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 300px;
  background-position: 100% 100%;
  position: relative;
}
^^ Keep in mind that pixabay does not allow hotlinking - you will need to host the images somewhere to use them in your web page.
image.png
Miguel T Rivera
@mtrivera
Aug 17 2017 20:45
Anyone complete the simon game? Could use some help
narmin-h
@narmin-h
Aug 17 2017 20:47
@SkyC0der Thanks tons... background:cover fixed the gap for a smaller screen size )
CamperBot
@camperbot
Aug 17 2017 20:47
:warning: narmin-h already gave skyc0der points
narmin-h sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
narmin-h
@narmin-h
Aug 17 2017 20:48
@SkyC0der Thanks for info) Then can I use google photos to host pixabay images?
CamperBot
@camperbot
Aug 17 2017 20:48
narmin-h sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: narmin-h already gave skyc0der points
Gulsvi
@gulsvi
Aug 17 2017 20:49
@narmin-h Lots of people use PostImage: http://postimages.org/. Give them a URL and they'll give you a link you can use.
Upload by URL: http://postimages.org/web
narmin-h
@narmin-h
Aug 17 2017 20:51
@SkyC0der Cool... gonna use it
Colin
@finkbeca
Aug 17 2017 21:17
Has anyone messed around with z-index a lot? I feel like everytime I try using it it never works. Any tips
Sofus Heggemsens
@Sofeo
Aug 17 2017 21:26
hey can anyone help me with how to use the wikipedia API?
Gulsvi
@gulsvi
Aug 17 2017 21:28
@finkbeca If it isn't working, make sure the element is positioned. Z-index can't be used on elements with the default position: static. This walkthrough takes a while to read, but helped me understand z-index much better: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index
@Sofeo What's your question?
Sofus Heggemsens
@Sofeo
Aug 17 2017 21:29
i dont understand what link to use when i get the api
@SkyC0der
Gulsvi
@gulsvi
Aug 17 2017 21:33
@Sofeo Figuring out the URL to use is the main part of the challenge. There is a sandbox where you can see all the properties that are available and test them out + search to figure out what they mean: https://en.wikipedia.org/wiki/Special:ApiSandbox
A lot of people use the simple OpenSearch API Module: https://www.mediawiki.org/wiki/API:Opensearch
Sofus Heggemsens
@Sofeo
Aug 17 2017 21:34
oooh ok then im gonna try more :) @SkyC0der
Jorge
@OrangeKulture
Aug 17 2017 22:42
hey wazzup guys!
anyone around ?
iso
@iso1048
Aug 17 2017 22:43
@OrangeKulture hey bro
Jorge
@OrangeKulture
Aug 17 2017 22:43
hey hows it going @gothamknight .. all good in da hood? :joy:
iso
@iso1048
Aug 17 2017 22:43
yeah bro its going ok. yourself?
Jorge
@OrangeKulture
Aug 17 2017 22:44
was looking to get some feedback on one of my angular projects ... see if you guys liked the UI and what not
cant complain .. things going good :)
iso
@iso1048
Aug 17 2017 22:45
@OrangeKulture yeah ill take a look.
but im still a beginner so wont be able to give the best feedback
Jorge
@OrangeKulture
Aug 17 2017 22:47
nah its actually from a user point of view.. so as if u didnt know anything at all haha .. just the feel
i always go for high impact graphics
any how, here it is!
Angular Project
not sure if it's too heavy on the textures for the avg user ...
iso
@iso1048
Aug 17 2017 22:50
@OrangeKulture is the search supposed to work? Design is good. I prefer simple designs so yeah looks cool
Jorge
@OrangeKulture
Aug 17 2017 22:51
yeah of course .. thats the main thing
is it not working for you?
iso
@iso1048
Aug 17 2017 22:52
@OrangeKulture nah bro. when I press enter, nothing happens
Jorge
@OrangeKulture
Aug 17 2017 22:52
u are not supposed to press enter ..just start typing
BrianWilliams28
@BrianWilliams28
Aug 17 2017 22:53
why doesn't this work?
var toLowerCase = str.replace(/[A-Z]g/, '$&'.toLowerCase());
iso
@iso1048
Aug 17 2017 22:53
nothing happens
Jorge
@OrangeKulture
Aug 17 2017 22:53
can u check your console?
with f12
iso
@iso1048
Aug 17 2017 22:53
@OrangeKulture "Access-Control-Allow-Origin"
Jorge
@OrangeKulture
Aug 17 2017 22:53
ahh crap .. this sucks a lot
aRtoo
@artoodeeto
Aug 17 2017 22:54
i dont really understand how to get prime numbers but i got this.

function sumPrimes(num) {

  var primes = [];

  for(var i=2; i<=num; i++){
    if(num % i !== 0){
         primes.push(i);
    }
  }

  return primes;
}

sumPrimes(10);
Jorge
@OrangeKulture
Aug 17 2017 22:54
yeah u would have to donwload the CORS extension for chrome
ahh ok i know what it is ...
iso
@iso1048
Aug 17 2017 22:54
@OrangeKulture oh right.
Jorge
@OrangeKulture
Aug 17 2017 22:54
u are requesting the info with my token .. and since im from another country, it fails .. i guess
:S
@BrianWilliams28 u need to call .toLowerCase after the replace method, not inside it
@artoodeeto u would have to first check if the current iteration includes a prime number, if it does, then sum
Mike
@MikeJSchorah
Aug 17 2017 23:18
How do you shrink an image in GIMP so it uploads as being shrunk?
5millerk
@5millerk
Aug 17 2017 23:32
can anyone take a look at https://codepen.io/5millerk/full/vZQaOb/ and help me figure out why i get a scroll bar when i push my footer to the bottom? doesn't make sense to me why it gets pushed off the page...
Ken Haduch
@khaduch
Aug 17 2017 23:38
@5millerk - your wrapper has a min-height: 100%; which makes it take the full viewport, so the footer gets added to the bottom and extends below that.
5millerk
@5millerk
Aug 17 2017 23:38
but when i remove the min-height my footer jumps to the middle of the page :-(
@khaduch like, look no
w
@khaduch should i make it min-height 90% or something?
Jorge
@OrangeKulture
Aug 17 2017 23:44
i struggle a lot with footers .. its a pain
why not make it so that the position is always at bottom: 0
pisses me off ...
@5millerk ll have to use positioning rules to get it to stick to the bottom
iso
@iso1048
Aug 17 2017 23:45
@5millerk perhaps giving max-height: 100vh to the body is a starting point?
Ken Haduch
@khaduch
Aug 17 2017 23:46
@5millerk - this page looks like it has a solution for this problem...
Hanif Carroll
@HanifCarroll
Aug 17 2017 23:47
Quick React question...If I have a single page app on heroku and it's 404ing when I refresh on a route, is the only way to fix it to eject from create-react-app and change historyapifallback to true?
5millerk
@5millerk
Aug 17 2017 23:48
@khaduch so funny story, that's the solution I'm trying to use. but for some reason it gets pushed off the page, not just to the bottom
@khaduch I'm looking at http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page but it's the same solution
Janelle deMent
@janelledement
Aug 17 2017 23:49
Hey everyone, I'm kinda frying my brain on the weather app challenge (and haven't gotten far at all). So far, I'm just trying to gather a user's geolocation and use the coordinates in my getLocalWeather function to grab the info from the free code camp weather api. I know I must be doing a million things wrong but if anyone can point out why my approach is not working, I'd appreciate it a lot. https://codepen.io/janelledement/pen/KvdOVg?editors=0010
Ken Haduch
@khaduch
Aug 17 2017 23:50
@5millerk - I think that the footer is within the "container" on that page... They call it the #wrapper and the footer div is within that wrapper...
5millerk
@5millerk
Aug 17 2017 23:50
@khaduch right, so is mine?
Jorge
@OrangeKulture
Aug 17 2017 23:50
@janelledement try checking the console f12 on chrome when running the app and see if you get any errors
Ken Haduch
@khaduch
Aug 17 2017 23:51
@5millerk - I didn't think that it was? Maybe I'm just getting confused...
5millerk
@5millerk
Aug 17 2017 23:51
@khaduch https://codepen.io/5millerk/pen/vZQaOb looks like it is, unless i'm losing my mind (very possible) haha
@khaduch I mean, the solution 100% works, except it doesn't just push it to the bottom. It pushes it off the screen slightly
Janelle deMent
@janelledement
Aug 17 2017 23:53
CodePen_-_A_Pen_by_Janelle_de_Ment_🔊.png
@OrangeKulture That's my screenshot above...I'm not sure I get what this means.
@OrangeKulture do you happen to know what the "success" and/or "resolve" part means?
Jorge
@OrangeKulture
Aug 17 2017 23:56
yeah, one sec
cowCrazy
@cowCrazy
Aug 17 2017 23:57
image.png
@janelledement take a look, you are missing some data on the request