These are chat archives for FreeCodeCamp/HelpFrontEnd

1st
Sep 2017
Ghost
@ghost~55a04b725e0d51bd787af54c
Sep 01 2017 01:05
Hi guys
Brandon Carlino
@bacarlino
Sep 01 2017 01:09
Hey guys, as one of my first major projects on my own, I'm wanting to build a website for an electrical contractor who's been around for over 20 years, has high profile clients, but has absolutely zero web presence. One snag I'm running into is coming up with descriptive text to fill out the different sections. I think over time I will get better at it, but I'm just drawing blanks... even when I look at other similar sites for inspiration. When building sites for companies, would you say the developer typically looks for the customer to submit blurbs about their company and it's services? Or is it somewhat up to the developer to fill out these sections? At this point, I'm not working with the contractor, they don't even know I'm doing it...
Ghost
@ghost~55a04b725e0d51bd787af54c
Sep 01 2017 01:10
@piteto Right, I've figured that out
The resolution is really bad
Ken Haduch
@khaduch
Sep 01 2017 01:57
@bacarlino - that's an interesting question. I don't have too much experience doing that type of work. I have some limited experience and have had both things, where there was already "copy" written for the site and I didn't have to worry about it. In another case someone who didn't really know what to do for the site, so I came up with ideas and worked through it with them after they started to think about it. Does this company have any advertising that you can see, or any brochures or pamphlets that you can leverage off of?
Christopher
@chris-loyd
Sep 01 2017 01:59
@bacarlino Depending on the size of the company, usually whomever you’re working with from the company that’s the stakeholder of the project would provide material from their marketing or PR department for general information about the company.
@bacarlino Since you’re not working with anyone, just throw in some Lorem Epsem or put some generic statements in
Ingram Jones
@Iggy1906
Sep 01 2017 02:02

Got a question, need some help, I don't understand why my vids are working and why they keep failing in the test room. Any ideas or suggestions?

https://codepen.io/iggy1906/pen/bRMVMJ?editors=1100

Lorrie Pearson
@Lorrie01
Sep 01 2017 02:38
@Iggy1906 change to id="video" as stated in the test criteria and add a media query.
Can anyone view this and tell me why the results are not centered on the page? Everything is on the left. My Tribute Page is all against the left.
iso
@iso1048
Sep 01 2017 03:02
@godluvu22 did you load bootstrap?
@godluvu22 might be better to make your tribute page in a pen rather than a project
Denise Pilgrim
@godluvu22
Sep 01 2017 03:05
I clicked on External Resources and clicked on put Bootstrap on clipboard. That is the only thing I could see to do.
iso
@iso1048
Sep 01 2017 03:10
<!DOCTYPE html>
<html lang=en>

<head>
  <meta charset="UTF-8" />
  <title>YOUR TITLE</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>

