These are chat archives for FreeCodeCamp/HelpFrontEnd

9th
Feb 2018
Maxwell Krause
@maxwellsmart84
Feb 09 2018 00:01
hey does anyone know how I can get a font simliar to Menlo (which is OS specific to mac) to show on Windows? Does anyone know a CSS property I can use that will replace it if the OS is Windows?
Brad
@bradtaniguchi
Feb 09 2018 00:05
@maxwellsmart84 there's THIS hack:
well not hack, but "technique"
Maxwell Krause
@maxwellsmart84
Feb 09 2018 00:06
@bradtaniguchi so does that actually load that font then for windows users though?
or does it just scrape it from the oS?
cause styling with menlo works as my global font but when i load the page on my windows 10 machine its all times new roman
Brad
@bradtaniguchi
Feb 09 2018 00:07
@maxwellsmart84 Id believe the platform specific fonts are loaded if available, and if they aren't youd need to specify a fallback font. But this is just me guessing from the knowledge I have of web fonts
Maxwell Krause
@maxwellsmart84
Feb 09 2018 00:07
hmm- do you know how to do a fallback font?
Brad
@bradtaniguchi
Feb 09 2018 00:07
Otherwise you'd need to basically serve the mac OS font with your site
Maxwell Krause
@maxwellsmart84
Feb 09 2018 00:08
@bradtaniguchi thanks mang!
CamperBot
@camperbot
Feb 09 2018 00:08
maxwellsmart84 sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 361 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Brad
@bradtaniguchi
Feb 09 2018 00:08
Usually you declare a number of fonts (if your using some things that are questionably supported) with fallbacks
@maxwellsmart84 no problem :D
Tiago Correia
@tiagocorreiaalmeida
Feb 09 2018 00:08
@thomasingalls sorry for taking so long can you msg me a repo of a project of yours to see the code?
Maxwell Krause
@maxwellsmart84
Feb 09 2018 00:08
yeah it looks like you just comma separate them
Tiago Correia
@tiagocorreiaalmeida
Feb 09 2018 00:08
and big thanks
Gulsvi
@gulsvi
Feb 09 2018 00:26
@KUBIX90 fetch() has a cache control option like:
function getQuote() {
  fetch("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", {
    cache: "no-store" // no-cache is another option
  })
    .then(res => res.json())
    .then(generateQuote);
}
Thomas Ingalls
@thomasingalls
Feb 09 2018 00:26
@tiagocorreiaalmeida here's a codepen to illustrate the idea https://codepen.io/thomasingalls/pen/MQJXPP?editors=1010
Gulsvi
@gulsvi
Feb 09 2018 00:29
What caveat did you want to point out @thomasingalls ?
Thomas Ingalls
@thomasingalls
Feb 09 2018 00:30
generally speaking, ie11 compatibility
Gulsvi
@gulsvi
Feb 09 2018 00:30
Any time we use vanilla js, that's a caveat :)
Thomas Ingalls
@thomasingalls
Feb 09 2018 00:30
ie11 will require some kind of polyfill, ie11 ignores etags, ie11 behaves badly
very comprehensive article, that one. I refer back to it often
Gulsvi
@gulsvi
Feb 09 2018 00:31
That's where I learned about that option, initially before MDN had any data on fetch(), but yeah, I think 95% of the code we see here won't work in IE 11
Thomas Ingalls
@thomasingalls
Feb 09 2018 00:32
lol probably. can't wait until 2024
Gulsvi
@gulsvi
Feb 09 2018 00:32
I think it goes until 2025 uggh
Thomas Ingalls
@thomasingalls
Feb 09 2018 00:32
boooo
ssucoder
@ssucoder
Feb 09 2018 00:56
hey
zootechdrum
@zootechdrum
Feb 09 2018 02:47
hey guys back with a question lol
i am messing with a tutorial online
their code is wrong because it causes an annoying loop when it reaches game over> So I took it upon myself to fix it. The thing is I did fix it but am not exactly sure how it works .
Here is the code that i fixed
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
}
function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    }
}

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}
function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaddle();

    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }
    if(y + dy < ballRadius) {
        dy = -dy;
    }
    else if(y + dy > canvas.height-ballRadius) {
        if(x > paddleX && x < paddleX + paddleWidth) {
            dy = -dy;
        }
        else {
            y = -30;  //I entered this info and redirected the ball to anew location before //loading
            //alert("GAME OVER");
            document.location.reload();
        }
    }

    if(rightPressed && paddleX < canvas.width-paddleWidth) {
        paddleX += 7;
    }
    else if(leftPressed && paddleX > 0) {
        paddleX -= 7;
    }

    x += dx;
    y += dy;
}

setInterval(draw, 10);
Here is the original code
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
}
function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    }
}

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}
function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaddle();

    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }
    if(y + dy < ballRadius) {
        dy = -dy;
    }
    else if(y + dy > canvas.height-ballRadius) {
        if(x > paddleX && x < paddleX + paddleWidth) {
            dy = -dy;
        }
        else {
            //alert("GAME OVER"); // the annoying loop i had to comment out 
            document.location.reload();
        }
    }

    if(rightPressed && paddleX < canvas.width-paddleWidth) {
        paddleX += 7;
    }
    else if(leftPressed && paddleX > 0) {
        paddleX -= 7;
    }

    x += dx;
    y += dy;
}

setInterval(draw, 10);
zootechdrum
@zootechdrum
Feb 09 2018 02:53
My question is when I set y to a set number like -50. The ball starts from the ground and moves up. shouldn't it start from the top somewhere. And why does this stop the annoying loop to begin with.
Tom
@moT01
Feb 09 2018 02:55
var y = canvas.height-30;
so it starts at the bottom
zootechdrum
@zootechdrum
Feb 09 2018 02:56
@moT01 okay so the height it 290 if i set y to -30 isnt that above the top of the canvas
Tom
@moT01
Feb 09 2018 02:57
y = 0 would be the top of the canvas
y = 290 is the bottom
so no
zootechdrum
@zootechdrum
Feb 09 2018 02:58
okay so in essence 290 -30
Tom
@moT01
Feb 09 2018 02:58
right
zootechdrum
@zootechdrum
Feb 09 2018 02:59
i just figured it would reposition it to the very top of the canvas
I thought that because I am setting y again to a new variable and not subtracting from the first y variable
i meant to a new number
Tom
@moT01
Feb 09 2018 03:03
you mean where you wrote that code
y = -30
zootechdrum
@zootechdrum
Feb 09 2018 03:03
yeah
Tom
@moT01
Feb 09 2018 03:03
well, i suppose that it should
but then you reload the document?
and it gets reset
zootechdrum
@zootechdrum
Feb 09 2018 03:06
@moT01 right, once it gets reset though the ball goes from the bottom up and not the other way around. Before I hardcoded the second y it went top down.
i had to implement the second y because before hand the ball would just sink further into the bottom of the screen. Because the ball would always pass the limit of the bottom boarder the alert message would not go away
Tom
@moT01
Feb 09 2018 03:09
i put the code in a pen
i see the ball starting at the bottom for both
it goes up to the top right - bounces off the walls and back to the bottom
and stops
and in your modified version the ball disappears at the end (goes above the canvas i suppose)
zootechdrum
@zootechdrum
Feb 09 2018 03:11
okay, you are 100% right. Any idea why document.reload() function works that way but get stuck in a loop the other way?
after you try and close the alert message the ball slowly disappears in the bottom of the canvas . You have to keep clicking okay about 100X times before the actual page reloads
if ever
Tom
@moT01
Feb 09 2018 03:15
i dunno - im not having any problems
try another browser
zootechdrum
@zootechdrum
Feb 09 2018 03:16
which browser are you using?
Tom
@moT01
Feb 09 2018 03:16
firefox
58
zootechdrum
@zootechdrum
Feb 09 2018 03:17
seems to happen less on safari
let me try firefox.
Damn it works perfect in firefox
interesting
something else to look into
thanks for you help @moT01
CamperBot
@camperbot
Feb 09 2018 03:21
zootechdrum sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 979 | @mot01 |http://www.freecodecamp.org/mot01
Tom
@moT01
Feb 09 2018 03:23
979
Saboor Malik
@ProgrammingForFun01
Feb 09 2018 04:52
1000-979= 21 cookies left
DMsalati
@DMsalati
Feb 09 2018 06:01

