These are chat archives for FreeCodeCamp/HelpFrontEnd

18th
Nov 2016
a.sanchez
@0100000101010011
Nov 18 2016 00:19
@TobyChow you might want to start by adding prefixes to your css, flexbox is becoming more well supported across browsers, but some properties may not yet be fully supported if i'm not mistaken. looking at your css, i don't see any css presets. give that a try and check again in firefox and ie. here's a tool i use to add prefixes to my css: http://pleeease.io/play/
Stephen Kilgore
@devninja89
Nov 18 2016 00:30
So, I'm trying to use AJAX and jQuery for the random quote
the area where i try to limit the quote to a certain amount of characters is causing codepen to crash. I'm not sure if it's because it takes the API too long to respond or what, but I'm sure there's a more efficient way to do this that I am missing.
aRtoo
@artoodeeto
Nov 18 2016 00:33
help need someone?? just one question
CamperBot
@camperbot
Nov 18 2016 00:33
no wiki entry for: need someone just one question
Stephen Kilgore
@devninja89
Nov 18 2016 00:34
i thought about preloading the quotes into an array with a for loop to reduce the amount of calls to the API.
Tyler Moeller
@TylerMoeller
Nov 18 2016 00:49

@devninja89 Instead of using a while loop, just use an if statement and call the function again:

function getQuote() 
{
  $.getJSON(url, function(data) {
    quote = data;
    tweetStr = quote.quoteText + " - " + quote.quoteAuthor;

    if (tweetStr.length < 142) {
      displayQuote();
    } else {
      getQuote();
    }
  });
}

Remove displayQuote() from your document.ready function because you can't guarantee the quote will be returned before the displayQuote() function is called. Call it from the getQuote() function as shown above.

走你飛艇
@gofighting123
Nov 18 2016 00:54
@devninja89 use JQuery promise Object if you want to keep the code structure and style to make sure the callback fire
Stephen Kilgore
@devninja89
Nov 18 2016 01:00
thank you @TylerMoeller! works like a charm. I have a tendency to overcomplicate things, I hope that will iron out eventually!
CamperBot
@camperbot
Nov 18 2016 01:00
devninja89 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 941 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
MacKenzie Whalen
@mkwhalen
Nov 18 2016 01:11
I'm working on the Pomodoro Clock and I am struggling with getting the countdown timer to work. It works if I give it a number but it isn't receiving the value that the user enters and I have no idea why. Any help would be much appreciated!! http://codepen.io/mkwhalen/pen/BQNzMQ?editors=1011
a.sanchez
@0100000101010011
Nov 18 2016 01:33
@mkwhalen try our code in jsbin and see if you're get the same result
*you
Terryd12345
@Terryd12345
Nov 18 2016 01:44
Hey guys anyone else having trouble trying to understand how the wikipedia API works?
lalith77
@lalith77
Nov 18 2016 01:49
@Terryd12345 google wikipedia api opensearch
chunnali
@chunnali
Nov 18 2016 01:52
anyone available to check my code? I am trying to split the object arrays in this api by the comma but it’s not working http://codepen.io/chunnali/pen/RoaLmZ?editors=1111
Terryd12345
@Terryd12345
Nov 18 2016 01:55
@lalith77 Yeah I'm reading over the documentation at the moment, I just don't know what I am looking for exactly.
JD Tadlock
@jdtdesigns
Nov 18 2016 01:57
@chunnali Not sure why you're trying to split. The api returns an array of arrays. The 2nd array has the titles, 3rd the descriptions for those titles, and the 4th has the urls for those titles. You can use those to output the results.
grantknaver
@grantknaver
Nov 18 2016 01:58
did anyone out there find the API sections of the Front End Course lacking. API's are confusing as heck. Anyone got any advice?
JD Tadlock
@jdtdesigns
Nov 18 2016 01:58
@everyone, Don't use the Codepen console. Use the browser console.
@grantknaver They don't teach you. They just push you to learn. ;)
chunnali
@chunnali
Nov 18 2016 01:59
@jdtdesigns how do I get it to print out each part of the first array to div?
grantknaver
@grantknaver
Nov 18 2016 01:59
Yep
where did you get your learn on
chunnali
@chunnali
Nov 18 2016 01:59
@grantknaver i found that part to be pretty useless, I just use youtube turtorials and google
grantknaver
@grantknaver
Nov 18 2016 02:00
@chunnali might do the same thing becasue I am stuck and confused as heck
chunnali
@chunnali
Nov 18 2016 02:01
@grantknaver it’s frustrating, i feel ya
lalith77
@lalith77
Nov 18 2016 02:01
you see the search= api part? thats what your querying for.
grantknaver
@grantknaver
Nov 18 2016 02:02
@lalith77 are you talking to me?
lalith77
@lalith77
Nov 18 2016 02:02
@grantknaver i concur!
chunnali
@chunnali
Nov 18 2016 02:02
@jdtdesigns nvm, i got it! thank you haha.
CamperBot
@camperbot
Nov 18 2016 02:02
chunnali sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 757 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
lalith77
@lalith77
Nov 18 2016 02:02
@grantknaver no the api link was for Terry
grantknaver
@grantknaver
Nov 18 2016 02:02
gotcha
Terryd12345
@Terryd12345
Nov 18 2016 02:03
@lalith77 Thanks !
CamperBot
@camperbot
Nov 18 2016 02:03
terryd12345 sends brownie points to @lalith77 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for lalith77
chunnali
@chunnali
Nov 18 2016 02:03
How long have yall been on the free code camp curriculum?
a.sanchez
@0100000101010011
Nov 18 2016 02:09
@mkwhalen playing with some of your code, i added an eventlistener to register the value input into the session input field, seems to be working, check it out in this jsbin https://jsbin.com/hobudezemu/edit?html,js,console,output
JD Tadlock
@jdtdesigns
Nov 18 2016 02:13
@chunnali Here's a way to do it. http://codepen.io/jdtadlock/pen/VmmGdQ?editors=0010
chunnali
@chunnali
Nov 18 2016 02:15
@jdtdesigns thanks! ill keep it in mind
CamperBot
@camperbot
Nov 18 2016 02:15
chunnali sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: chunnali already gave jdtdesigns points
chunnali
@chunnali
Nov 18 2016 02:16
@jdtdesigns btw your protfolio link on your github doesn’t work
JD Tadlock
@jdtdesigns
Nov 18 2016 02:17
@chunnali Also, sinse you're using jQuery for the ajax, you might as well take advantage of it's DOM manip functionality too. ;)
I'm remaking my portfolio
It'll be up in a few days
chunnali
@chunnali
Nov 18 2016 02:19
@jdtdesigns okay, thanks again
CamperBot
@camperbot
Nov 18 2016 02:19
chunnali sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: chunnali already gave jdtdesigns points
chunnali
@chunnali
Nov 18 2016 02:19
really appreciate it
JD Tadlock
@jdtdesigns
Nov 18 2016 02:19
yep ;)
@chunnali You can watch me code here https://www.livecoding.tv/jddesign/
or watch my past streams
chunnali
@chunnali
Nov 18 2016 02:21
@jdtdesigns Wow, I checked your codepen and just now realize you’re the guy behind the weather app. One of my favorites!
JD Tadlock
@jdtdesigns
Nov 18 2016 02:22
Ah, nice :D
MacKenzie Whalen
@mkwhalen
Nov 18 2016 02:22
@a.sanchez, thank you so much! Do you know of a way to do it that is triggered by the button?
CamperBot
@camperbot
Nov 18 2016 02:22
:warning: could not find receiver for a
mkwhalen sends brownie points to @a :sparkles: :thumbsup: :sparkles:
MacKenzie Whalen
@mkwhalen
Nov 18 2016 02:22
@0100000101010011
Johnny Vineyard
@javineya
Nov 18 2016 02:25
Anyone mind checking my Frankenstein code to figure out why my body elements are scrolling OVER my header? https://codepen.io/JesterVae/pen/aBBamZ
JD Tadlock
@jdtdesigns
Nov 18 2016 02:27
@javineya Hmm, it was immediately broken for me when i opened it. The nav was below the header text and invisible.
Look up flexbox and try it out for laying out content. ;)
Johnny Vineyard
@javineya
Nov 18 2016 02:28
Thanks, not sure why it's broken. It's ugly, but working just fine for me except that the body scrolls over my fixed header.
LiDaEn
@LiDaEn
Nov 18 2016 02:29
Just have a rough tribute page, first attempt at a small project. Would anyone mind taking a look and letting me know if it's structurally sound?
a.sanchez
@0100000101010011
Nov 18 2016 02:33
@mkwhalen check the code again on the same jsbin link i gave you, and give it another go
JD Tadlock
@jdtdesigns
Nov 18 2016 02:33
@LiDaEn It works. If you feel like a challenge, try spicing it up with your own style. ;)
Johnny Vineyard
@javineya
Nov 18 2016 02:34
@LiDaEn The only thing I noticed is that your <div class="imgborder"> doesn't seem to have any purpose. The class, that is.
LiDaEn
@LiDaEn
Nov 18 2016 02:35

@jdtdesigns Thanks, that's definitely the next step!

@javineya Thank you, forgot that was in there. I was attempting something else and didn't follow through. Guess I forgot to delete it.

CamperBot
@camperbot
Nov 18 2016 02:35
lidaen sends brownie points to @jdtdesigns and @javineya :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @javineya |http://www.freecodecamp.com/javineya
:cookie: 758 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Johnny Vineyard
@javineya
Nov 18 2016 02:37
@jdtdesigns FlexBox is awesome. Thanks!
CamperBot
@camperbot
Nov 18 2016 02:37
javineya sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 759 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
MacKenzie Whalen
@mkwhalen
Nov 18 2016 02:37
@0100000101010011, it doesn't seem to be doing anything differently
JD Tadlock
@jdtdesigns
Nov 18 2016 02:39
@javineya welcome ;)
a.sanchez
@0100000101010011
Nov 18 2016 02:39
JD Tadlock
@jdtdesigns
Nov 18 2016 02:39
@mkwhalen What's the issue?
MacKenzie Whalen
@mkwhalen
Nov 18 2016 02:39
@0100000101010011 it works!! Thanks so much!
CamperBot
@camperbot
Nov 18 2016 02:39
mkwhalen sends brownie points to @0100000101010011 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for 0100000101010011
MacKenzie Whalen
@mkwhalen
Nov 18 2016 02:40
@jdtdesigns nothing now haha thank you though!
CamperBot
@camperbot
Nov 18 2016 02:40
mkwhalen sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 760 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Nov 18 2016 02:40
@mkwhalen Glad i could help lol
a.sanchez
@0100000101010011
Nov 18 2016 02:40
@mkwhalen cheers
Edgar Pan
@edgaryp
Nov 18 2016 02:44
Hi I got stuck. The blur navigation menu code works in codepen but doesn't work when I put in my code editor with a bit of adjustments, the <li> is now showing in blue on my browser Safari and GC. I must have missed something but I could not see it?
The code in codepen: http://codepen.io/edgaryp/pen/rWMEvX?editors=1100
The code I have in my code editor:
<!DOCTYPE html>
<html>
<head>
    <title>Portfolio</title>
    <link rel="stylesheet" type="text/css" href="Styles/style.css">
    <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