<body>
</body>
i have only made one project and I linked bootstrap as shown above.
Denise Pilgrim
@godluvu22
Sep 01 2017 03:13
ok Thanks so much gothamknight, I will try that!
@gothamknight It worked!! Where did you get this code? I never saw it in my Free Code Camp tutorials.
iso
@iso1048
Sep 01 2017 03:17
@godluvu22 glad it worked. https://v4-alpha.getbootstrap.com/getting-started/introduction/ In the freecodecamp challenges, bootstrap is linked 'behind the scenes' if I recall correctly
Netrunner21
@Netrunner21
Sep 01 2017 03:18
nice little guide for handling synchronous vs asynchronous code: https://www.pluralsight.com/guides/front-end-javascript/introduction-to-asynchronous-javascript
Ghost
@ghost~55a04b725e0d51bd787af54c
Sep 01 2017 05:19
Hi guys
My web app is really off in it's responsiveness
for example, there's a huge space between I'm a and the scroll words. How do I fix this?
fefo360
@fefo360
Sep 01 2017 05:44
Hello
Yvonne
@yvonne6344
Sep 01 2017 06:20
hi
Rafael Monroy
@rafaelmonroy
Sep 01 2017 06:40
hey everyone, almost done with the JS part of my SHOW LOCAL WEATHER challenge, but I am having trouble toggling between C and F, i created the button that turns the C to F, but I have no idea how to get it to toggle back and forth ? can anyone shine some light? :) https://codepen.io/rafaelmonroy/pen/BdMyeb
iso
@iso1048
Sep 01 2017 06:52
@rafaelmonroy do not have the btn function inside the success function of the ajax call for starters
Ken Haduch
@khaduch
Sep 01 2017 10:36
@rafaelmonroy - it looks like you have it changing one time, but it doesn't toggle back and forth? Typically it does do that for all of the projects that I looked at. You need to keep track of (or determine on the fly) which value you are currently displaying and then display the other value. You can do this with a variable that you can test, or test the text that you are displaying. The advice is generally to keep a local variable in the javascript that you can test.
heroiczero
@heroiczero
Sep 01 2017 10:40
@rafaelmonroy have to create something similar to https://stackoverflow.com/questions/3047755/i-am-trying-to-make-a-simple-toggle-button-in-javascript for your F and C
Henry
@GitHub-Henry
Sep 01 2017 10:45
@heroiczero nice link of solutions
Dharmik Thakkar
@thakkardharmik
Sep 01 2017 11:46
Hi Guys. I am new here.
Ken Haduch
@khaduch
Sep 01 2017 11:48
@thakkardharmik - hey there, welcome to freeCodeCamp!
heroiczero
@heroiczero
Sep 01 2017 11:48
@thakkardharmik Hello welcome to Free code camp :)
Spyrantis Theodoros
@thodorisanta
Sep 01 2017 12:45
okay, so i had this idea but i have absolutely no clue on how to do it. So i wanna make a code that will have a "text" like 3-4 lines and lets say that the site will have some mini terms and conditions and it wants to make sure that the user read the terms. And i want the user to confirm that he read the terms by hovering his pointer through all the letters of the text(obviously left to right and every line). Like kids do with their fingers when they read books. 1)What do you think about this idea? 2)How can i make something like that?
Marianissimus
@Marianissimus
Sep 01 2017 12:46
@thodorisanta you have a problem with that - think of the mobile devices and tablets. there is no mouse. there is no pointer. what will they be hovering with?
just1witness
@just1witness
Sep 01 2017 12:47
@thodorisanta I would be irked... to say the least if a website made me do that, haha.
Spyrantis Theodoros
@thodorisanta
Sep 01 2017 12:49
@just1witness @Marianissimus okay, so its a NO for mobiles-tablets. But lets say that the FFC forum wants its users to read the "terms" it has (like no spamming, swearing etc) they are not too many, just 2-3 lines. What about that? :P
just1witness
@just1witness
Sep 01 2017 12:52
Maybe if it was just a few lines, or you could isolate those lines in an alert window to increase the likely hood that a person reads them. As for the hover feature, I wouldn't know how to implement that.
@thodorisanta
Marianissimus
@Marianissimus
Sep 01 2017 12:57
@thodorisanta unless you're providing something very good to the user after registering (like, idk, free hosting up to 10TB / user), you don't want to be so annoying. just my 2 cents...
just1witness
@just1witness
Sep 01 2017 13:11
@Marianissimus agreed
Spyrantis Theodoros
@thodorisanta
Sep 01 2017 14:17
lets say that i have a code in my js that says "in 3 seconds make that box appear"(that box was invisible till now with "display: none;") and i also have a button that makes that box invisible again.
the thing is! that if i press that button before those 3 seconds pass, then the box will appear anyway. What can i do?
Jorge
@OrangeKulture
Sep 01 2017 14:26
@thodorisanta set a timeout function
whats happening fellow campers
Kirk Clemons
@kcclemo
Sep 01 2017 14:43
@thodorisanta You could ask for a keyword to show that they have read and accept the terms. For example, have them type in the last 2 words in the agreement.
But again, if you try to force someone into reading it they will find a way around it. So it's a fine line between user experience vs. legal jargon. For most site's it's good enough to put some text right under the submit/sign-up button that says 'by clicking this button you agree with the terms'.
imperial-isms
@imperial-isms
Sep 01 2017 14:47
Good morning, all!
Anyone available to look at my code and help me figure out why Bootstrap NavBar toggle function isn't working? I've even tried copying and pasting the example on W3Schools into my Codepen, and that isn't working.
Kirk Clemons
@kcclemo
Sep 01 2017 14:49
@imperial-isms What do you have?
Is this just not toggling on mobile? Or mobile and desktop?
imperial-isms
@imperial-isms
Sep 01 2017 14:50
Thanks for the response!
Jorge
@OrangeKulture
Sep 01 2017 14:50
@imperial-isms probably because u need boostrap jquery loaded into your project
imperial-isms
@imperial-isms
Sep 01 2017 14:50
It's not toggling on both. Additionally, the dropdown menu isn't work, as well if that bit of info helps identify.
Hmm
Not sure which settings external CSS and Javascript I should turn on.
I just tried going into Javascript settings and including external: jQuery and jQuery UI
I have Bootstrap 3 included in my CSS settings
imperial-isms
@imperial-isms
Sep 01 2017 15:01
Figured it out! I included Bootstrap 3 in the Javascript settings.
Thanks for the help @OrangeKulture
CamperBot
@camperbot
Sep 01 2017 15:02
imperial-isms sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 458 | @orangekulture |http://www.freecodecamp.com/orangekulture
Harut
@harut-g
Sep 01 2017 15:36
There are ReactJS developers ?
who uses Redux?
Ghost
@ghost~55a04b725e0d51bd787af54c
Sep 01 2017 15:42
@Refath
I'm messing with some js here, and I have:
$(document).ready(function(){
$(".speedtext").keyup(function(){
var newimg = $(this).val();
$(".parent").css("animation-duration", newimg);
$('.speedSave').click ( function(){
$(".speedChange").html(newimg);
});
});
});
However, when I click change, it doesn't trigger an event that changes the duration of the said css animation
Any ideas?
piteto
@piteto
Sep 01 2017 16:04
@thodorisanta use .stop(), for example: https://codepen.io/anon/pen/prGdmx?editors=0010
Eric Hasegawa
@EricHasegawa
Sep 01 2017 16:25
Can anyone help me to figure out how to raise the div containing the search bar, the title and the random article up so that it is in line with the div containing the wikipedia logo? https://codepen.io/erichasegawa/pen/Bdvgvm
Ene Catalin
@EneCatalin
Sep 01 2017 16:26
so you want them to be one next to the other ?
make a flexbox
and put them there
Eric Hasegawa
@EricHasegawa
Sep 01 2017 16:34
@EneCatalin I'm not familiar with css flexboxes, how would I make that work?
Jorge
@OrangeKulture
Sep 01 2017 16:36
@EricHasegawa u have all of your elements on different divs .. there's no need for that, imo
Ahmed raza
@Raza403
Sep 01 2017 16:37
Hi I am confused about how to implement verticle align right button in the twitch api project https://codepen.io/freeCodeCamp/full/Myvqmo
Eric Hasegawa
@EricHasegawa
Sep 01 2017 16:37
@OrangeKulture What's the harm in it?
Jorge
@OrangeKulture
Sep 01 2017 16:38
@EricHasegawa there's no harm, but there's no upside to that either .. i would use bootstrap, have one row, and then assign columns so that they all line up nicely
@Raza403 not sure what u mean
Ahmed raza
@Raza403
Sep 01 2017 16:40
@OrangeKulture I think problem solved
Jorge
@OrangeKulture
Sep 01 2017 16:41
awesome stuff
Eric Hasegawa
@EricHasegawa
Sep 01 2017 16:41
@OrangeKulture Okay I'll see if I can figure it out, thanks
CamperBot
@camperbot
Sep 01 2017 16:41
erichasegawa sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 459 | @orangekulture |http://www.freecodecamp.com/orangekulture
Eric Hasegawa
@EricHasegawa
Sep 01 2017 16:42
Also thanks @EneCatalin
Ene Catalin
@EneCatalin
Sep 01 2017 16:42
np, also sorry was afk
Eric Hasegawa
@EricHasegawa
Sep 01 2017 16:42
@EneCatalin thanks
CamperBot
@camperbot
Sep 01 2017 16:42
erichasegawa sends brownie points to @enecatalin :sparkles: :thumbsup: :sparkles:
:cookie: 446 | @enecatalin |http://www.freecodecamp.com/enecatalin
Eric Hasegawa
@EricHasegawa
Sep 01 2017 16:42
Sorry had to send twice to give the points
Jorge
@OrangeKulture
Sep 01 2017 16:42
sure thing, welcome .. drop a msg in here if you still need some help
Eric Hasegawa
@EricHasegawa
Sep 01 2017 16:42
@OrangeKulture Will do
Eric Hasegawa
@EricHasegawa
Sep 01 2017 16:51
@OrangeKulture So I fixed it up and it looks how I want it too now, but it doesn't work properly on mobile, any advice? https://codepen.io/erichasegawa/pen/Bdvgvm
Ghost
@ghost~55a04b725e0d51bd787af54c
Sep 01 2017 16:59
@Refath
Hi guys. My website https://refath.github.io/Niva/ is not loading correctly
I know I positioned the files wrong or something, but...?
Please help ASAP
I'm under a time limit
Jorge
@OrangeKulture
Sep 01 2017 17:01
@EricHasegawa yeah u r going to have to use media queries .. or change your markup a little bit
Rafael Monroy
@rafaelmonroy
Sep 01 2017 17:01
@gothamknight how can I use my Celsius variable outside the Ajax call?
Ahmed raza
@Raza403
Sep 01 2017 17:01
Hi I have started to work on twitch api project, but cant figure out how three buttons "All", "Live" and "ofline" made in example here https://codepen.io/freeCodeCamp/full/Myvqmo I have made this using bootstrap but it is not quite right. https://codepen.io/raza403/pen/qXgpwj
korzo
@korzo
Sep 01 2017 17:01
@Refath Because your css files have wrong url
Rafael Monroy
@rafaelmonroy
Sep 01 2017 17:02
@heroiczero thanks man, I will try that, but first I need to figure out how to call call my Celsius variable outside the Ajax success function. any idea on how to do that?
CamperBot
@camperbot
Sep 01 2017 17:02
rafaelmonroy sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1681 | @heroiczero |http://www.freecodecamp.com/heroiczero
Ahmed raza
@Raza403
Sep 01 2017 17:04

