These are chat archives for FreeCodeCamp/HelpFrontEnd

20th
Oct 2017
ryanmaddox
@ryanmaddox
Oct 20 2017 01:05
Sorry for the interruption is anybody going through the beta challenges
Tom
@moT01
Oct 20 2017 01:13
@ryanmaddox you're not interrupting anything, im not personally right now... i have done some of them in the past
is there a question on something specific? i might be able to help.
ryanmaddox
@ryanmaddox
Oct 20 2017 01:14
Is it possible to earn the certification on beta
korzo
@korzo
Oct 20 2017 01:14
@ryanmaddox not yet
@ryanmaddox also you can't sign up in beta right now
ryanmaddox
@ryanmaddox
Oct 20 2017 01:15
So it's best I stay with the regular site to get certifications
Tom
@moT01
Oct 20 2017 01:15
the challenges should be pretty much all the same when it gets released, so if you do the projects - you could probly get the certs right away when it gets released
that's what is available at the moment
korzo
@korzo
Oct 20 2017 01:16
@ryanmaddox @moT01 This. also from what I read progress should be preserved as soon as beta goes live
Tom
@moT01
Oct 20 2017 01:17
progress from beta?
ryanmaddox
@ryanmaddox
Oct 20 2017 01:17
Thanks much appreciated I will foucs on the challenges
Adam Faraj
@adamfaraj
Oct 20 2017 01:17
thoughts on this project?
korzo
@korzo
Oct 20 2017 01:17
@moT01 no, from current challenges
Tom
@moT01
Oct 20 2017 01:17
k
yea, i was told you can still get the current certs even after beta comes out and these go away
ryanmaddox
@ryanmaddox
Oct 20 2017 01:18
another question what is the address to submit our code pens to get feedback
I would like input on the code I write
korzo
@korzo
Oct 20 2017 01:19
@ryanmaddox https://gitter.im/FreeCodeCamp/CodeReview
...or anywhere :)
ryanmaddox
@ryanmaddox
Oct 20 2017 01:19
Ok thanks
Tom
@moT01
Oct 20 2017 01:19
right here @ryanmaddox
ill check it out
but yea, there is a specific room like he said
@adamfaraj looks good, seems to be functioning properly, some of the pictures go out of their containers when you shrink the window
and im not sure, but i think you're supposed to show if an account has been closed
Adam Faraj
@adamfaraj
Oct 20 2017 01:21
@moT01 hmm. how would i keep the images contained?
Tom
@moT01
Oct 20 2017 01:22
try maxwidth: 100%;
max-width?
i think there's a hyphen
Adam Faraj
@adamfaraj
Oct 20 2017 01:23
@moT01 aww yeah! thanks man
CamperBot
@camperbot
Oct 20 2017 01:23
adamfaraj sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 883 | @mot01 |http://www.freecodecamp.com/mot01
Marc
@MWBauer
Oct 20 2017 03:51
God evening everyone
Marc
@MWBauer
Oct 20 2017 04:00
Hello?
Fabien SHAN
@X140hu4
Oct 20 2017 04:00
Hello :)
Marc
@MWBauer
Oct 20 2017 04:01
HI Fabien
Can you help with Twitter buttons?
Fabien SHAN
@X140hu4
Oct 20 2017 04:03
Are you doing the random quote challenge?
Marc
@MWBauer
Oct 20 2017 04:03
es
yes
Fabien SHAN
@X140hu4
Oct 20 2017 04:04
Tell me what is your problem :) I am almost done with it
Marc
@MWBauer
Oct 20 2017 04:04
I have a button. I press the button. A quote pops up. I press Tweet and it opens a dialog box. I want it to display the quote.
That's where i'm stuck
Fabien SHAN
@X140hu4
Oct 20 2017 04:05
do you have a codepen link?
Marc
@MWBauer
Oct 20 2017 04:05
https://codepen.io/MBauer/pen/MEXGwR
heroiczero
@heroiczero
Oct 20 2017 04:06
@adamfaraj The "offline" ones are in a straight row and overflow to the right in a smaller screen. Other than that, it was very well done :+1: :star:
Fabien SHAN
@X140hu4
Oct 20 2017 04:10
@MWBauer What are the elements you need? Breakdown the problem
Marc
@MWBauer
Oct 20 2017 04:11
I've been trying to. I'm not so good with linking with href and whatever else is going on.
Why is my tweet button changing?
heroiczero
@heroiczero
Oct 20 2017 04:13
@MWBauer maybe you want to get the same text as the one generated from your JS code
Marc
@MWBauer
Oct 20 2017 04:13
Yes. But I don't want my tweet button to change. I want to press Tweet and have it auto-pop in the dialog box
heroiczero
@heroiczero
Oct 20 2017 04:14
@MWBauer so add it with Jquery into the html
Fabien SHAN
@X140hu4
Oct 20 2017 04:14
Your tweet button is changing because it has a "message" class
When you click on the quote generator button, it affects all elements that have a class of "message"
heroiczero
@heroiczero
Oct 20 2017 04:15
@MWBauer $(".class").html("<a href=\"https://twitter.com/intent/tweet?text=\""+ a[0].content +">Tweet button") this is unfinished but something like this into your JS
Marc
@MWBauer
Oct 20 2017 04:25
it doesn't fancy the +
Adam Faraj
@adamfaraj
Oct 20 2017 04:27
@heroiczero thanks
CamperBot
@camperbot
Oct 20 2017 04:27
adamfaraj sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1909 | @heroiczero |http://www.freecodecamp.com/heroiczero
Marc
@MWBauer
Oct 20 2017 04:28
so....what does this line do?
Ken Haduch
@khaduch
Oct 20 2017 04:31
@MWBauer - hello... it looks like it is attempting to change the link on the "tweet button" to reflect the quote text, forming the new URL within the .html() method parentheses. It is using .class as the selector. It looks like you had message as the class on the button, so you should change it to something unique, and change this line of code to use that same class.
Marc
@MWBauer
Oct 20 2017 04:32
Ok. Thank you.
You say there's a message class on my tweet button?
Ken Haduch
@khaduch
Oct 20 2017 04:35
@MWBauer this comment :point_up: October 20, 2017 12:15 AM looks like it said it
Marc
@MWBauer
Oct 20 2017 04:36
Thatt $ line should fix it?
It's not copying the text into the dialog box
Ken Haduch
@khaduch
Oct 20 2017 04:41
@MWBauer - you have some errors in your code. That code that is attempting to update the link on the button (the <a> element) should be inside the body of your $.getJSON callback because it is attempting to use the data that is returned from the API transaction. Not sure if that will fix everything, I'll try it and see.
Marc
@MWBauer
Oct 20 2017 04:42
wow....someday I'm gonna read that line and it's gonna make perfect sense.
Ken Haduch
@khaduch
Oct 20 2017 04:42
and instead of .class in your jquery, you need to use .twitter-share-button because that is the class that is associated with your button element.
Marc
@MWBauer
Oct 20 2017 04:42
lol Tonight...not so much
Rudrangshu Nandi
@Rud156
Oct 20 2017 04:42
I have some html content that is set through dangerouslySetInnerHTML={{ __html: content }}. But the problem is that I also need a <Link> to appended to the end of the content when the text is truncated. I have found a fix by using a <a> with a href attribute. But it is causing a page reload. Is there any way I can use the <Link> tag provided by React and append it to the end of the text??
Any help would be appreciated
Basically I want the <Link> tags to be treated as React Components and not html
Marc
@MWBauer
Oct 20 2017 04:48
the <a> element should be in the getJSON?
Ken Haduch
@khaduch
Oct 20 2017 04:52
@MWBauer - no, the idea is that @heroiczero was trying to get you to modify the link that is inside your tweet button to have it contain the text of the quote that you received from the $.getJSON call, and the only time that you can access that is after the data is returned, thus you want to put that code into the body of the callback function, so that it looks something like this (although it doesn't seem to be quite correct, but this is what you should be shooting for)
            function(a) {
                $(".message").html(a[0].content);
                $(".twitter-share-button").html(
                    '<a href="https://twitter.com/intent/tweet?text=' +    a[0].content +">Tweet button</a>"
                );
Marc
@MWBauer
Oct 20 2017 04:53
Ok. Thanks. Do you know why it isn't working?
Ken Haduch
@khaduch
Oct 20 2017 04:54
But as I said, it's not working quite right. I think that that is not the proper way to update the anchor element... I'm a little rusty, let me look into it a bit further...
Marc
@MWBauer
Oct 20 2017 04:54
I'm trying to learn what all of these things mean in plain English. It helps me to think more clearly
inside the function, the .message is retrieving the quote, correct?
I have no tweet button.
Marc
@MWBauer
Oct 20 2017 05:05
The href....it's referencing the twitter page?
what's the "intent"?
Is this how it brings up the dialog box for twitter?
Ken Haduch
@khaduch
Oct 20 2017 05:08

@MWBauer - not exactly correct. Inside the function, you have the quote content being returned in your a variable, such that you can display it using that code string $(".message").html(a[0].content); - that is taking the content property of the quote, obtaining its value, and putting that into the DOM in the .message div. The twitter part is a little more confusing to me. You have to look at the Twitter API to see how that works.

You have a tweet button - after you run the quote button's action, when you have the other code correctly written the quote will appear in the page. If you change the body of your .getJSON call to this:

        $.getJSON(
            "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=&" +
                t,
            function(a) {
                $(".message").html(a[0].content);
                $(".twitter-share-button").attr('href','https://twitter.com/intent/tweet?text=' +    encodeURIComponent(a[0].content)
                );
            }
        );

You will get the quote appearing on your page. The twitter part is still not quite there in my newly edited code.

Ashwin
@ashwins93
Oct 20 2017 05:08

The href....it's referencing the twitter page?

href is basically has a web address, it just takes you to that link. Its what you would get if you typed the address in the address bar of your browser, the anchor tag does just that for you

what's the "intent"?
it doesn't have any special meaning to us
but for the twitter server it does
you will learn more about it when you get to backend lessons
its kind of a way of asking the twitter server " i want to GET the new tweet page of twitter" - that's what your browsers says to twitter server
Marc
@MWBauer
Oct 20 2017 05:11
wow...ok
So...clear out JS and drop this in?
@khaduch thanks
CamperBot
@camperbot
Oct 20 2017 05:13
mwbauer sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3383 | @khaduch |http://www.freecodecamp.com/khaduch
Marc
@MWBauer
Oct 20 2017 05:13
I need to review all of this and try to understand it better
Ken Haduch
@khaduch
Oct 20 2017 05:13
yes, I can only try to work on this for a little while longer because I'm burned out, but that will make the quote appear. Oh, one other thing, in your JS external libs, move the load for jquery.js above the bootstrap.js load.
Marc
@MWBauer
Oct 20 2017 05:16
It keeps saying Unexpected end of input
Ashwin
@ashwins93
Oct 20 2017 05:19

It keeps saying Unexpected end of input

looks you forgot the closing brace

for document.ready
Take another look
Ashwin
@ashwins93
Oct 20 2017 05:22
@MWBauer yes a lot of closing parenthesis and braces are missing
$(document).ready(function() {
    $("#randomQuote").on("click", function() {
        var t = new Date().getTime();
        $.getJSON(
            "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=&" +
                t,
            function(a) {
                $(".message").html(a[0].content);
                $(".twitter-share-button").attr(
                    "href",
                    "https://twitter.com/intent/tweet?text=" + encodeURIComponent(a[0].content)
                );
            }
        );
    });
});
added missing parenthesis and tidied, try this
you quote generator is working fine now
if you paste in the code above it works
Marc
@MWBauer
Oct 20 2017 05:25
I tried it. It looks great. This is so far beyond me.
Ya'll are great. and Thanks to all.
When it copies the quote over it has <p> tags
will they disappear when they send it?
Ashwin
@ashwins93
Oct 20 2017 05:26
which p tags are you talking about?
Marc
@MWBauer
Oct 20 2017 05:26
<p>Life beats down and crushes the soul, and art reminds you that you have one. </p>
That's what I see when I tweet
Ashwin
@ashwins93
Oct 20 2017 05:27
yep because the returned JSON has a p tag in it
the "content" comes with p tag
Marc
@MWBauer
Oct 20 2017 05:27
AH!
ok. Thanks.
Ashwin
@ashwins93
Oct 20 2017 05:28
if you wanna remove it you can try a regex
Marc
@MWBauer
Oct 20 2017 05:28
lol
Maybe tomorrow
thanks @ashwins93
CamperBot
@camperbot
Oct 20 2017 05:28
mwbauer sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 380 | @ashwins93 |http://www.freecodecamp.com/ashwins93
Ashwin
@ashwins93
Oct 20 2017 05:28
you're welcome
Marc
@MWBauer
Oct 20 2017 05:28
@heroiczero thanks
CamperBot
@camperbot
Oct 20 2017 05:28
mwbauer sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1910 | @heroiczero |http://www.freecodecamp.com/heroiczero
蒋亚佟
@17623819512
Oct 20 2017 05:33
大家好
Ashwin
@ashwins93
Oct 20 2017 05:34
@17623819512 Hello
rogerloh0
@rogerloh0
Oct 20 2017 05:34
Hi
Marc
@MWBauer
Oct 20 2017 05:34
Hello
蒋亚佟
@17623819512
Oct 20 2017 05:35
多多帮助 我是一个小白 谢谢
Ashwin
@ashwins93
Oct 20 2017 05:35
okay the translate messed with this one
XD
Ken Haduch
@khaduch
Oct 20 2017 05:36

@MWBauer - I got it to pop up a new tab with a tweet call with the latest version that I have. One thing that I did was change the anchor tag to add an attribute target="_blank" because I was getting a "same origin" error trying to pop it up in the CodePen frame. The current incantation of the callback function that I have is this:

            function(a) {
                $(".message").html(a[0].content);
                let twitterText = a[0].content.trim().replace(/<\/?p>/g, '');
                $(".twitter-share-button").attr('href','https://twitter.com/intent/tweet?text=' +    encodeURIComponent(twitterText)
                );
            }

Stripping out the <p> tags that surround the quote, doing an encodeURIComponent call on the text to make it compatible as a URI element, although that is still not quite right for handling all of the special characters. But it's getting there...

rogerloh0
@rogerloh0
Oct 20 2017 05:36
no problem~everyone got to start somewhere @17623819512
蒋亚佟
@17623819512
Oct 20 2017 05:37
嗯嗯
tharun gowrishankar
@tharun26
Oct 20 2017 05:38
Hi Guys, I need a help. I have a element inside a iframe. Using Content script inside a iframe i can find its location. I want to find the location of that element wrst to the website in which iframe is injected
is there any api i am not aware of?
alpox
@alpox
Oct 20 2017 05:47
@tharun26 as far as im aware, there is no way to access an element in an iframe
Fabien SHAN
@X140hu4
Oct 20 2017 05:50
hmm "little white" to say newbie in chinese, interesting
蒋亚佟
@17623819512
Oct 20 2017 05:51
是的 我刚接触互联网开发这一职业
Ashwin
@ashwins93
Oct 20 2017 05:54

hmm "little white" to say newbie in chinese, interesting

That is newbie? haha

i was scared when i saw the translation
蒋亚佟
@17623819512
Oct 20 2017 05:56
好像谷歌浏览器上有一个自动翻译功能
Fabien SHAN
@X140hu4
Oct 20 2017 05:59
@ashwins93 Yeah just checked on a dictionary haha
Ashwin
@ashwins93
Oct 20 2017 05:59
@X140hu4 that's really funny
Fabien SHAN
@X140hu4
Oct 20 2017 06:00
@17623819512 好像当时不太精确. It seems but it is not very precise.
蒋亚佟
@17623819512
Oct 20 2017 06:02
哈哈 有点尴尬了
linkin-park
@linkin-park
Oct 20 2017 06:07
why react have a concept of virtual DOM?
wont that reduce the speed?
and memory increase?
Ashwin
@ashwins93
Oct 20 2017 06:08
@linkin-park It actually optimizes the performance
by making the minimal changes to DOM and doing it in batches
linkin-park
@linkin-park
Oct 20 2017 06:14
cant really believe this :(
Ashwin
@ashwins93
Oct 20 2017 06:14
why?
linkin-park
@linkin-park
Oct 20 2017 06:14
since the comparision goes with framework that modifies the entire to-do list
Ashwin
@ashwins93
Oct 20 2017 06:15

As an example, let's say that you have a list that contains ten items. You check off the first item. Most JavaScript frameworks would rebuild the entire list. That's ten times more work than necessary! Only one item changed, but the remaining nine get rebuilt exactly how they were before

this

yes
I also think the Virtual DOM is immutable, i'm not sure
I think we can test it ourselves if VDOM is really quicker than Sans-react DOM manipulation
Build a To Do list with 1000 items in it
both with React and without React
if you're computer is really powerful 1000 items may not make a difference, in that case we can try adding images or other stuff that would slow down the computer - just enough so that we can compare the difference
we can time the operations
Adel
@AdelMahjoub
Oct 20 2017 06:19
if the list is in the parent component, and each item is passed as a prop to child components, it will re-render all the components no matter what
linkin-park
@linkin-park
Oct 20 2017 06:20
you have a point
before doing somethign crazy.
one has virtual DOM + VDOM manipulation + real DOM manipulation
and other vanilla DOM manipulation .
what would go better ? @ashwins93 @AdelMahjoub
Adel
@AdelMahjoub
Oct 20 2017 06:20
prop change => re-render, setState => re-render, it is up to the writer to optimize
Ashwin
@ashwins93
Oct 20 2017 06:23
re render doesnt necessarily result in DOM manipulation
if props dont change there wont be dom manipulation
if props change only for one of the component then only that item changes
Adel
@AdelMahjoub
Oct 20 2017 06:24
in this test the app should hang at 362880 component re-render https://all-permutations.surge.sh/
Ashwin
@ashwins93
Oct 20 2017 06:24
this is why you add a key to a "li"
@AdelMahjoub i tried doing something similar
Adel
@AdelMahjoub
Oct 20 2017 06:25
open the console, there is the time when the worker finishes, when setState is called
Ashwin
@ashwins93
Oct 20 2017 06:25
but my pc couldnt handle more than 7 chars
this seems really efficient
Adel
@AdelMahjoub
Oct 20 2017 06:28
here what happens when it start re-rendering those 360k components
Capture du 2017-10-20 08-27-45.png
Ashwin
@ashwins93
Oct 20 2017 06:30
i crashed my browser
i entered 12 chars
Adel
@AdelMahjoub
Oct 20 2017 06:30
@ashwins93 :smile: 9 is already too much
Ashwin
@ashwins93
Oct 20 2017 06:31
haha
i have a pen with vanilla JS
you cant run more than 7 in that
but my algo is inefficient
it throws too much recursion
Adel
@AdelMahjoub
Oct 20 2017 06:32
use a service worker to do the processing

use a service worker to do the processing

have to try that

here what happens when it start re-rendering those 360k components

360k components a page is an overkill lol

imagine a web page with so much components
technically it would still be an SPA lol
Adel
@AdelMahjoub
Oct 20 2017 06:38
take a look at this 12:40 ~ 14:27
Ashwin
@ashwins93
Oct 20 2017 06:41
lol is this another Ionic vs react video?
i watching it btw
Adel
@AdelMahjoub
Oct 20 2017 06:42
they are not comparing, it is the difference between sync and async rendering
react 16 uses async rendering I think, not sure
Ashwin
@ashwins93
Oct 20 2017 06:43
wow they are saying that react rendering is worse than vanilla
?
Adel
@AdelMahjoub
Oct 20 2017 06:43
stencil is used to write 'native' web components, you can use them then with any js framework
linkin-park
@linkin-park
Oct 20 2017 06:47
any tutorial on react? other than docs?
Adel
@AdelMahjoub
Oct 20 2017 06:48
best introduction and getting started with react are the official docs
Ashwin
@ashwins93
Oct 20 2017 06:48
@linkin-park the-road-to-learn-react
linkin-park
@linkin-park
Oct 20 2017 06:48
yes
Ashwin
@ashwins93
Oct 20 2017 06:48
available on leanpub
that book is really good
it teaches about react 16
you can also try npm -i g learnyoureact but i've not gone through it completely
Adel
@AdelMahjoub
Oct 20 2017 06:50
always fully read and try the getting started of libraries/frameworks, before reading tutorials/books
think of everything as just a manual to use a tool, you only need a tutorial to use a printer if you don't understand the manual shipped with it
mostly to save time, very precious time
Angelo
@TheCodingMeatball
Oct 20 2017 08:14
does anyone know how to add an extra webpage to their github website ??
Fabien SHAN
@X140hu4
Oct 20 2017 12:32
I am having some trouble with the local weather project
I manage to get the data from the fcc weather API with the static URL. The getCurrentPosition has a callback function that modify a div with the latitude and longitude.
I tried having global variables to hold latitude and longitude, so as to dynamically build the url for the API request.
Fabien SHAN
@X140hu4
Oct 20 2017 12:37
var x = document.getElementById("data");
var y = document.getElementById("message");

function getLocation () {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);

    var request = new XMLHttpRequest();
    var getURL = 'https://fcc-weather-api.glitch.me/api/current?lat=34.6463818&lon=135.5157768';
    request.open('GET', getURL, true);

    request.onload = function() {
      if (request.status >= 200 && request.status < 400) {
        // SUCCESS !
        var data = request.responseText;
        y.innerHTML = data;
      } else {
        // We reached our target server, but it returned an error
      }
    };
    request.onerror = function() {
      // There was a connection error of some sort
    };
    request.send();
  } else {
    y.innerHTML = "Geolocalisation is not supported by this browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitude: " + Math.round(position.coords.latitude) +
  "<br>Longitude: " + Math.round(position.coords.longitude);
}
Ashwin
@ashwins93
Oct 20 2017 12:39
@X140hu4 seems like you have hardcoded the lat and lon values
am i missing something?
Fabien SHAN
@X140hu4
Oct 20 2017 12:41
No that is the base code so far. I declared a var lat; just below var y = ..., and have in the showPosition function lar = position.coords.latitude
Ashwin
@ashwins93
Oct 20 2017 12:42
can you post the link to your pen?
Fabien SHAN
@X140hu4
Oct 20 2017 12:42
Wait I have to copy paste... I do it on my computer before putting on codepen
Ashwin
@ashwins93
Oct 20 2017 12:42
oh alright
fcc have their own weather api now Wow
when i did that challenge i had to struggle with that open weather api
it was not fun
the chatroom was always filled with complaints about open weather
Fabien SHAN
@X140hu4
Oct 20 2017 12:45
haha
I cannot get the geolocalisation data in codepen, gimme a sec
Ashwin
@ashwins93
Oct 20 2017 12:48
try different browswer
browser*
Worked on Edge haha
gosh I have to install firefox
Ashwin
@ashwins93
Oct 20 2017 12:50
I know
i remember how i did that project
Fabien SHAN
@X140hu4
Oct 20 2017 12:50
I modified my location access right in chrome. works now ^^;
Ashwin
@ashwins93
Oct 20 2017 12:50
great
Fabien SHAN
@X140hu4
Oct 20 2017 12:51
So at the moment I have a global variable called lat. When clicking for the first time my lat is returned "Undefined". When clicking a second time, lat has the value and insert it in the html
Scopewise it seems fine, although not great in terms of security I imagine. It feels like there is some time issue?
Fabien SHAN
@X140hu4
Oct 20 2017 12:56
Is the request sent before the lat is assigned the value?
Ashwin
@ashwins93
Oct 20 2017 13:01
@X140hu4 make your AJAX request inside the Callback funcion of geolocation
your ajax request goes before the location is obtained
its not a problem with scope
it is a problem with timing
if (navigator.geolocation) { this only checks if the browser supports geolocation
try moving your entire request code inside your showPosition function
Fabien SHAN
@X140hu4
Oct 20 2017 13:03
Oh neat
I just did it quickly, it seems to work. I have to go somewhere now but I will dig a little bit further after :)
Thank you very much @ashwins93 !!!
CamperBot
@camperbot
Oct 20 2017 13:04
x140hu4 sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 382 | @ashwins93 |http://www.freecodecamp.com/ashwins93
Ashwin
@ashwins93
Oct 20 2017 13:04
you're welcome @X140hu4
Adam Faraj
@adamfaraj
Oct 20 2017 14:00
anyone here good with promises?
Ashwin
@ashwins93
Oct 20 2017 14:01
@adamfaraj just post your question someone will answer
if you're gonna ask a general question like that people are gonna be thinking that "oh i don't know everything about that, let someone answer"
but they might have some idea about it
Tom
@moT01
Oct 20 2017 14:08
i always keep my promises
Adam Faraj
@adamfaraj
Oct 20 2017 14:14
how do i get my then to console out instead of my catch
let myFirstPromise = new Promise((resolve, reject) => {
  setTimeout(function(){
    resolve("Adam!");
  }, 250);
      reject("Oh no");
});


myFirstPromise
.then((successMessage) => {
  console.log("Yay! " + successMessage);
})
.catch((rejectedMessage) => {
    console.log("Sarah " + rejectedMessage);
});
alpox
@alpox
Oct 20 2017 14:37
@adamfaraj you reject immediately before your resolve can hook in. If the promise is once rejected, no more reject or resolve can happen and so your resolve is ignored
In this case, the reject doesnt make much sense because you have no actual failure possibility. Resolve alone would do
For testing you could in the callback of the timout randomly reject or resolve
FakhriAz
@FakhriAz
Oct 20 2017 15:51
I am trying to automatically fill in a text field using JS, any idea what is wrong?
<form>
  ZIP:<br>  
  <input type="text" id="zip" onBlur="fillCity();"><br>
  CITY:<br>
  <input type="text" id="city"><br>
  <script>
      function fillCity() {
         var zipCode = document.getElementById(zip).value;
         var cityName;
         switch(zipCode) {
           case "60608" : 
             cityName = "Chicago";
             break;
           case "68114" : 
             cityName = "Omaha";
             break;
           case "53212" : 
             cityName = "Milwaukee";
        } 
        document.getElementById(city).value = "cityName";      
      }   
      </script>
</form>
aaronRhodebeck
@aaronRhodebeck
Oct 20 2017 15:54
@FakhriAz It looks like you need to remove the quotes around cityName when you set the value to your variable. Right now it is setting the element city to the string cityName, you want to set it to the variable.
Moisés Man
@moigithub
Oct 20 2017 15:55
var zipCode = document.getElementById(zip).value;
whats zip ? a variable ? and city ?
aaronRhodebeck
@aaronRhodebeck
Oct 20 2017 15:56
zip is the html element id
Ashwin
@ashwins93
Oct 20 2017 15:56
yes but zip should be "zip"
aaronRhodebeck
@aaronRhodebeck
Oct 20 2017 15:56
Ah yes, thanks! I missed that
Moisés Man
@moigithub
Oct 20 2017 15:58
without quotes is a variable
and if its a variable.. it should be declared/assigned value somewhere.. else will be undefined
FakhriAz
@FakhriAz
Oct 20 2017 16:05
@aaronRhodebeck It is a mistake, but I tried that still does not work
aaronRhodebeck
@aaronRhodebeck
Oct 20 2017 16:09
Did you also change your getElementById calls to "city" and "zip"?
FakhriAz
@FakhriAz
Oct 20 2017 16:09
@moigithub @aaronRhodebeck @ashwins93 Thanks it works. I deleted the quotes in cityName and added them to "zip" and "city"
CamperBot
@camperbot
Oct 20 2017 16:09
fakhriaz sends brownie points to @moigithub and @aaronrhodebeck and @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 294 | @aaronrhodebeck |http://www.freecodecamp.com/aaronrhodebeck
:star2: 3683 | @moigithub |http://www.freecodecamp.com/moigithub
:cookie: 383 | @ashwins93 |http://www.freecodecamp.com/ashwins93
aaronRhodebeck
@aaronRhodebeck
Oct 20 2017 16:09
Great!
FakhriAz
@FakhriAz
Oct 20 2017 16:14
By the way what is the data type of zip in id="zip" is it a string?
And should we always use quotes in both id= and document.getElementById?
AnaCamelo
@AnaCamelo
Oct 20 2017 16:20
Hi! Just wanted to ask if it is worth it paying for the Prepros app. I've been using the free trial, but the pop up message is driving me nuts. I want to know if in the long run and for bigger projects and different libs it has worked perfectly well for those ones who have used it. Thanks! :)
aaronRhodebeck
@aaronRhodebeck
Oct 20 2017 16:21
@FakhriAz Yes, in javascript anything in " " is a string (just means a collection of letters) so in html you are setting the id property to a string, so when you search for it using getElementById() you will be searching for a string.
FakhriAz
@FakhriAz
Oct 20 2017 17:38
@aaronRhodebeck Many thanks
CamperBot
@camperbot
Oct 20 2017 17:38
fakhriaz sends brownie points to @aaronrhodebeck :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @aaronrhodebeck |http://www.freecodecamp.com/aaronrhodebeck
rscales02
@rscales02
Oct 20 2017 17:50
I am trying to get my countdown clock to pause and resume on the same button click, as of now a second click starts a second clock... https://codepen.io/rscales02/pen/dVajVW
any thoughts on how to prevent another clock from starting and/or pausing and starting the current clock?
Jessie Cryer
@j-cryer
Oct 20 2017 17:57
@rscales02 let me check it out right quick
rscales02
@rscales02
Oct 20 2017 17:59
thanks @j-cryer
CamperBot
@camperbot
Oct 20 2017 17:59
rscales02 sends brownie points to @j-cryer :sparkles: :thumbsup: :sparkles:
api offline
Jessie Cryer
@j-cryer
Oct 20 2017 18:09
@rscales02 hm, which variable is supposed to hold the remaining time?
rscales02
@rscales02
Oct 20 2017 18:11
diff i think
rscales02
@rscales02
Oct 20 2017 18:16
I figured out how to get it to start only once... woo headway... still not sure why I can't get it to change running to false
Jessie Cryer
@j-cryer
Oct 20 2017 18:28
@rscales02 youre setting running = false on every click event. declare var running = false; once globaly at the beginning of the script and change it in the if (running) else statements (tahts what ive done, ive made a bit of progress) still trying to work out whatever kinks exist
Kaz Baig
@kbaig
Oct 20 2017 18:28
@rscales02 you would want to add an if(running) statement to your clock click listener. If it is running, clearTimeout, otherwise setTimeout,
and also toggle running depending on what the current state is
Jessie Cryer
@j-cryer
Oct 20 2017 18:31
@rscales02 you can set running to false you just have a probelm in the click event. you set running = false before the if else statement right? so running = false then if running === false then set running = true THEN you console.log(running) so its going to be try every time
Jessie Cryer
@j-cryer
Oct 20 2017 18:40
can someone help me with my pen? https://codepen.io/shipfaced/pen/mBodqq
i want the hovering image to constantly update with cursor position so that its always relative
right now the event is only happening once (when i initially hover the image) so that the image stays in one place
R0ulito
@R0ulito
Oct 20 2017 18:48
I don't really know how you'll have to do this
But that's obviously cause of hover()
the img pops where the .card is hovered @ first time
onmousemove() ????
I got a pb too ;)
@ work on a laravel project
Got a conditional select filled from an ajax get request triggered by onchange from an other select
It works fine
But i had some changes to make, and now on some views it's possible to have this pair a multiple time
Bet you guess only the first pair works fine when there's more than one pair
How can i do that ?
korzo
@korzo
Oct 20 2017 19:01
@R0ulito Hou do you target select?
by class or by ID?
rscales02
@rscales02
Oct 20 2017 19:10
@j-cryer yeah I noticed that if I set running to my click event it resets it on every click
but it doesn't change anything when I can get running to switch to false the timer keeps on a rollin
rscales02
@rscales02
Oct 20 2017 19:16
also just realized by not setting it equal to anything it resets to undefined with every click
I quit for the day...
linkin-park
@linkin-park
Oct 20 2017 19:32
hey guys
hi @korzo
korzo
@korzo
Oct 20 2017 19:33
@linkin-park Hi
linkin-park
@linkin-park
Oct 20 2017 19:33
how are you sir? @korzo
korzo
@korzo
Oct 20 2017 19:37
@linkin-park Great. Slow Friday night, working on personal project.
How are you doing?
linkin-park
@linkin-park
Oct 20 2017 19:38
i'm switching to early language :)
korzo
@korzo
Oct 20 2017 19:41
@linkin-park If you are comfortable with Java/C and can make money with it, go for it.
@linkin-park With what are you struggling here at FCC ?
Javascript or HTML/CSS ?
linkin-park
@linkin-park
Oct 20 2017 19:42
well my life is insane :)
i myself dont know why i want to go to js
since i had spent a little on js very long back thought of coming back but this front end / backend will take a heck lot of time :)
korzo
@korzo
Oct 20 2017 19:47
@linkin-park If you are good with backend, why even bother with frontend.
anyway, coming from Java, is javascript really that difficult?
linkin-park
@linkin-park
Oct 20 2017 19:47
not at all @korzo
but i'm looking for something really cool to do :)
i'm not getting what todo .
there is no aha! moments
and alot of frameworks
back in the days there was a release of jquery :)
now zillions of frameworks :)
when a person dont know what to do he is dead :)
so i'm dead :(
hensn5250
@hensn5250
Oct 20 2017 19:50
hey
thought the room was dead
korzo
@korzo
Oct 20 2017 19:51
@linkin-park Don't even bother to learn some framework unless you are going to use it in next project.
I wasted a lot of time learning frameworks/libraries whose are no longer cool nor alive :)
hensn5250
@hensn5250
Oct 20 2017 19:51
@korzo right. learn the basics.
korzo
@korzo
Oct 20 2017 19:51
Stick to vanilla.js and pick framework, when you are going to use it. Most frameworks you can learn in the week.
hensn5250
@hensn5250
Oct 20 2017 19:52
Still haven't learned jQuery yet although I know the basics of it.
nerkartushar8
@nerkartushar8
Oct 20 2017 19:52
fullheight.png
Hi guys, height:100% ; min-height:100%; overflow:hidden; is not working for me to make a div occupy whole height. Please help.
korzo
@korzo
Oct 20 2017 19:53
I think jQuery is only library worth learning upfront.
hensn5250
@hensn5250
Oct 20 2017 19:53
libraries are good when working in a large group where you need standard code. not so much with individual or specific projects
linkin-park
@linkin-park
Oct 20 2017 19:53
to tell the truth in my next project , use a lot of framework but i'm not sure thats what i wanted todo.
hensn5250
@hensn5250
Oct 20 2017 19:54
@nerkartushar8 is there content in the div?
linkin-park
@linkin-park
Oct 20 2017 19:54
as steve jobs said you need find what you love :)
i'm looking ...
hensn5250
@hensn5250
Oct 20 2017 19:55
I forgot I also need some help.
korzo
@korzo
Oct 20 2017 19:55
@nerkartushar8 You need height set also on parent to make it work
@nerkartushar8 Is it bottstrap?
nerkartushar8
@nerkartushar8
Oct 20 2017 19:56
No it's not bootstrap .
parents are having height, I made sure
korzo
@korzo
Oct 20 2017 19:57
@nerkartushar8 the try display: table or table-cell
linkin-park
@linkin-park
Oct 20 2017 19:57
the idea of bootstrap is really great :)
hensn5250
@hensn5250
Oct 20 2017 19:57
100% will only go to 100% of its container
korzo
@korzo
Oct 20 2017 19:57
@nerkartushar8 or flexbox
nerkartushar8
@nerkartushar8
Oct 20 2017 19:57
Is flexbox supported in IE 10?
hensn5250
@hensn5250
Oct 20 2017 19:58
can someone take a look at this page using chrome?
linkin-park
@linkin-park
Oct 20 2017 19:58
i get alot of calls on java/C# but 0 calls on js :P
korzo
@korzo
Oct 20 2017 19:59
@linkin-park I would say start without framework and pick one when it's necessary .
hensn5250
@hensn5250
Oct 20 2017 20:00
The div with the weather stats is suppose to have a " ^ " icon on it when hovered over at top or bottom edge.
For some reason it only allows hover on every other rotation but it works fine in Firefox.
linkin-park
@linkin-park
Oct 20 2017 20:04
i'm more into looking for something i really wanted to do :)
i'm not intrested most of the things :) to be fair
bye all
hensn5250
@hensn5250
Oct 20 2017 20:08
anyone?
Ivan Ngundela
@ingundela
Oct 20 2017 20:11
hello everyone, I need some advice from you my friends who have been in this journey for longer than me... I've only being learning web development for 10 Months ... I have very basic html, css, bootstrap knowledge and able to build basic websites... I'm now trying to focus more in learning javascript from scratch but since I've shared with family and friend the project have done I don't stop getting requests to build website for small business (they want to pay me), I still have a full time job and only have to learning programming 2 to 3 hours a day in the evening when I'm back from work and olso on weekends.. what should I do? job accepting new projects and focus in learning js or do both?Thanks...
korzo
@korzo
Oct 20 2017 20:11
@hensn5250 try to change parent to grandparent
@hensn5250 It's strange, because hover isn't triggered unless I set it manually in chrome
hensn5250
@hensn5250
Oct 20 2017 20:12
Will try that
korzo
@korzo
Oct 20 2017 20:12
@linkin-park bye
@hensn5250 changing to #weather_specs_grandparent works for me in Chrome
hensn5250
@hensn5250
Oct 20 2017 20:13
changing css?
korzo
@korzo
Oct 20 2017 20:15
@hensn5250 I changed all
#weather_specs_parent:hover #xxx:before
to
#weather_specs_grandparent:hover #specs_top_1::before
hensn5250
@hensn5250
Oct 20 2017 20:15
oh ok
@korzo thanks
CamperBot
@camperbot
Oct 20 2017 20:19
hensn5250 sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 645 | @korzo |http://www.freecodecamp.com/korzo
hensn5250
@hensn5250
Oct 20 2017 20:19
Works both in FF and Chrome
korzo
@korzo
Oct 20 2017 20:23
@hensn5250 Glad it helped
hensn5250
@hensn5250
Oct 20 2017 20:27
@korzo I am trying to get the weather stats to rotate onclick in chrome. Any suggestions? I
I tried switching the transform properties on the parent and grandparent but that isn't working.
korzo
@korzo
Oct 20 2017 20:32
@hensn5250 Dou you have only 2 panels?
hensn5250
@hensn5250
Oct 20 2017 20:32
yes
korzo
@korzo
Oct 20 2017 20:32
I would listen for click event on grantparent and toggle class on click
hensn5250
@hensn5250
Oct 20 2017 20:32
the data is input from an array
korzo
@korzo
Oct 20 2017 20:32
Then set rotation in css for toggled class
hensn5250
@hensn5250
Oct 20 2017 20:35
yes that would work. but I have the listener on the divs in side. So that a click on the top div flips up and a click on the bottom div flips down.
korzo
@korzo
Oct 20 2017 20:36
That's why to put listener on the grandparent and toggle class on grandparent
It will work regardless which panel is currently visible
hensn5250
@hensn5250
Oct 20 2017 20:40
But the grandparent will only flip in one direction , up or down. With 2 divs you can go either direction, up and down.
I may not be understanding you
korzo
@korzo
Oct 20 2017 20:45
@hensn5250 You have only 2 panels. frontface (temperature) and back face.
So you can set class on grandparent , for example .rotated and add to css
#weather_specs_grandparent.rotated #weather_specs_parent {
   transform: rotateX(180deg);
}
hensn5250
@hensn5250
Oct 20 2017 20:45
ooooh. I see.
@korzo Thanks again.
CamperBot
@camperbot
Oct 20 2017 20:48
hensn5250 sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
api offline
hensn5250
@hensn5250
Oct 20 2017 20:50
I've been working on this for a while and this really saved me lots of time. I will implement the changes in a bit. Take care.
Naaman Saif
@Naaman-Saif
Oct 20 2017 21:24
Hi
I am stuck on the Local Weather App Can anybody help me?
korzo
@korzo
Oct 20 2017 21:35
@Forlenza yep
Naaman Saif
@Naaman-Saif
Oct 20 2017 21:36
I have almost made the app I just can't convert From Celsius to Fahrenheit and viceversa
I can get the temperature and weather icon though.
Should I show you the JavaScript?
korzo
@korzo
Oct 20 2017 21:39
@Forlenza yes, post link to your pen
korzo
@korzo
Oct 20 2017 21:42
@Forlenza You can't use a inside $("#convertTemp").click(function(){ as it's not in the scope
Naaman Saif
@Naaman-Saif
Oct 20 2017 21:42
I tried putting it in a global variable "temp" first it still didn't work
korzo
@korzo
Oct 20 2017 21:43
@Forlenza The best way is to store temperature inside global variable
Naaman Saif
@Naaman-Saif
Oct 20 2017 21:43
I did so
It still didn't work
korzo
@korzo
Oct 20 2017 21:44
then inside getJSON callback assign a.main.temp to this global variable
Naaman Saif
@Naaman-Saif
Oct 20 2017 21:44
Have a look now
I did this before
korzo
@korzo
Oct 20 2017 21:44
and inside click callback use this global variable for calculation
Naaman Saif
@Naaman-Saif
Oct 20 2017 21:45
have a look
korzo
@korzo
Oct 20 2017 21:46
@Forlenza also you have error in geolocation
Naaman Saif
@Naaman-Saif
Oct 20 2017 21:46
Which is?
korzo
@korzo
Oct 20 2017 21:46
@Forlenza no, sorry, geolocation is ok.
Naaman Saif
@Naaman-Saif
Oct 20 2017 21:47
Phew you scare me bud xD
What do I do for conversion now?
korzo
@korzo
Oct 20 2017 21:48
@Forlenza temperature is in F or C?
Naaman Saif
@Naaman-Saif
Oct 20 2017 21:49
Celsius atm I suppose
korzo
@korzo
Oct 20 2017 21:51
@Forlenza
Put temperature inside span with ID
create global variable temp
Inside getJSON callback assign temp = a.main.temp;
Inside click callback toggle C/F, calculate temperature and replace content of span with temperature
Naaman Saif
@Naaman-Saif
Oct 20 2017 21:54
Didn't get the toggle part
korzo
@korzo
Oct 20 2017 21:55
@Forlenza
toggle between Celsius and Fahrenheit
Naaman Saif
@Naaman-Saif
Oct 20 2017 21:55
How do I do that?
I am just putting everything under a span
korzo
@korzo
Oct 20 2017 21:59

