These are chat archives for FreeCodeCamp/HelpFrontEnd

29th
Apr 2017
Nick Bonne
@nickbonne
Apr 29 2017 00:29
Hi everyone. Would someone please take a look at my Random Quote Machine project and help me understand why the box with the quote is being cutoff when viewed on CodePen? Wrote it in Sublime and copy/pasted over. It would be complete otherwise. https://codepen.io/nbonne/pen/LyWXGa
Roxroy
@roxroy
Apr 29 2017 01:21
@nickbonne , this issue is in the main-box class remove transform: translateY(-25%); . that is the reason why it is off the screen, it moving it up by 1/4
intcreate
@intcreate
Apr 29 2017 01:56
can any1 help me with this when i click show more its suppose to expand height but not working
Nick Bonne
@nickbonne
Apr 29 2017 02:01
@roxroy Thanks, I found the issue. I removed transform: translateY(). When CodePen reloaded, the quote-box became visible. When I did the same in my editor and Chrome, the box shifted down but wasn't cut off. The value of -50% that worked in my editor needed to be changed to 50% to work correctly in CodePen.
CamperBot
@camperbot
Apr 29 2017 02:01
nickbonne sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 782 | @roxroy |http://www.freecodecamp.com/roxroy
Ken Haduch
@khaduch
Apr 29 2017 02:03
@intcreate - the CSS that you have on #content is overriding the .content-open class that you're adding. The class is being added, but you have that conflict.
Roxroy
@roxroy
Apr 29 2017 02:03
@nickbonne , ok, that would work, 50% will center the div on the page.
Ron Luther
@rmluther
Apr 29 2017 02:05

Hey friends! Would someone be able to give this a look? I'm working on the Random Quote Machine and my $.getJSON doesn't seem to be pulling the API data:

https://codepen.io/rmluther/pen/mmJpyO?editors=1111

Ken Haduch
@khaduch
Apr 29 2017 02:10
@rmluther - there are a couple problems. You are opening your page using https:// (the CodePen default) and attempting to access an insecure resource, so that gets blocked. The next problem is that if you load the top-level page using http:// then it gets another rejection because of: The resource from “http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=jQuery31104254768930190941_1493431592131&_=1493431592132” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff). I don't know how to make that work - trying to see if I can understand a way to fix it.... but that's why it isn't working.
Ron Luther
@rmluther
Apr 29 2017 02:23
@khaduch ok, I see. I noticed on a FCC reddit post that someone instructed to append the url with https://crossorigin.me to get past codepen's limitations, but that didn't seem to work either...thanks for the response! Let me know if you happen to discover a workaround
CamperBot
@camperbot
Apr 29 2017 02:23
rmluther sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2808 | @khaduch |http://www.freecodecamp.com/khaduch
bv
@binduverma1
Apr 29 2017 02:48
I tried to upload an image to imagebin and placed the url in the code but it is not working. This the url I received from imagebin https://imagebin.ca/v/3Kh1hXPSCuAj and I placed it in img src tag but not working.
I am using codepen free account
Bill Hefty
@bhefty
Apr 29 2017 02:54
@Binduverma1 Try using https://ibin.co/w800/3Kh1hXPSCuAj.jpg
bv
@binduverma1
Apr 29 2017 02:55
@bhefty Thanks, it worked !! but what was the problem in my code?
CamperBot
@camperbot
Apr 29 2017 02:55
binduverma1 sends brownie points to @bhefty :sparkles: :thumbsup: :sparkles:
:cookie: 365 | @bhefty |http://www.freecodecamp.com/bhefty
Bill Hefty
@bhefty
Apr 29 2017 02:57
@Binduverma1 I've noticed some URLs from sites tend to point to a page hosting the image rather than the image itself. I just right clicked the image from your URL and chose "Copy Image Address". In this case it was just adding the ".jpg" to the end
Note I used Chrome to copy image address, but most browsers have some right click menu that does something similar
bv
@binduverma1
Apr 29 2017 02:58
@bhefty wow, thanks so much!!
CamperBot
@camperbot
Apr 29 2017 02:58
binduverma1 sends brownie points to @bhefty :sparkles: :thumbsup: :sparkles:
:warning: binduverma1 already gave bhefty points
Bill Hefty
@bhefty
Apr 29 2017 02:58
No problem!
Benjamin
@XenoCoding
Apr 29 2017 03:10
What's the best way to make my captions appear over top of the portfolio images when the user hovers over them? http://codepen.io/XenoCoder/pen/oYwjwP/
Jorge
@OrangeKulture
Apr 29 2017 03:19
@XenoCoding I would probably use the image as a background image for the div, have the text as visibility hidden and change when :hover
Pagnito
@Pagnito
Apr 29 2017 03:47
@SkyCoder01 you on?
Mamun Abdullah
@thetradecoder
Apr 29 2017 03:54
no
Tom
@moT01
Apr 29 2017 04:10
@XenoCoding the title attribute i think would work
<img title="me on hover">
JD Tadlock
@jdtdesigns
Apr 29 2017 04:22
@Pagnito What's the question?
Friederick Tan
@FriederickTan21
Apr 29 2017 04:48
Yo I've been working on this problem for a few hours and I can't figure out why it isn't outputting the json
$(document).ready(function() {
    var latitude;
    var longitude;
    var data;
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            latitude = position.coords.latitude;
            longitude = position.coords.longitude;
            $("#geolocal").html("latitude: " + latitude + "<br>longitude: " + longitude);
            $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat="+ latitude + "&lon=" + longitude + "&appid=XXXXXXXXXXsecretXXXXXXXXXX", function(json) {
                data = json;
                $("#temperature").html(JSON.stringify(json));
            });
        });
    }
});
Johnny
@jtan3
Apr 29 2017 04:50
@FriederickTan21 check your dev tools if its a mixed content error.
Friederick Tan
@FriederickTan21
Apr 29 2017 04:54
Ah, I didn't know that Browser dev tools worked with Codepen :sweat_smile:
Sandesh Shrestha
@UnovaXan
Apr 29 2017 04:54
codepen also has its own console
Friederick Tan
@FriederickTan21
Apr 29 2017 04:55
Oh
Johnny
@jtan3
Apr 29 2017 04:55
@FriederickTan21 if you want to use geolcation you'll need to use a weather api that works in https://.
Friederick Tan
@FriederickTan21
Apr 29 2017 04:56
I see, I'll try that, thank you @jtan3
CamperBot
@camperbot
Apr 29 2017 04:56
friedericktan21 sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 375 | @jtan3 |http://www.freecodecamp.com/jtan3
Johnny
@jtan3
Apr 29 2017 04:57
@FriederickTan21 Or you can use an ip api to get your geolocation(lat,lon) and continue using openweather api.
@FriederickTan21 navigator.geo works on https while the https openweather is a paid version.
Brittany Rutherford
@brittanyrutherford
Apr 29 2017 05:39
why does padding affect position absolute?
shouldn't position absolute take the element out of the context of the container? why other elements in same container affect element when they have padding?
shivam gupta
@shivamg11000
Apr 29 2017 06:07
hey guys I have made this in photoshop
https://drive.google.com/file/d/0B6ViqLaASQ9wbXpOMjFfVFhlN0U/view?usp=sharing
How to convert the bended lines in html
Markus Ivancsics
@ivancsicsmarkus
Apr 29 2017 06:17
@shivamg11000 Hey, draw a line! You should use width, a little bit height, a black background-color. Than you rotate it with transform: rotateZ(Xdeg) change X!
Pagnito
@Pagnito
Apr 29 2017 06:55
@jdtdesigns hey sry...notification for ur mention came just now...hours later in my gmail...i must ve went to the other chatroom right after shouting sky. but ya always appreciate yiur help. thanks
CamperBot
@camperbot
Apr 29 2017 06:55
pagnito sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 924 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Apr 29 2017 07:35
Babu Rao Kasi
@babuharry
Apr 29 2017 07:53
anyone here active
HizPearl
@HizPearl
Apr 29 2017 08:11
Morning all. hope all is well.. I need help with the Random Quote task. when placing the api in the code I get this error.