Hi I have started to work on twitch api project, but cant figure out how three buttons "All", "Live" and "ofline" made in example here https://codepen.io/freeCodeCamp/full/Myvqmo

I have made this using bootstrap but it is not quite right. https://codepen.io/raza403/pen/qXgpwj

Ken Haduch
@khaduch
Sep 01 2017 17:06
@Raza403 - you should not copy and paste the entire bootstrap.css code into your CSS panel. You can go to the CSS config panel and just include the link to get Bootstrap.min.css loaded in. You can select either V3 or V4 - it's the best way to get it included. That's the first thing to note...
Ghost
@ghost~55a04b725e0d51bd787af54c
Sep 01 2017 17:08
@korzo Thanks; Fixed it
CamperBot
@camperbot
Sep 01 2017 17:08
refath sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 439 | @korzo |http://www.freecodecamp.com/korzo
Ken Haduch
@khaduch
Sep 01 2017 17:08
@Raza403 - any other external CSS should be linked in a similar way in the CSS config panel, and the way you are including those JS files will not work there. Not sure if that is a problem for you right now, but they should be linked to in the JS config panel...
Ghost
@ghost~55a04b725e0d51bd787af54c
Sep 01 2017 17:08
Guys after 30s, the layout of the wheel goes haywire https://codepen.io/Refath/pen/RZvxXJ?editors=1010
Any ideas?
Ahmed raza
@Raza403
Sep 01 2017 17:09
@khaduch I have changed css and linked bootstrap 4, output changed, thats why I prefer to use full css
Ghost
@ghost~55a04b725e0d51bd787af54c
Sep 01 2017 17:09
Here's an image:
Screen Shot 2017-09-01 at 4.02.48 AM.png
Ahmed raza
@Raza403
Sep 01 2017 17:10
@khaduch I develop on vs code so that I have those scripts at the bottom, I should have omitted them before posting here
@khaduch That's my fault
Ken Haduch
@khaduch
Sep 01 2017 17:12
@Raza403 - okay - do you mean that you changed the Bootstrap code? That's okay to do, but you can customize it by setting different characteristics for the classes that you need to change. But you might be aware of that.
The buttons on the sample project are created by setting CSS classes to hide and show the buttons and are activated by clicking on them, a CSS class to show the "active" button is added to the button that you click on and remove from the other.
@Raza403 - that's okay about the JS files - I wasn't sure if you were using those to implement your page up to this point and that was affecting your results by not actually having them get loaded.
Ahmed raza
@Raza403
Sep 01 2017 17:14
@khaduch how are these buttons get aligned right in a row with heading
Ken Haduch
@khaduch
Sep 01 2017 17:15
@Raza403 - it looks like they are using "absolute" positioning on the div that contains those three buttons
Ahmed raza
@Raza403
Sep 01 2017 17:16
@khaduch Ok thanks..
CamperBot
@camperbot
Sep 01 2017 17:16
raza403 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3257 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Sep 01 2017 17:17
@Raza403 - and the "active" class that is put on them animates the width of the button to the full width for the active button...
I hope that helps - i have to go offline for a while so either I'll check back in a while and see if i can help, or maybe you'll make progress with those tips. Good luck!
Ghost
@ghost~55a04b725e0d51bd787af54c
Sep 01 2017 17:40
Hi guys
In my app https://refath.github.io/Niva, after a full cycle (30 secs), the layout of the wheel goes haywire
Any ideas?
Kirk Clemons
@kcclemo
Sep 01 2017 17:55