can someone tell me why my code isnt working?
the one with

          $("#test").html(fah);
        });

even tho all my variables are global
https://codepen.io/Muradmsalati/pen/wyzYar?editors=1010

Irina Brennen
@iabrenne
Feb 09 2018 06:04
@DMsalati - what are you expecting to see in the #test element?
appears that fah var is blank
oh I think I understand your question
Ken Haduch
@khaduch
Feb 09 2018 06:09
@DMsalati - your code to set that #test element is outside of the callback function that is getting the temperature values, so it is blank when you run it. Move it inside the callback function block and you should see something if your code is correct. Your variables are global, but you cannot use the value until after the return, and that code $("#test").html(fah); executes immediately. Move it inside the callback (where the json variable is available) and you'll see the result.
Warren Schrader
@wwSchrader
Feb 09 2018 06:13
@DMsalati getJson is an aysnc operation. So while the program is waiting for your weather data, it'll process the #test without any data.
shivam gupta
@shivamg11000
Feb 09 2018 06:25
can anyone explain how this navbar is working in pure css only without no javascript
https://codepen.io/shivamg11000/pen/vdgxJb?editors=0100
Thomas Ingalls
@thomasingalls
Feb 09 2018 06:25
open/closed state is controlled by a checkbox being checked or not
this is known as the 'checkbox hack'
can be convenient, but there are limitations to the technique
shivam gupta
@shivamg11000
Feb 09 2018 06:26
I can't see the checkbox in the UI page
Its disabled
with display: none;
Thomas Ingalls
@thomasingalls
Feb 09 2018 06:27
you can see the label for the checkbox
a label can also act as a target for an input
shivam gupta
@shivamg11000
Feb 09 2018 06:27
yes
what?
label
Thomas Ingalls
@thomasingalls
Feb 09 2018 06:27
so you click the label, the checkbox gets checked
or unchecked
shivam gupta
@shivamg11000
Feb 09 2018 06:28
so you are saying the label is checked instead of input[type="checkbox"]
Thomas Ingalls
@thomasingalls
Feb 09 2018 06:28
if you remove the checkbox from the html, the menu should stop working
the invisible checkbox is required
but the label can respond to clicks for the checkbox
shivam gupta
@shivamg11000
Feb 09 2018 06:29
that's a great hack
Thomas Ingalls
@thomasingalls
Feb 09 2018 06:30
for a good user experience, js is still helpful
but yeah
the checkbox hack and its variants can be used for many things
shivam gupta
@shivamg11000
Feb 09 2018 06:31
like
shivam gupta
@shivamg11000
Feb 09 2018 06:34
thnx
Thomas Ingalls
@thomasingalls
Feb 09 2018 06:34
Raghav Mundra
@Raghav17
Feb 09 2018 06:54
var tdata = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];


function getChannelInf(){
  tdata.forEach(function(chanl){
    var url = "https://wind-bow.glitch.me/twitch-api/streams/" + chanl;
    $.getJSON(url),function(data){
      if (data.stream === null){
        status = offline;
        $.getJSON("https://wind-bow.glitch.me/twitch-api/channels/"+ chanl ,function(chanData){
         var dname= chanData.display_name;
          var logo = chanData.logo;
            $("#twitch").html(dname);
        });
      }
     else{
       var content = data.channel.status;
      var logo = data.channel.logo;
        var dname = data.channel.display_name;
         $("#twitch").html(content);
       }
    }
  });

  };