You should store current scale inside global variable
var scale = "C";

Inside click callback then test:

var currentTemp
if(scale === 'C') {
  scale = 'F';
  // currentTemp = convert temp to Fahrenheit
} else {
  scale = 'C';
  currentTemp = temp;
}
document.getElementbyId('temperature').innerHTML = currentTemp + '  ' + scale;
Naaman Saif
@Naaman-Saif
Oct 20 2017 22:20
I'll do it in the morning lol xD
I can't figure it out now xD
This Challenge has been keeping me since months
William Sun
@WillTheSun
Oct 20 2017 22:22

Very simple FlexBox question! I'm trying to vertically align an element, but it's not working

<style>
        body{
            margin: 0;
            background-color: #233B45;
            font-family: 'Arial';
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        .container{
            margin:auto;
            height: 450px;
            width: 350px;
            background-color: #F9F6E5;
            text-align: center;
            border-radius: 15px;
            overflow: hidden;
        }

I've commented out everything else on the page. The container element just stays fixed to the top =(

korzo
@korzo
Oct 20 2017 22:23
@Forlenza Keep me posted ;)
Lee
@LeeConnelly12
Oct 20 2017 23:26

Hi everyone,

I have a method in a class that uses it;s context (this) to get a value.
I want to be able to call that method from another class and keep it's original context, how would i do this?

Thanks

korzo
@korzo
Oct 20 2017 23:32
@LeeConnelly12 I'm not sure which 'this' you want to use in another class