Hello all,
I'm working on fixing a minor overlap issue in Firefox for desktop.

search-overlap.png

The site is here:
https://chiefarchitect.com
I would like to address that with as little change to the layout as possible. But, I've run out of ideas.
Ken Haduch
@khaduch
Sep 01 2017 18:03
@kcclemo what is the overlap - that's such a big page?
Kirk Clemons
@kcclemo
Sep 01 2017 18:08
@khaduch not sure if my screenshot made it through?
Ken Haduch
@khaduch
Sep 01 2017 18:09
@kcclemo - I don't see the screenshot - trying to do an a/b comparison between opera and firefox, I haven't seen anything really noticeable yet, but there are lots of little things that shift slightly?
Kirk Clemons
@kcclemo
Sep 01 2017 18:09
The issue is really minor, I'm just trying to address it because I've been asked to. It only happens in the desktop version of Firefox, the mobile version does not have the overlap. But, it's on the filter dropdown on the search when the Firefox window is really small.
Ken Haduch
@khaduch
Sep 01 2017 18:15
@kcclemo - I see - I can make the firefox window a lot smaller than I can for Opera on the desktop - not sure why that is. But if I drag the firefox window to the same width as the minimum Opera window, everything looks fine.
Kirk Clemons
@kcclemo
Sep 01 2017 18:16
@khaduch Yeah, like I said, super minor. Only shows up when you bring the window down to mobile size. But, I do as I'm told so I'm looking into the best way to handle it. I may just reduce the text size and call it good.
I can't see anyone in the real world resizing their browser window down to that size anyway.
Ken Haduch
@khaduch
Sep 01 2017 18:23
@kcclemo - I'm curious about why the Opera desktop window can only be reduced in width to a certain size that doesn't exhibit the problem... if there is a way to set up firefox to get to that setting?
Kirk Clemons
@kcclemo
Sep 01 2017 18:24
No, but the point is that they want users who do resize their window down to that NOT to see it. No one will ever call in on this but, it's my job. lol
Ken Haduch
@khaduch
Sep 01 2017 18:27
@kcclemo - well, in the mobile design mode in the firefox debugger, you can minimize the window down to just about nothing - so you'd never really be able to fix that? I wonder if you can just set a min-width on that selector dropdown?
Kirk Clemons
@kcclemo
Sep 01 2017 18:27
Playing around with it though, I think I've come up with a solution:
    @media screen and (max-width: 47.9375em) {
        .site-header .site-search {
            width: auto!important; /* IE doesn't understand width: initial */
            width: initial!important;
        }
        .site-header .site-search-filter {
            min-width: 140px;
        }
        .site-header .site-search-term {
            max-width: 160px;
        }
    }