</head>
<body>
    <header>
        <!--Place logo in below tag-->
        <div class="logo">
            <img src="Image/Logo.png">
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Clients</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">About Me</a></li>
            </ul>
        </div>
    </header>
</body>
</html>
header {
    height: 450px;
    background-color: grey;
}

.logo img {
    margin-top: 30px;
    margin-left: 60px;
    height: 50px;
    width: 50px;
}

body {
    margin: 0;
}

.nav {
    text-align: center;
    font-family: Poiret One;
      font-size: 33px;
      text-decoration: none;
    color: transparent;
    display: block;
    text-transform: uppercase;
    text-shadow: 0px 0px 4px #fff;
    letter-spacing: 30px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

ul li a {
    text-decoration: none;
}

.nav:hover li a {
        text-shadow: 0px 0px 6px #fff;
}

.nav li a:hover {
    color: #fff;
    text-shadow: 0px 0px 1px #fff;
    letter-spacing: 4px;
    font-size: 33px;
}
JD Tadlock
@jdtdesigns
Nov 18 2016 02:52
@edgaryp The blur effect is on the text of the ul, not the nav itself;
change .nav to ul li a
Edgar Pan
@edgaryp
Nov 18 2016 03:01
@jdtdesigns it worked thanks
CamperBot
@camperbot
Nov 18 2016 03:01
edgaryp sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 761 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Ryan Williams
@Ryanwfile
Nov 18 2016 03:46
Can someone please help me with the best method of centering text horizontally around an image such that when the screen size shrinks and the image which is floated left gets smaller the text doesn't readjust around the image. Codepen is http://codepen.io/Ryanwfile/pen/MbbYxb
The images I am referring to are in the portfolio examples section when the screen size is less than 1001px and the code I am referring to is in the @media screen and (max-width:1001px) section. Thank you for any help.
CamperBot
@camperbot
Nov 18 2016 03:46
:cookie: 38 | @media |http://www.freecodecamp.com/media
ryanwfile sends brownie points to @media :sparkles: :thumbsup: :sparkles:
a.sanchez
@0100000101010011
Nov 18 2016 03:54
@Ryanwfile give flex a try, check out this jsbin https://jsbin.com/nulayufufe/edit?html,css,output
Ryan Williams
@Ryanwfile
Nov 18 2016 03:55
@0100000101010011 Thanks, that demo seems to work perfect
CamperBot
@camperbot
Nov 18 2016 03:55
ryanwfile sends brownie points to @0100000101010011 :sparkles: :thumbsup: :sparkles:
:cookie: 2 | @0100000101010011 |http://www.freecodecamp.com/0100000101010011
a.sanchez
@0100000101010011
Nov 18 2016 03:59
cool
anyoe know why my tests are leavig the yellow box?
Shawn Kemp
@official-shawnkemp
Nov 18 2016 04:03
hi i need help in my admin login to my website
a.sanchez
@0100000101010011
Nov 18 2016 04:06
@awb715 you can try a float: left; on .mainframe
@awb715 it looks like you're creating a list, but that list is all divs, it may be worth turning that into a list. you may also want to apply flexbox to a list like this to make it responsive out the gate
Aaron Bell
@awb715
Nov 18 2016 04:09
@0100000101010011 im struggling with creating these boxes fromjquery similiar to the sample shown
im appending everything to a div called adder
Shawn Kemp
@official-shawnkemp
Nov 18 2016 04:12
i have this zend framework working on admin login, the question is how to restrict it?
grantknaver
@grantknaver
Nov 18 2016 04:13
anyone open to answering some questions
a.sanchez
@0100000101010011
Nov 18 2016 04:13
@awb715 ok what you can do then, is create a <ul> and append list items to it, instead of a div container, that appends divs to it
grantknaver
@grantknaver
Nov 18 2016 04:14
I have some questions about some code
a.sanchez
@0100000101010011
Nov 18 2016 04:14
@awb715 that <ul> then you can flex it
grantknaver
@grantknaver
Nov 18 2016 04:14
```
a.sanchez
@0100000101010011
Nov 18 2016 04:14
@grantknaver what questions
Aaron Bell
@awb715
Nov 18 2016 04:15
so like .appendTo("ul);
grantknaver
@grantknaver
Nov 18 2016 04:15
http://codepen.io/jdtadlock/pen/xRRKBB?editors=0010
a.sanchez
@0100000101010011
Nov 18 2016 04:15
can't guarantee i can be of help but maybe someone else can bump in
grantknaver
@grantknaver
Nov 18 2016 04:15
Im trying to understand this code
a.sanchez
@0100000101010011
Nov 18 2016 04:16
@awb715 right, what i would do, is create something like a jsbin to clean slate this, once you got it working, integrate it into your current code
Aaron Bell
@awb715
Nov 18 2016 04:17
thanks @0100000101010011
CamperBot
@camperbot
Nov 18 2016 04:17
awb715 sends brownie points to @0100000101010011 :sparkles: :thumbsup: :sparkles:
:cookie: 3 | @0100000101010011 |http://www.freecodecamp.com/0100000101010011
a.sanchez
@0100000101010011
Nov 18 2016 04:17
@grantknaver there's a bit going on there, what aspects are you looking to further understand?
Aaron Bell
@awb715
Nov 18 2016 04:17
ill give it a try tomororw
a.sanchez
@0100000101010011
Nov 18 2016 04:17
@awb715 sounds good
grantknaver
@grantknaver
Nov 18 2016 04:18
ya lol
I am trying to clip exactly what I am needing help with
here...
```
  var getWeather = function(lat, long) {
    $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&appid=aa3f245973b19d01d0ff9e5e434b6d6c',function(json){
      console.log(json.main.temp);
    });
  };
I understand the beginning of the api call the parameters and the key, but what is the last part supposed to do?
y is function(json) { console.log(json.main.temp); }); necessary
a.sanchez
@0100000101010011
Nov 18 2016 04:21
@grantknaver usually console isn't necessary, you can change that console message to anything
@grantknaver if this code was copy pasted from their api docs, they may have included that console in there for you to see what it's returning in the console
grantknaver
@grantknaver
Nov 18 2016 04:22
ahhh
ok
but y does there need to be a function(json)?
Darth Skywalker
@adityaparab
Nov 18 2016 04:25

@grantknaver : Because $.getJSON is an asynchronous call. And it's expects 2 parameters. 1st parameter is url from where you want to fetch json data and 2nd is a callback function which will be called when the data is received.

Asynchronous function means when that function is called, the execution environment won't wait until it's over. Instead it will continue executing next statements in your code.

And when the function receives data, it will call the callback functionwhich you passed in as a 2nd parameter

a.sanchez
@0100000101010011
Nov 18 2016 04:26
@grantknaver right, so correct me if i'm wrong that parameter, json, that's the data it's returning
from that call to the api
then this line, console.log(json.main.temp);, looks like it's reaching into that returned data to grab some information, like temp
Edward Huang
@edwardGunawan
Nov 18 2016 04:47
how does infinite scrolling works? do we always put the data on the server and it gets append every time when window is at the end? or we just have a long list of ul tag
JD Tadlock
@jdtdesigns
Nov 18 2016 04:51
@awb715 Here's an example of your layout using BS. ;) http://jsbin.com/kojoxuj/edit?html,output
a.sanchez
@0100000101010011
Nov 18 2016 04:56
@edwardGunawan this may fill you in on some of the mechanics http://blox.io/here/index.php/2016/07/09/iinfinite-scrolling-explained/
Edward Huang
@edwardGunawan
Nov 18 2016 04:57
@0100000101010011 Thank you soo much!!!
CamperBot
@camperbot
Nov 18 2016 04:57
edwardgunawan sends brownie points to @0100000101010011 :sparkles: :thumbsup: :sparkles:
:cookie: 4 | @0100000101010011 |http://www.freecodecamp.com/0100000101010011
a.sanchez
@0100000101010011
Nov 18 2016 04:59
anytime
Alex
@Sevohan
Nov 18 2016 06:25
Hey I'm working on the Wikipedia Viewer and I have one question that I can't recall ever hearing anything about. I checked reddit for any guidance about how to format my url and someone said to start with something like this "https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=5&search=cat&callback=?" Can anyone explain what the "callback=?" part at the end is? the only thing I can think of is the callback function but I'm not sure how I would put my function in the url
Tyler Moeller
@TylerMoeller
Nov 18 2016 06:27
@Sevohan it can vary depending on the API, but most APIs accept callback=? in the URL to treat the request as JSONP.
Alex
@Sevohan
Nov 18 2016 06:34
Thank you @TylerMoeller !
CamperBot
@camperbot
Nov 18 2016 06:34
sevohan sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 942 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Harley Kruse
@HamishAus
Nov 18 2016 06:59

Hi everyone, I am up to working on my Random Quote Machine and I've come up against a wall. I've written all of my code in Atom and tested in chrome and everything seems to work, but once i convert it to codepen my javascript seems to stop working. I think this has to do with my API not being targeted, but im not 100% sure. my pen is :https://codepen.io/hamishk/pen/gLwJgO

any advice is welcome.