Can you please tell me why this code isn't working.
Markus Kiili
@Masd925
Feb 09 2018 06:57
@Raghav17 Are you calling the getChannelInf function somewhere?
Looks like a syntax error here $.getJSON(url),function(data){
Raghav Mundra
@Raghav17
Feb 09 2018 06:59
@Masd925 No, Where should I call it so that it runs automatically?
Markus Kiili
@Masd925
Feb 09 2018 07:00
You can just call it inside the $(function(){...}) where you have all the code.
Then it is called when the page is ready.
Raghav Mundra
@Raghav17
Feb 09 2018 07:02
@Masd925 Can you please tell me what is the syntax error?]
It seems alright to me.
Markus Kiili
@Masd925
Feb 09 2018 07:03
@Raghav17 Should it be $.getJSON(url,function(data){...})
Callback function was not inside getJSON parens.
Raghav Mundra
@Raghav17
Feb 09 2018 07:03
@Masd925 Ohh yes. Thanks.
CamperBot
@camperbot
Feb 09 2018 07:03
raghav17 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4690 | @masd925 |http://www.freecodecamp.org/masd925
Raghav Mundra
@Raghav17
Feb 09 2018 07:04
@Masd925 Also, should I call getCHannelInf() in document.ready for it to run automatically?
Markus Kiili
@Masd925
Feb 09 2018 07:05
@Raghav17 Usually you place all the jQuery code inside such ready callback so it runs after the dom is ready. If you call that function there, it runs once the html is processed and the page is ready.
Raghav Mundra
@Raghav17
Feb 09 2018 07:06
@Masd925 Ohh, alright. Thanks. :)
CamperBot
@camperbot
Feb 09 2018 07:06
raghav17 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
api offline
Markus Kiili
@Masd925
Feb 09 2018 07:07
@Raghav17 If you don't use such ready callback, a code such as $("#twitch").html(content); might not work because the element with id might not exist yet.
Raghav Mundra
@Raghav17
Feb 09 2018 07:13
@Masd925 Yeah, sounds correct. Thanks again.
CamperBot
@camperbot
Feb 09 2018 07:13
raghav17 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
api offline
Raghav Mundra
@Raghav17
Feb 09 2018 07:22
@Masd925 Hey, I made the changes and still there are some errors showing in the console window.
Markus Kiili
@Masd925
Feb 09 2018 07:23
@Raghav17 Try putting some console.log's there so you see whether those callback functions are executed and parameters have values.
DMsalati
@DMsalati
Feb 09 2018 08:09
guys home come my click is not working ?https://codepen.io/Muradmsalati/pen/wyzYar
Marianissimus
@Marianissimus
Feb 09 2018 08:18
@DMsalati on temp click you get: tempSwap is not defined
define it somewhere else, even as// let tempSwap;
that's it, then it works, just tried it
Marianissimus
@Marianissimus
Feb 09 2018 08:24
also, your logic doesnt quite work; it should be something like: if tempSwap is true, make it false; if it is false, make it true;
Aman Kumayu
@aman-kumayu
Feb 09 2018 08:24
hello guys
anyone need any help ?
DMsalati
@DMsalati
Feb 09 2018 08:27
@Marianissimus ok thank you so much
CamperBot
@camperbot
Feb 09 2018 08:27
dmsalati sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 461 | @marianissimus |http://www.freecodecamp.org/marianissimus
Marianissimus
@Marianissimus
Feb 09 2018 08:28
you're welcome @DMsalati
Heathercoraje
@Heathercoraje
Feb 09 2018 08:42
Good afternoon friends
I am wondering how I can type minus sign instead of hypen (-)
Dany Din
@danydin
Feb 09 2018 08:46
how to make a link directly to a title on my site i guess it's with a href=.. but can someone give me the exact code thanks :) @Marianissimus
@Heathercoraje why don't you want a minus sign
Heathercoraje
@Heathercoraje
Feb 09 2018 08:48
I am building a calculator. I googled it and it says ALT+8212
I am not sure what does this mean
Claudio Restifo
@Marmiz
Feb 09 2018 08:49
@Heathercoraje if you type &minus; the browser will display the minus signn
Marianissimus
@Marianissimus
Feb 09 2018 08:50
@danydin u can make a link to an id, so href="#myId";
Dany Din
@danydin
Feb 09 2018 08:51
perfect and then what to use as the url? mysite.com/##? @Marianissimus
hey guys can someone help me make the cloud box equal to the box to the right?
I have trouble formulation my question on google
I think it's a pretty simple solution
Dmytro Holysh
@dmk1111
Feb 09 2018 08:54
@iangracia it is new pen
CamperBot
@camperbot
Feb 09 2018 08:54
dmk1111 sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 383 | @iangracia |http://www.freecodecamp.org/iangracia
sorry :) here it is
@dmk1111
Dmytro Holysh
@dmk1111
Feb 09 2018 08:57
@iangracia I guess this should help:
body {
    display: flex;
}
CamperBot
@camperbot
Feb 09 2018 08:57
dmk1111 sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
api offline
Dmytro Holysh
@dmk1111
Feb 09 2018 08:57
@camperbot broken?
Ian Gracia
@iangracia
Feb 09 2018 08:57
its because of my last name
i will try it
It worked, really helpful. Thanks @dmk1111 will read up on the solution
CamperBot
@camperbot
Feb 09 2018 08:58
iangracia sends brownie points to @dmk1111 :sparkles: :thumbsup: :sparkles:
:cookie: 289 | @dmk1111 |http://www.freecodecamp.org/dmk1111
Dmytro Holysh
@dmk1111
Feb 09 2018 08:59
@iangracia here you can read more about flexboxes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
and you could try to use css grid as well
Dany Din
@danydin
Feb 09 2018 09:00
@Marianissimus figured it thanks it just the url page and rightafter without space #... :)
CamperBot
@camperbot
Feb 09 2018 09:00
danydin sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 462 | @marianissimus |http://www.freecodecamp.org/marianissimus
Aman Kumayu
@aman-kumayu
Feb 09 2018 09:01
anyone need any help ?
Heathercoraje
@Heathercoraje
Feb 09 2018 09:02
@Marmiz Thank you!
CamperBot
@camperbot
Feb 09 2018 09:02
heathercoraje sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1151 | @marmiz |http://www.freecodecamp.org/marmiz
Raghav Mundra
@Raghav17
Feb 09 2018 09:39
Thanks @aman-kumayu for helping. You are a savior. :)
CamperBot
@camperbot
Feb 09 2018 09:39
raghav17 sends brownie points to @aman-kumayu :sparkles: :thumbsup: :sparkles:
:cookie: 341 | @aman-kumayu |http://www.freecodecamp.org/aman-kumayu
Aman Kumayu
@aman-kumayu
Feb 09 2018 09:39
@Raghav17 thanks
CamperBot
@camperbot
Feb 09 2018 09:39
aman-kumayu sends brownie points to @raghav17 :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @raghav17 |http://www.freecodecamp.org/raghav17
Raghav Mundra
@Raghav17
Feb 09 2018 10:05
Hey,
My else block is not working. Can anyone please help me.
$(document ).ready(function() {
var tdata = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

getChannelInf();

function getChannelInf(){
  tdata.forEach(function(chanl){
    var url = "https://wind-bow.glitch.me/twitch-api/streams/" + chanl;
    $.getJSON(url,function(data){

      if (data.stream === null){
        status = "offline";
        $.getJSON("https://wind-bow.glitch.me/twitch-api/channels/"+ chanl ,function(chanData){
         console.log("data",chanData);
          var dname= chanData.display_name;
          var logo = chanData.logo;
            $("#twitch").append(dname);
        });
      }
     else if(data.stream.stream_type ===live){
       var content = data.channel.status;
      var logo = data.channel.logo;
        var dname = data.channel.display_name;
         $("#twitch").append(dname);
       }
    });
  });

  };
});
abraham anak agung
@padunk
Feb 09 2018 10:07
@Raghav17 why don't just use else without any if
Raghav Mundra
@Raghav17
Feb 09 2018 10:08
@padunk I tried it, still it isn't working.
yogiwhocodes
@yogiwhocodes
Feb 09 2018 10:13
Hi, I'm trying to get the geolocation for my weatherApp project and I can't figure out why this basic first step is not working. :( am I missing something? This is my codepen https://codepen.io/yogiwhocodes/pen/YYBJGR
Raghav Mundra
@Raghav17
Feb 09 2018 10:20
@yogiwhocodes Where are you calling your GeoFindMe() function?
abraham anak agung
@padunk
Feb 09 2018 10:20
@Raghav17 You name it wrong. try console.log data after your else.
Raghav Mundra
@Raghav17
Feb 09 2018 10:23
@padunk Sorry, I used console.log only for testing. Here's the code.
$(document ).ready(function() {
var tdata = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

getChannelInf();

function getChannelInf(){
  tdata.forEach(function(chanl){
    var url = "https://wind-bow.glitch.me/twitch-api/streams/" + chanl;
    $.getJSON(url,function(data){

      if (data.stream === null){
        status = "offline";
        $.getJSON("https://wind-bow.glitch.me/twitch-api/channels/"+ chanl ,function(chanData){
         var dname= chanData.display_name;
          var logo = chanData.logo;
            $("#twitch").append(dname);
        });
      }
     else {
       var content = data.channel.status;
      var logo = data.channel.logo;
        var dname = data.channel.display_name;
         $("#twitch").append(dname);
       }
    });
  });

  };
});
abraham anak agung
@padunk
Feb 09 2018 10:24
@Raghav17
     else {
       console.log(data._links);
       var content = data.channel.status; //there is no data.channel
      var logo = data.channel.logo;
        var dname = data.channel.display_name;
         $("#twitch").append(dname);
       }
yogiwhocodes
@yogiwhocodes
Feb 09 2018 10:25
@Raghav17 in the HTML on button click
Jack Lyons
@JackEdwardLyons
Feb 09 2018 10:26
hey guys i have a probably simple question about map and foreach
im wondering why my forEach loop returns undefined
Markus Kiili
@Masd925
Feb 09 2018 10:28
@JackEdwardLyons forEach always returns undefined.
It is used to cause side-effects.
Jack Lyons
@JackEdwardLyons
Feb 09 2018 10:29
weird
hmm i just wanna return my data now.. whats the best approach? @Masd925
Markus Kiili
@Masd925
Feb 09 2018 10:30
@JackEdwardLyons Returning from forEach callback is redundant because it does nothing.
You could use another iterator like reduce, or use a result object that you mutate inside forEach callback.
Jack Lyons
@JackEdwardLyons
Feb 09 2018 10:32
yeah i was thinking reduce..
ill try that
thanks
hensn5250
@hensn5250
Feb 09 2018 10:41
This message was deleted
This message was deleted
As @Masd925 said forEach returns undefined as its return value
Ian Gracia
@iangracia
Feb 09 2018 10:58
@dmk1111 are you there?
Stephen James
@sjames1958gm
Feb 09 2018 10:58
@JackEdwardLyons Here is how I think about it.
if I have an array (or array like value)
  • and I want an new array where each value is converted from the original array think map
  • and I want only specific values from that array think 'filter'
  • and I want a new object/value from the array contents think 'reduce'
can anyone help me get the right box to be equal to the height of the left one?
Using flexbox
or tell me what i am doing wrong..
Samuel
@emmasamuel
Feb 09 2018 11:31
@gulsvi please sir I couldn't copy the link a site you told me I could use for pictures resources
what is the link again @gulsvi
krckyboy
@krckyboy
Feb 09 2018 11:36

How could I make it so that CHARACTERISTICS and DATEPICKER share half of the div on bigger screens and for smaller ones to each of them have full width of the container?

https://codepen.io/krcky/pen/KQWKdG

Stephen James
@sjames1958gm
Feb 09 2018 11:40
@krckyboy have you tried adding col-sm-12 ?
krckyboy
@krckyboy
Feb 09 2018 11:42
@sjames1958gm They do behave normally on smaller ones, but for the bigger screens, the DATEPICKER goes below the first two divs, and I don't want that. I want it to share the space of the right side of the container, basically - the CHARACTERISTICS to take the upper part of the div, and DATEPICKER to take the lower part of the div, but to stay in the line of the PICTURE.
Stephen James
@sjames1958gm
Feb 09 2018 11:43
@krckyboy Ah.
@krckyboy You'll probably need to put those into another div (create another container for those with its own columns
Randy
@RandyGoldsmith
Feb 09 2018 11:45
@sjames1958gm how often is flexbox used now compared to floats now?
krckyboy
@krckyboy
Feb 09 2018 11:45
@sjames1958gm That's what I thought, but then I wouldn't be able to have each of the 3 divs taking 12 columns, right?
Teo
@Teo03
Feb 09 2018 11:45

I want to make an edit button that shows the previous input but when I try to run it I get this error Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. Here is my code:

import React from 'react';
import { Collapse, Button, CardBody, Card } from 'reactstrap';

export class ShowRecipes extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            collapse: -1
        }
        this.edit = this.edit.bind(this);
    }
    componentWillUpdate(nextProps, nextState){
        localStorage.setItem('updated', JSON.stringify(nextProps.recipes))
    }

    edit(name, inst){
        document.getElementsByClassName('recipe-name').innerHTML = name;
        document.getElementsByClassName('input-2').innerHTML = inst;
        this.props.toggle();
    }

    render() {
        var recipeList = this.props.recipes.map(function (recipeInfo, index) {
            return (
        <div className="recipe-list" key={index}>
        <div className="recipe" id={'recipe-' + index} onClick={() => this.setState({ collapse: index })}>
        <h1>{recipeInfo.title}</h1>
            <Collapse isOpen={this.state.collapse === index}>
                <Card>
                    <CardBody>
                        {recipeInfo.instructions}
                    </CardBody>
                    <div className="col-lg-6">
                        <div className="col-sm-12">
                        <Button color="secondary" className='col-sm-4' onClick={() => index = -1}>Cancel</Button>
                        <Button color='info' className='col-sm-4' onClick={this.edit(recipeInfo.title, recipeInfo.instructions)}>Edit</Button>
                        <Button color="danger" className='col-sm-4' onClick={() => this.props.recipes.splice(index, 1)}>Delete</Button>
                        </div>
                    </div>
                </Card>
            </Collapse>
            </div>
        </div>
            );
        }, this);
        return recipeList;
    }
}