Mixed Content: The page at 'https://' was loaded over HTTPS, but requested an insecure script 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=jQuery3110529132258558898_1493451785107&_=1493451785108'. This request has been blocked; the content must be served over HTTPS.

HizPearl
@HizPearl
Apr 29 2017 08:28
@fortMaximus yes I seen that, still no luck when I change the http to https I still get an error
h1tag
@h1tag
Apr 29 2017 08:29
@HizPearl what did u change to https?
HizPearl
@HizPearl
Apr 29 2017 08:41
$(document).ready(function(){
 getQuote();

  var randomQuote;
  var author;
 function getQuote(){
//made quote array to array to global var//     
/*var quotes = ["Everything doesn't require a comment", "Anyday above ground is a good one", "I'm a work in progress", "Please excuse my back while I grow"];
var author= ["-Random1", "-Random2", "-Randmon3","-Randmon4"];

randomNum = Math.floor(Math.random()*quotes.length);
randomQuote = quotes[randomNum];
author = author[randomNum];*/

   var url = 'http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?'
   $.getJSON(url, function(data){
     $(".quote").html('"'+data.quoteText+'"');
         $(".author").html("-"+data.quoteAuthor);
   });


 }; 

  $("#tweet").on("click", function(){
 window.open("https://twitter.com/intent/tweet?text="+ randomQuote);
  });

 $("#newQuote").on("click", function(){
  getQuote();  
  });
 });
@fortMaximus
h1tag
@h1tag
Apr 29 2017 08:43
@HizPearl http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=? this is still http and you have this https://twitter.com/intent/tweet?text= which is https
and the URL you use to load load the page must start with https too
all https or http
but https is better ofc
and codepen will be forcing https starting June
HizPearl
@HizPearl
Apr 29 2017 08:46

@fortMaximus
this is what I have and what is causing the problem because of the http

 var url = 'http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?'

and when I change it to , It still give me the error

 var url = 'https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?'
h1tag
@h1tag
Apr 29 2017 08:46
@HizPearl do you have it in a pen?
HizPearl
@HizPearl
Apr 29 2017 08:46
@fortMaximus yes
h1tag
@h1tag
Apr 29 2017 08:47
the link please
HizPearl
@HizPearl
Apr 29 2017 08:49