kirbyedy
@kirbyedy
Nov 18 2016 07:01
@HamishAus check your console, there is an error, saying mixed content
Mixed Content: The page at 'https://cxxx' was loaded over HTTPS, but requested an insecure script 'http://api.forismatic.com/api/1.0/?jsonp=jQuery31109616265809976849_1479452471277&method=getQuote&lang=en&format=jsonp&_=1479452471278'. This request has been blocked; the content must be served over HTTPS.
Tyler Moeller
@TylerMoeller
Nov 18 2016 07:02
@HamishAus The Forismatic API doesn't support HTTPS, use this URL for your codepen instead: http://codepen.io/hamishk/pen/gLwJgO
JD Tadlock
@jdtdesigns
Nov 18 2016 07:02
@HamishAus You're loading codepen through https and trying to request an http url. Remove https from "https://codepen... and you're fine
Harley Kruse
@HamishAus
Nov 18 2016 07:06
@TylerMoeller where would i use that URL? I'm confused by mixed content :worried: i did a google search and came across some info, but it didn't really help.
Tyler Moeller
@TylerMoeller
Nov 18 2016 07:06
@HamishAus Paste the URL into your browser address bar. Here's a great article on mixed-content: https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content
Harley Kruse
@HamishAus
Nov 18 2016 07:07
OK, so I see that that works, but is that enough to pass the challenge?
Tyler Moeller
@TylerMoeller
Nov 18 2016 07:08
Yes, that's good enough to pass the challenge. No need to support both HTTP and HTTPS
Harley Kruse
@HamishAus
Nov 18 2016 07:10
Alright cool, thanks @TylerMoeller @jdtdesigns and @kirbyedy . Also props for the article, helps understand what mixed content is :D
CamperBot
@camperbot
Nov 18 2016 07:10
hamishaus sends brownie points to @tylermoeller and @jdtdesigns and @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1548 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
:cookie: 762 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
:cookie: 943 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Nov 18 2016 07:11
Congrats on completing the project!
Harley Kruse
@HamishAus
Nov 18 2016 07:11
Thank you! So far it has been a pleasure
ko loy yee
@koloyyee
Nov 18 2016 07:25
hey guys! wassup !
i gonna need some advice from you guys !
here is the second challenge from free code camp about the personal portfolio, please please have a look and give me some comment for improvement! thanks !
http://codepen.io/snwomanco/pen/QGGvYg
Andrew Boorde
@aboorde
Nov 18 2016 07:33
@koloyyee looks like youre learning bootstrap. Awesome! There's a grid system that goes along with the containers that will help align those sections
http://getbootstrap.com/css/#grid-example-mixed
ko loy yee
@koloyyee
Nov 18 2016 07:33
thanks! @aboorde
CamperBot
@camperbot
Nov 18 2016 07:33
koloyyee sends brownie points to @aboorde :sparkles: :thumbsup: :sparkles:
:cookie: 397 | @aboorde |http://www.freecodecamp.com/aboorde
ko loy yee
@koloyyee
Nov 18 2016 07:34
i will keep updating is page !
oh hey @aboorde i want know which part i should apply the "grid system" to? like everything ??
segmentationfaulter
@segmentationfaulter
Nov 18 2016 07:36
can somebody guide regarding the api endpoint for wikipedia viewer?
Andrew Boorde
@aboorde
Nov 18 2016 07:37
@koloyyee look at the source on this page https://v4-alpha.getbootstrap.com/examples/jumbotron/
Containers wrap your content but then there is a grid system that is comprised of rows and a 12 column system
ko loy yee
@koloyyee
Nov 18 2016 07:41
cool thanks @aboorde i'll have a look now
CamperBot
@camperbot
Nov 18 2016 07:41
:warning: koloyyee already gave aboorde points
koloyyee sends brownie points to @aboorde :sparkles: :thumbsup: :sparkles:
Andrew Boorde
@aboorde
Nov 18 2016 07:42
I personally like foundation over bootstrap
@koloyyee it gives a much cleaner way to set up something like those images for example http://foundation.zurb.com/sites/docs/v/5.5.3/components/block_grid.html
ko loy yee
@koloyyee
Nov 18 2016 07:43
so is better way of doing a showcase of the pictures i have in this case right ?
Andrew Boorde
@aboorde
Nov 18 2016 07:49
it's up to you. The quick way to do it in bootstrap would be something like... (havent done bootstrap in a while)
row
   col-sm-3
   col-sm-3
   col-sm-3
   col-sm-3
row
   col-sm-3
   col-sm-3
A reason I like foundation is that you can just separate sections by <div class="row"></div> and either include <div class="row column"></div> inside to have a one column row or use things like <div class="small-6 columns"></div><div class="small-6 columns"></div> to make a two column row
just looks cleaner to me
Sanne
@Cassanne
Nov 18 2016 08:05
Question that popped up in mind suddenly: is there a CSS way to make a background image repeat, but mirrorred? Or is that the kind of thing one has to use photoshop for?
grantknaver
@grantknaver
Nov 18 2016 08:16
why cant I console log getLocation()?
```
c0d0er
@c0d0er
Nov 18 2016 08:17
did anybody use minimax for tic tac toe? need some help on the algo of minimax or tic tac toe AI algo, could anybody help?
grantknaver
@grantknaver
Nov 18 2016 08:18
any ideas anyone
grantknaver
@grantknaver
Nov 18 2016 08:24
anyone still aroun d
Coy Sanders
@coymeetsworld
Nov 18 2016 08:26
getLocation doesn't return anything @grantknaver
grantknaver
@grantknaver
Nov 18 2016 08:29
should I return showPosition?
kirbyedy
@kirbyedy
Nov 18 2016 08:49
@grantknaver hmm location does not read correctly for me
its says I am somewhere in Spokane, WA
grantknaver
@grantknaver
Nov 18 2016 09:10
It is working now
I am now trying to get that to tie into my weather api
kirbyedy
@kirbyedy
Nov 18 2016 09:10
I am still in Spokane...
pretty sure I live in Europe mate :)
grantknaver
@grantknaver
Nov 18 2016 09:12
I updated the code here
ooo that is just the stand in text
lol
I put it there for styling at the beginning
kirbyedy
@kirbyedy
Nov 18 2016 09:15
right :)
grantknaver
@grantknaver
Nov 18 2016 09:23
@kirbyedy you got a second to answer a question
kirbyedy
@kirbyedy
Nov 18 2016 09:23
I can try
grantknaver
@grantknaver
Nov 18 2016 09:23
ok thanks
here is my question I am trying to get the getLocation function to work properly
kirbyedy
@kirbyedy
Nov 18 2016 09:25
its basically the same as you did in the challenge get location
get geo location
and you just store it in the variable lat and long, and then shove it to the weather api
grantknaver
@grantknaver
Nov 18 2016 09:26
but it keeps registering as undefined but when I console.log targetPosition() it registers the coordinates so why does it keep saying undefined
kirbyedy
@kirbyedy
Nov 18 2016 09:26
I tried to understand your code but got lost :D
grantknaver
@grantknaver
Nov 18 2016 09:26
you and me both
I have been on this challenge forever
kirbyedy
@kirbyedy
Nov 18 2016 09:28
give me a sec
grantknaver
@grantknaver
Nov 18 2016 09:28
thanks
kirbyedy
@kirbyedy
Nov 18 2016 09:30
  if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(function(location){
    latitude = location.coords.latitude;
    longitude = location.coords.longitude;

      var url = 'api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + ';

      $.get(url, function(data) {
    console.log(data);  //this will give all the weather data

      }); //data

    });
    // });  //location

  } else {
    alert("We couldn` retrieve your location, please check your location settings");
  }