Thank you @khaduch.
CamperBot
@camperbot
Sep 01 2017 18:29
kcclemo sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3258 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Sep 01 2017 18:34
@kcclemo - that makes the selector work, but the input element can be shrunk down to nothing, too... I guess having one or the other is better? At least that is what I'm seeing in the firefox responsive design mode. But it does appear to fix the width of the selector box... you're welcome, to the extent that I helped... :)
Kirk Clemons
@kcclemo
Sep 01 2017 18:35
lol Well, I based my fix off a screen size of 320px wide. That's as narrow as I'm willing to troubleshoot. If someone can find a screen smaller than that then maybe I'll look into it further. :D
Brandon Carlino
@bacarlino
Sep 01 2017 19:02
@khaduch @chris-loyd Thank you for the feedback. Unfortunately, there is no advertising, marketing, or any current web presence in any form or fashion. It's actually the company I've worked for now for almost 11 years. They don't know that I'm working on it and at this point actually have no idea I'm even into programming. My thought was to put a site together for them could be win-win... I help my current company out, while gaining experience and a notch in my portfolio. Lorem ipsum is exactly what I'm using for now... I think I'll just continue building out the site with that until I either hit a writing spark, or find another solution.
CamperBot
@camperbot
Sep 01 2017 19:02
bacarlino sends brownie points to @khaduch and @chris-loyd :sparkles: :thumbsup: :sparkles:
:cookie: 113 | @chris-loyd |http://www.freecodecamp.com/chris-loyd
:star2: 3259 | @khaduch |http://www.freecodecamp.com/khaduch
dyon3334
@dyon3334
Sep 01 2017 19:08
array.entries() what does it ?
Umar Khan
@umar-khan
Sep 01 2017 19:11
test
iso
@iso1048
Sep 01 2017 19:40
@rafaelmonroy one way could be to declare the variable outside the ajax call
Ross Scarborough
@SourceHorse
Sep 01 2017 20:07
having an issue with codepen. When I click a link, it won't always open in codepen, but if it middle mouse click, it will open in a new tab correctly
Trommelochse
@Trommelochse
Sep 01 2017 20:10
@SourceHorse have you tried the some code on your local machine? Codepen is awesome, but also has its limits
Ross Scarborough
@SourceHorse
Sep 01 2017 20:10
not yet, I could try exporting
just1witness
@just1witness
Sep 01 2017 20:12
Is it because of the target blank thing? @SourceHorse
Ross Scarborough
@SourceHorse
Sep 01 2017 20:12
tried both ways with no success
piteto
@piteto
Sep 01 2017 20:13
@dyon3334 That's brand new JS, won't work in most browsers. It lists key/value pairs of an object
just1witness
@just1witness
Sep 01 2017 20:13
@piteto It's pretty...
piteto
@piteto
Sep 01 2017 20:14
seems useful once browsers support it...
just1witness
@just1witness
Sep 01 2017 20:15
@piteto agreed
piteto
@piteto
Sep 01 2017 20:16
@SourceHorse I found this article describing one possible issue with codepen links. You may want to add target="_blank" to your URLs https://stackoverflow.com/questions/31756380/left-clicking-links-doesnt-work-in-codepen-but-open-in-new-tab-does
For security, though, be sure to also add rel="noopener noreferrer"
Ross Scarborough
@SourceHorse
Sep 01 2017 20:17
@Trommelochse @piteto @just1witness thanks for your help
CamperBot
@camperbot
Sep 01 2017 20:17
sourcehorse sends brownie points to @trommelochse and @piteto and @just1witness :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @trommelochse |http://www.freecodecamp.com/trommelochse
:cookie: 39 | @piteto |http://www.freecodecamp.com/piteto
:cookie: 314 | @just1witness |http://www.freecodecamp.com/just1witness
Christopher
@chris-loyd
Sep 01 2017 20:56
Man, CSS Grid almost feels like cheating
Trommelochse
@Trommelochse
Sep 01 2017 21:23
@piteto he isn't even using React
Rafael Monroy
@rafaelmonroy
Sep 01 2017 21:23
Gitter phone app is not as practical as I thought it would be, being an app for developers or people learning how to write code
Trommelochse
@Trommelochse
Sep 01 2017 21:24
@rafaelmonroy also heard shit about the gitter mobile app, and it obviously should be better - but then again: who is gonna write code on his/her phone? :/
let's step back for a moment and embrace what we got free, nowadays
Think about the times when Altavista was considered to be a search engine
and so on...
Tom
@moT01
Sep 01 2017 21:30
dial-up with netscape on windows 95
Rafael Monroy
@rafaelmonroy
Sep 01 2017 21:34
Lol true, guess beggers can't be choosers but the fact still stands
Rafael Monroy
@rafaelmonroy
Sep 01 2017 21:47
@gothamknight when I tried setting the variable out the Ajax it doesn't register
iso
@iso1048
Sep 01 2017 21:56
@rafaelmonroy can i see your code?
Ghost
@ghost~55a04b725e0d51bd787af54c
Sep 01 2017 21:59
Hi guys
I need some help fixing some jQuery
When I change the speed of the rotation, it doesn't occur immediately, but after 30seconds (1 full normal rotation).
How can I change this?
Here is the pen: https://codepen.io/Refath/pen/zdeWxa?editors=1010
Any help is appreciated!
Tom
@moT01
Sep 01 2017 22:08
what's the problem
changing the css, .parent - animation not work?
Rafael Monroy
@rafaelmonroy
Sep 01 2017 22:22
@gothamknight
$(document).ready(function (){

  function getWeather(position) {

      var lat = position.coords.latitude;
      var long = position.coords.longitude;

      $.ajax({
        type:'GET',
        url:'https://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&key=AIzaSyCwOc9_sxzQyW-U96Eg_2kiLsfwRxhkBf0',
        success: function(location){
          var city = location.results[0].address_components[2].long_name
          $('#city').text(city)
        }
      });
        var celcius = Math.floor(weatherInfo.main.temp)
        var farenheit = Math.floor((1.8 * celcius) + 32)

      $.ajax({
        type:'GET',
        url:'https://fcc-weather-api.glitch.me/api/current?lat='+lat+'&lon='+long,
        success: function(weatherInfo){
          //var celcius = Math.floor(weatherInfo.main.temp)
          //var farenheit = Math.floor((1.8 * celcius) + 32) 
          var icon = '<img src='+ weatherInfo.weather[0].icon+'>'
          $('#weather').text(celcius+' C')
          $('#icon').html(icon) 
        },   
        error: function (){
          alert('weather API not responding')
        }

      });

  }

  function getLocation() {

      if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(getWeather);
      } else {
        alert('your browser does not support Geolocation')
        }
  }

  getLocation();

});
iso
@iso1048
Sep 01 2017 22:24
@rafaelmonroy try declaring the variables outside the ajax call, then assigning the values to the variables inside success function of the ajax call.
Rafael Monroy
@rafaelmonroy
Sep 01 2017 22:25
@gothamknight ohh ok, so just leave them as blank outside the call and declare the value inside the call?
iso
@iso1048
Sep 01 2017 22:29