And the other component:

import React from 'react';
import {Button, Modal, ModalHeader, ModalBody, ModalFooter, Input} from 'reactstrap';
import {ShowRecipes} from './ShowRecipes';

export class AddRecipe extends React.Component {
    constructor(){
        super();
        this.state = {
            updated: [],
            show: false
        }
        this.toggle = this.toggle.bind(this);
        this.addInstructions = this.addInstructions.bind(this);
    }

    toggle() {
        this.setState({
        show: !this.state.show
        });
    }

    addInstructions(){
        var name = $(".recipe-name").val();
        var instructions = $(".input-2").val();

        if(name === ''){
            alert('Please enter a name.');
            this.setState({
                show: true
            });

        } else {
            this.state.updated.push({title: name, instructions: instructions});
            this.setState({
                show: false
            });
        }
    }

    render(){
        return (
        <div>
            <Button color="info" onClick={this.toggle}>Add Recipe</Button>
            <Modal isOpen={this.state.show} toggle={this.toggle}>
                <ModalHeader toggle={this.toggle}>Add a new recipe</ModalHeader>
                <ModalBody>
                    <h3>Name</h3>
                    <Input placeholder="Enter a new name" className="recipe-name"/>
                    <h3 className="instructions">Instructions</h3>
                    <textarea cols="30" rows="7" className="input-2"></textarea>
</ModalBody>
                <ModalFooter>
                    <Button color="primary" onClick={this.addInstructions}>Add</Button>
                    <Button color="secondary" onClick={this.toggle}>Cancel</Button>
                </ModalFooter>
            </Modal>
            <ShowRecipes recipes={this.state.updated} toggle={this.toggle} />
        <div
Stephen James
@sjames1958gm
Feb 09 2018 11:46
@krckyboy You create another container which has its own 12 columns inside that container.
@RandyGoldsmith I don't know. Not even sure how one would know that
Randy
@RandyGoldsmith
Feb 09 2018 11:47
@sjames1958gm true, just wondering if i should start building navbars with it or keep using floats or just do both. guess in the real world depends on the clients
Stephen James
@sjames1958gm
Feb 09 2018 11:48
@RandyGoldsmith Yeah, also depends on the target browsers . . .
Randy
@RandyGoldsmith
Feb 09 2018 11:49
@sjames1958gm what a pain..might as well just learn floats so it works in all browsers
Stephen James
@sjames1958gm
Feb 09 2018 11:49
@RandyGoldsmith Yeah, for now :(
@Teo03 I don't know if this is your problem but don't do this
this.state.updated.push({title: name, instructions: instructions});
never mutate the state object
@Teo03 this.edit(recipeInfo.title, recipeInfo.instructions) you are calling this function during rendering not during onclick
Teo
@Teo03
Feb 09 2018 11:52
@sjames1958gm I called it that way because I needed recipeInfo inside map()
@sjames1958gm Is there other way to do that?
Stephen James
@sjames1958gm
Feb 09 2018 11:54
@Teo03 onClick is expecting to get a function not undefined
You shouldn't access the DOM directly in React components
Teo
@Teo03
Feb 09 2018 11:56
@sjames1958gm Ok, how should I fix this?
Stephen James
@sjames1958gm
Feb 09 2018 12:00
@Teo03 to be honest not sure what you are trying to do there, what is this.props.toggle()
Shouldn't this be
onClick={() => this.edit(recipeInfo.title, recipeInfo.instructions)}
Teo
@Teo03
Feb 09 2018 12:01
@sjames1958gm this.props.toggle() is for showing the Modal for the input
Stephen James
@sjames1958gm
Feb 09 2018 12:02
@Teo03 Could you pass the name/inst to the toggle function?
this.props.toggle(name, inst)
Teo
@Teo03
Feb 09 2018 12:04
@sjames1958gm No, it's just for toggling between on and off
@sjames1958gm Here is my full code: https://github.com/Teo03/recipe_box
Stephen James
@sjames1958gm
Feb 09 2018 12:08
@Teo03 IMO you should pass those values up to the parent component so it can put them into the modal when it shows it.
But I think the error you showed is because you are missing () => in that onClick property
Teo
@Teo03
Feb 09 2018 12:10
Can I call more functions in the onclick like this:
onClick={() => this.edit(recipeInfo.title, recipeInfo.instructions), this.props.toggle }
abraham anak agung
@padunk
Feb 09 2018 12:10
@Teo03 your addrecipe need props in the constructor and super
And use setstate to chang this.updated
Ian Gracia
@iangracia
Feb 09 2018 12:12
can anyone help me get the right box height to be equal to the height of the left one?
Using flexbox
or tell me what i am doing wrong..
https://codepen.io/iangracia/pen/MQbJgN?editors=1100
Stephen James
@sjames1958gm
Feb 09 2018 12:12
@Teo03 Yes
Teo
@Teo03
Feb 09 2018 12:13
@sjames1958gm Still doesen't work . The input is still empty
Ancusor
@ancusor
Feb 09 2018 12:16
Hi there,I want to replace 16 GIF images from a website and replace it with one CSS SPRITE PNG,to have fewer requests.I made it work,but when CSS swap/alternate 2 images like GIF, it sees the other images when scrolls. I want to hide the scroll effect like a GIF,1 sec img1 & 1 sec img2 like a real GIF. Here my project https://codepen.io/ancusor/pen/oEZgXo
Ian Gracia
@iangracia
Feb 09 2018 12:18
Someone pls help me
Nate Mallison
@NJM8
Feb 09 2018 12:20
@iangracia do you want them to be the same size or to line up at the top?
CamperBot
@camperbot
Feb 09 2018 12:20
njm8 sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 384 | @iangracia |http://www.freecodecamp.org/iangracia
Ancusor
@ancusor
Feb 09 2018 12:20
@iangracia explain better
Nate Mallison
@NJM8
Feb 09 2018 12:20
huh, that doesn't say thanks. lol
Ian Gracia
@iangracia
Feb 09 2018 12:20
Ok wait ill change the pen a bit so it becomes clearer 1 sec
Ancusor
@ancusor
Feb 09 2018 12:20
@iangracia ok
CamperBot
@camperbot
Feb 09 2018 12:20
ancusor sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 385 | @iangracia |http://www.freecodecamp.org/iangracia
Ian Gracia
@iangracia
Feb 09 2018 12:23
Ok here, https://codepen.io/iangracia/pen/MQbJgN?editors=1100, @ancusor @NJM8
I would like help to resize the red box so it matches the green box height
CamperBot
@camperbot
Feb 09 2018 12:23
iangracia sends brownie points to @ancusor and @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 136 | @ancusor |http://www.freecodecamp.org/ancusor
:cookie: 303 | @njm8 |http://www.freecodecamp.org/njm8
Ian Gracia
@iangracia
Feb 09 2018 12:23
with flexbox
Ancusor
@ancusor
Feb 09 2018 12:23
@iangracia ok I will see now
CamperBot
@camperbot
Feb 09 2018 12:23
ancusor sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
api offline
Ancusor
@ancusor
Feb 09 2018 12:29
@iangracia don't worry I am working on it
CamperBot
@camperbot
Feb 09 2018 12:29
ancusor sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
api offline
Ian Gracia
@iangracia
Feb 09 2018 12:29
@ancusor thanks bro
Nate Mallison
@NJM8
Feb 09 2018 12:30
@ancusor try this:
background:url('http://www.tecniciassociaticivitavecchia.com/images/css_sprites.png') -1274px -10px ;
  width:200px;
  height:200px;
  margin-left:240px;
  animation:css_gif_sprite 2.5s steps(4) infinite;
  font-size:30px;
 }
@keyframes css_gif_sprite{
100% {
background-position: -4784px -10px;
opacity:1;
}
}
So rather then stepping through the animation with the keyframes this will specifiy a step over time, each step at 2.5s in this case
abraham anak agung
@padunk
Feb 09 2018 12:31
And u need to call this.update() on component DidMount
Ancusor
@ancusor
Feb 09 2018 12:32
@NJM8 I know this,but it show the wrong image sprite.I want to show both coffee sprites from css_sprites.png
Nate Mallison
@NJM8
Feb 09 2018 12:33
@iangracia You would still just add a height property in the css I think
CamperBot
@camperbot
Feb 09 2018 12:33
njm8 sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
api offline
Ancusor
@ancusor
Feb 09 2018 12:34
@NJM8 I addes it,but I think it reads the wrong width height because it starts from begin and not from the image that I say
Nate Mallison
@NJM8
Feb 09 2018 12:34
Oh you don't want the non-coffee images to show?
Ancusor
@ancusor
Feb 09 2018 12:35
Jack Lyons
@JackEdwardLyons
Feb 09 2018 12:45
awesome, that helps thanks @sjames1958gm
CamperBot
@camperbot
Feb 09 2018 12:45
jackedwardlyons sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8954 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Nate Mallison
@NJM8
Feb 09 2018 12:46
@ancusor I think you will have a hard time animating the full sprite to only show certain images. Try this tool to convert that gif to a sprite, then upload to an img hosting service to load it. https://ezgif.com/
actually it looks like you can use the url for that gif right in your keyframe and play around with the timing and movement to get it to show correctly
Simon Cordova
@gbsimon87
Feb 09 2018 12:50
Hey there, good afternoon :)
Ancusor
@ancusor
Feb 09 2018 13:07
@NJM8 Yes,but on my site I have 16 GIF images, and I want to put it all to a css sprite png,to have only 1 request instead of 16
ehutchllew
@ehutchllew
Feb 09 2018 13:21
@ancusor If you want to reduce the requests you make via combining those images, that's not something you do on the client side.
Ancusor
@ancusor
Feb 09 2018 13:21
@ehutchllew I saw that If I remove all 16 GIF IMG request is 0,when enable GIFs requests is 16
Stephen James
@sjames1958gm
Feb 09 2018 13:23
@JackEdwardLyons :+1:
@Teo03 Did you make progress - I had to leave for work
Ancusor
@ancusor
Feb 09 2018 13:29
@iangracia you can create another input[type="text"] to have the same submit width
CamperBot
@camperbot
Feb 09 2018 13:29
ancusor sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 386 | @iangracia |http://www.freecodecamp.org/iangracia
Ancusor
@ancusor
Feb 09 2018 13:30
like this input[type="text"],input[type="submit" or single
@iangracia input[type="text"]{
width:20%
}
CamperBot
@camperbot
Feb 09 2018 13:31
ancusor sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
api offline
Mihai Ionuț Verniceanu
@ferdyonline
Feb 09 2018 13:35
Hello, is anyone here experienced with UnderStrap (WordPress + Bootstrap framework)? I am having a few issues when implementing a search bar into the main navigation menu.
Ancusor
@ancusor
Feb 09 2018 13:35
@ferdyonline Prea greu pentru incepatori ;)
ehutchllew
@ehutchllew
Feb 09 2018 13:46
@ancusor can you link your codepen again?
actually wait
i'll find it
@ancusor so are you trying to make the png behave like that gif?
hensn5250
@hensn5250
Feb 09 2018 14:12
hello
Stephen James
@sjames1958gm
Feb 09 2018 14:12
@hensn5250 Hello
hensn5250
@hensn5250
Feb 09 2018 14:13
hey @sjames1958gm
I have a question, are Nodelist iteratable with for...of ?
krckyboy
@krckyboy
Feb 09 2018 14:19

@sjames1958gm Could you please take a look? The image is okay, but the containerKarakteristike and containerKalendar aren't sharing the bottom part. Thank you. :)

https://codepen.io/krcky/pen/KQWKdG

CamperBot
@camperbot
Feb 09 2018 14:19
krckyboy sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8956 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
krckyboy
@krckyboy
Feb 09 2018 14:20
@krckyboy The small screen is okay, for example. But once it passes it, it won't do what I expect it.
Stephen James
@sjames1958gm
Feb 09 2018 14:20
@krckyboy missing class="row" in that second container
Need a <div class="row"> between class="container" and class="col- . . "
krckyboy
@krckyboy
Feb 09 2018 14:22
@sjames1958gm That solves one problem. Lemme just show you what happens next.
Stephen James
@sjames1958gm
Feb 09 2018 14:23
@krckyboy step by step :)
krckyboy
@krckyboy
Feb 09 2018 14:24

@sjames1958gm https://codepen.io/krcky/pen/KQWKdG

Now those two divs aren't aligned good at all. :D I wonder what makes that.

hensn5250
@hensn5250
Feb 09 2018 14:25
what do you want them to do?
Stephen James
@sjames1958gm
Feb 09 2018 14:25
@krckyboy Use the devtools inspector - the right one has extra margin - using the inspector find where the margin is coming from
@krckyboy If you use the inspector you get two panes, one the elements and one the styles, if you scroll to the bottom
of the styles pane it shows the box model for the element - margin, padding, content size.
hensn5250
@hensn5250
Feb 09 2018 14:29
@krckyboy check your CSS for misspelled words
#karakteristike h3 {
    margin-bottom: 2em;
  color: red;   /*used to check if style is working*/
}
/*change to */