right this one should be the most simple way of getting the data
I mean location
and then data from the weather api
as you can see latitude and longitude are variables which get position from geolocation, and then they are used inside the getjson to get the data
grantknaver
@grantknaver
Nov 18 2016 09:32
kinda get it... it is just realy confusing
kirbyedy
@kirbyedy
Nov 18 2016 09:33
navigator.geolocation.getCurrentPosition(function(location){
this line calls that get position function fro which you are getting the latitude and longitude
latitude = location.coords.latitude;
longitude = location.coords.longitude;
this 2 lines are storing them in a variable
then you use those 2 variables inside that url line
grantknaver
@grantknaver
Nov 18 2016 09:34
I get that it is just the api section that is confusing that is basically what I was doing
kirbyedy
@kirbyedy
Nov 18 2016 09:35
once you get location and console log the data from api you will get the object
after that is easy to access them as you did in the challenges
make sure you get data in the console, so we can continue from there
grantknaver
@grantknaver
Nov 18 2016 09:37
dont you need to add the api key
kirbyedy
@kirbyedy
Nov 18 2016 09:39
yes, I erased that
grantknaver
@grantknaver
Nov 18 2016 09:44
can you elaborate on data section so I can understand taht better
and with getJSON work too
kirbyedy
@kirbyedy
Nov 18 2016 09:46
yes, get or getJSON its the same
basic use, no additional parameters
are you getting data in the console ?
grantknaver
@grantknaver
Nov 18 2016 09:48
working on it
done soon
nope
nothing in the console
here is where I am at
kirbyedy
@kirbyedy
Nov 18 2016 09:56
@grantknaver right, now you have the api problem, because its loading over http
while geolocation works only over https
so if you write https://crossorigin.me infront of the api call it should work
yep, its working just tried it
grantknaver
@grantknaver
Nov 18 2016 09:59
hmm
So basically this ...
kirbyedy
@kirbyedy
Nov 18 2016 10:01
errr not really instead of the . put the /
grantknaver
@grantknaver
Nov 18 2016 10:01
just caught that
gotcha
awesome
grantknaver
@grantknaver
Nov 18 2016 10:06
how would I know that the issue I was having involved the api?
kirbyedy
@kirbyedy
Nov 18 2016 10:10
console.log was telling the error
mixed content type
grantknaver
@grantknaver
Nov 18 2016 10:12
I didnt see that message hmm
?
console log through code pen or the actual console log
kirbyedy
@kirbyedy
Nov 18 2016 10:13
try to remove the crossorigin and run the pen it will show in the chrome console
codepen console is crap, avoid it :)
grantknaver
@grantknaver
Nov 18 2016 10:14
ya I figured
the console in pen is empty
you have mozilla?
if you can you try to take a look with fire bug
kirbyedy
@kirbyedy
Nov 18 2016 10:21
chrome
grantknaver
@grantknaver
Nov 18 2016 10:23
@kirbyedy thanks
CamperBot
@camperbot
Nov 18 2016 10:23
grantknaver sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1550 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Josaped Moreno
@androuino
Nov 18 2016 10:41
I still cannot make my Random Quote Machine challenge working. It was working fine last week, I don't understand what happened, tried everything but still, I cannot get it to work.
http://codepen.io/shaolin30/pen/aBzGKv
Thanks for any help...
Karolis
@Karoliss
Nov 18 2016 10:42
whats your most likeable font family?
kirbyedy
@kirbyedy
Nov 18 2016 10:44
@androuino your console says: Uncaught SyntaxError: Unexpected token :
Josaped Moreno
@androuino
Nov 18 2016 10:46
@kirbyedy take a look at this, http://codepen.io/chriscoyier/pen/poDyt
I'm using the same pattern but still, it's not working.
His json object produces the same syntax error too, but his example is working.
I have played with his fork also, tried different properties and still, his example is working.
kirbyedy
@kirbyedy
Nov 18 2016 10:49
no, his code does not have that syntax error in the console
Josaped Moreno
@androuino
Nov 18 2016 10:51
@kirbyedy this is his json object: http://codepen.io/chriscoyier/pen/taqCe
Josaped Moreno
@androuino
Nov 18 2016 10:57
figured it out thanks... @kirbyedy
CamperBot
@camperbot
Nov 18 2016 10:57
androuino sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1551 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Nov 18 2016 10:58
what was it ?
Waffun
@Waffun
Nov 18 2016 11:13
11.png
hi, any tip to position the text below the images?
plss almost finished the challenge
Timothy Yang
@kmyan9
Nov 18 2016 11:53
Hey guys, I have some trouble understanding the bootstrap class "col-xs-XX" I understand what col and "xs" does, but I still don't understand what the number that comes last means... can someone clear this up for me ?
heroiczero
@heroiczero
Nov 18 2016 11:55
@kmyan9 column and xs is the screen size
Timothy Yang
@kmyan9
Nov 18 2016 11:55
yes yes i understand up to that point!
Sorin Ruse
@sorinr
Nov 18 2016 12:05
@kmyan9 have you read the bootstrap docs regarding the grid system? here the link: http://getbootstrap.com/css/#grid
Caleb Whiting
@whmountains
Nov 18 2016 12:10
@Waffun Put the spans with the text after the image tags.
Waffun
@Waffun
Nov 18 2016 12:11
i tried that before and nothing :C
was worst haha
Caleb Whiting
@whmountains
Nov 18 2016 12:11
@waffun put your code into codepen.io and post the link.
@Waffun but good for you for checking out flexbox layout
Acharya Anil
@acharyaks90
Nov 18 2016 12:23

I'm trying to print a dynamically generated PDF from a web page.

var $iframe = $('<iframe>');
$iframe.appendTo('body');
$iframe.load(function() {
var iframe = $iframe0;
var result = iframe.contentWindow.document.execCommand("print", false, null);
if (!result) iframe.contentWindow.print();
$.remove($iframe);
});
$iframe.attr('src', dataUrl);

execCommand() throws this ugly error message

Uncaught SecurityError: Blocked a frame with origin "http://localhost:2520" from accessing a frame with origin "null". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "data". Protocols must match.

The dataUrl looks like this...

data:application/pdf;base64,JVBERi0xLjQKJdP...

Brandon
@bd1887
Nov 18 2016 12:24
Hi everyone. I have a quick question about CSS. Does anyone know the easiest way to make a box with one side taller than the other? I'm trying to play around with perspective so as to make it appear that the left side of the box is farther away than the right.
heroiczero
@heroiczero
Nov 18 2016 12:25
@bd1887 maybe height in css?
Brandon
@bd1887
Nov 18 2016 12:26
@heroiczero Is there a height-left,height-right?
heroiczero
@heroiczero
Nov 18 2016 12:27
@bd1887 no. If I wanted to set different heights i would use two divs if its two elements or photoshop if its more of the image
Brandon
@bd1887
Nov 18 2016 12:30
@heroiczero Can you explain about how you would use two divs to make it appear to be taller on one side?
heroiczero
@heroiczero
Nov 18 2016 12:34
@bd1887 you could use <div> use float to have them align to each other or you could use bootstrap
KidCarnage
@KidCarnage
Nov 18 2016 12:44

I've got a question concerning uri encoding with js.
I've got this bit of code:

var uri = encodeURIComponent($(" blockquote:first ").text());

console.log(uri) shows the properly encoded string, BUT the following piece of code seems to undo this...

$("#tweet").html('<a class="btn btn-default col-md-offset-1 col-md-2" href="https://twitter.com/share?text=' + uri + '" target="_blank">tweet</a>');

Why is the string not encoded anymore when using .html and how can I circumvent this behaviour?

Brandon
@bd1887
Nov 18 2016 12:45
@heroiczero Ok thanks. I actually just came across the transform: skew; property, which isn't exactly what I was asking but I think might work
CamperBot
@camperbot
Nov 18 2016 12:45
bd1887 sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:cookie: 401 | @heroiczero |http://www.freecodecamp.com/heroiczero
KidCarnage
@KidCarnage
Nov 18 2016 13:30
I think I might have figured it out...since the copied link is properly encoded, maybe .html() doesn't undo the encoding but the browser displays it as tho...
Trinath Reddy
@trinath503
Nov 18 2016 14:16
Frds in the map structure some topics like tools,git,visual design its showing coming soon instead of topics,why??
kirbyedy
@kirbyedy
Nov 18 2016 14:17
because its coming soon
they are not finished yet
Aaron Bell
@awb715
Nov 18 2016 15:18
@jdtdesigns wow thats nice. what is BS?
full functional but needs better styling
JD Tadlock
@jdtdesigns
Nov 18 2016 15:40
@awb715 Lookin good. BS is bootstrap. ;)
You might want to add a minium width on your body so the container doesn't explode at small widths.
Aaron Bell
@awb715
Nov 18 2016 15:49
like how it is now?
@jdtdesigns
JD Tadlock
@jdtdesigns
Nov 18 2016 15:51
@awb715 Yep ;)
Aaron Bell
@awb715
Nov 18 2016 15:52
i added a min and max width to the main frame(container) so it doesnt change size irresponsibly. its a little more seemless
seamless
JD Tadlock
@jdtdesigns
Nov 18 2016 15:53
I'd say a min of 330 on the body should be fine. You don't need both.
Aaron Bell
@awb715
Nov 18 2016 15:53
@jdtdesigns im not sure the purple box doesnt is that great though because you really cant see that many without having to scroll
JD Tadlock
@jdtdesigns
Nov 18 2016 15:54
@awb715 On mobile, it would be better to shrink the streamer boxes down.
also remove some of the padding of the container and the yellow box.
To make the streamers smaller, you can decrease the logo size, font-size and padding
Aaron Bell
@awb715
Nov 18 2016 15:56
i got rid of the padding
JD Tadlock
@jdtdesigns
Nov 18 2016 15:56
@awb715 Don't remove the padding on larger sizes.
Aaron Bell
@awb715
Nov 18 2016 15:57
confused by what u mean
the yellow box is called mainframe and the container doesnt really have any css
JD Tadlock
@jdtdesigns
Nov 18 2016 15:57
@media (max-width: 450px) {
  /* Here is where'd you remove padding */
}
use media queries to adjust things at certain widths
Aaron Bell
@awb715
Nov 18 2016 15:58
yea i should practice media queries more
javascript is fun bro, remember we talked like 2 months ago and i was just a beginner
JD Tadlock
@jdtdesigns
Nov 18 2016 15:59
Vaguely :D
Aaron Bell
@awb715
Nov 18 2016 15:59
lol its in the DM's
you prob help a ton of people
JD Tadlock
@jdtdesigns
Nov 18 2016 15:59
I enjoy it
i also stream if you want to watch and ask questions ;)
Aaron Bell
@awb715
Nov 18 2016 16:00
so make the text have zero padding at a certain width
JD Tadlock
@jdtdesigns
Nov 18 2016 16:00
i made a trivia game that displays on stream with node and database
@awb715 Not zero, just a lot smaller.
bout to work on my portfolio actually
Aaron Bell
@awb715
Nov 18 2016 16:03
ill check it out
i feel like freecodecamp makes me miss out o in depth html, bootstrap and vanilla js @jdtdesigns
JD Tadlock
@jdtdesigns
Nov 18 2016 16:04
@awb715 FCC doesn't teach you. It just challenges you. You have to learn on your own. ;)
Aaron Bell
@awb715
Nov 18 2016 16:05
yea
well ive learned a lot! but know i need to learn more
JD Tadlock
@jdtdesigns
Nov 18 2016 16:05
I wouldn't focus on BS as much. Modern css blows BS out of the water.
Aaron Bell
@awb715
Nov 18 2016 16:06
my goal right now is to learn enough to freelance basic websites online so i can travel south east asia for cheap
ive been told learn wordpress too
im checking out one of your past streams. what your doing is way over my head
JD Tadlock
@jdtdesigns
Nov 18 2016 16:07
WordPress is a beast to learn if you want to dev with it. It took me around 4 years to get to a professional level with it. @awb715
I kinda wish i'd never bothered lol
Aaron Bell
@awb715
Nov 18 2016 16:08
why haha
too much?
i needa learn something where i can freelance
ive heard its just all over the place
JD Tadlock
@jdtdesigns
Nov 18 2016 16:08
I'd say minium 3 years before you can freelance
the hard facts hurt lol
Aaron Bell
@awb715
Nov 18 2016 16:08
they do
JD Tadlock
@jdtdesigns
Nov 18 2016 16:09
You don't learn this stuff fast unless you have a photographic memory
Aaron Bell
@awb715
Nov 18 2016 16:09
it makes sense tho, i was able to build this twitch.tv app which is very basic in reality and i struggled with it. plus my design isnt good
JD Tadlock
@jdtdesigns
Nov 18 2016 16:09
it takes countless repitition
And that's just the very basics.
Aaron Bell
@awb715
Nov 18 2016 16:10
yea haha
accessing the twtich.tv api is very basic
and the weather app too
JD Tadlock
@jdtdesigns
Nov 18 2016 16:10
Css alone can take years to master
Aaron Bell
@awb715
Nov 18 2016 16:10
yea
im not artsy tho
JD Tadlock
@jdtdesigns
Nov 18 2016 16:11
If you like to solve logical problems, you'll love programming.
Aaron Bell
@awb715
Nov 18 2016 16:11
well im studying for the cpa at same time as learning this, so to hedge if wanna be a developer i still can use my bachelors
JD Tadlock
@jdtdesigns
Nov 18 2016 16:12
I recently took the challenge to scrape all the fantasy football sites to get their predictions.
Aaron Bell
@awb715
Nov 18 2016 16:12
are you making a database of their predictions or something
looking at oe of your videos, the fact your coding on such a big scale is awesome
JD Tadlock
@jdtdesigns
Nov 18 2016 16:13
I'm going to make an app that shows averages from all the experts and lets you create teams and save drafts.
Aaron Bell
@awb715
Nov 18 2016 16:13
you learned part time?
JD Tadlock
@jdtdesigns
Nov 18 2016 16:13
Yeah, been around 8 years now since i started
And i still consider myself a noob lol
Aaron Bell
@awb715
Nov 18 2016 16:14
lol
id be happy if i can make a site a week to freelance for 300 dollars so i can ball out in thailand
JD Tadlock
@jdtdesigns
Nov 18 2016 16:15
It's not as easy as 123 to freelance basic sites.
You have over a million competitors
Aaron Bell
@awb715
Nov 18 2016 16:16
yea
JD Tadlock
@jdtdesigns
Nov 18 2016 16:16
The real work is found in the things that everybody can't do.
Aaron Bell
@awb715
Nov 18 2016 16:16
yea
Jason Luboff
@JLuboff
Nov 18 2016 16:16
I knew a guy that was a "website designer" on the side...in reality he just charged people to use Wordpress templates...
Aaron Bell
@awb715
Nov 18 2016 16:16
like i heard shopify and wordpresss are good
JD Tadlock
@jdtdesigns
Nov 18 2016 16:17
WP can get bloated and slow very fast when using premade themes, plugins
So there's a price to be paid to get a custom site/plugin made.
Jason Luboff
@JLuboff
Nov 18 2016 16:18
He wasn't doing anything custom lol
JD Tadlock
@jdtdesigns
Nov 18 2016 16:18
My friend use to do business app creation for companies in WP. He charged a minimum of 10,000 per app.
it'd usually end up being more
Jason Luboff
@JLuboff
Nov 18 2016 16:19
For an app that costs that amount, how much time would that roughly equate to?
JD Tadlock
@jdtdesigns
Nov 18 2016 16:19
a month or more
Aaron Bell
@awb715
Nov 18 2016 16:19
i feel like once you go to corporate america its impossible to learn anything else
JD Tadlock
@jdtdesigns
Nov 18 2016 16:19
6 to 10 hours a day
Aaron Bell
@awb715
Nov 18 2016 16:19
which is why i wanna code
Jason Luboff
@JLuboff
Nov 18 2016 16:20
I work in a business...I'm currently learning JS, Visual Basic, and Microsoft SQL
Aaron Bell
@awb715
Nov 18 2016 16:20
javascript is awesome
JD Tadlock
@jdtdesigns
Nov 18 2016 16:20
@JLuboff Nice
Aaron Bell
@awb715
Nov 18 2016 16:20
i actually dont like jquery tho
JD Tadlock
@jdtdesigns
Nov 18 2016 16:21
jQuery is great for what it does
Aaron Bell
@awb715
Nov 18 2016 16:21
i feel like it gets hard to make things
like so much goig on
the way i have the new boxes made as the info comes in from the api
JD Tadlock
@jdtdesigns
Nov 18 2016 16:22
You have a lot of unnecessary code ;)
Aaron Bell
@awb715
Nov 18 2016 16:22
yea i wouldnt know how to do it otherwise,
JD Tadlock
@jdtdesigns
Nov 18 2016 16:22
As you learn more, your code will shrink and become more readable @awb715
Aaron Bell
@awb715
Nov 18 2016 16:23
shouldi be learning more vanilla js
the thing is, i dont have someone to tell me how to correct what im doing. i just codewhat i think will work
cus im a novice
JD Tadlock
@jdtdesigns
Nov 18 2016 16:24
You'll need to learn vanilla for sure. It will help you understand what's going on in frameworks and even jQuery. But, to quickly create some functionality, jQuery is great to throw in.
You'll eventually learn more robust libraries/frameworks.
I've spent so much time in php/WP that I only started diving into advanced js in the last 2 to 3 years.
I'm a master of jQuery though lol
Aaron Bell
@awb715
Nov 18 2016 16:25
haha
its the only way i know how to manipulate
JD Tadlock
@jdtdesigns
Nov 18 2016 16:26
jQuery is one of the few libraries that i recommend starting with
instead of vanilla
Jason Luboff
@JLuboff
Nov 18 2016 16:27
I like jQuery, makes things much easier/readable a lot of times I think
Aaron Bell
@awb715
Nov 18 2016 16:27
look at my jquery that cretes the boxes in https://codepen.io/Aaron-w-Bell/full/mORbad/ @JLuboff
my friend said its called jquery soup haha
Jason Luboff
@JLuboff
Nov 18 2016 16:28
A lot of linking lol
JD Tadlock
@jdtdesigns
Nov 18 2016 16:29
You're creating elements and piecing them together. The easiest way to do it is just use .append() or .prepend() and just write the html out. @awb715
Aaron Bell
@awb715
Nov 18 2016 16:29
can u give me a example
or some reading haha
There's my twitch app
I think if you look at my jQuery you'll see what @jdtdesigns is refering to
JD Tadlock
@jdtdesigns
Nov 18 2016 16:30
@JLuboff You can also decrease your code by using one function for the button presses.
Aaron Bell
@awb715
Nov 18 2016 16:30
@JLuboff thats a little hard for me to read haha
Jason Luboff
@JLuboff
Nov 18 2016 16:31
@jdtdesigns Even though each button function performs a different action?
JD Tadlock
@jdtdesigns
Nov 18 2016 16:31
Yep ;)
Aaron Bell
@awb715
Nov 18 2016 16:32
i did 3 button functions
JD Tadlock
@jdtdesigns
Nov 18 2016 16:32
I'm making an example
Aaron Bell
@awb715
Nov 18 2016 16:33
@JLuboff so for each account your appending the box of data with styling
@jdtdesigns what do you think of the way i did my buttons
Jason Luboff
@JLuboff
Nov 18 2016 16:40
@awb715 Ya, I have three blank div containers in my html (one for online, one for offline, and one for closed account). Then depending on the streamers status, They are append to that container with the appropriate additional containers
Aaron Bell
@awb715
Nov 18 2016 16:40
and then on the clicks of the buttons you hide the div
@JLuboff more efficient than what i did by manipulated the javascript each click
im not sure if i sohuld modify mine or move on to intermediate algorithims, i dont think its presentable to someone if i apply for a job in however long in the future
Jason Luboff
@JLuboff
Nov 18 2016 16:42
You can always go back later and modify your projects
Aaron Bell
@awb715
Nov 18 2016 16:44
yea true
alright fellas, ill be back later. tag me if you guys do anything related to what were talking about so i can cehck it out @jdtdesigns @JLuboff
Colin Swenson-Healey
@chozandrias76
Nov 18 2016 16:58
I am trying to make the random quote machine app but, it seems that none of the APIs use a format that I have already learned for getting the data. Should I be learning PHP or another language to access this API? https://market.mashape.com/andruxnet/random-famous-quotes
I figure I should be able to use AJAX but, I don't understand how using the documentation.
I was using another API to get quotes but, it seems I could only call the API when the page loaded and not again through AJAX
Jason Luboff
@JLuboff
Nov 18 2016 17:00
@chozandrias76 Did you try having the API call run on a button click as opposed to the page load?
Colin Swenson-Healey
@chozandrias76
Nov 18 2016 17:01
Yeah I tried that with the other API and I think it isn't setup to allow for that. I asked my friend a while back and he said I needed to retrieve the information another way.
Jason Luboff
@JLuboff
Nov 18 2016 17:02
Well, personally, I created my own arrays of quotes so I didn't use an API, but I know there are some API's available that work
Colin Swenson-Healey
@chozandrias76
Nov 18 2016 17:02
Yeah I could just create an array of quotes but, for the purpose of this assignment, I think it would be good to learn how to use other people's API properly
I also tried this API http://forismatic.com/ru/api/
Jason Luboff
@JLuboff
Nov 18 2016 17:03
When I did that project, it wasn't required to use an API, and I'm guessing thats still the case if they don't provide one. The following three projects use API's that will give you good practice
Ah, ya thats the API I see thrown around here
Colin Swenson-Healey
@chozandrias76
Nov 18 2016 17:04
Hmm maybe it is more important that I learn how to use the twitter API to send out a message than to use somebody's obscure API.
Brandon
@bd1887
Nov 18 2016 17:15