@rafaelmonroy outside the ajax call (declaration of variables):

var c;
var f;

inside the success function of the ajax call (assignment of the declared variables):

c = Math.floor(weatherInfo.main.temp);
f = Math.floor((1.8 * c) + 32);
Rafael Monroy
@rafaelmonroy
Sep 01 2017 22:30
@gothamknight oh snap, didn't even know that was possible, let me try it out
Rafael Monroy
@rafaelmonroy
Sep 01 2017 22:38
@gothamknight I tried console.log(celcius) returns as undefined
$(document).ready(function (){

  function getWeather(position) {

    var lat = position.coords.latitude;
    var long = position.coords.longitude;

    $.ajax({
      type:'GET',
      url:'https://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&key=AIzaSyCwOc9_sxzQyW-U96Eg_2kiLsfwRxhkBf0',
      success: function(location){
        var city = location.results[0].address_components[2].long_name
        $('#city').text(city)
      }
    });

    var celcius;
    var farenheit;

    $.ajax({
      type:'GET',
      url:'https://fcc-weather-api.glitch.me/api/current?lat='+lat+'&lon='+long,
      success: function(weatherInfo){
        celcius = Math.floor(weatherInfo.main.temp)
        farenheit = Math.floor((1.8 * celcius) + 32) 
        var icon = '<img src='+ weatherInfo.weather[0].icon+'>'
        $('#weather').text(celcius+' C')
        $('#icon').html(icon) 
      },   
      error: function (){
        alert('weather API not responding')
      }
    });

    console.log(celcius)

  };

  function getLocation() {

      if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(getWeather);
      } else {
        alert('your browser does not support Geolocation')
        }
  }

  getLocation();

});
iso
@iso1048
Sep 01 2017 22:41
@rafaelmonroy are you working on codepen?
Rafael Monroy
@rafaelmonroy
Sep 01 2017 22:42
@gothamknight yeah
aRtoo
@artoodeeto
Sep 01 2017 22:45
yow fam. i have this regex ^1?[- .]?\(?\d{3}\)?[- .]\d{3}[- .]\d{4}
its returning me some of the true except this
5555555555 should return true.
(555)555-5555 should return true
1(555)555-5555 should return true
and its returning me this false values.
555)-555-5555 should return false.
(555-555-5555 should return false.
trying to add \s? between the square brackets but nothing happens. any idea fam?
iso
@iso1048
Sep 01 2017 22:59

@rafaelmonroy oh ok. What I did in my weather app was store the temperatures inside an element using the jquery .data() function (https://api.jquery.com/data/) - do this inside the success function of the ajax call.

$('#weather').data({
          f: farenheit,
          c: celcius
        });

try using the above after the variables are assigned. Then outside the success function, console.log this: $('#weather').data() to see the object.
hopefully that works. sorry for taking a long time to reply.

legendinraze
@legendinraze
Sep 01 2017 23:01
how do I seperate my links and put them next to eachother? https://codepen.io/manny45/pen/GvPypQ?editors=1100
Rafael Monroy
@rafaelmonroy
Sep 01 2017 23:04
@gothamknight no worries, thanks for me helping out. Im going to give that a shot
CamperBot
@camperbot
Sep 01 2017 23:04
rafaelmonroy sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 413 | @gothamknight |http://www.freecodecamp.com/gothamknight
iso
@iso1048
Sep 01 2017 23:05
@legendinraze try
.nav-pills{
  font-family:lobster;
  font-size:2.0em;
  list-style-type: none;
}
.nav-pills li {
  display: inline-block;
}
@rafaelmonroy awesome. then in your button function you can switch between accessing the temperatures inside that stored object.
legendinraze
@legendinraze
Sep 01 2017 23:11
thx @gothamknight
didnt work
iso
@iso1048
Sep 01 2017 23:15
@legendinraze are you sure?
Mercy Manrique
@mers89
Sep 01 2017 23:25
Do we need to add a key to use the twitch api. I didn't use it and I got this message on console not sure if its related: "Channel identifier '\'+following[i]+\'' is in an invalid format"
iso
@iso1048
Sep 01 2017 23:30
@mers89 you should not need to add key if you are using the api provided by fCC (to my understanding)
Mercy Manrique
@mers89
Sep 01 2017 23:32
@gothamknight https://codepen.io/mers89/pen/RZeeLW?editors=0002 im referencing line 30
Rafael Monroy
@rafaelmonroy
Sep 01 2017 23:33
@gothamknight I added the data inside the success function but when I console.log($('#weather').data()) it returns Object {}
Mercy Manrique
@mers89
Sep 01 2017 23:35
@gothamknight if you check the console it says it is invalid format as to the api
@gothamknight eventually I wanted to be able to pass this code but not until I get the api to work $.getJSON(url2).done(function(data3){
var logo;
var status;
var name;
if (data3.error){
logo= "https://media.istockphoto.com/vectors/error-404-vector-id538038858";
name = data3.message;
status= data3.error;
$("#followerInfo").prepend("div class = 'row'>" | "<div class='col-md-4'>" | "img src='" | logo | "'>"
+
"</div>" + "<div class='col-md-4'>" + data2.message + "</div>" + "<div class='col-md-4'>" + status + "</div> </div>");
iso
@iso1048
Sep 01 2017 23:36
@mers89 'https://wind-bow.glitch.me/twitch-api/channels/'+following[i]+'?callback=?' it is a matter of using constant quote marks: 'test' + variable + 'test' NOT 'test" + variable + "test' the former is concatenating the variable into the string
the latter is a continuous string
@rafaelmonroy try clicking on the arrow next to the object in the console (on the left of the {})
Mercy Manrique
@mers89
Sep 01 2017 23:41
thank you @gothamknight you're awesome!
CamperBot
@camperbot
Sep 01 2017 23:41
mers89 sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 414 | @gothamknight |http://www.freecodecamp.com/gothamknight
iso
@iso1048
Sep 01 2017 23:44
@mers89 no worries. haha.
Rafael Monroy
@rafaelmonroy
Sep 01 2017 23:49
@gothamknight they don't have that on the codepen console lol when I inspect through google chrome its still blank.. :/
@gothamknight
$(document).ready(function (){

  function getWeather(position) {

    var lat = position.coords.latitude;
    var long = position.coords.longitude;

    $.ajax({
      type:'GET',
      url:'https://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&key=AIzaSyCwOc9_sxzQyW-U96Eg_2kiLsfwRxhkBf0',
      success: function(location){
        var city = location.results[0].address_components[2].long_name
        $('#city').text(city)
      }
    });

    $.ajax({
      type:'GET',
      url:'https://fcc-weather-api.glitch.me/api/current?lat='+lat+'&lon='+long,
      success: function(weatherInfo){
        var celcius = Math.floor(weatherInfo.main.temp)
        var fahrenheit = Math.floor((1.8 * celcius) + 32)
        var icon = '<img src='+ weatherInfo.weather[0].icon+'>'
        $('#weather').text(fahrenheit+' F')
        $('#icon').html(icon) 
        $('#weather').data({
          f: fahrenheit,
          c: celcius
        });
      },   
      error: function (){
        alert('weather API not responding')
      }
    });

    console.log($('#weather').data())

  };

  function getLocation() {

      if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(getWeather);
      } else {
        alert('your browser does not support Geolocation')
        }
  }

  getLocation();

});
iso
@iso1048
Sep 01 2017 23:51
@rafaelmonroy could you link the pen again bro
Rafael Monroy
@rafaelmonroy
Sep 01 2017 23:51
iso
@iso1048
Sep 01 2017 23:53
@rafaelmonroy you sure bro. this is what i got:
test.gif
Long Nguyen
@longnt80
Sep 01 2017 23:56
@rafaelmonroy ^ same here
Rafael Monroy
@rafaelmonroy
Sep 01 2017 23:57
@longnt80 @gothamknight really? wtf, is that under the console window?
Long Nguyen
@longnt80
Sep 01 2017 23:58
@rafaelmonroy devtool
if you're using Windows, hit Ctrl+Shift+I
iso
@iso1048
Sep 01 2017 23:59
or F12