#containerKarakteristike h3 {
    margin-bottom: 2em;
  color: red;
}
Stephen James
@sjames1958gm
Feb 09 2018 14:36
@krckyboy is karakteristike a class or an id - you are referencing as an id with #
krckyboy
@krckyboy
Feb 09 2018 14:38
@sjames1958gm I think I used it as ID, but then I changed the ID to containerKarakteristike
But I think it shouldn't change anything, because I haven't changed side margins / padding, I think. I'm checking now.

Update - now they are alligned on the top side. Just to figure out why they're not in line on the sides. Maybe I need to do something with the image:

https://codepen.io/krcky/pen/KQWKdG

krckyboy
@krckyboy
Feb 09 2018 14:43
Okay, I think I fixed it.
Will post right away.
Stephen James
@sjames1958gm
Feb 09 2018 14:45
@krckyboy Your image was in a column col-md-12 but the container below was not
krckyboy
@krckyboy
Feb 09 2018 14:46

@sjames1958gm https://codepen.io/krcky/pen/KQWKdG

Here what I added in the CSS.

You're talking about fluid container, yes? The one below.

Raghav Mundra
@Raghav17
Feb 09 2018 14:51
Can i nest a jQuery syntax inside another? Something like this.
 $("#name").append("  " + dname + ($("#data").append(" Offline " + "<br/>"); ) +"<br/>");