@fortMaximus (<p data-height="265" data-theme-id="0" data-slug-hash="JNGJrv" data-default-tab="js,result" data-user="HizPearl" data-embed-version="2" data-pen-title="Quote Gen" class="codepen">See the Pen <a href="https://codepen.io/HizPearl/pen/JNGJrv/">Quote Gen</a> by Alice Clark (<a href="http://codepen.io/HizPearl">@HizPearl</a>) on <a href="http://codepen.io">CodePen</a>.</p>

<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>)

h1tag
@h1tag
Apr 29 2017 08:50
not this one
copy the URL from the address bar
h1tag
@h1tag
Apr 29 2017 08:57
@HizPearl if u switch the api url to https, the error is fixed but it still doesn't show a result, I'm trying to figure out out why
heroiczero
@heroiczero
Apr 29 2017 09:02
@HizPearl try using https://quotesondesign.com/api-v4-0/. For some reason, forismatic stopped working for me.
HizPearl
@HizPearl
Apr 29 2017 09:03
@fortMaximus yes thank you made I was explaining it wrong but you got me . Thank you.
CamperBot
@camperbot
Apr 29 2017 09:03
hizpearl sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 755 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
HizPearl
@HizPearl
Apr 29 2017 09:04
@fortMaximus ok I'll try that let you know the results
r2d2
@UsamaHameed
Apr 29 2017 09:14
Anyone familiar with babel.js?
alpox
@alpox
Apr 29 2017 09:15
A
@UsamaHameed i use it sometimes
r2d2
@UsamaHameed
Apr 29 2017 09:16
Do we still need to use babel-polyfill? @alpox
alpox
@alpox
Apr 29 2017 09:18
@UsamaHameed
This polyfill is automatically loaded when using babel-node and babel/register.
So if you dont useany of these, you will probably need it
r2d2
@UsamaHameed
Apr 29 2017 09:21
I read that we need babel-polyfill for ES6 map function. But I have been using it before without babel and without any problems @alpox
Suyog RK
@SuyogRK
Apr 29 2017 09:22
is it possible to create variables in javascript without using var?
r2d2
@UsamaHameed
Apr 29 2017 09:22
@SuyogRK consider let and const
Suyog RK
@SuyogRK
Apr 29 2017 09:25
so a=3 ,var a =3 , let a =3 do the same thing?
alpox
@alpox
Apr 29 2017 09:38
@UsamaHameed you wont need it for the map function since it is a builtin array function which has good support as far as i know. It is in ES5. Maybe you mean the Map object?
Or the map function youve seen uses es6 arrow syntax?
r2d2
@UsamaHameed
Apr 29 2017 09:41
May be. I am taking a pluralsight course and the tutor said we would be using babel-polyfill for map, array.from, set, generators etc... @alpox
He did not say Array.map or Object.map
But I had used map and Array.from before without using babel at all.
Daniel Falk
@D-Falk41417
Apr 29 2017 09:43
Without using bootstrap, is there a way to have box containers, for text, not stretch out across the page?
r2d2
@UsamaHameed
Apr 29 2017 09:43
the course was published on 21 may 2016 though @alpox
h1tag
@h1tag
Apr 29 2017 09:47
@D-Falk41417 maybe just surround it by a div and give it a width, height
you can also take a look at the Bootstrap source code to see how they do it
Daniel Falk
@D-Falk41417
Apr 29 2017 09:52
That's getting there. Thanks. Trying not to rely on bootstrap, but is there a native content-smart method like it?
I'll do that, thanks again.
Federico Dente
@fez994
Apr 29 2017 10:00
Why is playerChoice undefined in my td function? I don't understand
    $('#x').on("click", function() {
        window.playerChoice = "X";
        this.disabled = true;
        $('#o').attr("disabled","disabled");
        $('table').removeClass('hidden');

    });

    $('#o').on("click", function() {
        window.playerChoice = "O";
        this.disabled = true;
        $('#x').attr("disabled","disabled");
        $('table').removeClass('hidden');

    });



    $('td').on("click", function() {
        console.log(playerChoice);
     $(this).html(playerChoice);
    });
r2d2
@UsamaHameed
Apr 29 2017 10:22
window.playerChoice?
alpox
@alpox
Apr 29 2017 10:27
@UsamaHameed he probably talked about the Map object, not the map function
This is ES6 spec
So it needs polyfill
Set and Map are the newcomers
r2d2
@UsamaHameed
Apr 29 2017 10:32
Got it thanks @alpox
CamperBot
@camperbot
Apr 29 2017 10:32
usamahameed sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 989 | @alpox |http://www.freecodecamp.com/alpox
h1tag
@h1tag
Apr 29 2017 10:43
@D-Falk41417 what do u mean by " content-smart "?
maybe flexbox, if I understand what do you need correctly
shivam gupta
@shivamg11000
Apr 29 2017 10:47
hey campers checkout my tribute page
Keon Samuel
@keonsam
Apr 29 2017 11:02
how do I get the front-end certificate from the website?
Sergio
@fukenist
Apr 29 2017 11:10
Hi! When i do code like this in codepen:
<div class="btn-group">
<button type="button" class="btn btn-success">About Me</button>
<button type="button" class="btn btn-primary">Portfolio</button>
<button type="button" class="btn btn-danger">Contact</button>
</div>
it shows like usual html buttons, What i did wrong?
I put code in html section, not using JS section
h1tag
@h1tag
Apr 29 2017 11:13
@fukenist did u import Bootstrap?
Sergio
@fukenist
Apr 29 2017 11:15
yes, in pen settings
oh, i added in javascript but it has to be in CSS. All works now! Thanks
jayjohns
@jayjohns
Apr 29 2017 11:29
hello everyone! I am working on my tribute page, but I wanted to know how to pad my paragraphs. SHould i pad them through css or html?
THe paragraphs are too close to the left edge of my page
..using codepen
Ivan Georgiev
@ivangeorgiew
Apr 29 2017 11:31
Can somebody help?
When I use chai + mocha setup and chai-http plugin I don't know how to access the request object
    chai.request(server)
      .get('/article/create')
      .end(function(err, res) {
        /*req.should.be.here;*/
        res.should.have.status(200);
        res.should.be.html;
        done();
      });