Hi this is probably a really easy question, but I'm really bad at using CSS. I'm working on the calculator challenge, and I made some divs using a row and columns near the top. When I make the screen smaller, they stack on top of each other even though they're in a fixed div whose size never changes.

http://codepen.io/bd1887/pen/BQQErv?editors=1100

isaacgg
@isaacgg
Nov 18 2016 17:30
@bd1887 Hi Bradon. I think that your "CASEYO" , your "SOL-POW" and your solar panel don't have a fixed position
they should if you are working with fixed atributte
JD Tadlock
@jdtdesigns
Nov 18 2016 17:38
@JLuboff @awb715 Here's an example of how to go about it. I just recreated Aaron's styling. http://jsbin.com/kojoxuj/edit?js,output
Look at the switchStatus function.
Jason Luboff
@JLuboff
Nov 18 2016 17:41
Interesting
@jdtdesigns It took me a moment to fully understand, but I got it. the else portion through me off for a second ;) But you're taking the status and using that to determine online/offline
JD Tadlock
@jdtdesigns
Nov 18 2016 17:42
I just added a class of online, offline or closed to each item as they are added to the DOM. Then i can use that class to show them based on that class.
I also set it up so the online streams are always up top, offline in the middle and closed at the bottom when in the 'All' view. @JLuboff
Jason Luboff
@JLuboff
Nov 18 2016 17:45
I didn't pay attention to that lol. My app is already set up that way by using three different base containers
JD Tadlock
@jdtdesigns
Nov 18 2016 17:45
It's easy to separate online, offline just by using .prepend() and .append()
Jason Luboff
@JLuboff
Nov 18 2016 17:47
@jdtdesigns How good are you with working with times? I'm working on a calendar app that I'm pulling in event times (start and end) from a JSON file. The times are formatted like such "9:30 AM" "11:00 AM" etc. Therefore, they are a string. I want to convert them to a usable time so that I can create a function that will test if the current time is between the start/end so that I can change from being "Available" to "Busy'
JD Tadlock
@jdtdesigns
Nov 18 2016 17:48
Do you have a date as well in the string? @JLuboff
Jason Luboff
@JLuboff
Nov 18 2016 17:50
I do not, but I think I could easily get that added. I'm pushing those values to an 2d Array so I have [["9:30 AM","11:00 AM],["11:45 AM", "12:30 PM"]]. I could just do myArr.push([curDate + time[0], curDate + time[1]) (for example)
I could show you my codepen, although, it won't get any data from the JSON file since the file is local to my computer (I'm switching between Codepen and Atom)
JD Tadlock
@jdtdesigns
Nov 18 2016 17:51
@JLuboff What you want to do is push the start and end as timestamps.
Jason Luboff
@JLuboff
Nov 18 2016 17:51
What would be my method for that?
JD Tadlock
@jdtdesigns
Nov 18 2016 17:52
You can use jQuery's datepicker to get a date object when they choose the date.
isaacgg
@isaacgg
Nov 18 2016 17:52
Hi, I have a problem with my tictactoe project. I'm using canvas, but sometimes my font doesn't load properly. How can I make my canvas wait until the font is correctly downloaded? https://codepen.io/isaacgg/pen/XjZWrQ/
JD Tadlock
@jdtdesigns
Nov 18 2016 17:52
Then you can turn that object into a timestamp
@JLuboff
you create a timestamp like this
var timestamp = new Date().getTime();
@JLuboff
the datepicker will return a Date() object that you can use .getTime() on
Walid Ashri
@walidashri
Nov 18 2016 17:54
Hi looking for text to speech JS library any idea please
JD Tadlock
@jdtdesigns
Nov 18 2016 17:54
then it's as easy as subtracting start from end and if it's greater than 0, it hasn't happened yet.
@walidashri npm say
Jason Luboff
@JLuboff
Nov 18 2016 17:55
@jdtdesigns Can I feed that my times from my JSON file? To give you a bit more info..I'm attempting to create a digital sign for a conference room(s). The JSON file will be modified daily by reception or whoever from an App (going to try making it with Visual Basic as I'm trying to learn that as well for some additional job functions). The sign will then update according to the JSON file information
Jaber Salehi
@JaBERx
Nov 18 2016 17:57

Hi guys,

I have an issue with sass,

const options = {
    sass:    'src/assets/scss/**/*.scss',
};
gulp.task('sass', function() {
    return gulp.src(options.sass)
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(options.css));
});

I have some folders in sass folder, for example: Main, Buttons, Forms
When i run the sass task, it will also copy those folder to /css folder, how do i prevent this ?