dirtymindisjoyforever
@dirtymindisjoyforever
Feb 09 2018 14:52
Hey guys, quick question here. I'm a total noob, and just started out with html 1.0.(0.0.0.)1. Now I have come to a point where I am asked to edit a certain piece of text (step 7-ish) but it won't let me in the edit section. It will let me delete previously written text, but not add my own. I'm sure the solution is simple, anyone got any idea?
Stephen James
@sjames1958gm
Feb 09 2018 15:00
@krckyboy You didn't need to change the CSS to get them to align on the sides you needed to wrap the bottom in the same column size as the image.
                <div class="col-sm-12 col-lg-12">
                <div class="container-fluid">
krckyboy
@krckyboy
Feb 09 2018 15:00
Anyone knows of a good datetime picker? Calendar on default or on click on input. Both preferred. Trying to find any without jQuery.
Stephen James
@sjames1958gm
Feb 09 2018 15:01
@dirtymindisjoyforever FCC challenge? If so, try using undo, to reset the editor, I seem to recall that it gets the cursor wrong in the code
krckyboy
@krckyboy
Feb 09 2018 15:01
@sjames1958gm oh. The container fluid which is container for the text?
Stephen James
@sjames1958gm
Feb 09 2018 15:01
@krckyboy Yes -
krckyboy
@krckyboy
Feb 09 2018 15:02
@sjames1958gm taking a small break, so I will check what u did wrong. Hm.
Stephen James
@sjames1958gm
Feb 09 2018 15:02
@krckyboy l8ter
krckyboy
@krckyboy
Feb 09 2018 15:02
I did, not you *
:D
Stephen James
@sjames1958gm
Feb 09 2018 15:02
@krckyboy :)
dirtymindisjoyforever
@dirtymindisjoyforever
Feb 09 2018 15:06
@sjames1958gm
Problem="false"
Thankful="true" xD
Thanks man
CamperBot
@camperbot
Feb 09 2018 15:06
dirtymindisjoyforever sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8957 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 09 2018 15:07
@dirtymindisjoyforever :+1: that worked? Cool - I was remembering from way back.
dirtymindisjoyforever
@dirtymindisjoyforever
Feb 09 2018 15:07
@sjames1958gm it did! Kudo's to your memory!
krckyboy
@krckyboy
Feb 09 2018 15:26
@sjames1958gm That didn't work for some reason.
I also tried putting it in the row below the fluid container, and it only fixed the left part.
in this i have a padding in 4sides how to remove that
i want only images in that page with out any space
LydaTech
@lydatech
Feb 09 2018 15:35
@1532j0004kg margin: 0; padding: 0;
dinesh
@1532j0004kg
Feb 09 2018 15:36
not working !!!
LydaTech
@lydatech
Feb 09 2018 15:36
@1532j0004kg whats the issue?
dinesh
@1532j0004kg
Feb 09 2018 15:37
i need to fix that image for whole page
LydaTech
@lydatech
Feb 09 2018 15:37
*{
  margin:0;
  padding: 0;
}
dinesh
@1532j0004kg
Feb 09 2018 15:37
without any whitespaces
its worked how?
LydaTech
@lydatech
Feb 09 2018 15:38
what?
dinesh
@1532j0004kg
Feb 09 2018 15:38
if i give it in img it is not working but with * its worked
Matej Bošnjak
@mbosnjak01
Feb 09 2018 15:39
create script.js or someothername.js file
put js there
LydaTech
@lydatech
Feb 09 2018 15:39
the * selector means everything. There are some default setting styles on the html and body you needed to remove
Matej Bošnjak
@mbosnjak01
Feb 09 2018 15:39
and then link it with <script src="scriptname.js"></script>
dinesh
@1532j0004kg
Feb 09 2018 15:40
ohh ok if i need to give padding for something it will work ?
LydaTech
@lydatech
Feb 09 2018 15:40
@1532j0004kg
body{
  margin:0;
  padding: 0;
}
dinesh
@1532j0004kg
Feb 09 2018 15:40
padding or margin .
LydaTech
@lydatech
Feb 09 2018 15:40
if you wanted to be specific
Matej Bošnjak
@mbosnjak01
Feb 09 2018 15:40
@danydin so ... <script src="scriptname.js"></script> is the way to go
dinesh
@1532j0004kg
Feb 09 2018 15:41
done :+1: @lydatech thanks
CamperBot
@camperbot
Feb 09 2018 15:41
1532j0004kg sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2645 | @lydatech |http://www.freecodecamp.org/lydatech
Dany Din
@danydin
Feb 09 2018 15:41
@mbosnjak01 yes i know that the problem is that
LydaTech
@lydatech
Feb 09 2018 15:41
@1532j0004kg yes the * selector is very low on the cascade
Dany Din
@danydin
Feb 09 2018 15:42
should i also add jquery instant anon func run to let the script run?
Matej Bošnjak
@mbosnjak01
Feb 09 2018 15:42
inside .js file you don't put <script> tags
if that is what you mean
about async
it goes like this ... <script async src="script.js"></script>
Dany Din
@danydin
Feb 09 2018 15:53
how to convert <script>async src="https://....." </script>into .js file?
alpox
@alpox
Feb 09 2018 16:04
@danydin That is already a reference to a js file
Matej Bošnjak
@mbosnjak01
Feb 09 2018 16:07
well I already said <script async src="script.js"></script> .. but okay :D
Tiago Correia
@tiagocorreiaalmeida
Feb 09 2018 16:09
wild @alpox appears,trhows pokeball
alpox
@alpox
Feb 09 2018 16:09
@alpox resists
Tiago Correia
@tiagocorreiaalmeida
Feb 09 2018 16:10
throws candy followed by new pokeball :D
Matej Bošnjak
@mbosnjak01
Feb 09 2018 16:11
try masterball
alpox
@alpox
Feb 09 2018 16:12
@alpox captures candy. dodges pokeball, jumps provocative around @tiagocorreiaalmeida
Tiago Correia
@tiagocorreiaalmeida
Feb 09 2018 16:12
pick's the shotgun..
:D
all good?
alpox
@alpox
Feb 09 2018 16:13
@alpox takes a promise, jumps into subroutine and hides there
All fine :D thanks, and you?
Tiago Correia
@tiagocorreiaalmeida
Feb 09 2018 16:16
all good aswell :)
Kaz Baig
@kbaig
Feb 09 2018 16:22
Has anyone here worked with React's Transition components?
Tiago Correia
@tiagocorreiaalmeida
Feb 09 2018 16:32
Kaz Baig
@kbaig
Feb 09 2018 16:38
@tiagocorreiaalmeida I read that but I think it's outdated
@tiagocorreiaalmeida thanks anyways
CamperBot
@camperbot
Feb 09 2018 16:38
kbaig sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 496 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
Martijn
@martinopino
Feb 09 2018 17:24