h1tag
@h1tag
Apr 29 2017 11:31
@jayjohns css
jayjohns
@jayjohns
Apr 29 2017 11:33
@fortMaximus ohok
marco seoane
@marcoseoane
Apr 29 2017 11:44
hey people, ive made it to the challenge of building a tribute page. the objective is to build a site 'functionally' similar. so do i not have to locate the image used in the example for my one
abhishek
@abhishek9650
Apr 29 2017 11:45
@shadownet94 share your pen here
marco seoane
@marcoseoane
Apr 29 2017 11:45
forgive me for maybe sounding stupid but how do i do that lol
ahh are you talking about my codepen
i havent made a start on my page at all yet was jus curious if the use of the word functionally similar was pointing more to how the page is structured with a link leading to the wiki page
as opposed to appearance
jayjohns
@jayjohns
Apr 29 2017 11:47
http://codepen.io/JayJohns/pen/aWBEJW/ let me know what you guys think!?
the paragraph might be too far left....
marco seoane
@marcoseoane
Apr 29 2017 11:48
ahh so you done a tribute to someone of your choosing
thanks that makes it alot easier lol ill just find images of my own
abhishek
@abhishek9650
Apr 29 2017 11:48
@jayjohns it is good .. but it could be better you styled it more .. or used more css
@shadownet94 yup.. you can choose any one ... to build a page on...
jayjohns
@jayjohns
Apr 29 2017 11:49
@abhishek9650 yeah i was thinking the same
marco seoane
@marcoseoane
Apr 29 2017 11:49
@abhishek9650 thank you for the clarification. all cleared up! time to get to work
CamperBot
@camperbot
Apr 29 2017 11:49
shadownet94 sends brownie points to @abhishek9650 :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @abhishek9650 |http://www.freecodecamp.com/abhishek9650
marco seoane
@marcoseoane
Apr 29 2017 11:49
ill share when i manage to compose it all!
abhishek
@abhishek9650
Apr 29 2017 11:50
@shadownet94 :+1: go for it
Brandon Blackwell
@Radlerz1
Apr 29 2017 11:50
hey guys i been trying to figure out how to delay a loop so its waits a few seconds before it cycles again. but can't seem to figure it out any help is appreciated! This is what I tried but the loop seems to do its whole cycle after 2 seconds
```js
setTimeout(function(){
for(var i = 0; i < array.length; i++) {
//do something with array[i];
}
}, 2000);
abhishek
@abhishek9650
Apr 29 2017 11:51
@jayjohns and my next challange is also done .. kinda ..https://codepen.io/abhishek9650/pen/NjdzPP
Brandon Blackwell
@Radlerz1
Apr 29 2017 11:51
forgot how to format the code here. but you get me
jayjohns
@jayjohns
Apr 29 2017 11:53
@abhishek9650 cool page! Tables and "containers" definitely make the page cleaner..ill be adding those to my page
abhishek
@abhishek9650
Apr 29 2017 11:54
@jayjohns :+1:
jaizon
@jaizon
Apr 29 2017 11:58
I've finally finished my portfolio, I hope so, any feedback? https://jaizon.github.io/keanu-reeves/
omarraza
@omarraza
Apr 29 2017 12:04
anyone ever experience an issue in codepen where their <body> background would have diagonal dotted white lines running across in in Editor mode? Only in Chrome
Uros Tadic
@urketadic
Apr 29 2017 12:28
Guys does anyone have experience with nodejs?

Can soemone tell me how would i add this to User model in node express app?

<input type="time" id="myTime">

What is type = time? Is it a String?

Roxroy
@roxroy
Apr 29 2017 12:35
@urketadic , is this in reference to one of the projects or just a general question?
Uros Tadic
@urketadic
Apr 29 2017 12:37
its my project
its not on freecodecamp
Reeson55
@Reeson55
Apr 29 2017 12:37
does flexbox not work with codepen?
Uros Tadic
@urketadic
Apr 29 2017 12:38
it works
Roxroy
@roxroy
Apr 29 2017 12:38
@urketadic , time is specific input type that defines a control for entering a time.
Uros Tadic
@urketadic
Apr 29 2017 12:39
correct
i need to know how to add this to User model
in nodejs
I can put String... Date...
what should i put for input type="time"
For input type="text" somebodys name i just put String
Roxroy
@roxroy
Apr 29 2017 12:51
@urketadic , You user model is just a JS class. You can put it in a module and import it or you can stick it in the main module. Use Date rather than String for the data type
jaizon
@jaizon
Apr 29 2017 13:02
I have a newb question, I was using this css code (background: #222 url("https://newevolutiondesigns.com/images/freebies/google-material-design-wallpaper-2.jpg") no-repeat;) to add a background to a div in my portfolio, but now I want to host it into the img folder o my project, how should I change that?
Amit Patel
@AmitP88
Apr 29 2017 13:03
@SkyCoder01 thanks Sky! I tried it and now I get undefined under the message button, but no errors in console now. I'll keep hacking at it, but at least I'm a lil closer now. thanks! :D
CamperBot
@camperbot
Apr 29 2017 13:03
amitp88 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1221 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Uros Tadic
@urketadic
Apr 29 2017 13:20
@roxroy yes i know that but i should use Date for input type="time"
marco seoane
@marcoseoane
Apr 29 2017 13:22
hey guys what do you think of this so far, just the beginning of the beginning! only been coding for three days

<p data-height="265" data-theme-id="0" data-slug-hash="wdJbaZ" data-default-tab="html,result" data-user="marcoseoane" data-embed-version="2" data-pen-title="wdJbaZ" class="codepen">See the Pen <a href="https://codepen.io/marcoseoane/pen/wdJbaZ/">wdJbaZ</a> by marco seoane (<a href="http://codepen.io/marcoseoane">@marcoseoane</a>) on <a href="http://codepen.io">CodePen</a>.</p>

<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

how do i make it come up with the little window containing my pen
jaizon
@jaizon
Apr 29 2017 14:25
@shadownet94 like this? https://codepen.io/jaizon/pen/Ompeqg
Jorge
@OrangeKulture
Apr 29 2017 15:03
hey guys, good morning/afternoon/evening
Eduar Tua
@eduartua
Apr 29 2017 15:04
Hi @OrangeKulture , how are you doing?
Jorge
@OrangeKulture
Apr 29 2017 15:04
pretty good, thanks ..yourself?
@jaizon where are you hosting your portfolio page? isnt it on codepen?
Eduar Tua
@eduartua
Apr 29 2017 15:05
I am doing great thank you!
@OrangeKulture
jaizon
@jaizon
Apr 29 2017 15:05
@OrangeKulture I'm hosting on github
Jorge
@OrangeKulture
Apr 29 2017 15:06
@eduartua good to hear man!
@jaizon i haven't hosted anything on github myself, but it is the same.. Typically, you would create a folder called images, and then you would do href="images/myimage.jpg"
Eduar Tua
@eduartua
Apr 29 2017 15:07
Guys has anyone here tried google compute platform?
jaizon
@jaizon
Apr 29 2017 15:09
I've found the solution I had to change the link to url("../img/1.jpg")
Eduar Tua
@eduartua
Apr 29 2017 15:09
I don't know what is the best place to host apps, but seems that GCP is oine of the best
Jorge
@OrangeKulture
Apr 29 2017 15:10
i havent tried google platform .. is it free hosting? or .. @eduartua
jaizon
@jaizon
Apr 29 2017 15:10
@OrangeKulture seems like I had to add an ".." for navigation
Jorge
@OrangeKulture
Apr 29 2017 15:11
@jaizon ohh yeah for sure, if you are calling the image from the CSS you have to do that, because most likely you have a folder called CSS
Eduar Tua
@eduartua
Apr 29 2017 15:11
@OrangeKulture It is not free, but they have a free trial for two months or $600
jaizon
@jaizon
Apr 29 2017 15:11
@OrangeKulture and i've spent a lot of time not knowing that lol
Jorge
@OrangeKulture
Apr 29 2017 15:11
.. is kinda like the old days . well i guess you weren't arround :D .. when there was only DOS, you'd have to do cd.. .. cd is change directory and .. is one level up
@eduartua $600 ? daeeeem
jaizon
@jaizon
Apr 29 2017 15:12
@OrangeKulture I've used DOS a bit, also know a bit of linux command, but that didn't pass on my head
Jorge
@OrangeKulture
Apr 29 2017 15:13
buying a domain and a hosting package is cheap tho ... you can register a domain for around $7 a year
hosting packages go for as little as $3 a month .. someplace even cheaper
jaizon
@jaizon
Apr 29 2017 15:13
@OrangeKulture or ffree with freenom
Eduar Tua
@eduartua
Apr 29 2017 15:14
Really free?
Jorge
@OrangeKulture
Apr 29 2017 15:14
@jaizon isnt freenom a DNS relay server?
might be wrong about this
ohh nvm i think that was freenom world
jaizon
@jaizon
Apr 29 2017 15:15
@OrangeKulture is a domain like, didn't try it, but was on one of the hosting with github articles I've read
no, wait, it was reaaly freenom
Jorge
@OrangeKulture
Apr 29 2017 15:17
yeah .. no i mean freenom world is the DNS service .. yeh i guess freenom provides free domains, that's crazy :D
Also, I've hosted a hosted a wordpress site once with hostinger, for free, for around 3 or 4 months with no down time,
Jorge
@OrangeKulture
Apr 29 2017 15:22
ohh nice, yeah i haven't heard of that one before.. I guess now it's more and more common to find stuff like that
I think that it's important to eventually invest in a domain/hosting packages
you can then host your own images and host your own stuff, plus you will eventually would want to have something to show for, if you are a developer
Eduar Tua
@eduartua
Apr 29 2017 15:27
Yes, storing in AWS S3 is very cheap today
jaizon
@jaizon
Apr 29 2017 15:28
Sure, when we get "professional" even our hosting counts. I mean, imagine you showing your portfolio to a big company hosted with a free domain and host, doesn't interfere with your skills but shows how serious you are with your work
Eduar Tua
@eduartua
Apr 29 2017 15:29
And even more cheap backblaze, is like ten times cheaper than amazon with same memory
Jorge
@OrangeKulture
Apr 29 2017 15:30
ahh nice .. yeah exactly, professionalism is key once you get to a certain level
Eduar Tua
@eduartua
Apr 29 2017 15:30
Sorry I've made some mistakes with my English grammar
Ming Zhu
@chocobrownie
Apr 29 2017 16:03
Just saying hi to everyone, another great day.
I magically didn't have any question so far
Amit Patel
@AmitP88
Apr 29 2017 16:13
hey guys, I'm tweaking my client's website and I need a little help. How do I close the hamburger menu (only visible on smaller screens) after the user clicks on a nav link? I've googled several solutions to this but none have been successful with my code. Demo: https://amitp88.github.io/Khmer-Family-Cafe/ Repo: https://github.com/AmitP88/Khmer-Family-Cafe/tree/gh-pages Any help would be greatly appreciated :)
Waqas Abbasi
@Waqas909
Apr 29 2017 16:13
Thank you
Vincent Del Vecchio
@DVecc
Apr 29 2017 16:20
@AmitP88 add this to your Java script $('.navbar-collapse ul li a').click(function() { $(".navbar-collapse").collapse('hide');});
Amit Patel
@AmitP88
Apr 29 2017 16:22
@DVecc hmm, it didn't work. where do I add the .navbar-collapse class? do I add it to the same div that has the class "hamburger"?
Vincent Del Vecchio
@DVecc
Apr 29 2017 16:24
let me double check on my portfolio page, it worked fine for mine
This is what my navbar looks like
```
This message was deleted
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand" href="#home">Vincent Del Vecchio</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#about">About</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
</nav>
Amit Patel
@AmitP88
Apr 29 2017 16:27
@DVecc hmmm, my navbar looks like this: <nav class="fixed-nav-bar">
<header>
<img src="images/logo-nobackground.png" alt="logo">
<h1 class="text-center">Khmer Family Cafe</h1>
</header>
            <div class="hamburger">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
            <ul class="clearfix menu">
                <li><a href="#home">Home</a></li>
                <li><a href="#daily-specials">Daily Specials</a></li>
                <li><a href="#menu">Menu</a></li>
                <li><a href="#catering">Catering</a></li>
                <li><a href="#who-we-are">Who We Are</a></li>
                <li><a href="#contact">Contact Us</a></li>
            </ul>
        </nav>