Walid Ashri
@walidashri
Nov 18 2016 17:59
@jdtdesigns Thank you very much .why not appearing in google search before
CamperBot
@camperbot
Nov 18 2016 17:59
walidashri sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 763 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Nov 18 2016 17:59
@JLuboff Yeah, on the front end where you choose the date, just use jqueryUI datepicker to pick the date. It returns a value that is a Date() object. You can then convert that to a timestamp by running .getTime(). Then you'll have a start timestamp and an end timestamp. And, like i said before, you'll just have to subtract to know if the event has happened yet.
@walidashri Not sure lol
Jason Luboff
@JLuboff
Nov 18 2016 18:00
@jdtdesigns Ok, thanks. I'll see what i can do with it
CamperBot
@camperbot
Nov 18 2016 18:00
jluboff sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 764 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JacobY
@jyelton4
Nov 18 2016 18:03
I can't figure out why an image element in my code will respond to margin stylings in a class but not border
<div class="green-back" style="margin:50px">
<h1 class="text-primary text-center">CANDIDE THOVEX</h1>
<h2 class="text-primary text-center">~greatest freeskier of our time~</h2>
<div align="center"><img class="image-style" src="http://images.newschoolers.com/images/17/00/75/11/28/751128.jpeg " alt="Candide1"></div>
</div>
.green-back {
background-color: #DCFF9C;
}
.image-style {
margin-bottom: 50px;
margin-top: 25px;
border-color: black;
border-width: 10px;
}
^The image-style class successfully changes the margin but no border appears
Tyler Moeller
@TylerMoeller
Nov 18 2016 18:06
@jyelton4 Add the class border-style: solid; to your CSS
Brandon
@bd1887
Nov 18 2016 18:06
@isaacgg I can give "CASEYO" a fixed position and that seems to keep it in place. But "SOL-POW" still moves and if I try to fix it, it overlaps 'CASEYO'
@isaacgg err it doesn't overlap, but it still moves.
Jaber Salehi
@JaBERx
Nov 18 2016 18:08
can you help me with gulp-sass that i wrote above ?
JacobY
@jyelton4
Nov 18 2016 18:08
@TylerMoeller thank you
CamperBot
@camperbot
Nov 18 2016 18:08
jyelton4 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 944 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Nov 18 2016 18:09
@jyelton4 No problem, You can also use the shorthand form:
.image-style {
  margin-bottom: 50px;
  margin-top: 25px;
  border: 10px solid black;
}
JD Tadlock
@jdtdesigns
Nov 18 2016 18:09
@isaacgg It's called fout. It's been a problem for a long time. I would just show an overlay with a loading icon when the page is first loaded. Then you can check if the width of the text element using the custom font changes. If it does, you know the font has been loaded. You then hide the overlay. ;)
JacobY
@jyelton4
Nov 18 2016 18:10
@TylerMoeller I also have not been able to get the my h1 element to respond to a margin declaration
<h1 class="text-primary text-center" style="margin-top:15px">CANDIDE THOVEX</h1>
^Is this incorrect?
Tyler Moeller
@TylerMoeller
Nov 18 2016 18:11
That should work - I might need to see your codepen to investigate
JD Tadlock
@jdtdesigns
Nov 18 2016 18:12
@isaacgg You're putting <html><body><head> in your html panel. Codepen does this for you. Add the font link in Settings->HTML->Stuff for head. You'll probably see a faster load time then. ;)
JacobY
@jyelton4
Nov 18 2016 18:13
^how do i share? (forgive me--I'm completely new to this)
Tyler Moeller
@TylerMoeller
Nov 18 2016 18:13
@jyelton4 I just found it. Remove the inline styling and use CSS:
.green-back h1 {
  margin-top: 15px;
}
To share the codepen in the future, you can just copy / paste the URL here in chat
JacobY
@jyelton4
Nov 18 2016 18:13
@TylerMoeller thanks again!
CamperBot
@camperbot
Nov 18 2016 18:13
jyelton4 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: jyelton4 already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Nov 18 2016 18:15
@jdtdesigns Do you have experience with text animations by chance? I threw something together last weekend and now stuck on a minor annoyance....
JD Tadlock
@jdtdesigns
Nov 18 2016 18:16
Yes @TylerMoeller
Tyler Moeller
@TylerMoeller
Nov 18 2016 18:16
The pen is here. When the screen is narrower than 500px, the text jumps to the edge of the screen and then snaps into place. It is smoother when the screen is wider.
Pretty ugly code for now....I may just have to redo it all :(
JacobY
@jyelton4
Nov 18 2016 18:18
Still not responding to the margin. I've tried several ways
http://codepen.io/986ftTalltrees/pen/RoKrKj
Leon
@LeonDeluxe
Nov 18 2016 18:18
function updateRecords(id, prop, value) {
    if (prop === "tracks"){
      collection[id][prop].push(value);
    } else {
      if(collection.hasOwnProperty([id][prop])) {
        delete collection[id];
      } else {
        collection[id][prop] = value;
      }
    }
  return collection;
}
why doesnt this code on record collection work?
Tyler Moeller
@TylerMoeller
Nov 18 2016 18:20
@jyelton4 It appears to work to me - the 15px is fairly small compared to the 50px you have set for the inline style in the outer div
isaacgg
@isaacgg
Nov 18 2016 18:21
@jdtdesigns "Then you can check if the width of the text element using the custom font changes." Hi, how can I do this?
Tyler Moeller
@TylerMoeller
Nov 18 2016 18:21
@jyelton4 Also, this may help you visualize the margins better for debugging purposes:
* {
  border: 1px solid black;
}
JacobY
@jyelton4
Nov 18 2016 18:25
@TylerMoeller it doesn't change whatsoever, even if I put with massive margin. Strange.
Tyler Moeller
@TylerMoeller
Nov 18 2016 18:25

@jyelton4 make sure you're doing this:

.green-back h1 {
  margin-top: 15px;
}

instead of:

h1 {
  margin-top: 15px;
}

Need to be specific to override bootstrap

isaacgg
@isaacgg
Nov 18 2016 18:26
@jdtdesigns doesn't matter I found another way, like this http://stackoverflow.com/questions/29315787/draw-to-canvas-only-after-google-web-font-is-loaded. Thanks!
CamperBot
@camperbot
Nov 18 2016 18:26
:cookie: 765 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
isaacgg sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
JacobY
@jyelton4
Nov 18 2016 18:28
@TylerMoeller that was it. thank you
CamperBot
@camperbot
Nov 18 2016 18:28
:warning: jyelton4 already gave tylermoeller points
jyelton4 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Tyler Moeller
@TylerMoeller
Nov 18 2016 18:30
Any time - glad it worked out for you
JacobY
@jyelton4
Nov 18 2016 18:35
@TylerMoeller what is this * { } called?
Tyler Moeller
@TylerMoeller
Nov 18 2016 18:36
@jyelton4 It means to select all the elements on the page to apply CSS styling. This is a good resource to learn all the ways to select the various elements on your page: http://www.w3schools.com/cssref/css_selectors.asp
JacobY
@jyelton4
Nov 18 2016 18:37
@TylerMoeller you're the man, appreciate it. No experience in html/css at all
Tyler Moeller
@TylerMoeller
Nov 18 2016 18:38
You'll get there!
Sorin Ruse
@sorinr
Nov 18 2016 18:44
@TylerMoeller for me the pen you provided it seems working as it should. made any changes in the meantime?
Tyler Moeller
@TylerMoeller
Nov 18 2016 18:45
@sorinr Nope, I haven't made any changes to it. It's a very minor annoyance, only happens when the screen is narrower than 500px. The text goes to the very edge of the screen and then snaps into place rather than easing into the final position.
Alex Jacobs
@MaximumFluff
Nov 18 2016 18:46
how do you get images to display inline like in the example for the portfolio? https://codepen.io/Maximum_Fluff/pen/WoRraq
Aaron Bell
@awb715
Nov 18 2016 18:46
@jdtdesigns i get lost where you set the values from the .getJSONs
Sorin Ruse
@sorinr
Nov 18 2016 18:47
@TylerMoeller not for me on chrome linux mint. let me test it on ff and opera
Tyler Moeller
@TylerMoeller
Nov 18 2016 18:47
@sorinr That's good to hear :) it reproduces for me on Chrome on Windows and Chrome + Safari on iOS
haven't tried other browsers yet
Aaron Bell
@awb715
Nov 18 2016 18:48
@jdtdesigns ```
      .then(function() {
        $.getJSON('https://wind-bow.hyperdev.space/twitch-api/channels/' + streamer + '?callback=?', function(data) {
          var icon = status == 'online' ? 'glyphicon-signal' : status == 'offline' ? 'glyphicon-off' : 'glyphicon-remove-sign',
              description = status == 'online' ? data.status : status == 'offline' ? 'Currently Offline' : 'Closed',
              logo = status != 'closed' ? data.logo : 'http://www.freeiconspng.com/uploads/no-entry-stop-forbidden-icon-10.png';
this part specifically. i think your setting classes, but not sure what the ? and : do. and also your design is so much nicer
@jdtdesigns
Alex Jacobs
@MaximumFluff
Nov 18 2016 18:50
@MaximumFluff nvm managed to fix the problem, needed to change col-xs to col-m
Tyler Moeller
@TylerMoeller
Nov 18 2016 18:51
@awb715 Those are called ternary operators for shorthand if/else statements: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
Alex Jacobs
@MaximumFluff
Nov 18 2016 18:51
still cant really wrap my head around that lol
Sorin Ruse
@sorinr
Nov 18 2016 18:51
@TylerMoeller on opera the same. everything looks pretty nice when i'm reducing the screen width. animation works as well. let me try ff
Tyler Moeller
@TylerMoeller
Nov 18 2016 18:51
@sorinr Thank you for taking a look, appreciate it.
CamperBot
@camperbot
Nov 18 2016 18:51
tylermoeller sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 857 | @sorinr |http://www.freecodecamp.com/sorinr
Tyler Moeller
@TylerMoeller
Nov 18 2016 18:53
@MaximumFluff Check out this codepen - it may help you understand the bootstrap grid system a little better
raphey
@raphey
Nov 18 2016 18:53
@awb715 and @jdtdesigns and anyone else who can help... what does the ?callback=? really mean in those getJSON calls? Where can I learn more about that?
Aaron Bell
@awb715
Nov 18 2016 18:54
i think that makes it json data. im still a newb tho. see the info on on twitch project and it explains
Sorin Ruse
@sorinr
Nov 18 2016 18:56
@TylerMoeller on ff i get some strange placeholder on inputs. i'll pm u some pics
raphey
@raphey
Nov 18 2016 18:57
@awb715 Thanks! The key line was "If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead." (From https://forum.freecodecamp.com/t/use-the-twitchtv-json-api/19541)
CamperBot
@camperbot
Nov 18 2016 18:57
raphey sends brownie points to @awb715 :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @awb715 |http://www.freecodecamp.com/awb715
Aaron Bell
@awb715
Nov 18 2016 18:58
np @raphey
how does github work? i have a code i want to upload to it, but then if i modify it does github show the changes?
Tyler Moeller
@TylerMoeller
Nov 18 2016 19:02
@sorinr Thanks again. Looks like others have hit that issue as well: http://stackoverflow.com/questions/9900018/why-is-firefox-cutting-off-the-text-in-my-input-type-text
Will play around with box-sizing: content-box;
CamperBot
@camperbot
Nov 18 2016 19:02
tylermoeller sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: tylermoeller already gave sorinr points
Peter Steele
@PeterHSteele
Nov 18 2016 19:12
I'm working on the weather app and having trouble with my getCurrentPosition function in codepen. Error message says that function is no longer supported for http and I need to switch to https. Anyone know how to get around that?
Alex Jacobs
@MaximumFluff
Nov 18 2016 19:12
thanks @TylerMoeller
CamperBot
@camperbot
Nov 18 2016 19:12
maximumfluff sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 945 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
ahmed11100
@ahmed11100
Nov 18 2016 19:16
hey guys i have some trouble designing a website
can any one help
Shawn Grooms
@SEGrooms
Nov 18 2016 19:17
@ahmed11100 I just googled good website portfolios
@ahmed11100 it gives you an idea of what a good website design looks like
@ahmed11100 usually, simplicity is best :) Having a bunch of features may be cool, but it probably won’t look good :/
@PeterHSteele I used the IP API
ahmed11100
@ahmed11100
Nov 18 2016 19:19
no i have a code problem
Shawn Grooms
@SEGrooms
Nov 18 2016 19:19
@PeterHSteele http://ip-api.com/ allows you to find your current location
@ahmed11100 what is your problem?
ahmed11100
@ahmed11100
Nov 18 2016 19:20
do you have experience with bootstrap
Aaron Bell
@awb715
Nov 18 2016 19:20
what does everyone think?
Jason Luboff
@JLuboff
Nov 18 2016 19:20
@PeterHSteele Use IP API (not always accurate) or use https://crossorigin.me to prepend your API url and change codepen to load over https. Problem with that is it can be buggy/slow/lag/crash...so choose your poison :)
Shawn Grooms
@SEGrooms
Nov 18 2016 19:20
@ahmed11100 yes
ahmed11100
@ahmed11100
Nov 18 2016 19:21
i will send a screenshot
wait a moment
Shawn Grooms
@SEGrooms
Nov 18 2016 19:21
@ahmed11100 could you share your pen?
ahmed11100
@ahmed11100
Nov 18 2016 19:22
ok
Shawn Grooms
@SEGrooms
Nov 18 2016 19:22
@PeterHSteele @JLuboff that’s true, the IP Adress isn’t as accurate, but it still works well :)
Aaron Bell
@awb715
Nov 18 2016 19:24
thoughts?
ahmed11100
@ahmed11100
Nov 18 2016 19:25
now i need the three bottom sections to align vertically
Aaron Bell
@awb715
Nov 18 2016 19:31
@JLuboff ive realized my code isnt that inefficient because on each button click it recalls the api, where it doesnt necesariilly have too
Peter Steele
@PeterHSteele
Nov 18 2016 19:32
Thanks @SEGrooms @JLuboff how do I change codepen to load over https using crossorigin.me?
CamperBot
@camperbot
Nov 18 2016 19:32
peterhsteele sends brownie points to @segrooms and @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 444 | @jluboff |http://www.freecodecamp.com/jluboff
:cookie: 387 | @segrooms |http://www.freecodecamp.com/segrooms
CampEvan
@CampEvan
Nov 18 2016 19:32
is it just me or are we given no background in order to build a browser quote app?
ahmed11100
@ahmed11100
Nov 18 2016 19:34
@SEGrooms i'm waiting
raphey
@raphey
Nov 18 2016 19:34
@CampEvan it's definitely a stretch! One thing to do as a first step is just find a good source of random quotes with a free API. Then, before messing around with any coding, you can just try coming up with a URL to put in your browser to get a random quote as a JSON object
kirbyedy
@kirbyedy
Nov 18 2016 19:34
@CampEvan you will have to dig in deep into google, you have been pushed off the cliff without the parachute, find that parachute :)
J Player
@Heyjp
Nov 18 2016 19:35
@CampEvan you do get dropped a bit in the deep end. But that's to get you to start googling and asking questions.
raphey
@raphey
Nov 18 2016 19:36
@awb715 the twitch page looks good. It might be nice to see which of the three display states you are currently on
Aaron Bell
@awb715
Nov 18 2016 19:37
hmmm
Jason Luboff
@JLuboff
Nov 18 2016 19:37
@awb715 I didn't look too closely at your code, but just have the button clicks outside the API call functions if thats the case?
raphey
@raphey
Nov 18 2016 19:38
Pretty easy to make feature requests of other people :)
Jason Luboff
@JLuboff
Nov 18 2016 19:38
@PeterHSteele In your url field of your browser, add https:// infront of codepen.io/....
ahmed11100
@ahmed11100
Nov 18 2016 19:43
is anyone paying any attention to my problem
Peter Steele
@PeterHSteele
Nov 18 2016 19:43
@JLuboff ha its that simple huh. Codepen is throwing errors at me for using https instead of http though, so I'm gonna use IP API instead. Thanks again!
CamperBot
@camperbot
Nov 18 2016 19:43
peterhsteele sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:warning: peterhsteele already gave jluboff points
Jason Luboff
@JLuboff
Nov 18 2016 19:45
@PeterHSteele You have to also prepend your API url with https://crossorigin.me (for example: var url = "https://crossorigin.me/http://api.openweathermap.com/......"
Aaron Bell
@awb715
Nov 18 2016 19:49
@raphey currently implementing that but the hover is gone based on what i did
Rafa C.
@rafolas
Nov 18 2016 19:51

hi! I don't know from where I can begin with the first project (random quote machine). I've made a json file like this:

{
"id": "0",
"quote": "'Interesting. No, wait, the other thing: tedious'",
"who": " - Bender "
},

I understand that this line gets the json file:

$.getJSON("/json/cats.json", function(json)

But I don't know where I get the info and how to manipulate it. Any tutorial or guide? Thanks

Peter Steele
@PeterHSteele
Nov 18 2016 19:52
@JLuboff sweet it's working, appreciate the help
JD Tadlock
@jdtdesigns
Nov 18 2016 19:59
@TylerMoeller A fun little challenge. This should work for you. ;) http://jsbin.com/conezoj/edit?js,output
Aaron Bell
@awb715
Nov 18 2016 19:59
@jdtdesigns king of fcc
Peter Steele
@PeterHSteele
Nov 18 2016 20:00
@rafolas I think you only need a $.getJSON function if you're calling JSON through an API. If you're making an array of quotes by hand you can just grab quotes by calling their object names or indices. Like, say that object was named benderQuote, you could grab the quote with benderQuote."quote". Does that make sense at all?
Aaron Bell
@awb715
Nov 18 2016 20:00
https://codepen.io/Aaron-w-Bell/full/mORbad/ @jdtdesigns restyled my buttons like yours. i realize though that each click i recall the .json data. is that not good practice?
JD Tadlock
@jdtdesigns
Nov 18 2016 20:02
@awb715 You shouldn't call the api for each click. You can just add a status class to each streamer div as you add them and then use that class to hide/show.
Tyler Moeller
@TylerMoeller
Nov 18 2016 20:02
@jdtdesigns Thank you!! I will start incorporating it now. Really appreciate the help!
CamperBot
@camperbot
Nov 18 2016 20:02
tylermoeller sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 766 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Nov 18 2016 20:02
Look at my code to see how i did it ;)
Tyler Moeller
@TylerMoeller
Nov 18 2016 20:03
No velocity.js required it seems - which is huge for me ;)
Aaron Bell
@awb715
Nov 18 2016 20:03
i understand, ill figure it out @jdtdesigns
Tyler Moeller
@TylerMoeller
Nov 18 2016 20:03
Did not want a whole library for one animation lol
JD Tadlock
@jdtdesigns
Nov 18 2016 20:03
@TylerMoeller ?
I'm using css only for the animations
Tyler Moeller
@TylerMoeller
Nov 18 2016 20:04
Exactly - I was using velocity.js because I couldn't get a pure CSS solution working. My first time playing around with text animations.
JD Tadlock
@jdtdesigns
Nov 18 2016 20:04
Ah lol
gotcha
JD Tadlock
@jdtdesigns
Nov 18 2016 20:10
@TylerMoeller I updated it so the full left and right boxes are clickable instead of the text. ;)
Tyler Moeller
@TylerMoeller
Nov 18 2016 20:11
Thanks again :)
JD Tadlock
@jdtdesigns
Nov 18 2016 20:11
welcome
Tyler Moeller
@TylerMoeller
Nov 18 2016 20:12
I'll try to send another cookie later when it lets me lol. Thank you also to @sorinr for helping with the truncated placeholder text on Firefox. Roboto was causing some problems there, using Verdana fixed it.
CamperBot
@camperbot
Nov 18 2016 20:12
tylermoeller sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 858 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Nov 18 2016 20:14
@TylerMoeller np . it was a pleasure to be able to help
KM
@maheshcheemalapati
Nov 18 2016 20:20
Hi can anyone tell me if we have to use only html and bootstrap for the tribute page or can we also use CSS
Sorin Ruse
@sorinr
Nov 18 2016 20:25
@maheshcheemalapati i would highly recommend you to use just html and plain css.
CampEvan
@CampEvan
Nov 18 2016 20:33
@Heyjp @kirbyedy @raphey thanks to all three of you for the motivation :smile:
CamperBot
@camperbot
Nov 18 2016 20:33
campevan sends brownie points to @heyjp and @kirbyedy and @raphey :sparkles: :thumbsup: :sparkles:
:cookie: 293 | @raphey |http://www.freecodecamp.com/raphey
:cookie: 410 | @heyjp |http://www.freecodecamp.com/heyjp
:star2: 1554 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Tegh Singh
@teghtrishansingh
Nov 18 2016 20:35
okay
So what resources do you use for the tribute page
Miz_Sashae
@jamcoder86
Nov 18 2016 20:42
hello everyone how do i start to a build a random quote machine
JD Tadlock
@jdtdesigns
Nov 18 2016 20:44
@TylerMoeller I updated the animation to be smoother and less code.
Jason Luboff
@JLuboff
Nov 18 2016 20:48
@jamcoder86 I'd start by deciding if you want to try and find an API for quotes or if you want to create your own with an Array
Tyler Moeller
@TylerMoeller
Nov 18 2016 20:52
@jdtdesigns Wow, that is a lot smoother. Thanks! I will try to integrate it later today.
CamperBot
@camperbot
Nov 18 2016 20:52
tylermoeller sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: tylermoeller already gave jdtdesigns points
Tyler Moeller
@TylerMoeller
Nov 18 2016 20:53
:( and will come back later to give you that brownie point you deserve lol
Michael Davis
@mhdavis
Nov 18 2016 20:56
anyone have a way for getting past the XMLHttpRequest cannot load problem when pulling from the wikipedia API?
I'm using chrome if that is useful info
Rafa C.
@rafolas
Nov 18 2016 21:19
@PeterHSteele Thanks, is a beginning :) I'm going to try!
CamperBot
@camperbot
Nov 18 2016 21:19
rafolas sends brownie points to @peterhsteele :sparkles: :thumbsup: :sparkles:
:cookie: 219 | @peterhsteele |http://www.freecodecamp.com/peterhsteele
Aaron Bell
@awb715
Nov 18 2016 21:23
@JLuboff @jdtdesigns you guys still here!? check out the updated more efficient code https://codepen.io/Aaron-w-Bell/full/dONXrX/
@mhdavis try using a ajax request
Michael Davis
@mhdavis
Nov 18 2016 21:25
@awb715 could you send an example of what you mean?
figured it out
Aaron Bell
@awb715
Nov 18 2016 21:27
ok
cool
austinmberg
@austinmberg
Nov 18 2016 21:29
<div class="container-fluid">
<nav class="navbar navbar-fixed-top navbar-dark bg-primary">


<a class="navbar-brand" href="#">About Me</a>
<a class="navbar-brand" href="#">Projects</a>
<a class="navbar-brand" href="#">Contact Me</a>

</nav>
</div>
How do I change navbar color from standard blue to another colro?
Spent a long time trying to find the answer, probably a simple solution
JD Tadlock
@jdtdesigns
Nov 18 2016 21:43
@awb715 Lookin good. I'd make the buttons smaller on small screens so they don't overlap. ;)
Aaron Bell
@awb715
Nov 18 2016 21:50
okay cool @jdtdesigns
Maksim Kulichenko
@makstheimba
Nov 18 2016 22:02
can somebody help me with styling in react?
return (
        <div style={styles.root}>
          <Markdown text={this.state.text} onChange={this.handleChange} style={styles.markdown}/>
        <Preview text={marked(this.state.text)} style={styles.preview}/>
      </div>
        )
I render elements like this and it all works fine except that styles on Markdown and Preview components wont apply
and style on div works
also I cant figure out how to apply external styles that I define in my style.css file. I've linked it in html and added className to components in react but it doesnot work
Tegh Singh
@teghtrishansingh
Nov 18 2016 22:08

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

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

oops
The link for my Linked in doesnt work
<p class="white para">Check me out on <a href=" https://www.linkedin.com/in/tegh-singh-768398a8">LinkedIn</p></a>
</div>
Jason Luboff
@JLuboff
Nov 18 2016 22:13
@jdtdesigns What do you think about moment.js? I ended up using that along with date.parse to get my times into miliseconds and then do the comparision at that point
JD Tadlock
@jdtdesigns
Nov 18 2016 22:20
@JLuboff Moment.js is great ;)
Jason Luboff
@JLuboff
Nov 18 2016 22:22
:+1:
Rafael Mateo
@rafaelmateo
Nov 18 2016 22:26
Help me please
CamperBot
@camperbot
Nov 18 2016 22:26
no wiki entry for: me please
Rafael Mateo
@rafaelmateo
Nov 18 2016 22:26
Screenshot (23).png
Peter Steele
@PeterHSteele
Nov 18 2016 22:42
Can someone tell me what's wrong with this $.ajax syntax?
$.ajax({
    url: "http://api.forismatic.com/api/1.0/",
    data:{
      format:"json"
    },
    method: "GET",
    dataType:"jsonp"
    success: function(json){
      console.log(json);
    }
  });
JD Tadlock
@jdtdesigns
Nov 18 2016 22:46
@PeterHSteele Post your codepen
Maksim Kulichenko
@makstheimba
Nov 18 2016 22:50
@PeterHSteele if you want jsonp you should use $.getJSON instead of $.ajax
Karen McCulloch
@kazzacarrot
Nov 18 2016 22:51
Hi guys, I'm really struggling with the Wikipedia viewer task. my codepen is here https://codepen.io/kazzacarrot/pen/WoGQEa?editors=0011
Maksim Kulichenko
@makstheimba
Nov 18 2016 22:55
@kazzacarrot you need a cuddle?
Karen McCulloch
@kazzacarrot
Nov 18 2016 22:56
@makstheimba At the moment, not really. I've written a lot of working AJAX functions today, so I have hope for this one.
But I get it. You found my website.
I actually did that page when I was doing a coursework all-nighter in the lab. None of my code would compile and I had hours until the deadline.
I'm not very good at keeping it up todate... :/
Maksim Kulichenko
@makstheimba
Nov 18 2016 22:58
@kazzacarrot why is the page refreshing on ajax request?
Karen McCulloch
@kazzacarrot
Nov 18 2016 22:58
@PeterHSteele I think you also need a "," after dataType:"jsonp"
@makstheimba Because it is really bloody broken.
And I don't know how and or why.
Maksim Kulichenko
@makstheimba
Nov 18 2016 22:59
@kazzacarrot you should fix this for starters
Karen McCulloch
@kazzacarrot
Nov 18 2016 22:59
I think the issues are related.
Maksim Kulichenko
@makstheimba
Nov 18 2016 23:00
<form onSubmit="lmwtfy()">
Karen McCulloch
@kazzacarrot
Nov 18 2016 23:00
My dev tools are pushing this error: "VM6340:1 Uncaught DOMException: Blocked a frame with origin "https://s.codepen.io" from accessing a cross-origin frame."
Maksim Kulichenko
@makstheimba
Nov 18 2016 23:00
@kazzacarrot you should not use return here
@kazzacarrot in onSubmit
Karen McCulloch
@kazzacarrot
Nov 18 2016 23:00
@makstheimba Are you sure?
I think I should actually change that to a button and remove the form.
Maksim Kulichenko
@makstheimba
Nov 18 2016 23:01
@kazzacarrot try it. Also inline js should be avoided, its a bad practice
Karen McCulloch
@kazzacarrot
Nov 18 2016 23:02
@makstheimba What do you mean by inline javascript?
Maksim Kulichenko
@makstheimba
Nov 18 2016 23:02
@kazzacarrot you can do that. You can just use textfield and a button to fire a request
@kazzacarrot javascript in html
Karen McCulloch
@kazzacarrot
Nov 18 2016 23:03
@makstheimba are you referring to the form action?
Maksim Kulichenko
@makstheimba
Nov 18 2016 23:04
yes
Peter Steele
@PeterHSteele
Nov 18 2016 23:04
@kazzacarrot thanks, you're right. It's still not working though. blergh
CamperBot
@camperbot
Nov 18 2016 23:04
peterhsteele sends brownie points to @kazzacarrot :sparkles: :thumbsup: :sparkles:
:cookie: 303 | @kazzacarrot |http://www.freecodecamp.com/kazzacarrot
Tyler Moeller
@TylerMoeller
Nov 18 2016 23:05
@kazzacarrot I would start with getting the API call correct before adding buttons and forms to your website. The Wikimedia API is one of the harder APIs to figure out.
Alexander Zachreson
@alectz
Nov 18 2016 23:05
Hi i am having trouble calling my json api for the Random Quote Machine challenge. here is my javascript, im not sure what is wrong.$(document).ready(function() {
$("#quotemaker").on("click", function() {
var html ="";
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonnp&lang=en", function(json) {
var quote = (json.quoteText);
html+="<h2>'"+quote+"'</h2>";
});
$("#quotebox").html(html);
});
});
Maksim Kulichenko
@makstheimba
Nov 18 2016 23:05
@alectz post a codepen
Tyler Moeller
@TylerMoeller
Nov 18 2016 23:06

@kazzacarrot In general, you can do this:

var url = the URL to the wikipedia search you want to perform;
$.getJSON(url).done(function(data) {
  $('body').append(data)
});

A lot of people use OpenSearch for their API call: https://www.mediawiki.org/wiki/API:Opensearch

Maksim Kulichenko
@makstheimba
Nov 18 2016 23:06
@alectz or at least format your code with ```
Alexander Zachreson
@alectz
Nov 18 2016 23:06
it has no styling yet, just bare bones
Karen McCulloch
@kazzacarrot
Nov 18 2016 23:06
@TylerMoeller Are you sure? I prefer to start with a dummy front end so I can 'see' it take shape.
Tyler Moeller
@TylerMoeller
Nov 18 2016 23:06
Up to you, really. Just my advice.
a.sanchez
@0100000101010011
Nov 18 2016 23:07
@PeterHSteele check out this codepen
Tyler Moeller
@TylerMoeller
Nov 18 2016 23:07
Most of the Wikipedia Project's UI will be dynamically created with JavaScript, based on the data you get back from the API
a.sanchez
@0100000101010011
Nov 18 2016 23:07
Peter Steele
@PeterHSteele
Nov 18 2016 23:08
thanks @0100000101010011 looking at it now
CamperBot
@camperbot
Nov 18 2016 23:08
peterhsteele sends brownie points to @0100000101010011 :sparkles: :thumbsup: :sparkles:
:cookie: 5 | @0100000101010011 |http://www.freecodecamp.com/0100000101010011
Maksim Kulichenko
@makstheimba
Nov 18 2016 23:09
@alectz in getjson you should pass an object with at least a url and success properties
Tyler Moeller
@TylerMoeller
Nov 18 2016 23:09
@alectz Try this URL instead, you had an extra 'n' in 'json' and need a callback so the API call is treated as JSONP:
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?", function(json) {
Maksim Kulichenko
@makstheimba
Nov 18 2016 23:11
@TylerMoeller you take away my pupils
Tyler Moeller
@TylerMoeller
Nov 18 2016 23:12
Thanks @jdtdesigns
CamperBot
@camperbot
Nov 18 2016 23:12
tylermoeller sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 767 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Alexander Zachreson
@alectz
Nov 18 2016 23:14
@makstheimba how do you pass success properties?
@TylerMoeller i tried your jsonp code, same result
Maksim Kulichenko
@makstheimba
Nov 18 2016 23:15
@alectz you can pass an object to getjson like this
$.getJSON({url: "http://google.com", success: somefunction(recieved_data)})
Tyler Moeller
@TylerMoeller
Nov 18 2016 23:15
@alectz Your pen is working for me with the new URL. Try console.log(json) to see the quote data you get back from the API
Maksim Kulichenko
@makstheimba
Nov 18 2016 23:16
@alectz also like tyler said you should add json=? to the end of your url to get jsonp
Alexander Zachreson
@alectz
Nov 18 2016 23:18
@TylerMoeller where would i write console.log(json) to get it to output to the console properly?
Karen McCulloch
@kazzacarrot
Nov 18 2016 23:18
@TylerMoeller Thanks for the json example :)
CamperBot
@camperbot
Nov 18 2016 23:18
:cookie: 946 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
kazzacarrot sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Tyler Moeller
@TylerMoeller
Nov 18 2016 23:20
@alectz Study the jsonp section of this page: http://api.jquery.com/jquery.getjson/
The code example shows you where to put the console.log()
Alexander Zachreson
@alectz
Nov 18 2016 23:31
@TylerMoeller so, it was working for you when you put the edited url in? Is it possible that my browser isn't working right or something?
Tyler Moeller
@TylerMoeller
Nov 18 2016 23:33
@alectz What I meant is I was getting data back from the API, your Javascript, as it is now, will not work for displaying the quote on the page.
Alexander Zachreson
@alectz
Nov 18 2016 23:34
@TylerMoeller ok, that makes more sense
@TylerMoeller it seems like there's just a lot of background knowledge i don't have when it comes to this and I'm not sure where to begin. each page I read just sends me back further until I have so many new terms dancing around in my head I don't know where I began
Tyler Moeller
@TylerMoeller
Nov 18 2016 23:36
It is a little overwhelming at first :/ but the core concepts you learned will eventually all come together and make more sense as you solve new problems
Your code is very close - you may want to review the concept of scope in JavaScript as a hint.
Alexander Zachreson
@alectz
Nov 18 2016 23:37
@TylerMoeller ok, I'll try that
@TylerMoeller YES! thanks man
CamperBot
@camperbot
Nov 18 2016 23:42
alectz sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 947 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
grantknaver
@grantknaver
Nov 18 2016 23:42
can anyone help me piece together how I can access this JSON data
Alexander Zachreson
@alectz
Nov 18 2016 23:42
@TylerMoeller a little styling and it'll be sweet
grantknaver
@grantknaver
Nov 18 2016 23:42
```
https://codepen.io/GrantKnaver/pen/Woobrm?editors=0010
Tyler Moeller
@TylerMoeller
Nov 18 2016 23:43
@alectz :)
Good job!
grantknaver
@grantknaver
Nov 18 2016 23:44
what am I doing wrong or what am I not doing wrong
any ideas
a.sanchez
@0100000101010011
Nov 18 2016 23:48
@grantknaver maybe i'm missing something, but doesn't look like you're making a request to get that data
grantknaver
@grantknaver
Nov 18 2016 23:49
I think I am missing just that
what does a request look like
and actually I am trying to check to make sure the data is being passed so I was console.log () it
a.sanchez
@0100000101010011
Nov 18 2016 23:52
@grantknaver looks like you're using javascript no jquery so you could make an ajax request using XMLHttpRequest
@grantknaver let me see if i can whip up an example for you
grantknaver
@grantknaver
Nov 18 2016 23:54
thanks sooo confused