hey all! I started a FCC just a little while ago and I'm doing the first front-end coding challenge at the moment. I think I got most of it but I'm struggling with two small things:

  1. My img is not responsive/resizing even though I gave it the class img_responsive
  2. I can't get all my content to center, even though I put it in rows and gave it the class text-center

Would someone mind to have a quick look and give some tips? That would be really helpful :smile:

https://codepen.io/martinopino/pen/eVvYYX?editors=1000

LydaTech
@lydatech
Feb 09 2018 17:30
@martinopino class names have changed in BS4 from BS3
try img-fluid
and mx-auto for centering
Martijn
@martinopino
Feb 09 2018 17:44
awesome! I got it fixed, thanks @lydatech
CamperBot
@camperbot
Feb 09 2018 17:44
martinopino sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2647 | @lydatech |http://www.freecodecamp.org/lydatech
Boris-the-Llama
@Boris-the-Llama
Feb 09 2018 19:42
is there anybody here!?
LydaTech
@lydatech
Feb 09 2018 19:49
just alpacas
Boris-the-Llama
@Boris-the-Llama
Feb 09 2018 19:53
alpacas are our cousins
argarrido
@argarrido
Feb 09 2018 20:28
Good afternoon, I'm looking forward to any experimented FreeCodeCamp user who could tell me if along the entire course is there any PHP subject as a main one because I need to learn it with high priority. Currently I'm on 251th lesson. Otherwise, wich webpage-course do you recommend me? Thank you
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 20:54
image.png
Which language is this?
Tiago Correia
@tiagocorreiaalmeida
Feb 09 2018 20:55
if im not confused that's javascript using a library called p5
thisaif
@thisaif
Feb 09 2018 20:55
@MuhammedKarim theres 999 programming languages that support that syntax
Tiago Correia
@tiagocorreiaalmeida
Feb 09 2018 20:55
@MuhammedKarim where did you got the code from?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 20:56
@tiagocorreiaalmeida It's meant to be JS yup but when i put it into codepen nothing comes up
@jmsfk lmao
AbrisM
@AbrisM
Feb 09 2018 20:58
@MuhammedKarim It looks like JavaFX
The fill rect is similiar to HTML Canvas too
What are you attempting to create?
Yea the snowman defiantly looks like JavaFX to me
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 21:02
U put that code somewhere and it worked? @AbrisM
Brad
@bradtaniguchi
Feb 09 2018 21:02
Or it could be p5.js
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 21:02
It's a challenge on Khan Academy, Intro to JS Course @MuhammedKarim
AbrisM
@AbrisM
Feb 09 2018 21:02
I've seen that code and its very similar to a code I had for FX
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 21:03
But i don't understand that if it's js and i put it in codepen js tab nothing happens...
Matej Bošnjak
@mbosnjak01
Feb 09 2018 21:04
my guess it requires more than just js sample you provided?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 21:07
In the Khan Academy editor, that's all that was there
AbrisM
@AbrisM
Feb 09 2018 21:07
If its JS your going to need the HTML part
thisaif
@thisaif
Feb 09 2018 21:09
@MuhammedKarim may i have a link to that challenge?
There is no HTML to it @jmsfk @AbrisM
AbrisM
@AbrisM
Feb 09 2018 21:12
More than likely they omitted that. I haven't seen JS scripts run without HTML with it
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 21:13
true @AbrisM that's why i was wondering if its not JS but its another language which learning it might help to learn JS
thisaif
@thisaif
Feb 09 2018 21:13
@MuhammedKarim You are doing "Intro to JS"
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 21:14
Yup @jmsfk
AbrisM
@AbrisM
Feb 09 2018 21:15
You might want to create a basic html site, nothing fancy
Then run it in a HTML/JS IDE and see what you get like JSFiddle
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 21:16
I don't understand what IDE is... what's JSFiddle? @AbrisM
AbrisM
@AbrisM
Feb 09 2018 21:16
Integrated Developer Environment. It's a program that edits code more than a script editor
Put a basic webpage into the html and just source the JS part in the html script. Remove it if it says it doesn't need it but that's just for the IDE
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 21:18
What's IDE?
@AbrisM
ohhh ok i understand
AbrisM
@AbrisM
Feb 09 2018 21:18
Sometimes with Codepen its has frameworks in it that'll run sites when you have to integrate those. Oh, did you also need to tell the script that your using a canvas? Like an Import?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 21:19
Nope, no import, it was just that code that i sent in the picture @AbrisM
image.png
no outcome... @AbrisM
AbrisM
@AbrisM
Feb 09 2018 21:23
That looks like JavaFX
So weird, hahaha, have you looked at this? https://www.khanacademy.org/computer-programming/snowman/823735629
Again, its probably not running because HTML is missing. It's just showing the JS part but not the entire src files
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 21:26
lool nice pen
but im just confused whether or not that's the right course for me to learn JS
AbrisM
@AbrisM
Feb 09 2018 21:28
Khan doesn't have a good editor, it's limited so it'll only show scopes of the script
Are you familiar with HTML/CSS?
If not, you need to learn that first before learning JS
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 21:29
@AbrisM ohh ok, well i hope that later on in the course they teach what else they use
i learnt HTML, CSS and JS on w3schools, and just finished the HTML & CSS course on Khan Academy earlier today so i've started the JS
AbrisM
@AbrisM
Feb 09 2018 21:30
Okay. Yes it's not working because the JS script is 'floating'. In other words there's no HTML to act as a background for the canvas
If it were JAVA you'd be able to run it, but for Web Design JS needs HTML with it
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 21:32
But what can the html be for that? So it is JS then? Coz the comments look like JS comments...
AbrisM
@AbrisM
Feb 09 2018 21:32
Yes, those are the JS comments. A JS script can't actually run if there is no HTML present. It's basicually telling the site to do things, but there is no page available for it to do that
the HTML is the page
The JS is like the actions/brain
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 21:34
@AbrisM Ohh ok, so what can i put as the HTML to make that JS work?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 21:56
@AbrisM you're right lol
image.png
Kaz Baig
@kbaig
Feb 09 2018 21:59
That's definitely P5
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 22:02
@kbaig What's P5???
AbrisM
@AbrisM
Feb 09 2018 22:11
@MuhammedKarim Just create a basic html webpage and insert the JS as a seperate file referenced in the html
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 22:14
@AbrisM What exactly do you mean by basic HTML page? How can i insert the JS as a seperate file? by linking it through a tag in the <head> of the page?
AbrisM
@AbrisM
Feb 09 2018 22:15
Make an outline of a basic html page. You can link it in the head tags, yes
the head contains the site preference, it's basicually for configuration purposes
Basic is vanilla
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 22:16
@AbrisM Ok lemme make one now then!
Vanilla?
AbrisM
@AbrisM
Feb 09 2018 22:17
??
Vanilla means basic, non-edited
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 22:17
ohh ok! @AbrisM
didn't work :( @AbrisM
image.png
image.png
AbrisM
@AbrisM
Feb 09 2018 22:56
try the js chat
Kaz Baig
@kbaig
Feb 09 2018 22:59
@MuhammedKarim P5 JS
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 09 2018 23:47
@AbrisM sorry I'm not on my PC anymore, I'll have a look when I get on there next
@kbaig oh ok. Thanks for that!
CamperBot
@camperbot
Feb 09 2018 23:47
muhammedkarim sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 567 | @kbaig |http://www.freecodecamp.org/kbaig