Vincent Del Vecchio
@DVecc
Apr 29 2017 16:28
it may need to go in your hamburger div, let me play around with it in code pen
Amit Patel
@AmitP88
Apr 29 2017 16:31
oh ok
I tried putting it in my hamburger div but it didn't work either
Vincent Del Vecchio
@DVecc
Apr 29 2017 16:35
The navbar isn't showing up correctly in codepen so I'm going to clone your repo and play around with it
Amit Patel
@AmitP88
Apr 29 2017 16:35
ok
Amit Patel
@AmitP88
Apr 29 2017 17:01
@DVecc any luck?
Vincent Del Vecchio
@DVecc
Apr 29 2017 17:02
@AmitP88 sorry it took so long, finally got it
you just need to add ```
Amit Patel
@AmitP88
Apr 29 2017 17:02
np
Vincent Del Vecchio
@DVecc
Apr 29 2017 17:02
$(".clearfix li").on('click', function () {
    $('.menu').toggleClass('open');
});
to your function.js
Amit Patel
@AmitP88
Apr 29 2017 17:03
@DVecc Perfect! It works! thank you bro, seriously :)
CamperBot
@camperbot
Apr 29 2017 17:03
amitp88 sends brownie points to @dvecc :sparkles: :thumbsup: :sparkles:
:cookie: 127 | @dvecc |http://www.freecodecamp.com/dvecc
Amit Patel
@AmitP88
Apr 29 2017 17:04
@DVecc um, just one more thing, is there a way I can make the hamburger icon turn into an X when the navbar is open?
Vincent Del Vecchio
@DVecc
Apr 29 2017 17:04
You may want to fix the anchor points for your scrolling, it scrolls a little too far when you click on a menu item
Amit Patel
@AmitP88
Apr 29 2017 17:04
for sure, I'll definitely tweak that
Vincent Del Vecchio
@DVecc
Apr 29 2017 17:05
and does the smooth scrolling still work on yours? it doesn't seem to work on the repo copy I made
Amit Patel
@AmitP88
Apr 29 2017 17:05
yeah, it works on mine. Oh wait, I need to merge the changes to master branch actually. that's probably why
Vincent Del Vecchio
@DVecc
Apr 29 2017 17:05
I may have just screwed it up on my end when playing with things
actually going to your live site it doesn't seem to work on there either
It works correctly on the github link
Amit Patel
@AmitP88
Apr 29 2017 17:08
oh yeah, I'll merge the changes on the live site once I get the other changes done. I have a whole list of things I want to update, so once those are done, I'll push them to the live site
Vincent Del Vecchio
@DVecc
Apr 29 2017 17:09
is it working correctly with the pushed change?
Amit Patel
@AmitP88
Apr 29 2017 17:10
on the gh-pages site yeah
Vincent Del Vecchio
@DVecc
Apr 29 2017 17:11
the menu doesn'
close on that link
hmm
Amit Patel
@AmitP88
Apr 29 2017 17:11
did you try clearing your cache before retrying it?
Vincent Del Vecchio
@DVecc
Apr 29 2017 17:12
ah that may be the problem
Amit Patel
@AmitP88
Apr 29 2017 17:13
I always clear my history, cache, and cookies before trying out new features
Vincent Del Vecchio
@DVecc
Apr 29 2017 17:13
that's a good tip
well it seems to be working correctly, glad I could help!
Courtney Church-Fasula
@cchurch-fasula
Apr 29 2017 17:14
Trying to add image in CodePen for the "Build a tribute page" project, and I can't get the image to render in CodePen. What am I doing wrong?
Vincent Del Vecchio
@DVecc
Apr 29 2017 17:14
link your code pen please
Courtney Church-Fasula
@cchurch-fasula
Apr 29 2017 17:14
how do I do that?
Vincent Del Vecchio
@DVecc
Apr 29 2017 17:15
copy and paste the url that shows in your address bar when you're editing your pen
Courtney Church-Fasula
@cchurch-fasula
Apr 29 2017 17:15
Amit Patel
@AmitP88
Apr 29 2017 17:15
@DVecc thanks bro! I'll see if I can animate the hamburger icon to an X when it's open
CamperBot
@camperbot
Apr 29 2017 17:15
amitp88 sends brownie points to @dvecc :sparkles: :thumbsup: :sparkles:
:warning: amitp88 already gave dvecc points
Courtney Church-Fasula
@cchurch-fasula
Apr 29 2017 17:16
I even tried with an image I know renders on an actual website and same issue
Vincent Del Vecchio
@DVecc
Apr 29 2017 17:17
first problem is you wrote scr instead of src
and when using an image url you need to copy the images direct url by right clicking on an image and selecting copy image address
that's the url for the image itself
Courtney Church-Fasula
@cchurch-fasula
Apr 29 2017 17:18
lol Awesome. Thanks!!!
Vincent Del Vecchio
@DVecc
Apr 29 2017 17:18
You're going to need to play around with the css sizing since the image is so large lol
Courtney Church-Fasula
@cchurch-fasula
Apr 29 2017 17:19
for sure... thanks againg.
*again
Vincent Del Vecchio
@DVecc
Apr 29 2017 17:19
you also may want to change to bootstrap 3.3.7 instead of 4
FCC uses the 3.3.7 and some things may not work correctly in 4
instead of the 4.0 url
Courtney Church-Fasula
@cchurch-fasula
Apr 29 2017 17:23
awesome, that fixed the image.
you rock!
Vincent Del Vecchio
@DVecc
Apr 29 2017 17:24
You'll have to use that url every time you create a new codepen project, like when you start the portfolio project
since codepen auto imports the newest version
Courtney Church-Fasula
@cchurch-fasula
Apr 29 2017 17:25
Perfect, I'll make a note for myself.
Aloap
@Aloap
Apr 29 2017 18:18
Hi everybody!
I've some issue with Flexbox on a project
I'm trying to make my portfolio page using Flexbox utilities in Bootstrap 4.
Here my pen: http://codepen.io/Aloap/pen/oZjoap
I can't align the menu stuff on the right of the page neither with the flex-row-reverse, nor with the justify-content-end but the d-flex row is all the width possible.
Can anyone please explain me why?
Thank you!
Siddarth Krishnan
@siddarthk123
Apr 29 2017 18:34
can someone help me with twitch tv?
or no?
how do i get the twitch api?
can someone please tell me?
hello?
how do i get the twitch api?
Siddarth Krishnan
@siddarthk123
Apr 29 2017 18:40
would this be the api?
for freecodecamp
alpox
@alpox
Apr 29 2017 18:42
@siddarthk123 An API is the endpoint you are speaking to. So the "api" would be https://api.twitch.tv/kraken/
@siddarthk123 What you are showing is data coming from the API. Most likely the channel data for the freecodecamp channel.
Alan Saber
@Alan95
Apr 29 2017 18:52
hey guys! got a problem with my calculator. at devices under 550 px the buttons arent on same line anymore. i tried everything with bootstrap(xs-3 etc.) http://codepen.io/BearCoding/pen/rmyQad
Gulsvi
@gulsvi
Apr 29 2017 19:01
@Alan95 You're using Bootstrap 4 in your project and there is no col-xs-* class in bootstrap 4. Change col-xs-3 to col-3 and it will fix your buttons.
You'll also need to get rid of the margins and widths though. Bootstrap is probably going to hurt more than help with a project like this where you want buttons to be the same size.
Alan Saber
@Alan95
Apr 29 2017 19:09
@skycoder01 oh iwas using it along time and i didnt know that there is a newer version! thanks a lot. i lltry to figure it out thanks
CamperBot
@camperbot
Apr 29 2017 19:09
alan95 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1223 | @skycoder01 |http://www.freecodecamp.com/skycoder01
cehu
@cehu
Apr 29 2017 19:51
hey ! I am trying to add sme images to a carousel slideshow... is there a way to resize them so they look good within the code editor...or do I have to use photoshop (if yes how do I know which size to change em to ? )
anyone help ?
Gulsvi
@gulsvi
Apr 29 2017 20:04
@cehu You can make them background images inside each carousel image container and use background-size: cover. If that isn't the look you want, then editing them to be the same aspect ratio will work fine.
cehu
@cehu
Apr 29 2017 20:05
@SkyCoder01 how can I tell which size to make them ?
thx for the reply
Gulsvi
@gulsvi
Apr 29 2017 20:08
@cehu They need to be the same Height x Width to look uniform. The size depends on how big you want them to be - that is, how big your carousel can get.
Jod
@jod29
Apr 29 2017 21:00
Hi! I need help. I'm stuck how to get the value of quoteText from this API. http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en. Need this for the Random Quote Generator. tnx
Keon Samuel
@keonsam
Apr 29 2017 21:01
nav vs navbar?
JesperKSmith
@JesperKSmith
Apr 29 2017 21:04

Hey All! I'm not sure I'm in the right room, so I apologize if I'm in the wrong, please do tell me where to go :) My question is CSS related.

I'm having some trouble with an element not being shown on top, when the element it's on top of, has an opacity below 1 :S Might sound confusing, so here's a jsFiddle with a comment to describe: https://jsfiddle.net/gu5djp63/1/ Basically, when ever my main section has an opacity below 1, my drop down menu is placed behind it, instead of on top of it ? At first I thought it was a z-index problem, but z-index doesn't change anything :S Anyone have an idea ? Thanks in advance :)

István Kozma
@Manfred28
Apr 29 2017 21:13
@JesperKSmith opacity adjusts the opacity of all children of an element
hope i remember that correctly, only took a glance
JesperKSmith
@JesperKSmith
Apr 29 2017 21:14
@Manfred28 I understand that, the problem is the drop down menu, is an entirely different div, that is a sibling to the element with the opacity setting
@ManFred28 nvm, I'm silly.. I fixed it :)
István Kozma
@Manfred28
Apr 29 2017 21:19
you are welcome :P
John MacIntire
@jrwmacintire
Apr 29 2017 21:29
@jod29 Just started the same project. Good luck!
Jod
@jod29
Apr 29 2017 21:36
@jrwmacintire haha! can't quite connect the dots right now.
Gulsvi
@gulsvi
Apr 29 2017 22:12
@jrwmacintire @jod29 You two may want to use a different API, that one seems to be broken - at least all the other projects using that API are broken at the moment. :/
This one is popular, might be worth a try as an alternative: https://quotesondesign.com/api-v4-0/
Jod
@jod29
Apr 29 2017 22:13
@SkyCoder01 tnx sky.
CamperBot
@camperbot
Apr 29 2017 22:13
jod29 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1224 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Kaeleb Rocha
@Kralleb
Apr 29 2017 23:26
Does anyone know how to get JSON data using jquery?
Gulsvi
@gulsvi
Apr 29 2017 23:28
@Kralleb Yes, are you running into some problems with it?
Kaeleb Rocha
@Kralleb
Apr 29 2017 23:29
yeah it's a bummer. How do i properly post my code here?
Gulsvi
@gulsvi
Apr 29 2017 23:29
If you have a codepen, just paste the link here
I was testing to see if i could change the text to the api information.
Gulsvi
@gulsvi
Apr 29 2017 23:30
@Kralleb That API doesn't work over HTTPS. You'll have to open your codepen over HTTP instead: http://codepen.io/Donwinnebago/pen/qmNojm?editors=1111
and you'll have to JSON.stringify(myWeather) to see it in your HTML
But fair warning....all of codepen will require HTTPS soon - since you're just starting out, you probably want to try a different Weather API that works over HTTPS. They need to update the weather challenge... Weather Underground, Dark Sky, and Apixu are all free weather APIs that work over HTTPS
Kaeleb Rocha
@Kralleb
Apr 29 2017 23:32
ah. okay
my god i've been banging my head on this for a few days haha
Do you happen to have some documentation on JSON and ajax you may recommend?
rather AJAX.
Gulsvi
@gulsvi
Apr 29 2017 23:33
I just read the documentation from jQuery and started practicing, asking for help here
Kaeleb Rocha
@Kralleb
Apr 29 2017 23:34
oh okay. thanks @SkyCoder01
CamperBot
@camperbot
Apr 29 2017 23:34
kralleb sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1225 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 29 2017 23:34
Once you get past a few hurdles, it becomes relatively easy. The first hurdle is mixing http and https. You're over that now. Next will be JSONP / CORS.
Kaeleb Rocha
@Kralleb
Apr 29 2017 23:37
alright. I appreciate you for that. I'll read up on it.